TechBlogSD - Все для WordPress і WEB розробки
WEB і WordPress інструкції, новини, огляди тем та плагінів

Як створити картки Bootstrap 5?

2

Bootstrap 4 представив новий компонент під назвою картки. Компоненти, такі як панелі, ескізи та колодязі в Bootstrap 3, були видалені та створені як єдиний компонент під назвою картки у Bootstrap 4. Картки – це зручні для мобільних пристроїв елементи, які стали найбільш популярними з використанням у Google Material Design. У цьому підручнику давайте обговоримо, як створювати різні картки в режимі реального часу за допомогою останньої версії Bootstrap 5.

Ви можете завантажити приклади, використані в цьому уроці, тут.

Підручник з Bootstrap 5 карт

Цей підручник охоплює такі глави:

  1. Що таке компонент картки?
  2. Основна карта Bootstrap 5
  3. Розмір карток
  4. Картка з субтитрами та посиланнями
  5. Вирівнювання тексту
  6. Додавання верхнього та нижнього колонтитула
  7. Використання навігаційних вкладок
  8. Зображення внизу картки
  9. Картка з накладанням зображення
  10. Перевернута або чорна картка
  11. Картки з кольорами фону
  12. Контурні картки
  13. Макети карт

1 Що таке карти в Bootstrap?

Картки є контейнером для рідини, що містить верхній, нижній і нижній колонтитули та вміст. Змістова частина може мати різні типи елементів, такі як заголовок, опис, зображення, кнопки тощо. Завдяки поєднанню та поєднанню різних елементів існує багато можливостей для створення різних типів карт. Ми покриваємо картки базовим і найпривабливішим виглядом.

2 основні карти

Основний компонент картки матиме зображення, назву, опис та кнопку. Це найпоширеніша форма використання карт у блогах та оформленні сторінок.

Як створити картки Bootstrap 5?

Фрагмент коду для створення базової картки наведено нижче із повним шаблоном початківця :

<!DOCTYPE html> <html lang="en"> <head> <!-- Meta Tags for Bootstrap 5 --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Bootstrap 5 CSS --> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous"> </head> <body> <!-- Basic Card with Image, Title and Description --> <div class="card" style="width:20rem;"> <img class="card-img-top img-fluid" src="https://img.webnots.com/2017/04/Bootstrap-Card-Image.png" alt="card image"> <div class="card-body"> <h4 class="card-title">Card Title</h4> <p class="card-text">This is basic card with image on top, title, description and button.</p> <a href="#" class="btn btn-primary">Button</a> </div> </div> <!-- Bootstrap 5 Scripts --> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script> </body> </html>

В ідеалі немає необхідності в скриптах для карт, якщо в блоці картки використовуються лише прості елементи. Як ви помітили, для створення картки використовується багато класів CSS.

  • Картка повинна бути ідентифікована класом ".card", обгорнутим символом

    тег.

  • Зображення є додатковим елементом на картці. Щоб додати зображення зверху, вам слід додати клас “.card-img-top". Додано додатковий клас ".img-fluid", щоб забезпечити чутливість зображення та його розмір у ширину контейнера.

  • Картка може мати кілька блоків карт, загорнутих всередині окремо

    тег із класом CSS ".card-body". Кожен блок карт містить вміст цього блоку, як -от заголовок, опис тощо.

  • У нашому прикладі використовували w

    заголовок до заголовка з класом “.card-title”. Після заголовку ми маємо короткий опис, використовуючи

    тег із класом “.card-text”. Нарешті, у нас є кнопка, ідентифікована звичайним класом кнопок Bootstrap.

Пам’ятайте, що “.card” та “.card-body” достатньо для того, щоб мати картку з будь-яким типом вмісту всередині блоку.

3 Розмір компонента картки

Компонент картки за замовчуванням є текучим і розповсюджується на всю ширину контейнера. У наведеному вище прикладі базової карти ми використовували “style =” width: 20rem; “”, щоб обмежити ширину до 20rem. Ви можете використовувати різні способи обмеження ширини.

  • Використовуючи вбудований стиль, як у наведеному вище прикладі.
  • Використання макета сітки.
  • Використання корисних класів для регулювання ширини та висоти.

