ЛУЧШИЙ САЙТ ДЛЯ РАЗРАБОТЧИКОВ
×

Bootstrap 4 Tutorial

BS4 HOME BS4 Get Started BS4 Grid Basic BS4 Typography BS4 Colors BS4 Tables BS4 Images BS4 Jumbotron BS4 Alerts BS4 Buttons BS4 Button Groups BS4 Badges BS4 Progress Bars BS4 Pagination BS4 List Groups BS4 Cards BS4 Dropdowns BS4 Collapse BS4 Navs BS4 Navbar BS4 Forms BS4 Inputs BS4 Carousel BS4 Modal BS4 Tooltip BS4 Popover BS4 Scrollspy BS4 Utilities BS4 Flex BS4 Media Objects BS4 Filters

Bootstrap 4 Grid

BS4 Grid System BS4 Stacked/Horizontal BS4 Grid XSmall BS4 Grid Small BS4 Grid Medium BS4 Grid Large BS4 Grid XLarge BS4 Grid Examples

Bootstrap 4 Theme

BS4 Basic Template

Bootstrap 4 Ref

All Classes JS Alert JS Button JS Carousel JS Collapse JS Dropdown JS Modal JS Popover JS Scrollspy JS Tab JS Tooltip

Bootstrap 4 Cards


Карты

Карта в Bootstrap 4 представляет собой рамку с некоторой обивкой вокруг ее содержимого. Она включает в себя параметры для верхних колонтитулов, содержание, цвета и т.д.

image

John СSS

Some example text some example text. John CSS is an architect and engineer

See Profile

Базовая карта

Базовая карта создается с .card классом, а содержимое внутри карты имеет .card-body класс:

Basic card

Пример

<div class="card">
  <div class="card-body">Basic card</div>
</div>

Если вы знакомы с Bootstrap 3, карты заменяют старые панели, колодцы и миниатюры.


Верхний и нижний колонтитулы

Header
Content

.card-header класс добавляет заголовок к карточке, и .card-footer класс добавляет нижний колонтитул к карточке:

Пример

<div class="card">
  <div class="card-header">Header</div>
  <div class="card-body">Content</div>
  <div class="card-footer">Footer</div>
</div>

Контекстуальные карты

