Учебники

Bootstrap — Столы

Октябрь 26, 2018

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

Тег Описание
<Таблица> Элемент обтекания для отображения данных в табличном формате
<THEAD> Элемент контейнера для строк заголовка таблицы (<tr>) для маркировки столбцов таблицы.
<TBODY> Контейнерный элемент для строк таблицы (<tr>) в теле таблицы.
<TR> Элемент контейнера для набора ячеек таблицы (<td> или <th>), который отображается в одной строке.
<TD> Ячейка таблицы по умолчанию.
<Й> Специальная ячейка таблицы для меток столбца (или строки, в зависимости от области и расположения). Должен использоваться внутри <thead>
<Подпись> Описание или краткое содержание таблицы.

Базовая таблица

Если вам нужен хороший, базовый стиль таблицы с небольшими отступами и горизонтальными разделителями, добавьте базовый класс .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-borded , вы получите границы вокруг каждого элемента и закругленные углы вокруг всей таблицы, как показано в следующем примере — 

<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-compact , заполнение строк сокращается пополам, чтобы сжать таблицу. как видно в следующем примере. Это полезно, если вам нужна более плотная информация. 

<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>

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

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

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

Эти классы могут применяться к <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-response , вы заставите таблицу прокручиваться по горизонтали до небольших устройств (до 768 пикселей). При просмотре на экране размером более 768 пикселей вы не увидите никакой разницы в этих таблицах.

40
Share: