У Bootstrap є елемент, що називається «панель» (Bootstrap card), це звичайний блок з текстом із бордюром та відступами для зручного виділення цього тексту поруч з іншими елементами:
Щоб створити текстову панель, додайте потрібного елементу клас .card
, а внутрішньому блоку клас .card-body
.
<div class="card card-default"> <div class="card-body">Текст</div> </div>
Клас .card-default
використовується для стилізації панелі. Крім нього є ще кілька класів для інших колірних варіантів оформлення. Дивіться приклади.
Заголовок панелі
Клас .card-header
використовується, щоб додати заголовок до вашої панелі:
<div class="card card-default"> <div class="card-header">Заголовок</div> <div class="card-body">Текст</div> </div>
Підвал панелі
Підвал або footer створюється за допомогою класу .card-footer
й служить для оформлення блоку під контентом панелі:
<div class="card card-default"> <div class="card-body">Текст</div> <div class="card-footer">Підвал</div> </div>
Групування панелей
Кілька панелей можуть бути об’єднані в одну за допомогою класу .card-group
, який потрібно присвоїти їх батьківського елементу.
Використання угруповання зменшує відступи знизу для кожної з панелей:
<div class="card-group"> <div class="card card-default"> <div class="card-header">Заголовок</div> <div class="card-body">Текст</div> </div> <div class="card card-default"> <div class="card-header">Заголовок</div> <div class="card-body">Текст</div> </div> <div class="card card-default"> <div class="card-header">Заголовок</div> <div class="card-body">Текст</div> </div> </div>
Контекстні класи
Щоб змінювати стандартний колір текстової панелі, ви можете використовувати класи .card-default
, .card-primary
, .bg-success
, .bg-info
,.card-warning
і .bg-danger
:
<div class="card-group text-white"> <div class="card bg-secondary"> <div class="card-header">Панель з класом bg-secondary</div> <div class="card-body">Текст</div> </div> <div class="card bg-primary text-white"> <div class="card-header">Панель з класом bg-primary</div> <div class="card-body">Текст</div> </div> <div class="card bg-success"> <div class="card-header">Панель з класом bg-success</div> <div class="card-body">Текст</div> </div> <div class="card bg-info text-white"> <div class="card-header">Панель з класом bg-info</div> <div class="card-body">Текст</div> </div> <div class="card bg-warning"> <div class="card-header">Панель з класом bg-warning</div> <div class="card-body">Текст</div> </div> <div class="card bg-danger"> <div class="card-header">Панель з класом bg-danger</div> <div class="card-body">Текст</div> </div> </div>
Отличный урок! На русском языке практически нет доступной и полезной информации по BS. Спасибо!
Отличный урок! Спасибо. Как-то я удачно попал на Ваш блог, буквально пару дней назад думал немного с Bootstrap разобраться. Пошёл читать первый урок;)