Чтобы добавить цвет фона карты, используйте контекстные классы (,,,,,, .bg-primary .bg-success .bg-info .bg-warning .bg-danger .bg-secondary .bg-dark и .bg-light.

Пример

Basic card

Primary card

Success card

Info card

Warning card

Danger card

Secondary card

Dark card

Light card


Заголовки, текст и ссылки

Card title

Some example text. Some example text.

Card link Another link

Используется .card-title для добавления названий карт к любому элементу заголовка. .card-textкласс используется для удаления нижних полей для элемента <p>, если он является последним дочерним элементом (или единственным) внутри .card-body. .card-linkкласс добавляет синий цвет к любой ссылке и наведите эффект.

Пример

<div class="card">
  <div class="card-body">
    <h4 class="card-title">Card title</h4>
    <p class="card-text">Some example text. Some example text.</p>
    <a href="#" class="card-link">Card link</a>
    <a href="#" class="card-link">Another link</a>
  </div>
</div>

Карты изображений

Card image

John CSS

Некоторые примеры текста пример текста. Джон CSS-архитектор и инженер

See Profile

Jane CSS

Some example text some example text. Jane CSS is an architect and engineer

See Profile
Card image

Добавить .card-img-top или .card-img-bottom для <img> размещения изображения вверху или внизу внутри карты. Обратите внимание, что мы добавили изображение за пределами, .card-body чтобы охватить всю ширину:

Пример

<div class="card" style="width:400px">
  <img class="card-img-top" src="img_avatar1.png" alt="Card image">
  <div class="card-body">
    <h4 class="card-title">John CSS</h4>
    <p class="card-text">Some example text.</p>
    <a href="#" class="btn btn-primary">See Profile</a>
  </div>
</div>

Наложения изображений карты

Card image

John CSS

Some example text some example text. Some example text some example text. Some example text some example text. Some example text some example text.

See Profile

Превратите изображение в фон карты и используйте .card-img-overlay для добавления текста поверх изображения:

Пример

<div class="card" style="width:500px">
  <img class="card-img-top" src="img_avatar1.png" alt="Card image">
  <div class="card-img-overlay">
    <h4 class="card-title">John CSS</h4>
    <p class="card-text">Some example text.</p>
    <a href="#" class="btn btn-primary">See Profile</a>
  </div>
</div>

Card Columns

Некоторый текст внутри первой карточки

Некоторый текст внутри второй карточки

Некоторый текст внутри третьей карты

Некоторый текст внутри четвертой карточки

Текст внутри пятой карты

Текст внутри шестой карты

.card-columns класс создает сетку, как сетка карт (например, Pinterest). Компоновка будет автоматически корректироваться при вставке дополнительных карточек.

Примечание: Карты отображаются вертикально на маленьких экранах (менее 576пкс):

Пример

<div class="card-columns">
  <div class="card bg-primary">
    <div class="card-body text-center">
      <p class="card-text">Some text inside the first card</p>
    </div>
  </div>
  <div class="card bg-warning">
    <div class="card-body text-center">
      <p class="card-text">Some text inside the second card</p>
    </div>
  </div>
  <div class="card bg-success">
    <div class="card-body text-center">
      <p class="card-text">Some text inside the third card</p>
    </div>
  </div>
  <div class="card bg-danger">
    <div class="card-body text-center">
      <p class="card-text">Some text inside the fourth card</p>
    </div>
  </div>
  <div class="card bg-light">
    <div class="card-body text-center">
      <p class="card-text">Some text inside the fifth card</p>
    </div>
  </div>
  <div class="card bg-info">
    <div class="card-body text-center">
      <p class="card-text">Some text inside the sixth card</p>
    </div>
  </div>
</div>

Card Deck

Some text inside the first card

Some more text to increase the height

Some more text to increase the height

Some more text to increase the height

Some text inside the second card

Some text inside the third card

Some text inside the fourth card

Класс карт-палубы создает сетку карт с одинаковой высотой и шириной. Компоновка будет автоматически корректироваться при вставке дополнительных карточек.

Примечание: Карты отображаются вертикально на маленьких экранах (менее 576пкс):

Пример

<div class="card-deck">
  <div class="card bg-primary">
    <div class="card-body text-center">
      <p class="card-text">Some text inside the first card</p>
    </div>
  </div>
  <div class="card bg-warning">
    <div class="card-body text-center">
      <p class="card-text">Some text inside the second card</p>
    </div>
  </div>
  <div class="card bg-success">
    <div class="card-body text-center">
      <p class="card-text">Some text inside the third card</p>
    </div>
  </div>
  <div class="card bg-danger">
    <div class="card-body text-center">
      <p class="card-text">Some text inside the fourth card</p>
    </div>
  </div>
</div>

Card Group

Some text inside the first card

Some more text to increase the height

Some more text to increase the height

Some more text to increase the height

Some text inside the second card

Some text inside the third card

Some text inside the fourth card

.card-group класс похож на .card-deck. Единственное отличие состоит в том, что .card-group класс удаляет левое и правое поля между каждой картой.

Примечание: Карты отображаются вертикально на маленьких экранах (менее 576пкс), с верхним и нижним полями:

Пример

<div class="card-group">
  <div class="card bg-primary">
    <div class="card-body text-center">
      <p class="card-text">Some text inside the first card</p>
    </div>
  </div>
  <div class="card bg-warning">
    <div class="card-body text-center">
      <p class="card-text">Some text inside the second card</p>
    </div>
  </div>
  <div class="card bg-success">
    <div class="card-body text-center">
      <p class="card-text">Some text inside the third card</p>
    </div>
  </div>
  <div class="card bg-danger">
    <div class="card-body text-center">
      <p class="card-text">Some text inside the fourth card</p>
    </div>
  </div>
</div>