Картки Bootstrap забезпечують гнучкий і розширюваний контейнер вмісту з кількома варіантами та параметрами.
про
Картка — це гнучкий і розширюваний контейнер вмісту. Він містить параметри для верхніх і нижніх колонтитулів, різноманітний вміст, контекстні фонові кольори та потужні параметри відображення. Якщо ви знайомі з Bootstrap 3, картки замінюють наші старі панелі, колодязі та мініатюри. Подібні до цих компонентів функції доступні як класи-модифікатори для карток.
приклад
Картки створюються з якомога меншою розміткою та стилями, але все одно забезпечують масу контролю та налаштування. Створені за допомогою flexbox, вони пропонують легке вирівнювання та добре поєднуються з іншими компонентами Bootstrap. За замовчуванням у них немає margin, тому за потреби використовуйте утиліти створення інтервалів .
Нижче наведено приклад базової картки зі змішаним вмістом і фіксованою шириною. Картки не мають фіксованої початкової ширини, тому вони природним чином заповнять всю ширину свого батьківського елемента. Це легко налаштувати за допомогою наших різноманітних варіантів розміру .
Назва картки
Деякий короткий приклад тексту, який буде побудований на заголовку картки та становить основну частину вмісту картки.
Картки підтримують широкий спектр вмісту, включаючи зображення, текст, групи списків, посилання тощо. Нижче наведено приклади того, що підтримується.
Тіло
Будівельним блоком картки є .card-body. Використовуйте його щоразу, коли вам потрібна м’яка частина картки.
Це певний текст у тілі картки.
Заголовки, текст і посилання
Заголовки карток використовуються шляхом додавання .card-titleдо <h*>тегу. Таким же чином посилання додаються та розміщуються одне біля одного шляхом додавання .card-linkдо <a>тегу.
Субтитри використовуються шляхом додавання .card-subtitleдо <h*>тегу. Якщо елементи .card-titleта .card-subtitleрозміщено в .card-bodyелементі, заголовок картки та підзаголовок добре вирівнюються.
Назва картки
Підзаголовок картки
Деякий короткий приклад тексту, який буде побудований на заголовку картки та становить основну частину вмісту картки.
.card-img-topрозміщує зображення у верхній частині картки. За допомогою .card-text, текст можна додати до картки. Текст усередині .card-textтакож можна стилізувати за допомогою стандартних тегів HTML.
Деякий короткий приклад тексту, який буде побудований на заголовку картки та становить основну частину вмісту картки.
Список груп
Створюйте списки вмісту на картці за допомогою групи змивних списків.
Cras justo odio
Dapibus ac facilisis in
Вестибулум і ерос
Рекомендовані
Cras justo odio
Dapibus ac facilisis in
Вестибулум і ерос
Cras justo odio
Dapibus ac facilisis in
Вестибулум і ерос
Кухонна мийка
Змішайте та поєднуйте кілька типів вмісту, щоб створити потрібну картку, або додайте все туди. Нижче наведено стилі зображень, блоки, стилі тексту та групу списку — усі вони обернуті карткою фіксованої ширини.
Назва картки
Деякий короткий приклад тексту, який буде побудований на заголовку картки та становить основну частину вмісту картки.
Картки не припускають width, що вони починаються, тому вони матимуть 100% ширину, якщо не вказано інше. Ви можете змінити це за потреби за допомогою спеціального CSS, класів сітки, міксинів сітки Sass або утиліт.
Використання розмітки сітки
Використовуючи сітку, розкладіть картки по стовпцях і рядках за потреби.
Особливий режим титулу
З допоміжним текстом нижче як природною підказкою до додаткового вмісту.
Картки містять кілька варіантів роботи з зображеннями. Виберіть із додавання «заголовків зображень» на кінці картки, накладання зображень на вміст картки або просто вбудовування зображення в картку.
Зображення шапки
Подібно до верхніх і нижніх колонтитулів, картки можуть містити верхні та нижні «заголовки зображень» — зображення у верхній або нижній частині картки.
Назва картки
Це ширша картка з допоміжним текстом унизу як природним посиланням на додатковий вміст. Цей вміст трохи довший.
Востаннє оновлено 3 хвилини тому
Назва картки
Це ширша картка з допоміжним текстом унизу як природним посиланням на додатковий вміст. Цей вміст трохи довший.
Востаннє оновлено 3 хвилини тому
Накладання зображень
Перетворіть зображення на фон картки та накладіть текст картки. Залежно від зображення вам можуть знадобитися або не потрібні додаткові стилі чи утиліти.
Назва картки
Це ширша картка з допоміжним текстом унизу як природним посиланням на додатковий вміст. Цей вміст трохи довший.
Востаннє оновлено 3 хвилини тому
Зверніть увагу, що вміст не повинен перевищувати висоту зображення. Якщо вміст більший за зображення, вміст відображатиметься за межами зображення.
Горизонтальний
Використовуючи комбінацію сітки та службових класів, картки можна зробити горизонтальними, зручними для мобільних пристроїв і адаптованими. У наведеному нижче прикладі ми видаляємо жолоби сітки за допомогою класів .no-guttersі використовуємо .col-md-*, щоб зробити картку горизонтальною в точці mdрозриву. Залежно від вмісту картки можуть знадобитися додаткові налаштування.
Назва картки
Це ширша картка з допоміжним текстом унизу як природним посиланням на додатковий вміст. Цей вміст трохи довший.
Востаннє оновлено 3 хвилини тому
Стилі карток
Картки містять різні параметри для налаштування фону, рамок і кольору.
Деякий короткий приклад тексту, який буде побудований на заголовку картки та становить основну частину вмісту картки.
Заголовок
Назва вторинної картки
Деякий короткий приклад тексту, який буде побудований на заголовку картки та становить основну частину вмісту картки.
Заголовок
Назва картки успіху
Деякий короткий приклад тексту, який буде побудований на заголовку картки та становить основну частину вмісту картки.
Заголовок
Назва картки небезпеки
Деякий короткий приклад тексту, який буде побудований на заголовку картки та становить основну частину вмісту картки.
Заголовок
Назва картки попередження
Деякий короткий приклад тексту, який буде побудований на заголовку картки та становить основну частину вмісту картки.
Заголовок
Назва інформаційної картки
Деякий короткий приклад тексту, який буде побудований на заголовку картки та становить основну частину вмісту картки.
Заголовок
Світла назва картки
Деякий короткий приклад тексту, який буде побудований на заголовку картки та становить основну частину вмісту картки.
Заголовок
Назва темної картки
Деякий короткий приклад тексту, який буде побудований на заголовку картки та становить основну частину вмісту картки.
Передача значення допоміжним технологіям
Використання кольору для додання значення забезпечує лише візуальну індикацію, яка не буде передана користувачам допоміжних технологій, таких як програми зчитування з екрана. Переконайтеся, що інформація, позначена кольором, або очевидна з самого вмісту (наприклад, видимого тексту), або включена за допомогою альтернативних засобів, таких як додатковий текст, прихований разом із .sr-onlyкласом.
Кордон
Використовуйте утиліти кордону, щоб змінити лише border-colorкартку. Зауважте, що ви можете розмістити .text-{color}класи на батьківській .cardкартці або підмножині вмісту картки, як показано нижче.
Заголовок
Назва основної картки
Деякий короткий приклад тексту, який буде побудований на заголовку картки та становить основну частину вмісту картки.
Заголовок
Назва вторинної картки
Деякий короткий приклад тексту, який буде побудований на заголовку картки та становить основну частину вмісту картки.
Заголовок
Назва картки успіху
Деякий короткий приклад тексту, який буде побудований на заголовку картки та становить основну частину вмісту картки.
Заголовок
Назва картки небезпеки
Деякий короткий приклад тексту, який буде побудований на заголовку картки та становить основну частину вмісту картки.
Заголовок
Назва картки попередження
Деякий короткий приклад тексту, який буде побудований на заголовку картки та становить основну частину вмісту картки.
Заголовок
Назва інформаційної картки
Деякий короткий приклад тексту, який буде побудований на заголовку картки та становить основну частину вмісту картки.
Заголовок
Світла назва картки
Деякий короткий приклад тексту, який буде побудований на заголовку картки та становить основну частину вмісту картки.
Заголовок
Назва темної картки
Деякий короткий приклад тексту, який буде побудований на заголовку картки та становить основну частину вмісту картки.
Утиліти Mixins
Ви також можете змінити межі верхнього та нижнього колонтитулів картки за потреби та навіть видалити їх background-colorза допомогою .bg-transparent.
Заголовок
Назва картки успіху
Деякий короткий приклад тексту, який буде побудований на заголовку картки та становить основну частину вмісту картки.
Макет картки
На додаток до стилізації вмісту в картках, Bootstrap містить кілька варіантів розкладки серії карток. На даний момент ці параметри макета ще не адаптивні .
Групи карток
Використовуйте групи карток, щоб відобразити картки як один приєднаний елемент із стовпцями однакової ширини та висоти. Групи карток спочатку складаються в стопку та використовуються display: flex;для приєднання з однаковими розмірами, починаючи з smточки розриву.
Назва картки
Це ширша картка з допоміжним текстом унизу як природним посиланням на додатковий вміст. Цей вміст трохи довший.
Востаннє оновлено 3 хвилини тому
Назва картки
Ця картка має допоміжний текст нижче як природну підказку до додаткового вмісту.
Востаннє оновлено 3 хвилини тому
Назва картки
Це ширша картка з допоміжним текстом унизу як природним посиланням на додатковий вміст. Ця підказка має навіть довший вміст, ніж перша, яка показує дію рівної висоти.
Востаннє оновлено 3 хвилини тому
При використанні груп карток із нижніми колонтитулами їхній вміст автоматично вирівнюється.
Назва картки
Це ширша картка з допоміжним текстом унизу як природним посиланням на додатковий вміст. Цей вміст трохи довший.
Назва картки
Ця картка має допоміжний текст нижче як природну підказку до додаткового вмісту.
Назва картки
Це ширша картка з допоміжним текстом унизу як природним посиланням на додатковий вміст. Ця підказка має навіть довший вміст, ніж перша, яка показує дію рівної висоти.
Карткові колоди
Потрібен набір карток однакової ширини та висоти, які не прикріплені одна до одної? Використовуйте колоди карт.
Назва картки
Це довша картка з допоміжним текстом унизу як природним посиланням на додатковий вміст. Цей вміст трохи довший.
Востаннє оновлено 3 хвилини тому
Назва картки
Ця картка має допоміжний текст нижче як природну підказку до додаткового вмісту.
Востаннє оновлено 3 хвилини тому
Назва картки
Це ширша картка з допоміжним текстом унизу як природним посиланням на додатковий вміст. Ця підказка має навіть довший вміст, ніж перша, яка показує дію рівної висоти.
Востаннє оновлено 3 хвилини тому
Подібно до груп карток, нижні колонтитули карток у колодах автоматично вибудовуються.
Назва картки
Це ширша картка з допоміжним текстом унизу як природним посиланням на додатковий вміст. Цей вміст трохи довший.
Назва картки
Ця картка має допоміжний текст нижче як природну підказку до додаткового вмісту.
Назва картки
Це ширша картка з допоміжним текстом унизу як природним посиланням на додатковий вміст. Ця підказка має навіть довший вміст, ніж перша, яка показує дію рівної висоти.
Сіткові карти
Використовуйте систему сітки Bootstrap та її .row-colsкласи , щоб контролювати кількість стовпців сітки (обернутих навколо ваших карток) у рядку. Наприклад, .row-cols-1розкладіть картки в одному стовпці та .row-cols-md-2розділіть чотири картки на однакову ширину в кількох рядках, починаючи від середньої точки розриву вгору.
Назва картки
Це довша картка з допоміжним текстом унизу як природним посиланням на додатковий вміст. Цей вміст трохи довший.
Назва картки
Це довша картка з допоміжним текстом унизу як природним посиланням на додатковий вміст. Цей вміст трохи довший.
Назва картки
Це довша картка з допоміжним текстом унизу як природним посиланням на додатковий вміст.
Назва картки
Це довша картка з допоміжним текстом унизу як природним посиланням на додатковий вміст. Цей вміст трохи довший.
Змініть його на, .row-cols-3і ви побачите обгортку четвертої карти.
Назва картки
Це довша картка з допоміжним текстом унизу як природним посиланням на додатковий вміст. Цей вміст трохи довший.
Назва картки
Це довша картка з допоміжним текстом унизу як природним посиланням на додатковий вміст. Цей вміст трохи довший.
Назва картки
Це довша картка з допоміжним текстом унизу як природним посиланням на додатковий вміст.
Назва картки
Це довша картка з допоміжним текстом унизу як природним посиланням на додатковий вміст. Цей вміст трохи довший.
Коли вам потрібна однакова висота, додайте .h-100до карток. Якщо вам потрібні однакові висоти за замовчуванням, ви можете встановити $card-height: 100%в Sass.
Назва картки
Це довша картка з допоміжним текстом унизу як природним посиланням на додатковий вміст. Цей вміст трохи довший.
Назва картки
Це коротка картка.
Назва картки
Це довша картка з допоміжним текстом унизу як природним посиланням на додатковий вміст.
Назва картки
Це довша картка з допоміжним текстом унизу як природним посиланням на додатковий вміст. Цей вміст трохи довший.
Карткові колонки
Картки можна організовувати в стовпці, схожі на Masonry , лише за допомогою CSS, обернувши їх у .card-columns. Картки створено з columnвластивостями CSS замість flexbox для легшого вирівнювання. Картки розташовані зверху вниз і зліва направо.
Голови вгору! Ваш пробіг із стовпцями картки може відрізнятися. Щоб запобігти розриву карток по стовпцях, ми маємо налаштувати їх на те display: inline-block, що column-break-inside: avoidце ще не куленепробивне рішення.
Заголовок картки, який переноситься на новий рядок
Це довша картка з допоміжним текстом унизу як природним посиланням на додатковий вміст. Цей вміст трохи довший.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ціле число posuere erat a ante.
Назва картки
Ця картка має допоміжний текст нижче як природну підказку до додаткового вмісту.
Востаннє оновлено 3 хвилини тому
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ціле число posuere erat.
Назва картки
Ця картка має звичайний заголовок і короткий абзац тексту під ним.
Востаннє оновлено 3 хвилини тому
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ціле число posuere erat a ante.
Назва картки
Це ще одна картка з назвою та допоміжним текстом нижче. Ця картка має додатковий вміст, щоб зробити її трохи вищою загалом.
Востаннє оновлено 3 хвилини тому
Стовпці картки також можна розширити та налаштувати за допомогою додаткового коду. Нижче показано розширення .card-columnsкласу, що використовує той самий CSS, який ми використовуємо — CSS-стовпці — для створення набору адаптивних рівнів для зміни кількості стовпців.