Компьютерапия

Бутстрап - Таблицы

Категория: Bootstrap 3
Просмотров: 2098

Содержание:

Bootstrap обеспечивает чистый макет для построения таблиц. Некоторые элементы таблицы, поддерживаемые Bootstrap, - это:

Тег Описание
tableЭлемент упаковки для отображения данных в табличном формате
theadЭлемент контейнера для строк заголовка таблицы (tr) для маркировки столбцов таблицы.
tbodyКонтейнерный элемент для строк таблицы (tr) в теле таблицы.
trЭлемент контейнера для набора ячеек таблицы (td или th), который отображается в одной строке.
tdЯчейка таблицы по умолчанию.
thСпециальная ячейка таблицы для меток столбцов (или строк, в зависимости от области и размещения). Должен использоваться в td
captionОписание или краткое изложение таблицы.

Основная таблица

Если вам нужен приятный базовый стиль таблицы с небольшим заполнением и горизонтальными разделителями, добавьте базовый класс .table в любую таблицу, как показано в следующем примере -

<table class = "table">
   <caption>Basic Table Layout</caption>
  
   <thead>
      <tr>
         <th>Name</th>
         <th>City</th>
      </tr>
   </thead>
  
   <tbody>
      <tr>
         <td>Tanmay</td>
         <td>Bangalore</td>
      </tr>
     
      <tr>
         <td>Sachin</td>
         <td>Mumbai</td>
      </tr>
   </tbody>
           
</table>

Посмотреть результат

Дополнительные классы таблиц

Наряду с разметкой базовой таблицы и классом .table есть несколько дополнительных классов, которые можно использовать для создания разметки. В следующих разделах вы сможете увидеть все эти классы.

Полосатая таблица

Добавив класс .table-striped, вы получите полосы в строках в tbody, как показано в следующем примере -table class = "table table-striped"

   <caption>Striped Table Layout</caption>
  
   <thead>
      <tr>
         <th>Name</th>
         <th>City</th>
         <th>Pincode</th>
      </tr>
   </thead>
  
   <tbody>
      <tr>
         <td>Tanmay</td>
         <td>Bangalore</td>
         <td>560001</td>
      </tr>
     
      <tr>
         <td>Sachin</td>
         <td>Mumbai</td>
         <td>400003</td>
      </tr>
     
      <tr>
         <td>Uma</td>
         <td>Pune</td>
         <td>411027</td>
      </tr>
   </tbody>
  
</table>

Посмотреть результат

Граничная таблица

Добавляя класс table-bordered, вы получите границы вокруг каждого элемента и закругленные углы вокруг всей таблицы, как показано в следующем примере -

<table class = "table table-bordered">
   <caption>Bordered Table Layout</caption>
  
   <thead>
      <tr>
         <th>Name</th>
         <th>City</th>
         <th>Pincode</th>
      </tr>
   </thead>
  
   <tbody>
      <tr>
         <td>Tanmay</td>
         <td>Bangalore</td>
         <td>560001</td>
      </tr>
     
      <tr>
         <td>Sachin</td>
         <td>Mumbai</td>
         <td>400003</td>
      </tr>
     
      <tr>
         <td>Uma</td>
         <td>Pune</td>
         <td>411027</td>
      </tr>
   </tbody>
           
</table>

Посмотреть результат

Таблицы для наведения

Добавив класс .table-hover, светло-серый фон будет добавлен к строкам, в то время как курсор будет парить над ними, как показано в следующем примере -

<table class = "table table-hover">
   <caption>Hover Table Layout</caption>
  
   <thead>
      <tr>
         <th>Name</th>
         <th>City</th>
         <th>Pincode</th>
      </tr>
   </thead>
  
   <tbody>
      <tr>
         <td>Tanmay</td>
         <td>Bangalore</td>
         <td>560001</td>
      </tr>
     
      <tr>
         <td>Sachin</td>
         <td>Mumbai</td>
         <td>400003</td>
      </tr>
     
      <tr>
         <td>Uma</td>
         <td>Pune</td>
         <td>411027</td>
      </tr>
   </tbody>
  