У всіх наших прикладах ми будемо використовувати вбудований стиль, щоб зробити картку певної ширини.

4 картки з субтитрами та посиланнями

Давайте почнемо змінювати основну картку, щоб вона мала субтитри та посилання замість кнопки. Субтитри можна додати за допомогою класу “.card-subtitle”, а нижнє поле необхідно додати, щоб створити необхідний розрив між заголовком та субтитрами. Посилання створюються за допомогою стандартних тегів прив’язки HTML.

<div class="card" style="width:20rem;"> <div class="card-body"> <h4 class="card-title">Card Title</h4> <h6 class="card-subtitle mb-2 text-muted">Card Subtitle</h6> <p class="card-text">This card has no image but has subtitle and two links instead of button.</p> <a href="#" class="card-link">Link 1</a> <a href="#" class="card-link">Link 2</a> </div> </div>

У браузері це повинно дати такий результат:

Як створити картки Bootstrap 5?

5 Картка з вирівнюванням тексту

За замовчуванням елементи картки вирівнюються ліворуч, які можна змінити праворуч і по центру за допомогою класів “.text-right” та “.text-center” відповідно до класу “.card-block”.

<!-- Card with Center Text Alignment --> <div class="card" style="width:20rem;"> <div class="card-body text-center"> <h4 class="card-title">Card Title</h4> <p class="card-text">This is a card with center text alignment.</p> <a href="#" class="btn btn-primary">Button</a> </div> </div> <!-- Card with Right Text Alignment --> <div class="card" style="width:20rem;"> <div class="card-body text-right"> <h4 class="card-title">Card Title</h4> <p class="card-text">This is a card with right text alignment.</p> <a href="#" class="btn btn-primary">Button</a> </div> </div>

Кінцевий результат буде виглядати так:

Як створити картки Bootstrap 5?

У наведеному вище прикладі картки елемент зображення видалено для демонстрації вирівнювання тексту.

6 Додавання верхнього та нижнього колонтитулів

Як щодо додавання верхнього та нижнього колонтитула до карти, подібного до компонента панелі в Bootstrap 3? Так, ви можете додати верхній і нижній колонтитул за допомогою класів “.card-header” та “.card-footer”, як показано нижче:

<div class="card" style="width:20rem;"> <div class="card-header"> This is a Header </div> <div class="card-body"> <h4 class="card-title">Card Title</h4> <p class="card-text">This is a card component with header and footer.</p> <a href="#" class="btn btn-primary">Button</a> </div> <div class="card-footer"> This is a Footer </div> </div>

Не забудьте додати класи заголовків або колонтитулів для розділення

теги до та після розділу “.card-block”. Вихідні дані картки із колонтитулами та колонтитулами наведені нижче:

Як створити картки Bootstrap 5?

7 Використання навігаційних вкладок у картці

Заголовна частина картки може використовувати компонент навігації за умовчанням для перетворення картки у вигляді горизонтальної вкладки, як показано нижче.

Як створити картки Bootstrap 5?

Код картки з навігацією наведено нижче:

<div class="card text-center"> <div class="card-header"> <ul class="nav nav-tabs card-header-tabs"> <li class="nav-item" style="list-style-type: none;"> <a class="nav-link active" href="#">Tab1</a> </li> <li class="nav-item" style="list-style-type: none;"> <a class="nav-link" href="#">Tab2</a> </li> <li class="nav-item" style="list-style-type: none;"> <a class="nav-link disabled" href="#">Tab3</a> </li> </ul> </div> <div class="card-body"> <h4 class="card-title">This is a title for tab 1</h4> <p class="card-text">This card uses navigation with default navigation components.</p> <a href="#" class="btn btn-primary">Button</a> </div> </div>

8 Зображення знизу

