Продовження серії уроків з найпопулярнішого html/css фреймворку Bootstrap. Про те, що таке Bootstrap, і як його правильно підключити, можна дізнатися з попередніх уроків. Сьогодні мова піде про таблиці.
Якщо ви не знаєте, що таке Bootstrap, рекомендую вам почати з першого уроку: що таке Bootstrap.
У бутстрапа є можливість додавати оформлення до будь-яких таблиць. Для того, щоб створена вами таблиця була оформлена в стилі Bootstrap, їй потрібно призначити клас table:
<table class="table">
За замовчуванням Bootstrap додає таблицям такий стиль:
- невеликі внутрішні відступи всередині блоків
- горизонтальні сірі розділові кордону між рядками
Таблиця в стандартному оформленні буде виглядати так:
Ім’я | Прізвище | Пошта |
---|---|---|
Іван | Миколайчук | [email protected] |
Марія | Остапчук | [email protected] |
Юлія | Петренко | [email protected] |
В результаті код таблиці буде таким:
<table class="table"> <thead> <tr> <th>Ім'я</th> <th>Прізвище</th> <th>Пошта</th> </tr> </thead> <tbody> <tr> <td>Іван</td> <td>Миколайчук</td> <td>[email protected]</td> </tr> <tr> <td>Марія</td> <td>Остапчук</td> <td>[email protected]</td> </tr> <tr> <td>Юлія</td> <td>Петренко</td> <td>[email protected]</td> </tr> </tbody> </table>
Як бачите, ніяких додаткових маніпуляцій від вас не потрібно. Якщо клас таблиці не призначати, стилі Bootstrap їй призначені не будуть.
Чергування фону в рядках
Клас .table-striped
, призначений таблиці, додасть сірий фон її непарним рядкам:
<table class="table table-striped">
Результат:
Имя | Прізвище | Пошта |
---|---|---|
Іван | Миколайчук | [email protected] |
Марія | Остапчук | [email protected] |
Юлія | Петренко | [email protected] |
Вертикальні і горизонтальні межі в блоках
Клас .table-bordered
додає горизонтальні і вертикальні кордону до всіх блоків вашої таблиці:
<table class="table table-bordered">
Имя | Прізвище | Пошта |
---|---|---|
Іван | Миколайчук | [email protected] |
Марія | Остапчук | [email protected] |
Юлия | Петренко | [email protected] |
До речі, у цього уроку є відеоверсія: відеоурок №3: таблиці в Bootstrap.
Підсвічування блоків при наведенні
Клас .table-hover
, призначений таблиці, додасть сірий фон рядках таблиці при наведенні курсору миші.
<table class="table table-hover">
Имя | Прізвище | Пошта |
---|---|---|
Іван | Миколайчук | [email protected] |
Марія | Остапчук | [email protected] |
Юлія | Петренко | [email protected] |
Компактні відступи
За допомоги класу .table-condensed
ви можете зменшити внутрішні відступи для елементів таблиці, щоб вона виглядала більш компактно. Це зручно для великих таблиць.
<table class="table table-condensed">
Имя | Прізвище | Пошта |
---|---|---|
Іван | Миколайчук | [email protected] |
Марія | Остапчук | [email protected] |
Юлія | Петренко | [email protected] |
Контекстні фони блоків
Классы контекста можно применять, чтобы добавить разный цвет фона строкам (<tr>
) або блокам (<td>
) вашої таблиці:
Имя | Прізвище | Пошта |
---|---|---|
Іван | Миколайчук | [email protected] |
Марія | Остапчук | [email protected] |
Юлія | Петренко | [email protected] |
Ви можете використовувати п’ять стандартних класів для оформлення фону:
Клас | Опис |
---|---|
.active |
Додає клас з сірим фоном, який використовується при наведенні на клітинку або рядок |
.success |
Використовується для повідомлення про успіх |
.info |
Нейтральне інформаційне повідомлення |
.warning |
Попередження, яке потребує уваги |
.danger |
Використовується для повідомлень про помилку, небезпеку або яксь негативну дію |
Responsive (чуйні) таблиці
Клас .table-responsive робить таблицю сприйнятливою до розмірів екрану, на якому відображається сторінка. На невеликих пристроях (до 769 пікселів по ширині) таблиця буде відображатися з горизонтальним скролл, якщо не влазить в екран повністю. При відображенні на будь-якому екрані ширше 768 пікселів таблиця буде відображатися як зазвичай.
<div class="table-responsive"> <table class="table"> ... </table> </div>
Зверніть увагу: клас потрібно призначити не самій таблиці, а батьківському елементу, в якому вона буде перебувати.
Про те, які ще є компоненти в Bootstrap, ви можете дізнатися з урока №2: з чого він складається і як його налаштувати.
а как сразу два стиля применить таблице?
чтоб и table table-hover было и table responsive одновременно
@T7, сколько угдоно классов можно указывать через пробел:
table class="table table-hover table"
Извините еще разок, отвлекаю.Не пойму теперь как совместить ячейки с div ами, аля rowspan=2. Мне нужно соместить “ячейка 1” вот код:
https://www.dropbox.com/s/3ce3jaxgqenkzpj/index.html?dl=0
Спасибо
Здравствуйте, у меня такой вопрос: Можно ли bs таблицу разобрать по для мобильников. Т.е. если разрешение меньше 768, нужно избежать горизонтальной прокрутки. И соответственно можно ли все выстроить в один столбец.
Если технически вам важно иметь таблицу, то нет. Используйте сетку (col-sm-*) для таких целей.