</table>

Посмотреть результат

Сжатая таблица

Добавляя класс table-condensed, добавление строки сокращается наполовину, чтобы уплотнить таблицу, как показано в следующем примере. Это полезно, если вы хотите получить более плотную информацию.

<table class = "table table-condensed">
   <caption>Condensed Table Layout</caption>
   
   <thead>
      <tr>
         <th>Name</th>
         <th>City</th>
         <th>Pincode</th>
      </tr>
   </thead>
   
   <tbody>
      <tr>
         <td>Tanmay</td>
         <td>Bangalore</td>
         <td>560001</td>
      </tr>
      
      <tr>
         <td>Sachin</td>
         <td>Mumbai</td>
         <td>400003</td>
      </tr>
      
      <tr>
         <td>Uma</td>
         <td>Pune</td>
         <td>411027</td>
      </tr>
   </tbody>
   
</table>

Посмотреть результат

Контекстные классы

Контекстные классы, показанные в следующей таблице, позволят вам изменить цвет фона ваших строк таблицы или отдельных ячеек.

Класс Описание
.activeПрименяет цвет наведения к определенной строке или ячейке
.successУказывает на успешное или позитивное действие
.warningУказывает предупреждение, которое может потребовать внимания
.dangerУказывает на опасное или потенциально негативное действие

Эти классы могут применяться к tr, td или th.Например так - table class = "table"

   <caption>Contextual Table Layout</caption>
   
   <thead>
      <tr>
         <th>Product</th>
         <th>Payment Date</th>
         <th>Status</th>
      </tr>
   </thead>
   
   <tbody>
      <tr class = "active">
         <td>Product1</td>
         <td>23/11/2013</td>
         <td>Pending</td>
      </tr>
      
      <tr class = "success">
         <td>Product2</td>
         <td>10/11/2013</td>
         <td>Delivered</td>
      </tr>
      
      <tr class = "warning">
         <td>Product3</td>
         <td>20/10/2013</td>
         <td>In Call to confirm</td>
      </tr>
      
      <tr class = "danger">
         <td>Product4</td>
         <td>20/10/2013</td>
         <td>Declined</td>
      </tr>
   </tbody>
   
</table>

Посмотреть результат

Отзывчивые или адаптирующиеся таблицы

Обернув любой класс .table в .table-responsive, вы заставите таблицу прокручиваться горизонтально на небольших устройствах (до 768px). При просмотре на большом, чем 768 пикселей экране, вы не увидите различий в этих таблицах.

<div class = "table-responsive">
   <table class = "table">
      
      <caption>Responsive Table Layout</caption>
      
      <thead>
         <tr>
            <th>Product</th>
            <th>Payment Date</th>
            <th>Status</th>
         </tr>
      </thead>
      
      <tbody>
         <tr>
            <td>Product1</td>
            <td>23/11/2013</td>
            <td>Pending</td>
         </tr>
         
         <tr>
            <td>Product2</td>
            <td>10/11/2013</td>
            <td>Delivered</td>
         </tr>
         
         <tr>
            <td>Product3</td>
            <td>20/10/2013</td>
            <td>In Call to confirm</td>
         </tr>
         
         <tr>
            <td>Product4</td>
            <td>20/10/2013</td>
            <td>Declined</td>
         </tr>
      </tbody>
      
   </table>
</div>

Посмотреть результат




Понравилась статья? Поделитесь ею с друзьями и напишите отзыв в комментариях!

Новые статьи

Предыдущие статьи

We use cookies on our website. Some of them are essential for the operation of the site, while others help us to improve this site and the user experience (tracking cookies). You can decide for yourself whether you want to allow cookies or not. Please note that if you reject them, you may not be able to use all the functionalities of the site.

Ok