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