Картка за замовчуванням матиме зображення зверху картки, як показано в прикладі основної карти. Ви можете перемістити зображення вниз на картку за допомогою “.card-img-bottom” і перемістити

<div class="card" style="width:20rem;"> <div class="card-body"> <h4 class="card-title">Card Title</h4> <p class="card-text">This is Bootstrap 5 card with image aligned bottom of the card component.</p> <p class="card-text"><small class="text-muted">Enter some text here...</small></p> </div> <img class="card-img-bottom" src="https://img.webnots.com/2017/04/Bootstrap-Card-Image.png" alt="Card Image Down"> </div>

Картка із зображенням вниз буде виглядати так:

Як створити картки Bootstrap 5?

9 Картка з накладанням зображення

Замість того, щоб розміщувати зображення вгору або вниз, ви можете додати всі текстові елементи поверх зображення у вигляді накладання, як показано нижче:

Як створити картки Bootstrap 5?

<div class="card bg-dark text-white" style="width:20rem;"> <img class="card-img" src="https://img.webnots.com/2017/04/Bootstrap-Card-Image.png" alt="Card image"> <div class="card-img-overlay"> <h4 class="card-title">Card Title</h4> <p class="card-text">Here is a short description to explain what this card is about.</p> <p class="card-text"><small class="text-muted">Enter some text here...</small></p> </div> </div>

Клас ".card-img-overlay" використовується всередині

тег, який охоплює всі текстові елементи для накладання їх на зображення. Тут ми використовували ".card-inverse", щоб перетворити текст у світлий колір, оскільки ми використовували зображення темного фону. Детальніше про перевернуту картку можна прочитати у наступному прикладі.

10 Перевернута або чорна картка

За замовчуванням текстові елементи картки використовують темні кольори, припускаючи, що колір фону світлий (зазвичай білий). Колір тексту можна легко інвертувати у світлий колір за допомогою класу “.text-white”. Пам’ятайте, що це лише інверсує кольори тексту, і ви повинні вручну оголосити фон темним кольором, використовуючи клас “.bg-dark”, щоб забезпечити читабельність.

Нижче наведено код для інвертованої картки з чорним кольором тла, оголошеним за допомогою вбудованого стилю.

<div class="card bg-dark text-white mb-3" style="background-color: #333;"> <div class="card-body"> <h3 class="card-title">Special title treatment</h3> <p class="card-text">This is a card with inverse color and background is set as black.</p> <a href="#" class="btn btn-primary">Go somehwere</a> </div> </div>

Перевернута картка має виглядати так:

Як створити картки Bootstrap 5?

11 Картка з різними кольорами фону

Дивитися на карти з білим тлом буде нудно. Використовуйте будь -який із класів утиліти фону, щоб додати барвистий фон до компонента картки. Ви можете змінити один із кольорів фону, наприклад основний, вторинний, успіх, світлий, темний, попередження, інформація чи небезпека. Нижче – картка із заголовком та різними кольорами фону.

<div class="card text-white bg-primary mb-3"> <div class="card-header">Primary</div> <div class="card-body"> <h4 class="card-title">Card Title</h4> <p class="card-text">This is a card text paragraph with primary color background.</p> </div> </div> <div class="card text-white bg-secondary mb-3"> <div class="card-header">Secondary</div> <div class="card-body"> <h4 class="card-title">Card Title</h4> <p class="card-text">This is a card text paragraph with secondary color background.</p> </div> </div> <div class="card text-white bg-success mb-3"> <div class="card-header">Success</div> <div class="card-body"> <h4 class="card-title">Card Title</h4> <p class="card-text">This is a card text paragraph with green color background.</p> </div> </div> <div class="card text-white bg-info mb-3"> <div class="card-header">Info</div> <div class="card-body"> <h4 class="card-title">Card Title</h4> <p class="card-text">This is a card text paragraph with blue color background.</p> </div> </div> <div class="card text-white bg-warning mb-3 text-center"> <div class="card-header">Warning</div> <div class="card-body"> <h4 class="card-title">Card Title</h4> <p class="card-text">This is a card text paragraph with yellow color background and aligned center.</p> </div> </div> <div class="card text-white bg-danger mb-3 text-center"> <div class="card-header">Danger</div> <div class="card-body"> <h4 class="card-title">Card Title</h4> <p class="card-text">This is a card text paragraph with red color background and aligned center.</p> </div> </div> <div class="card bg-light mb-3 text-center"> <div class="card-header">Light</div> <div class="card-body"> <h4 class="card-title">Card Title</h4> <p class="card-text">This is a card text paragraph with light color background and aligned center.</p> </div> </div> <div class="card text-white bg-dark mb-3 text-center"> <div class="card-header">Dark</div> <div class="card-body"> <h4 class="card-title">Card Title</h4> <p class="card-text">This is a card text paragraph with dark color background and aligned center.</p> </div> </div>

