Стиль маркера списка
list-style-type
В SIMAI Framewrok с помощью модификаторов можно изменить вид маркера списка.
Классы
Класс | Значение |
---|---|
list-none |
list-style-type: none; |
list-disc |
list-style-type: disc; |
list-decimal |
list-style-type: decimal; |
Описание
Адаптивный модификатор. Изменяет стиль маркера списка в зависимости от размера области просмотра.
Использование модификатора: {контрольная точка}:{модификатор}
- Контрольная точка. Необязательный параметр. Применяет модификатор начиная с определенного размера области просмотра, согласно контрольным точкам (
sm
,md
,lg
,xl
). Если контрольная точка не задана, то действует для любого размера области просмотра. - Модификатор. Обязательный параметр. Принимает значения:
list-none
– у списка не показывается маркер списка;list-disc
– маркер списка в виде диска (по умолчанию);list-decimal
– маркер списка в виде числительного.
Пример
list-none
-
- Lorem ipsum dolor sit amet, conctetur adipisicing elit
- Assumenda, quia temporibus eveniet a libero incidunt suscipit
- Quidem, ipsam illum quis sed voluptatum quae eum fugit earum
list-disc
-
- Lorem ipsum dolor sit amet, conctetur adipisicing elit
- Assumenda, quia temporibus eveniet a libero incidunt suscipit
- Quidem, ipsam illum quis sed voluptatum quae eum fugit earum
list-decimal
-
- Lorem ipsum dolor sit amet, conctetur adipisicing elit
- Assumenda, quia temporibus eveniet a libero incidunt suscipit
- Quidem, ipsam illum quis sed voluptatum quae eum fugit earum
<ul class="list-none">
<li>Lorem ipsum dolor sit amet, conctetur adipisicing elit</li>
<li>Assumenda, quia temporibus eveniet a libero incidunt suscipit</li>
<li>Quidem, ipsam illum quis sed voluptatum quae eum fugit earum</li>
</ul>
<ul class="list-disc">
<li>Lorem ipsum dolor sit amet, conctetur adipisicing elit</li>
<li>Assumenda, quia temporibus eveniet a libero incidunt suscipit</li>
<li>Quidem, ipsam illum quis sed voluptatum quae eum fugit earum</li>
</ul>
<ul class="list-decimal">
<li>Lorem ipsum dolor sit amet, conctetur adipisicing elit</li>
<li>Assumenda, quia temporibus eveniet a libero incidunt suscipit</li>
<li>Quidem, ipsam illum quis sed voluptatum quae eum fugit earum</li>
</ul>