Шаблон: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=
* Это элемент списка
* Это элемент списка
* Это элемент списка
}}
Результат:
- Это элемент списка
- Это элемент списка
- Это элемент списка
Классы для применения тем оформления
{{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 предоставляет много полезных служебных классов для вёрстки и стилизации. Подробнее можно узанть в документации.