Чем страсть сильнее, тем печальней бывает у нее конец (В. Шекспир).

Bootstrap – Таблицы

FavoriteLoadingДобавить в избранное
1 Звезда2 Звезды3 Звезды4 Звезды5 Звезд (2 оценок, среднее: 5,00 из 5)
Загрузка...
17 мая 2017
Bootstrap - Таблицы
Bootstrap обеспечивает чистый макет для построения таблиц. Некоторые из элементов таблицы поддерживаемых Bootstrap, являются:

 

 

 

ТегОписание
<table>Обертывание элемента для отображения данных в табличном формате
<thead>Элемент контейнера для заголовка таблицы строк, с (<tr>) для заголовка таблицы столбцов.
<tbody>Элемент контейнера для строк таблицы (<tr>) в теле таблицы.
<tr>Элемент контейнера для набора ячеек таблицы (<td> или <th>), которые появляется на одной строке.
<td>По умолчанию ячейки таблицы.
<th>Специальная ячейка таблицы для столбца (или строки, в зависимости от объема и размещения) заголовков. Должен быть использован в пределах <thead>
<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>

 

Hover в таблице

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

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

 

Bootstrap - Таблицы

Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.

Просмотров: 133

Если статья понравилась, то поделитесь ей в социальных сетях:

Добавить комментарий

Войти с помощью: 

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Сообщить об опечатке

Текст, который будет отправлен нашим редакторам:

Заполните форму и наш менеджер перезвонит Вам в самое ближайшее время!

badge
Обратный звонок 1
Отправить
galka

Спасибо! Ваша заявка принята

close
galka

Спасибо! Ваша заявка принята

close