103 lines
3.6 KiB
Markdown
103 lines
3.6 KiB
Markdown
---
|
||
title: Tables
|
||
localeTitle: таблицы
|
||
---
|
||
## \## Таблицы
|
||
|
||
#### Основная таблица
|
||
|
||
Чтобы получить базовый пример стилизации, добавьте базовый класс `.table` в любой элемент `<table>` .
|
||
|
||
**пример**
|
||
```
|
||
<table class="table">
|
||
...
|
||
</table>
|
||
```
|
||
|
||
![Основная таблица](https://github.com/TroyB12/Pictures/blob/master/Basic%20Table.PNG)
|
||
|
||
* * *
|
||
|
||
#### Полосатая полоса
|
||
|
||
Для достижения эффекта полосатого ряда (зебра-полосатый) в таблицах используйте `.table-striped` в дополнение к `.table` для любого элемента `<table>` . Полосатые таблицы стилизованы с помощью селектора CSS `:nth-child` , который недоступен в Internet Explorer 8.
|
||
```
|
||
<table class="table table-striped">
|
||
...
|
||
</table>
|
||
```
|
||
|
||
![Полосатый стол](https://github.com/TroyB12/Pictures/blob/master/Table%20Striped.PNG)
|
||
|
||
* * *
|
||
|
||
#### Таблица Bordered
|
||
|
||
Для достижения `.table-bordered` таблицы используйте `.table-bordered` в дополнение к `.table` для любого элемента `<table>` .
|
||
```
|
||
<table class="table table-bordered">
|
||
...
|
||
</table>
|
||
```
|
||
|
||
![Граничная таблица](https://github.com/TroyB12/Pictures/blob/master/Table%20Bordered.PNG)
|
||
|
||
* * *
|
||
|
||
#### Table Hover
|
||
|
||
Чтобы добиться эффекта наведения на таблицы, используйте `.table-bordered` в дополнение к `.table` для любого элемента `<table>` .
|
||
```
|
||
<table class="table table-hover">
|
||
...
|
||
</table>
|
||
```
|
||
|
||
![Стол для наведения](https://github.com/TroyB12/Pictures/blob/master/Table%20Hover.PNG)
|
||
|
||
* * *
|
||
|
||
#### Таблица Сжатая
|
||
|
||
Для того, чтобы использовать таблицу с уплотненным столом, можно использовать для `.table-condensed` в дополнение к `.table` на любом элементе `<table>` .
|
||
```
|
||
<table class="table table-condensed">
|
||
...
|
||
</table>
|
||
```
|
||
|
||
![Сжатый стол](https://github.com/TroyB12/Pictures/blob/master/Table%20Condensed.PNG)
|
||
|
||
* * *
|
||
|
||
#### Таблица
|
||
|
||
Чтобы получить отзывчивую таблицу, `.table` любую таблицу `.table-responsive` элемент с `.table` таблицы.
|
||
|
||
...
|
||
|
||
![Отзывчивая таблица](https://github.com/TroyB12/Pictures/blob/master/Table%20Responsive.PNG)
|
||
|
||
* * *
|
||
|
||
Разработчики могут изменять стиль каждой отдельной строки и / или ячейки с помощью **контекстуальных классов** .
|
||
|
||
* `.active` - Применяет цвет наведения к определенной строке или ячейке
|
||
|
||
* `.success` - указывает на успешное или позитивное действие
|
||
|
||
* `.info` - указывает нейтральное информационное изменение или действие
|
||
|
||
* `.warning` - указывает предупреждение, которое может потребовать внимания.
|
||
|
||
* `.danger` - указывает на опасное или потенциально негативное действие
|
||
|
||
... ... ... ... ...
|
||
|
||
... ... ... ... ...
|
||
|
||
|
||
![Таблица контекстного класса](https://github.com/TroyB12/Pictures/blob/master/Table%20Contextual%20Classes.PNG)
|
||
|
||
* * * |