Картка — це контейнер із полегшеним стилем, в який ви можете помістити практично будь-який вміст. Для карток доступно безліч варіантів стилів, таких як вирівнювання, відступи, кольори, заголовки та багато іншого.
Базова картка
Щоб створити базову картку, застосуйте класи .card та .card-body до елемента, який визначає зовнішній контейнер картки. Також додайте .card-title до будь-яких елементів заголовка та .card-text до текстових елементів.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"> <div class="card card-body"> <h4 class="card-title">Поліроль для взуття</h4> <p class="card-text">Поліроль для взуття — це воскова паста, крем або рідина, що використовується для полірування, надання блиску та водонепроникності шкіряним туфлям або черевикам. Поліроль продовжує термін служби взуття, а також відновлює, зберігає та покращує його зовнішній вигляд.</p> <a href="#" class="btn btn-primary">Далі</a> </div>
Шапка та підвал
Ви можете додати шапку та підвал, вставивши <div> з .card-header або .card-footer.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"> <div class="card" style="max-width: 20rem;"> <div class="card-header">Від спонсора</div> <div class="card-body"> <h4 class="card-title">Уггі</h4> <p class="card-text">Кращі уггі на планеті. Безкоштовна доставка та цілодобове обслуговування клієнтів.</p> </div> <div class="card-footer">Uuuuggghhh.com</div> </div>
Тут я також перемістив .card-body в новий <div> ; всередині картки і зробив це, щоб заголовок виявився урівень з кордоном (у .card-body є відступ, який мені не потрібен).
Заголовки HTML
Ви також можете застосувати клас .card-header до будь-якого елемента заголовка HTML (тобто до елементів <h1>-<h6>).
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"> <div class="card" style="max-width: 20rem;"> <h3 class="card-header">Холодні ноги?</h3> <div class="card-body"> <h4 class="card-title">Уггі</h4> <p class="card-text">Кращі уггі на планеті. Безкоштовна доставка та цілодобове обслуговування клієнтів.</p> </div> <div class="card-footer">Uuuuggghhh.com</div> </div>
Навігація в заголовку
Ви також можете додати до картки навігаційні вкладки або пігулки.
Вкладки
Додайте клас .card-header-tabs до елемента <ul>.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"> <div class="card" style="max-width: 20rem;"> <div class="card-header"> <ul class="nav nav-pills card-header-pills"> <li class="nav-item"> <a class="nav-link active" href="#">Уггі</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Мокасини</a> </li> <li class="nav-item"> <a class="nav-link disabled" href="#">Сандалії</a> </li> </ul> </div> <div class="card-body"> <h4 class="card-title">Уггі</h4> <p class="card-text">Кращі уггі на планеті. Безкоштовна доставка та цілодобове обслуговування клієнтів.</p> </div> <div class="card-footer">Uuuuggghhh.com</div> </div>
Пігулки
Додайте клас .card-header-pills до елемента <ul>.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"> <div class="card" style="max-width: 20rem;"> <div class="card-header"> <ul class="nav nav-pills card-header-pills"> <li class="nav-item"> <a class="nav-link active" href="#">Уггі</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Мокасини</a> </li> <li class="nav-item"> <a class="nav-link disabled" href="#">Сандалії</a> </li> </ul> </div> <div class="card-body"> <h4 class="card-title">Уггі</h4> <p class="card-text">Кращі уггі на планеті. Безкоштовна доставка та цілодобове обслуговування клієнтів.</p> </div> <div class="card-footer">Uuuuggghhh.com</div> </div>
Вміст урівень (прибираємо padding)
За умовчанням клас .card-body містить padding, який забезпечує гарний естетично приємний простір між вмістом та кордоном картки. У деяких випадках ви можете видалити цей padding і вирівняти вміст урівень з краями картки.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"> <div class="card" style="max-width: 202px;"> <div class="card-body"> <h4 class="card-title">Сонце йде</h4> <h6 class="card-subtitle text-muted">Сонце зникає!</h6> </div> <img src="/example/image/12s.jpg" alt="Фото заходу сонця"> <div class="card-body"> <p class="card-text">Сонце зникло за горизонтом. Експерти стверджують, що воно може зникнути назавжди!</p> </div> </div>
Щоб створити вміст урівень, не поміщайте його в .card-body (оскільки він містить padding). Натомість заберіть .card-body у зовнішнього <div> і вкладіть його всередину (у свій власний <div>). Тепер ви можете помістити вміст за межами .card-body (але все ще всередині .card). Це ефективно видаляє padding, дозволяючи вмісту шикуватися впритул до країв картки. При необхідності у вас може бути кілька елементів .card-body.
Зверніть увагу, що при використанні вмісту з фіксованою шириною (наприклад, зображень) може знадобитися вказати ширину картки, що відповідає ширині вмісту.
Верх і низ
Вміст, такий як зображення, може розташовуватися врівень з верхньою частиною картки (щоб верхні кути зображення співпадали зі скругленими кутами картки). Для цього застосуйте елемент <img> клас .card-img-top або .card-img-bottom.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"> <div class="card" style="max-width: 202px;"> <!--Зображення--> <img class="card-img-top" src="/example/image/12s.jpg" alt="Фото заходу сонця"> <!--Текст--> <div class="card-body"> <p class="card-text">Поки це тривало — було добре.</p> </div> </div>
Група списків
Ви можете додати групи списків до карток. Використовуйте клас .list-group-flush, щоб помістити групи за межами картки.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"> <div class="card" style="max-width: 20rem;"> <!--Заголовок картки--> <div class="card-header">Сонце йде</div> <!--Картка--> <div class="card-body"> <p class="card-text">Думки експертів розділилися. Ось що на їхню думку відбудеться далі.</p> </div> <!--Група списків--> <ul class="list-group list-group-flush"> <li class="list-group-item">Сонце повернеться</li> <li class="list-group-item">Сонце не повернеться</li> <li class="list-group-item">Вона породить ще тисячі сонців</li> <li class="list-group-item">На добраніч!</li> </ul> </div>
Посилання
Додайте клас .card-link до елемента <a> для відображення посилань усередині карток.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"> <div class="card" style="max-width: 20rem;"> <div class="card-body"> <h4 class="card-title">Сонце йде</h4> <p class="card-text">Ось топ ресурсів про все, що пов'язано з Сонцем.</p> <!--Посилання--> <a href="#" class="card-link">Сонце йде</a> <a href="#" class="card-link">Поки що немає</a> </div> </div>
Вирівнювання тексту
Ви можете використовувати будь-який із класів вирівнювання тексту Bootstrap для вирівнювання тексту всередині картки. Це .text-left, .text-right, .text-center, .text-justify та .text-nowrap.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"> <div class="card text-center" style="max-width: 202px;"> <!--Заголовок--> <div class="card-body"> <h4 class="card-title">Сонце йде</h4> <h6 class="card-subtitle text-muted">Сонце зникає!</h6> </div> <!--Зображення--> <img src="/example/image/12s.jpg" alt="Фото заходу сонця"> <!--Текст--> <div class="card-body"> <p class="card-text">Сонце зникло за горизонтом. Експерти стверджують, що воно може зникнути назавжди!</p> <a href="#" class="btn btn-primary">Вся доповідь</a> </div> </div>
Контекстні кольори
Ви можете використовувати текстові та фонові утиліти Bootstrap для зміни кольору картки.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"> <div class="card text-white bg-primary" style="max-width: 20rem;"> <div class="card-body"> <h4 class="card-title">Сонце йде</h4> <p class="card-text">Ось топ ресурсів про все, що пов'язано з Сонцем.</p> <!--Посилання--> <a href="#" class="card-link">Сонце йде</a> <a href="#" class="card-link">Поки що немає</a> </div> </div>
Колір кордону
Ви також можете використовувати утиліти кордонів Bootstrap.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"> <div class="card text-primary border-primary" style="max-width: 20rem;"> <div class="card-body"> <h4 class="card-title">Сонце йде</h4> <p class="card-text">Ось топ ресурсів про все, що пов'язано з Сонцем.</p> <!--Посилання--> <a href="#" class="card-link">Сонце йде</a> <a href="#" class="card-link">Поки що немає</a> </div> </div>
Накладення тексту
Ви можете застосувати до картки зображення, поверх якого з'явиться текст. Для цього додайте клас .card-img-overlay до текстового вмісту.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"> <div class="card card-inverse text-center" style="max-width: 202px;"> <!--Зображення--> <img class="card-img-top" src="/example/image/12s.jpg" alt="Фото заходу сонця"> <!--Накладення тексту--> <div class="card-img-overlay"> <h4 class="card-title">Що далі?</h4> <p class="card-text">Це кінець?</p> </div> <div class="card-body">На наступному тижні дізнаємося про це!</div> </div>
Ширина картки
За замовчуванням картки заповнюють весь горизонтальний простір. Ви можете змінити ширину за допомогою кількох методів.
CSS
Ширину можна встановити явно за допомогою CSS. Наприклад, можна використовувати такі властивості, як width або max-width. Деякі з наведених вище прикладів використовують CSS для обмеження ширини карток.
Сітка
Як і з будь-яким іншим вмістом, ви можете помістити картки всередину сітки Bootstrap.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"> <div class="container-fluid"> <div class="row"> <div class="col-sm-6"> <div class="card"> <div class="card-body"> <h4 class="card-title">Сонце йде</h4> <p class="card-text">Ось топ ресурсів про все, що пов'язано з Сонцем.</p> <a href="#" class="card-link">Сонце йде</a> <a href="#" class="card-link">Поки що немає</a> </div> </div> </div> <div class="col-sm-6"> <div class="card"> <div class="card-body"> <h4 class="card-title">Сонце встає</h4> <p class="card-text">Схоже, Сонце повернулося</p> <a href="#" class="btn btn-primary">Завантажити</a> </div> </div> </div> </div> </div>
Група карток
Група карток дозволяє представити кілька карток у вигляді одного пов'язаного елемента з картками однакової ширини та висоти. Для цього вкладіть усі картки в елемент .card-group.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"> <div class="card-group"> <!--Картка 1--> <div class="card"> <div class="card-header">Сонце йде</div> <div class="card-body"> <p class="card-text">Ось топ ресурсів про все, що пов'язано з Сонцем.</p> <a href="#" class="card-link">Сонце йде</a> <a href="#" class="card-link">Поки що немає</a> </div> </div> <!--Картка 2--> <div class="card"> <div class="card-header">Сонце встає</div> <div class="card-body"> <p class="card-text">Схоже, Сонце повернулося. Ось <a href="#" class="card-link">чому</a>.</p> </div> </div> </div>
Картковий стіл
Картковий стіл схожий на групу карток, за винятком того, що картки на столі не пов'язані одна з одною. Для цього вкладіть усі картки в елемент .card-deck, який у свою чергу вкладено в .card-deck-wrapper.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"> <div class="card-deck-wrapper"> <div class="card-deck"> <!--Картка 1--> <div class="card"> <div class="card-header">Сонце йде</div> <div class="card-body"> <p class="card-text">Ось топ ресурсів про все, що пов'язано з Сонцем.</p> <a href="#" class="card-link">Сонце йде</a> <a href="#" class="card-link">Поки що немає</a> </div> </div> <!--Картка 2--> <div class="card"> <div class="card-header">Сонце встає</div> <div class="card-body"> <p class="card-text">Схоже, Сонце повернулося. Ось <a href="#" class="card-link">чому</a>.</p> </div> </div> </div> </div>
Колонки карток
Bootstrap дозволяє відобразити кілька карток усередині кожної колонки, причому кожна картка розташовується нижче за іншу. Для цього вкладіть усі картки в елемент .card-columns.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"> <div class="card-columns"> <!--Картка 1--> <div class="card"> <div class="card-header">Картка 1</div> <div class="card-body"> <p class="card-text">Текст цієї картки.</p> </div> </div> <!--Картка 2--> <div class="card"> <div class="card-body"> <h4 class="card-title">Картка 2</h4> <p class="card-text">Текст цієї картки.</p> </div> </div> <!--Картка 3--> <div class="card"> <div class="card-header">Картка 3</div> <div class="card-body"> <p class="card-text">Текст цієї картки. Here's <a href="#" class="card-link">why</a>.</p> </div> <div class="card-footer">Подвал</div> </div> <!--Картка 4--> <div class="card"> <div class="card-header">Картка 4</div> <div class="card-body"> <p class="card-text">Текст цієї картки.</p> </div> <div class="card-footer">Подвал</div> </div> <!--Картка 5--> <div class="card"> <div class="card-body"> <h4 class="card-title">Картка 5</h4> <p class="card-text">Текст цієї картки.</p> </div> </div> <!--Картка 6--> <div class="card"> <div class="card-header">Картка 6</div> <div class="card-body"> <p class="card-text">Текст цієї картки. Ось <a href="#" class="card-link">чому</a>.</p> </div> </div> <!--Картка 7--> <div class="card"> <div class="card-header">Картка 7</div> <div class="card-body"> <p class="card-text">Текст цієї картки. Ось <a href="#" class="card-link">чому</a>.</p> </div> <div class="card-footer">Подвал</div> </div> <!--Картка 8--> <div class="card"> <div class="card-body"> <h4 class="card-title">Картка 8</h4> <p class="card-text">Текст цієї картки.</p> </div> </div> </div>
Нове в Bootstrap 4
Картки є новими в Bootstrap 4.Вони замінюють функціональність, яка раніше надавалася панелями та мініатюрами .