Від автора: я вітаю вас. У минулих статтях ми розглядали, як з допомогою фреймворку зробити горизонтальне і вертикальне меню. Сьогоднішня ж стаття буде присвячена тому, як робити з допомогою bootstrap таблиці.
Про таблиці в bootstrap говорити особливо нічого. Тут є кілька класів для оформлення, а також можливість зробити таблицю повністю адаптивної. Зараз все це розглянемо. Робіть таку ж таблицю, яку робите зазвичай: за допомогою тегів table, tr і td. Наприклад:
Клітинка 1 | Осередок 2 | Осередок 3 |
Клітинка 1 | Осередок 2 | Осередок 3 |
Клітинка 1 | Осередок 2 | Осередок 3 |
За замовчуванням без стилів бутстрап виглядає вона зовсім бідно:
Але варто тільки додати тегу table клас table (банально, чи не так?) і все стає на свої місця:
Таблиця за замовчуванням буде стискатися до тих пір, поки це можливо. Якщо ж вміст комірок просто перестане поміщатися на сторінці, утворюється горизонтальна прокрутка. Щоб прибрати її, як раз і використовують клас table-чуйний, але він задається не таблиці, а блоку, який виступає для неї контейнером.
Що робить цей клас? По-перше, при ньому не буде відбуватися з’їжджання тексту у вічках. По-друге, навіть якщо сама таблиця не поміститься по ширині, з’явиться горизонтальна прокрутка, але не для вікна в цілому, а тільки в межах самої таблиці.
Фарбування рядів клітинок
Використовуйте класи active, success, info, warning і danger для застосування фонового кольору до цілих рядів або окремим осередкам. Приклад:
Клітинка 1 | Осередок 2 | Осередок 3 |
Клітинка 1 | Осередок 2 | Осередок 3 |
Клітинка 1 | Осередок 2 | Осередок 3 |
Загалом, ми розглянули загальні моменти роботи з таблицями, які є в Bootstrap за замовчуванням. Як бачите, нічого складного немає.