Шаблон:Card

Перейти к: навигация, поиск


Описание

Компонент Card из Bootstrap 4.1

См. также http://getbootstrap.com/docs/4.1/components/card/

Параметры

  • {{{body}}} или {{{1}}}
  • {{{list}}}
  • {{{header}}}
  • {{{footer}}}
  • {{{image top}}}
  • {{{image bottom}}}
  • {{{class}}} - строка с именем css-класса, например, ml-3 d-none d-md-block
  • {{{style}}} - строка HTML атрибута style, например, width: 300px; max-width: 100%;

Примеры

Простая карточка

Код:

{{Card|Это некоторая карточка}}

Результат:

Это некоторая карточка

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

Код:

{{Card
|header=Это заголовок карточки
|body=Это тело карточки
|footer=Это подвал карточки
}}

Результат:

Это заголовок карточки
Это тело карточки

Список

Код:

{{Card
|header=Это заголовок карточки
|list=
* Это элемент списка
* Это элемент списка
* Это элемент списка
}}

Результат:

Это заголовок карточки
  • Это элемент списка
  • Это элемент списка
  • Это элемент списка

Изображение

Код:

{{Card
|image top=[[File:Firefox-logo.png|link=|300px]]
|style=width: 300px; max-width: 100%;
|list=
* Это элемент списка
* Это элемент списка
* Это элемент списка
}}

Результат:

Firefox-logo.png

  • Это элемент списка
  • Это элемент списка
  • Это элемент списка

Классы для применения тем оформления

{{Card
|class=text-white bg-primary
|header=Это заголовок карточки
|body=Это тело карточки
|footer=Это подвал карточки
}}
Это заголовок карточки
Это тело карточки
{{Card
|class=text-white bg-secondary
|header=Это заголовок карточки
|body=Это тело карточки
|footer=Это подвал карточки
}}
Это заголовок карточки
Это тело карточки
{{Card
|class=text-white bg-success
|header=Это заголовок карточки
|body=Это тело карточки
|footer=Это подвал карточки
}}
Это заголовок карточки
Это тело карточки
{{Card
|class=text-white bg-danger
|header=Это заголовок карточки
|body=Это тело карточки
|footer=Это подвал карточки
}}
Это заголовок карточки
Это тело карточки
{{Card
|class=text-white bg-warning
|header=Это заголовок карточки
|body=Это тело карточки
|footer=Это подвал карточки
}}
Это заголовок карточки
Это тело карточки
{{Card
|class=text-white bg-info
|header=Это заголовок карточки
|body=Это тело карточки
|footer=Это подвал карточки
}}
Это заголовок карточки
Это тело карточки
{{Card
|class=bg-light
|header=Это заголовок карточки
|body=Это тело карточки
|footer=Это подвал карточки
}}
Это заголовок карточки
Это тело карточки
{{Card
|class=text-white bg-dark
|header=Это заголовок карточки
|body=Это тело карточки
|footer=Это подвал карточки
}}
Это заголовок карточки
Это тело карточки

Bootstrap предоставляет много полезных служебных классов для вёрстки и стилизации. Подробнее можно узанть в документации.

См. также