Не забудьте включити клас “.text-white”, оскільки всі ці фони мають більш темний колір, для чого текст має бути світлішим.

Нижче показані картки з різними кольорами фону:

Як створити картки Bootstrap 5?

12 контурних карт

Контурні картки матимуть простий білий фон з різними кольорами кордонів із використанням ".card-outline-primary", ". Card-outline-secondary", ". Card-outline-success", ". Card-outline-info", " .card-outline-warning »та« .card-outline-hazard ».

<div class="card border-primary mb-3 text-center"> <div class="card-header">Primary Border</div> <div class="card-body text-primary"> <h4 class="card-title">Card Title</h4> <p class="card-text">This is a card text paragraph with primary color background.</p> </div> </div> <div class="card border-secondary mb-3 text-center"> <div class="card-header">Secondary Border</div> <div class="card-body text-secondary"> <h4 class="card-title">Card Title</h4> <p class="card-text">This is a card text paragraph with primary color background.</p> </div> </div> <div class="card border-light mb-3 text-center"> <div class="card-header">Light Border</div> <div class="card-body"> <h4 class="card-title">Card Title</h4> <p class="card-text">This is a card text paragraph with primary color background.</p> </div> </div> <div class="card border-dark mb-3 text-center"> <div class="card-header">Dark Border</div> <div class="card-body text-dark"> <p>This is a card text paragraph with secondary color background without title.</p> <footer>Quote by <cite title="Source Title">Someone said</cite></footer> </div> </div> <div class="card border-success mb-3 text-center"> <div class="card-header">Success Border</div> <div class="card-body text-success"> <h4 class="card-title">Card Title</h4> <p class="card-text">This is a card text paragraph with green color background.</p> </div> </div> <div class="card border-info mb-3 text-center"> <div class="card-header">Info Border</div> <div class="card-body text-info"> <h4 class="card-title">Card Title</h4> <p class="card-text">This is a card text paragraph with blue color background.</p> </div> </div> <div class="card border-warning mb-3 text-center"> <div class="card-header">Warning Border</div> <div class="card-body text-warning"> <h4 class="card-title">Card Title</h4> <p class="card-text">This is a card text paragraph with yellow color background.</p> </div> </div> <div class="card border-danger text-center"> <div class="card-header">Danger Border</div> <div class="card-body text-danger"> <h4 class="card-title">Card Title</h4> <p class="card-text">This is a card text paragraph with red color background.</p> </div> </div>

Контурні картки виглядатимуть так:

Як створити картки Bootstrap 5?

13 Bootstrap 5 Розкладки карт

Усі наведені вище приклади стосуються створення картки як єдиного компонента. Bootstrap також пропонує три класи для створення макета картки, який більше підходить для макетів блогу.

  • карткова група
  • колода карт
  • картки-колонки

Ми обговоримо ці класи розкладки карт у нашому наступному уроці.


Вивчити Bootstrap 5 (індекс )


Джерело запису: webnots.com
Залиште відповідь

Цей веб -сайт використовує файли cookie, щоб покращити ваш досвід. Ми припустимо, що з цим все гаразд, але ви можете відмовитися, якщо захочете. Прийняти Читати далі