.active | Добавляет серый цвет фона в строку таблицы ( <tr> или ячейку таблицы ( <td> ) (тот же цвет используется при наведении) | Tables | |
.active | Добавляет серый цвет фона к активной ссылке по умолчанию навигационной навигации. Добавляет черный фон и белый цвет к текущей ссылке внутри инвертированной навигационной навигации. | Navbar | |
.active | Добавление синего цвета фона к элементу активного списка в группе списков | List Groups | |
.active | Добавление синего цвета фона для имитации нажатой кнопки | Buttons | |
.active | Анимация полосового индикатора выполнения | Progress Bars | |
.active | Добавляет синий цвет фона для активного раскрывающегося элемента в раскрывающемся списке | Dropdowns | |
.active | Добавление синего цвета фона в активную ссылку разбиения на страницы (для выделения текущей страницы) | Pagination | |
.affix | Подключаемый модуль позволяет элементу становиться прикрепленным (заблокированным/липким) к области на странице. Включение position:fixed и отключение | Affix | |
.alert | Создает окно сообщения предупреждения | Alerts | |
.alert-danger | Красная коробка тревоги. Указывает на опасное или потенциально отрицательное действие | Alerts | |
.alert-dismissible | Вместе с .close классом этот класс используется для закрытия оповещения | Alerts | |
.alert-info | Светло-синяя коробка оповещения. Указывает некоторую информацию | Alerts | |
.alert-link | Используется на ссылки внутри оповещения, чтобы добавить соответствующие цветные ссылки | Alerts | |
.alert-success | Зеленая коробка тревоги. Указывает на успешное или положительное действие | Alerts | |
.alert-warning | Желтая коробка оповещения. Указывает на осторожность следует принимать с этим действием | Alerts | |
.badge | Создает круглый значок (серый круг-часто используется в качестве числового индикатора) | Badges | |
.bg-danger | Добавляет красный цвет фона к элементу. Представляет опасность или отрицательное действие | Helpers | |
.bg-info | Добавляет голубой цвет фона к элементу. Представляет некоторую информацию |
Bootstrap 3 — Вспомогательные классы
На этом уроке мы познакомимся со вспомогательными классами Twitter Bootstrap 3.
В Twitter Bootstrap 3 имеются вспомогательные акцентные классы, с помощью которых вы можете установить цвет некоторому фрагменту тексту. Кроме текста эти классы также можно применять к ссылкам, которые не только изменяют цвет данной ссылки, но и делают её темнее при поднесении к ней курсора.
Например:
<p>...</p> <p>...</p> <p>...</p> <p>...</p> <p>...</p> <p>...</p> <a href="#">Пример ссылки</a> <a href="#">Пример ссылки</a> <a href="#">Пример ссылки</a> <a href="#">Пример ссылки</a> <a href="#">Пример ссылки</a> <a href="#">Пример ссылки</a>
Текст:
Lorem ipsum dolor sit amet. Officiis debitis aut reiciendis voluptatibus maiores alias consequatur aut fugit.
Sint et dolorum fuga sit voluptatem accusantium. Cum soluta nobis est et dolorum fuga obcaecati cupiditate.
Delectus, ut aut perferendis doloribus asperiores repellat.. Excepturi sint, obcaecati cupiditate non provident, similique sunt.
Optio, cumque nihil impedit, quo minus. Similique sunt in culpa. Nam libero tempore, cum soluta.
Magni dolores et voluptates repudiandae. Voluptatem sequi nesciunt, neque porro quisquam est, omnis dolor repellendus quibusdam.
Repudiandae sint et aut fugit. Odit aut fugit, sed quia dolor sit, aspernatur aut rerum. Consectetur, adipisci velit, sed ut enim ipsam voluptatem, quia consequuntur magni.
Ссылки:
Примечание: Иногда акцентные классы могут не изменить цвет текста, который заключен в некоторый элемент в связи c влияния на данный элемент стилей других классов или селекторов. В большинстве случаев для решения подобной проблемы достаточно обернуть данный текст с помощью элемента
Кроме классов, предназначенных для выделения текста цветом, в Twitter Bootstrap 3 есть ещё несколько классов, которые предназначены для установления цветного фона блочным элементам HTML.
Например:
<p>...</p> <p>...</p> <p>...</p> <p>...</p> <p>...</p> <a href="#">Пример ссылки</a> <a href="#">Пример ссылки</a> <a href="#">Пример ссылки</a> <a href="#">Пример ссылки</a> <a href="#">Пример ссылки</a>
Абзацы с различным фоном:
Lorem ipsum dolor sit amet. Officiis debitis aut reiciendis voluptatibus maiores alias consequatur aut fugit.
Sint et dolorum fuga sit voluptatem accusantium. Cum soluta nobis est et dolorum fuga obcaecati cupiditate.
Delectus, ut aut perferendis doloribus asperiores repellat.. Excepturi sint, obcaecati cupiditate non provident, similique sunt.
Optio, cumque nihil impedit, quo minus. Similique sunt in culpa. Nam libero tempore, cum soluta.
Magni dolores et voluptates repudiandae. Voluptatem sequi nesciunt, neque porro quisquam est, omnis dolor repellendus quibusdam.
Ссылки:
Примечание: Иногда контекстуальные классы, предназначенные для задания фона некоторому элементу, могут не изменить его цвет в связи с тем, что на данный элемент могут оказывать стили других классов или селекторов. В большинстве случаев для решения подобной проблемы достаточно обернуть некоторый контент в элемент div и добавить к нему класс для задания цветного фона.
Иконка «Close» применяется для закрытия модальных окон (modals) и сообщений (alerts).
<button type="button" aria-label="Close"> <span aria-hidden="true">×</span> </button>
× Компонент alerts (сообщение) c кнопкой, которая закрывает данное сообщение
Значок «Carets» указывает на наличие у элемента выпадающего списка. Кроме этого этот значок также указывает направление, в каком данный список будет выпадать (вверх или вниз).
<span></span>
Данные классы предназначены для создания плавающих элементов, которые смещаются насколько возможно влево (класс .pull-left) или вправо (.pull-right). Кроме этого в данные классы добавлено правило !important, которое повышает приоритет свойства float и предотвращает данные классы Bootstrap от возможных проблем.
<div>...</div> <div>...</div>
Примечание: классы .pull-left
.pull-right нельзя использовать для выравнивания элементов в компоненте navbar. Если вы хотите выровнять некоторые элементы в навигационном меню, то используйте специальные предназначенные для этого служебные классы .navbar-left и .navbar-right. Более подробно познакомиться с данными классами можно в статье, посвященной рассмотрению компонента navbar.Класс .center-block предназначен для центрирования блочных элементов. Т.е. если к элементу применить класс .center-block, то он делает данный элемент блочным (display:block) и центрирует его в горизонтальном направлении по центру (margin: 0 auto).
<div>...</div>
Класс .clerfix предназначен для отмены обтекания элемента, к которому он добавлен, другими плавающими блоками.
<div>...</div>
Например, рассмотрим создания макета, состоящего из 4 блоков, каждый из которых должен занимать по 6 колонок Twitter Bootstrap. Причём блоки 3 и 4 должны располагаться с новой строки.
Блоки, состоящие из колонок Bootstrap, являются плавающими и стремятся сместиться насколько возможно влево. После создания данного макета мы получим следующую картину:
<div> <div>...</div> <div>...</div> <div>...</div> <div>...</div> </div>
Чтобы расположить блоки в соответствии с заданием, нам необходимо, чтобы блоки 3 и 4 не обтекали блоки 1 и 2. Следовательно, нам необходимо расположить пустой блок div с классом .clearfix
.clearfix запретит блокам расположенным после него, т.е. блокам 3 и 4 его обтекать.<div> <div>...</div> <div>...</div> <div></div> <div>...</div> <div>...</div> </div>
Чтобы заставить элемент отобразиться или скрыться вы можете использовать классы .show (display: block !important) и .hidden (display: none !important; visibility: hidden !important). Эти классы так же как классы .pull-left и .pull-right имеют правило !important, которое повышает приоритет стилей данных классов перед стилями других классов или селекторов, которые могут эти стили вытеснить. Данные классы можно применять только к блочным элементам HTML.
Кроме того, в Bootstrap есть ещё один класс .invisible, который предназначен для отключения видимости элемента, к которому он применён. Но, в отличие от вышеперечисленных классов, данный класс не изменяет свойство display у элемента и, следовательно, он по-прежнему занимает место, хоть и становится не видимым.
<div>...</div> <div>...</div> <div>...</div>
В Twitter Bootstrap 3 разработан специальный класс (.sr-only), с помощью которого вы можете настроить свой сайт под вспомогательные технологии (чтение голосом текста, картинок, меню и других элементов с экрана).
Класс .sr-only применяется для скрытия элемента на всех устройствах кроме технологий, осуществляющих чтение с экрана. Также класс .sr-only можно объединить с классом .sr-only-focusable, в этом случае элемент, к которому применены данные классы, будет отображаться на экране, но только в момент времени его нахождения в фокусе (например: при использовании клавиатуры).
<body>
<!-- Ссылка для перехода к основному контенту сайта -->
<a href="#content">Перейти к основному содержанию страницы</a>
...
<div>
<!-- Основной контент страницы -->
</div>
</body>
В Twitter Bootstrap 3 разработан специальный класс .text-hide, который можно применить к элементу для того чтобы в нём скрыть текст. Например, это можно использовать, чтобы заменить скрытый текст фоновым изображением.
<h2>Текст этого заголовка не видим</h2> <p>Текст этого абзаца не видим</p>
Bootstrap Бутстрап Вспомогательные классы справка
Текст
Добавьте значение через Text-Colors с классами ниже. Ссылки будут затемнены при наведении:
| Класс | Описание | |
|---|---|---|
| .text-muted | Текст, стилизованный под класс «текст-приглушенный» | |
| .text-primary | Текст, стилизованный под класс «Text-Primary» | |
| .text-success | Текстовый стиль с классом «Text-Success» | |
| .text-info | Текст, стилизованный под класс «Text-info» | |
| .text-warning | Текст в стиле с классом «текст-предупреждение» | |
| .text-danger | Текст, стилизованный под класс «Text-опасность» |
Фон
Добавить значение через фон-цвета с классами ниже. Ссылки затемнить на Hover так же, как текстовые классы:
| Класс | Описание | |
|---|---|---|
| .bg-primary | Ячейка таблицы стилизована под класс «BG-Primary» | |
| .bg-success | Ячейка таблицы стилизована под класс «BG-Success» | |
| .bg-info | Ячейка таблицы стилизована под класс «BG-info» | |
| .bg-warning | Ячейка таблицы стилизована под класс «BG-warning» | |
| .bg-danger | Ячейка таблицы стилизована под класс «BG-опасность» |
Другие
| Класс | Описание | |
|---|---|---|
| .pull-left | Поплавок элемента влево | |
| .pull-right | Поплавок элемента вправо | |
| .center-block | Задает отображаемый элемент: блок с полями справа: авто и поле слева: Авто | |
| .clearfix | Очищает поплавки | |
| .show | Вынуждает элемент быть показанным (дисплей: блок) | |
| .hidden | Заставляет элемент быть скрытым (отображение: нет) | |
| .invisible | Заставляет элемент быть невидимым (видимость: скрытый). Займет место на странице, даже если она невидима | |
| .sr-only | Скрытие элемента для всех устройств, Кроме программ чтения с экрана | |
| .sr-only-focusable | Объедините с. SR-только для отображения элемента снова, когда он сфокусирован (например, пользователь с клавиатурой) | |
| .text-hide | Помогает заменить текстовое содержимое элемента фоновым изображением | |
| .close | Указывает значок закрытия | |
| .caret | Указывает функциональность раскрывающегося списка (будет автоматически отменено в дропуп меню) |
Отзывчивые утилиты
Эти классы используются для отображения и/или скрытия содержимого на устройстве с помощью запросов мультимедиа.
Используйте один или комбинацию доступных классов для переключения содержимого между точками просмотра.
| Classes | Extra small devices Phones (<768px) | Small devices Tablets (≥768px) | Medium devices Desktops (≥992px) | Large devices Desktops (≥1200px) |
|---|---|---|---|---|
| .visible-xs-* | Visible | Hidden | Hidden | Hidden |
| .visible-sm-* | Hidden | Visible | Hidden | Hidden |
| .visible-md-* | Hidden | Hidden | Visible | Hidden |
| .visible-lg-* | Hidden | Hidden | Hidden |
Шпаргалка для сравнения классов Twitter Bootstrap и Zurb Foundation / Habr
Zurb Foundation — это крутой фронтэнд-фреймворк, являющийся достойной альтернативой бутстрапу, и стоит как минимум взглянуть на возможности Foundation, прежде чем отвергать его. Foundation имеет некоторые фичи, которых нет в Bootstrap.
Эта короткая статья является по сути шпаргалкой, призванной помочь разработчикам начать работать с Foundation после работы с Bootstrap. Мы сравним основные классы для обоих фреймворков. По большей части, оба фреймворка имеют набор основных компонентов (сетка, кнопки, формы, таблицы), под катом представлена таблица сравнения классов для этих компонентов.
Сравнение классов элементов
| Элемент | Bootstrap | Foundation |
|---|---|---|
| Alert | .alert .alert-success .alert-danger .alert-info |
.alert-box .success .warning .info .round .radius .secondary |
| Кнопки | .btn .btn-default .btn-primary .btn-success .btn-info .btn-warning .btn-danger .btn-link .btn-lg .btn-sm .btn-xs .btn-block |
.button .tiny .small .large .secondary .success .alert .radius .round .disabled .expand |
| Списки | .list-unstyled .list-inline |
.inline-list (также обнуляет стилизацию) |
| Labels | .label .label-default .label-primary .label-success .label-info .label-warning .label-danger |
.label .success .alert .secondary .round .radius |
| Таблицы | .table .table-striped .table-hover .table-bordered .table-condensed .active .success .info .warning .danger |
Таблицы стилизованы без возможности изменять стили с помощью дополнительных классов фреймворка. |
| Панели | .panel .panel-default .panel-primary .panel-success .panel-info .panel-warning .panel-danger |
.panel .callout .radius Нет других цветов и нет классов для добавления шапки панели. |
| Прогресс-бары | .progress-bar .progress-bar-success .progress-bar-info .progress-bar-warning .progress-bar-danger .progress-bar-striped .active |
.progress .small-# .large-# .secondary .success .alert .radius .round |
| Утилиты для работы с текстом | .text-left .text-center .text-right .text-justify .text-nowrap .text-lowercase .text-uppercase .text-capitalize .text-muted .text-primary .text-success .text-info .text-warning .text-danger |
.text-left .text-right .text-center .text-justify .small-text-left (также работает для medium, large, xlarge) .small-only-text-left (также работает для medium, large, xlarge) .small-text-center (также работает для medium, large, xlarge) .small-only-text-center (также работает для medium, large, xlarge) .small-text-right (также работает для medium, large, xlarge) .small-only-text-right (также работает для medium, large, xlarge) .small-text-justify (также работает для medium, large, xlarge) .small-only-text-justify (также работает для medium, large, xlarge) |
| Классы для скрытия / отображения элементов |
.visible-*-block .visible-*-inline .visible-*-inline-block .hidden-xs .hidden-sm .hidden-md .hidden-lg |
.show-for-small-only (medium, large, xlarge, xxlarge) .show-for-small-up (medium, large, xlarge, xxlarge) .hide-for-small-only (medium, large, xlarge, xxlarge) .hide-for-small-up (medium, large, xlarge, xxlarge) .show-for-landscape .show-for-portrait .show-for-touch .hide-for-touch .hidden-for-small-only (medium, large, xlarge, xxlarge) .hidden-for-medium-up (large, xlarge, xxlarge) .visible-for-small-only (medium, large, xlarge, xxlarge) .visible-for-medium-up (large, xlarge, xxlarge) |
Сравнение классов для построения сетки
| Bootstrap | Foundation |
|---|---|
| .container .container-fluid .row .col-xs-# .col-sm-# .col-md-# .col-lg-# .col-xs-offset-# .col-sm-offset-# .col-md-offset-# .col-lg-offset-# |
.row .columns .small-# .medium-# .large-# .small-offset-# .medium-offset-# .large-offset-# |
Вывод
Интересно видеть, как каждый фреймворк решает определенные задачи. Foundation использует универсальные классы, такие как
.secondary, .success, .alert, .radius, и .round, в то время как Bootstrap добавляет к классам префиксы с названием элемента: .btn-, .alert-, и .panel-.Эту шпаргалку также можно использовать в качестве пособия для сравнения этих двух фреймворков. Например, Foundation имеет много классов для работы с видимостью элемента, а Bootstrap более гибок в плане построения таблиц.
Эта статья должна служить простым руководством по миграции с одного фреймворка на другой. Если вам нужна помощь в поиске нужного класса, то пусть эта шпаргалка вам поможет.
Bootstrap классы — htmllab
Bootstrap классы
В этой заметке под Bootstrap классами будет понимать и рассматривать вспомогательные классы фреймворка, которые помогают окрашивать текст и фон HTML-элементов, выравнивать элементы, прятать и отображать HTML-элементы в том числе с учетом мобильной верстки; чистить обтекания (последствия работы свойства float). Подробней о этих CSS-классах можно прочитать на странице фреймворка или в видео этой заметки.
Bootstrap классы
Контекстные цвета текста
<p class=»text-muted»>…</p> приглушенный
<p class=»text-primary»>…</p> основной
<p class=»text-success»>…</p> подтверждающиц
<p class=»text-info»>…</p> информационный
<p class=»text-warning»>…</p> уведомляющий
<p class=»text-danger»>…</p> предостерегающий
Если классы не применяются из-за конфликтов с другими классами, просто оберните текст в span с этим же классом.
Контекстные цвета фона
<p class=»bg-primary»>…</p>
<p class=»bg-success»>…</p>
<p class=»bg-info»>…</p>
<p class=»bg-warning»>…</p>
<p class=»bg-danger»>…</p>
Результат работы:
оформление фона параграфа контекстным классом
Классы кнопок закрытия
Кнопка закрытия, похожая на те кнопки, что бывают в диалоговых и обычных окнах
<button type=»button» class=»close» aria-label=»Close»><span aria-hidden=»true»>×</span></button>
Стрелка дья выпадающего меню <span class=»caret»></span>
Классы обтекания
Классы .pull-left и .pull-right быстро создать плавающие элементы (float), но они не используются для выравнивания навигационных наборов. Для центрирования блочного элемента используется .center-block. ) Класс .clearfix — чистит последствия работы свойства float.
Запись опубликована в рубрике Курсы html с метками Bootstrap. Добавьте в закладки постоянную ссылку.Медиа объект. Компоненты · Bootstrap
Документация и примеры для медиа-объекта Bootstrap по созданию высоко повторяющихся компонентов, таких как комментарии блога, твиты и т.п.
Пример
Медиа-объект (т.е. аватар слева от сообщения) помогает создать сложные повторяющиеся компоненты там, где некоторые графические компоненты («медиа», т.е. аватары, картинки. т.д.) расположены рядом с контентом, но не «обернуты» в него. Плюс, благодаря растяжимому контейнеру, это требует всего двух классов.
Ниже – пример одиночного «медиа-объекта». Только два класса потребовались для его создания – «оборачивающий» .media и .media-body, в котором лежит ваш контент. Паддинг и марджин могут настраиваться утилитами «спейсинга».
<div>
<img src="..." alt="...">
<div>
<h5>Media heading</h5>
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
</div>
</div>Баг №12 – строчные элементы не воспринимаются как растяжимые
IE10-11 не отстраивает строчные элементы, такие как ссылки и изображения (или псевдоэлементы ::before и ::after) как растяжимые элементы. Единственное решение здесь — установить «нестрочное» значение display (т.е. block, inline-block или flex). Мы предлагаем использовать для исправления этого бага класс .d-flex, одну из наших утилит отображения.
Источник: баги «растяжимости» на GitHub
Вложенность
Медиа-объекты могут иметь бесконечную вложенность, хотя мы рекомендуем знать меру. Располагайте вложенные классы .media внутри класса .media-body родительского медиа-объекта.
<div>
<img src="..." alt="...">
<div>
<h5>Media heading</h5>
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
<div>
<a href="#">
<img src="..." alt="...">
</a>
<div>
<h5>Media heading</h5>
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
</div>
</div>
</div>
</div>Выравнивание
Медиафайл в медиа-объекте может быть выровнен утилитами флексбокса по верхнему краю (по умолчанию), посередине, или в конце контента вашего класса .media-body.
<div>
<img src="..." alt="...">
<div>
<h5>Top-aligned media</h5>
<p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
<p>Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
</div>
</div><div>
<img src="..." alt="...">
<div>
<h5>Center-aligned media</h5>
<p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
<p>Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
</div>
</div><div>
<img src="..." alt="...">
<div>
<h5>Bottom-aligned media</h5>
<p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
<p>Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
</div>
</div>Порядок
Меняйте порядок контента в медиа-объектах, изменяя код HTML или добавлением стилей обычных флексбоксов для настройки свойства «order» (числовое значение).
<div>
<div>
<h5>Media object</h5>
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
</div>
<img src="..." alt="...">
</div>Поскольку медиа-объект нетребователен к структуре документа, вы можете использовать их к списку элементов HTML. Так, добавьте класс .list-unstyled к вашим <ul> или <ol> для удаления браузерного оформления по умолчанию этих элементов, и тогда примените класс .media к вашим <li>. Как обычно, пользуйтесь утилитами спейсинга для точной настройки.
-
Placeholder64x64
List-based media object
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus. -
Placeholder64x64
List-based media object
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus. -
Placeholder64x64
List-based media object
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
<ul>
<li>
<img src="..." alt="...">
<div>
<h5>List-based media object</h5>
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
</div>
</li>
<li>
<img src="..." alt="...">
<div>
<h5>List-based media object</h5>
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
</div>
</li>
<li>
<img src="..." alt="...">
<div>
<h5>List-based media object</h5>
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
</div>
</li>
</ul>