Ul list style: list-style-type | htmlbook.ru

Leave a Comment / Разное / By /

Содержание

Свойство list-style-type — стили для маркеров списка

Свойство list-style-type позволяет для списка ul вместо маркеров-точек сделать квадраты или окружности. Для списка ol вместо обычных цифр можно сделать римские, нумерацию в виде букв: латинских или греческих.

Синтаксис

селектор { list-style-type: значение; }

Значения для ul

ЗначениеОписание
circleСоздает маркеры в виде кружков.
discСоздает маркеры в виде закрашенных кружков.
squareСоздает маркеры в виде квадратиков.
noneУбирает маркеры.

Значение по умолчанию: disc.

Значения для ol

ЗначениеОписание
armenianТрадиционная армянская нумерация.
decimalАрабские числа (1, 2, 3, 4,…).
decimal-leading-zeroАрабские числа с нулем впереди для цифр меньше десяти (01, 02, 03,…).
georgianТрадиционная грузинская нумерация.
lower-alphaСтрочные латинские буквы (a, b, c, d,…).
lower-greekСтрочные греческие буквы (α, β, γ, δ,…).
lower-latinЭто значение аналогично lower-alpha.
lower-romanРимские числа в нижнем регистре (i, ii, iii, iv, v,…).
upper-alphaЗаглавные латинские буквы (A, B, C, D,…).
upper-latinЭто значение аналогично upper-alpha.
upper-romanРимские числа в верхнем регистре (I, II, III, IV, V,…).
noneУбирает маркеры.

Значение по умолчанию: decimal.

Пример

<ul> <li>list item</li> <li>list item</li> <li>list item</li> <li>list item</li> <li>list item</li> </ul>

ul { list-style-type: disc; }

:

Пример

<ul> <li>list item</li> <li>list item</li> <li>list item</li> <li>list item</li> <li>list item</li> </ul> ul { list-style-type: circle; }

:

Пример

<ul> <li>list item</li> <li>list item</li> <li>list item</li> <li>list item</li> <li>list item</li> </ul> ul { list-style-type: square; }

:

Пример

<ul> <li>list item</li> <li>list item</li> <li>list item</li> <li>list item</li> <li>list item</li> </ul> ul { list-style-type: none; }

:

Пример

<ol> <li>list item</li> <li>list item</li> <li>list item</li> <li>list item</li> <li>list item</li> </ol> ol { list-style-type: decimal; }

:

Пример

<ol> <li>list item</li> <li>list item</li> <li>list item</li> <li>list item</li> <li>list item</li> </ol>

ol { list-style-type: armenian; }

:

Пример

<ol> <li>list item</li> <li>list item</li> <li>list item</li> <li>list item</li> <li>list item</li> </ol> ol { list-style-type: decimal-leading-zero; }

:

Пример

<ol> <li>list item</li> <li>list item</li> <li>list item</li> <li>list item</li> <li>list item</li> </ol> ol { list-style-type: georgian; }

:

Пример

<ol> <li>list item</li> <li>list item</li> <li>list item</li> <li>list item</li> <li>list item</li> </ol>

ol { list-style-type: lower-alpha; }

:

Пример

<ol> <li>list item</li> <li>list item</li> <li>list item</li> <li>list item</li> <li>list item</li> </ol> ol { list-style-type: lower-greek; }

:

Пример

<ol> <li>list item</li> <li>list item</li> <li>list item</li> <li>list item</li> <li>list item</li> </ol> ol { list-style-type: lower-latin; }

:

Пример

<ol> <li>list item</li> <li>list item</li> <li>list item</li> <li>list item</li> <li>list item</li> </ol>

ol { list-style-type: lower-roman; }

:

Пример

<ol> <li>list item</li> <li>list item</li> <li>list item</li> <li>list item</li> <li>list item</li> </ol> ol { list-style-type: upper-alpha; }

:

Пример

<ol> <li>list item</li> <li>list item</li> <li>list item</li> <li>list item</li> <li>list item</li> </ol> ol { list-style-type: upper-roman; }

:

Пример

Данный пример показывает, что свойство color влияет не только на цвет текста, но и на цвет маркеров:

<ul> <li>list item</li> <li>list item</li> <li>list item</li> <li>list item</li> <li>list item</li> </ul> ul { list-style-type: disc; color: red; }

:

Смотрите также

  • свойство list-style-image,
    которое задает маркеры в виде заданных картинок
  • свойство list-style-position,
    которое задает позицию маркеров
  • свойство list-style-style,
    которое является сокращением для маркеров
  • свойство list-style-type,
    которое задает тип маркеров списка

CSS list-style-type



Пример

Задайте различные стили списков:

ul.a {list-style-type: circle;}

ul.b {list-style-type: square;}
ol.c {list-style-type: upper-roman;}
ol.d {list-style-type: lower-alpha;}

Подробнее примеры ниже.

Определение и использование

list-style-type указывает тип маркера элемента списка в списке.

Значение по умолчанию:disc
Inherited:yes
Animatable:no. Читайте о animatable
Version:CSS1
JavaScript syntax: object.style.listStyleType=»square»

Поддержка браузера

Номера в таблице указывают первую версию браузера, которая полностью поддерживает свойство.

Свойство
list-style-type1.04.01.01.03.5

Примечание: Internet Explorer/EDGE и Opera 12 и более ранние версии не поддерживают значения: CJK-иероглифические, иврит, хирагана, хирагана-Iroha, катакана и катакана-Iroha.

Синтаксис CSS

Значения свойств

ЗначениеОписание
discЗначение по умолчанию. Маркер представляет собой заполненную окружность
armenianМаркер-традиционная армянская нумерация
circleМаркер-это окружность
cjk-ideographicМаркер-простые иероглифические числа
decimalМаркер — это число
decimal-leading-zeroМаркер-это число с ведущими нулями (01, 02, 03 и т.д.)
georgianМаркер-традиционная грузинская нумерация
hebrewМаркер традиционный иврит нумерации
hiraganaМаркер является традиционным хирагана нумерации
hiragana-irohaМаркер является традиционным хирагана Iroha нумерации
katakanaМаркер является традиционным катакана нумерации
katakana-irohaМаркер является традиционным катакана Iroha нумерации
lower-alphaМаркер ниже-альфа (a, b, c, d, e и т.д.)
lower-greekМаркер ниже-Греческий
lower-latinМаркер ниже латинского (a, b, c, d, e и т.д.)
lower-romanМаркер нижний-римский (i, II, III, IV, v и т.д.)
noneМаркер не отображается
squareМаркер-это квадрат
upper-alphaМаркер верхнего альфа (a, B, C, D, E и т.д.)
upper-greekМаркер верхний-Греческий
upper-latinМаркер верхнего латинского (a, B, C, D, E и т.д.)
upper-romanМаркер верхний-римский (i, II, III, IV, V и т.д.)
initialПрисваивает этому свойству значение по умолчанию. (Читайте о initial)
inheritНаследует это свойство из родительского элемента. (Читайте о inherit)

Другие примеры

Пример

В этом примере демонстрируются все различные маркеры элементов списка:

ul.a {list-style-type: circle;}
ul.b {list-style-type: disc;}
ul.c {list-style-type: square;}

ol.d {list-style-type: armenian;}
ol.e {list-style-type: cjk-ideographic;}
ol.f {list-style-type: decimal;}
ol.g {list-style-type: decimal-leading-zero;}
ol.h {list-style-type: georgian;}
ol.i {list-style-type: hebrew;}
ol.j {list-style-type: hiragana;}
ol.k {list-style-type: hiragana-iroha;}
ol.l {list-style-type: katakana;}
ol.m {list-style-type: katakana-iroha;}
ol.n {list-style-type: lower-alpha;}
ol.o {list-style-type: lower-greek;}
ol.p {list-style-type: lower-latin;}
ol.q {list-style-type: lower-roman;}
ol.r {list-style-type: upper-alpha;}
ol.s {list-style-type: upper-greek;}
ol.t {list-style-type: upper-latin;}
ol.u {list-style-type: upper-roman;}
ol.v {list-style-type: none;}
ol.w {list-style-type: inherit;}

Пример

Добавление цветов маркеров для <ul> или <ol> путем удаления их маркеров по умолчанию и добавления сущности HTML, которая выглядит как маркеры (& Bull;):

ul {
    list-style: none; /* Remove list bullets */
    padding: 0;
    margin: 0;
}

li {
    padding-left: 16px;
}

li:before {
    content: «•»; /* Insert content that looks like bullets */
    padding-right: 8px;
    color: blue; /* Or a color you prefer */
}

Похожие страницы

CSS Справочник: CSS List

CSS Справка: list-style Свойство

HTML DOM Справочник: listStyleType Свойство


Списки

Список является простейшим способом группирования однородных элементов.

Списки бывают:

  1. нумерованные
  2. маркированные
  3. списки определений

Нумерованные списки

Заключаются в теги <ol></ol>.

Сторки списка выводятся в теге <li> (как в нумерованных, так и маркированных)

<!--- маркированный список --->
<ol>
  <li>Нумерованный</li>
  <li>Маркированный</li>
  <li>Списки определений</li>
</ol> 
 

Тег ol может применяться с атрибутом start="значение", тогда нумерация списка будет начинаться с заданного значения.

Если необходимо изменить номер определенного элемента списка и следующих за ним элементов, то тег li применяют с атрибутом value="значение".

Можно задавать стиль отображения упорядоченного списка, задавая средствами CSS то или иное значение свойству list-style-type Его можно применять как ко всему списку, так и к отдельным пунктам li. На практике допускается использование вместо него универсального свойства list-style.

<!--- атрибуты start, value и стиль отображения списка --->
<ol start="4">
  <li>Нумерация начинается с 4</li>
  <li value="8">Меняем номер на 8</li>
  <li>Последующие номера меняются автоматически</li>
</ol> 
 
  1. Нумерация начинается с 4
  2. Меняем номер на 8
  3. Последующие номера меняются автоматически

Наиболее часто используемые значения свойства list-style-type:

decimal — обычные числа (по умолчанию)
upper-alpha — заглавные латинские буквы
lower-alpha — строчные латинские буквы
upper-roman — римские числа

×

Внимание!

Маркеры нумерованных списков выравниваются по правому краю! Поэтому, при достаточно больших числах (например 1802 или XXVII) маркер смещается влево и может выйти за пределы родительского блока!

Это решается установкой большего левого отступа для тега ol.

Маркированные списки

Заключаются между тегами <ul></ul>

<!--- неупорядоченный список --->
<ul>
  <li>пункт 1</li>
  <li>пункт 2</li>
  <li>пункт 3</li>
</ul> 
 

Обычный маркированный список, внешний вид которого определяется значениями по умолчанию Вашего браузера

  • пункт 1
  • пункт 2
  • пункт 3

Вы можете изменить вид маркеров как всего списка, так и отдельных пунктов с помощью свойства list-style-type:

circle — кружок
disc — жирная точка
square — квадрат
none — без маркера

×

Интересная особенность

Точно так-же значение none можно присвоить свойству list-style-type: none тега ol

Более того! Нумерованный и маркированный списки отличаются только значением этого свойства! 

ul {list-sytle-type: decimal;} = ol Результат будет идентичным!

Для добавления своих маркеров используют свойство list-style-image,  но пользуются им редко, потому что сложно позиционировать изображение маркера. Легче в качестве маркера использовать фоновое изображение для тегов li.

Списки определений

Заключаются между тегами <dl> и </dl>. Применяются для создания словарей, списков терминов и т.п.

<!--- список определений --->
<dl>
  <dt>Термин</dt>
    <dd>Описание...</dd>
  <dt>Термин</dt>
    <dd>Описание...</dd>
</dl> 
 
Термин
Описание…
Термин
Описание…

Список по центру

Автоматически центрировать список вне зависимости от длины строк достаточно просто

/* -- Стиль CSS --*/
div.center_list{
  text-align: center;
}
div.center_list > ul {
  display: inline-block;
  text-align: left;
  max-width: 70% /* не обязательно */
}
  • пункт списка 1
  • пункт списка 2 большей длины
  • пункт 3

Минус данного способа в необходимости дополнительной разметки — список должен быть заключен в содержащий контейнер, которому присвоен класс div.center_list.

Горизонтальный список

Иногда, например при использовании списка в качестве меню, нужно расположить элементы списка в строку.

Вариант 1. Сделать элементы списка строчными

/*-- CSS. Строчный вариант --*/
 
li {
  display:inline;
  padding:0 10px;
}

Получаем список такого вида:

  • элемент списка 1
  • элемент списка 2
  • элемент списка 3

Вариант 2. Сделать элементы списка плавающими

/*-- CSS. Плавающий вариант --*/
 
ul {
  list-style: none; /* убираем маркеры, если нужно */
}
li {
  float: left; /* для выравнивания по правому краю - right */
  padding: 0 10px;
}

Получаем такой же список:

  • элемент списка 1
  • элемент списка 2
  • элемент списка 3

На практике, в частности при создании меню на основе списка, чаще используется второй вариант.

Плавающий список

Заголовок не совсем точен; речь идет о списке, обтекающем плавающий элемент.

И опять возвращаемся к плавающим элементам. Два понятия — «плавающий элемент» и «обтекание». Необходимо четко представлять что это такое, что где плавает и что обтекает:

Плавает элемент, у которого свойству float присвоено
значение left или right.

И плавает у соответствующей кромки содержащего блока или прижимается соответствующей кромкой к другому плавающему элементу.

Следующие за ним, обычные блоки никого не обтекают! Они «тупо» не видят плавающий блок….

Подлость происходящего в том и состоит, что обтекает только текст (строчные элементы и элементы с установленным свойством display: inline или display: inline-block!

Когда-то изначально свойство float именно для этого и было придумано!

Все неприятности — от маркеров, которые не являются строчными элементами, и часто происходит следующее:

плавающий блок

  • пункт 1
  • пункт 2

Наверняка, многие тщетно пытались вытащить маркер из под плавающего блока, увеличивая margin и padding …

Попытка увеличить правый отступ плавающего элемента выглядела бы более успешно, если бы не параграфы.

Вот как это может выглядеть:

плавающий блок
margin-right: 25px

Параграф до списка

  • пункт 1
  • пункт 2

Параграф после списка

Согласитесь, не очень красиво.

Решение
/*-- CSS --*/
/*-- Cтиль, установленный по умолчанию --*/
ul {
  margin: 0 0 10px 25px;
}
/*-- Переопределяем стили --*/
ul {
  margin: 0 0 10px 10px;
  padding-left: 15px;
  overflow: hidden;
}

В результате получаем:

плавающий блок

Параграф до списка

  • пункт 1
  • пункт 2

Параграф после списка

Особенности применения

Чтобы оставить отступ обычных, не обтекающих списков неизменным, мы уменьшили margin и увеличили padding на одинаковую величину. Отступ маркера от начала текста равен размеру шрифта (14px), и padding должен быть больше этой величины, иначе маркер обрежет.

Мы определили свойства для тега ul. Т.е. для всех списков на сайте. Это не очень хорошо, так-как overfow: hidden, в некоторых случаях, может оказаться не безобидным. Поэтому нужно выбрать один из способов использования данного метода:

1. Если обтекающий список — редкое исключение:

Добавляем конкретным тегам ul класс, например ul.folat_list, и прописываем свойства уже для класса.

2. Обратная ситуация, когда свойство необходимо присвоить только спискам без класса:

Используем следующую конструкцию (только для соврменных браузеров, поддерживающих CSS3)

/*-- CSS --*/
/*-- Для "деклассированных" списков --*/
ul:not([class])  {
  margin: 0 0 10px 10px;
  padding-left: 15px;
  overflow: hidden;
}

Для всех остальных списков, с установленным значением атрибута class, будут применяться стили по умолчанию.

| Справочник HTML

Элемент <ul> (от англ. «unordered list» ‒ «неупорядоченный список») создаёт маркированный (неупорядоченный) список. Как правило, элемент <ul> применяется для создания таких списков, где изменение порядка следования пунктов этого списка существенно не меняет смысл списка.

Тег <ul> относится к блочным элементам, поэтому он будет занимать всю доступную ему ширину, а размер высоты будет зависеть от количества содержимого.

Пункты для нумерованных списков определяются с помощью тега <li>, который, помимо текста, может включать в себя другие HTML-элементы (списки, изображения, заголовки, абзацы и др.). По умолчанию, маркированные списки отображаются на веб-странице в виде списка, начинающегося с маленького чёрного круга. Браузеры при отображении элементов списка добавляют небольшой отступ от левого края.

Примечание: Если к <ul> применяется CSS свойство, то элементы <li> наследуют эти свойства.

Совет: Для изменения типа маркера используйте CSS свойство list-style-type или свойство list-style-image, позволяющее заменять маркеры на изображения. Для создания нумерованных списков используйте тег <ol>.

Синтаксис

<ul>
  ...
  <li> ... </li>
  ...
</ul>

Закрывающий тег

Обязателен.

Атрибуты

compactУстарел в HTML5
Сокращает отступы и расстояния между строками.
typeHTML5
Устанавливает вид маркера списка.

Для этого элемента доступны глобальные атрибуты и события.

Стилизация по умолчанию

Большинство браузеров отобразит элемент <ul> со следующими значениями CSS по умолчанию:

ul { 
    display: block;
    list-style-type: disc;
    margin-top: 1em;
    margin-bottom: 1 em;
    margin-left: 0;
    margin-right: 0;
    padding-left: 40px;
}

Различия между HTML 4.01 и HTML5

Атрибуты compact и type не поддерживаются в HTML5.

Пример использования:

Неупорядоченный HTML список:

Спецификации

Поддержка браузерами

Элемент
<ul> 1+ 1+ 1+ 1+ 1+ 1+
Элемент
<ul> 1+ 1+ 6+ 1+

Попробуйте сами — Примеры

Как сделать, чтобы список начинался с номера, отличного от 1:
Применение атрибутов type и start

Как изменить номер данного элемента списка:
Применение атрибута value

Как использовать стили для получения списка, пункты которого пронумерованы римскими цифрами:
Применение свойства CSS list-style-type

Как создать вложенные списки:
Вложенные списки

Учебник HTML

HTML уроки: HTML Списки

HTML Элементы


CSS маркер списка

Списки на html страницах по умолчанию выводятся с маркерами, которые задаются параметрами «disc» для тега <ul> и «decimal» для тега <ol>.

Удаление маркеров списка


HTML

<div>
	<ul>
		<li>список без маркеров</li>
		<li>немаркированный список</li>
		<li>убрать маркеры</li>
	</ul>
</div>



CSS

.list-none li {
	list-style-type: none;
	margin-left: 48px;
}

Большие латинские буквы


HTML

<div>
	<ul>
		<li>прописные латинские буквы</li>
		<li>большие латинские буквы</li>
		<li>маркировка прописными латинскими буквами</li>
	</ul>
</div>



CSS

.big-latin li {
	list-style-type: upper-alpha;
	margin-left: 48px;
}

Маленькие латинские буквы


HTML

<div>
	<ul>
		<li>строчные латинские буквы</li>
		<li>маленькие латинские буквы</li>
		<li>маркировка строчными латинскими буквами</li>
	</ul>
</div>



CSS

.small-latin li {
	list-style-type: lower-alpha;
	margin-left: 48px;
}

Маленькие греческие буквы


HTML

<div>
	<ul>
		<li>строчные греческие буквы</li>
		<li>маленькие греческие буквы</li>
		<li>маркировка строчными греческими буквами</li>
	</ul>
</div>



CSS

.small-greek li {
	list-style-type: lower-greek;
	margin-left: 48px;
}

Большие римские числа


HTML

<div>
	<ol>
		<li>прописные римские числа</li>
		<li>большие римские числа</li>
		<li>маркировка прописными римскими числами</li>
	</ol>
</div>



CSS

.big-roman li {
	list-style-type: upper-roman;
	margin-left: 48px;
}

Маленькие римские числа


HTML

<div>
	<ol>
		<li>строчные римские числа</li>
		<li>маленькие римские числа</li>
		<li>маркировка строчными римскими числами</li>
	</ol>
</div>



CSS

.small-roman li {
	list-style-type: lower-roman;
	margin-left: 48px;
}

Нумерованный список

list-style-position — CSS: каскадные таблицы стилей

Свойство CSS list-style-position устанавливает положение :: marker относительно элемента списка.

Часто удобнее использовать сокращенное обозначение в виде списка .

Примечание: Это свойство применяется к элементам списка, т. Е. Элементам с display : list-item; . По умолчанию это

  • элементов.Поскольку это свойство наследуется, его можно установить для родительского элемента (обычно
      или

    • Промывка

    Добавьте .list-group-flush для удаления некоторых границ и закругленных углов для рендеринга элементов группы списков от края до края в родительском контейнере (например, в карточках).

    • Cras justo odio
    • Dapibus ac facilisis in
    • Морби лев рис
    • Porta ac Concectetur AC
    • Вестибулум на эросе
      
      
  
    •  Cras justo odio 
      • 
  
    •  Dapibus ac facilisis в 
      • 
  
    •  Morbi leo risus 
      • 
  
    •  Porta ac Concectetur AC 
      • 
  
    •  Вестибулум на Эросе. 
      •

    Контекстные классы

    Используйте контекстные классы для стилизации элементов списка с фоном и цветом с отслеживанием состояния.

    • Dapibus ac facilisis in
    • Это основной элемент группы списка
    • Это дополнительный элемент группы списка
    • Это элемент группы успешного списка
    • Это элемент группы списка опасностей
    • Это элемент группы списка предупреждений
    • Это элемент группы информационного списка
    • Это элемент группы светового списка
    • Это элемент группы темного списка
      
      
  
    •  Dapibus ac facilisis в 
      • 

  
  
    •  Это основной элемент группы списка. 
      • 
  
    •  Это дополнительный элемент группы списка. 
      • 
  
    •  Это элемент группы успешного списка. 
      • 
  
    •  Это элемент группы списка опасностей. 
      • 
  
    •  Это элемент группы списка предупреждений. 
      • 
  
    •  Это элемент группы информационного списка. 
      • 
  
    •  Это элемент группы облегченного списка. 
      • 
  
    •  Это элемент группы темного списка. 
      •

    Контекстные классы также работают с .список-группа-элемент-действие . Обратите внимание на добавление стилей наведения, которых не было в предыдущем примере. Также поддерживается состояние .active ; примените его, чтобы указать активный выбор в элементе группы контекстного списка.
    Передача смысла вспомогательным технологиям

    Использование цвета для добавления смысла обеспечивает только визуальную индикацию, которая не будет передана пользователям вспомогательных технологий, таких как программы чтения с экрана.Убедитесь, что информация, обозначенная цветом, либо очевидна из самого содержимого (например, видимый текст), либо включена с помощью альтернативных средств, таких как дополнительный текст, скрытый с помощью класса .sr-only .

    со значками

    Добавьте значки к любому элементу группы списка, чтобы отображать количество непрочитанных сообщений, активность и многое другое с помощью некоторых утилит.

    • Cras Justo Odio 14
    • Dapibus ac facilisis в 2
    • Morbi leo risus 1
      
      
  
    • 
    Cras Justo Odio
     14 
  
      • 
  
    • 
    Dapibus ac facilisis в
     2 
  
      • 
  
    • 
    Morbi leo risus
     1 
  
      •

    Пользовательский контент

    Добавьте практически любой HTML-код, даже для групп связанных списков, подобных приведенной ниже, с помощью утилит flexbox.

    Поведение JavaScript

    Используйте подключаемый модуль JavaScript вкладки - включите его индивидуально или через скомпилированный загрузчик .js - чтобы расширить нашу группу списков для создания вкладок локального содержимого.

    Velit aute mollit ipsum ad dolor conctetur nulla officia culpa adipisicing упражнения fugiat tempor. Voluptate deserunt sit sunt nisi aliqua fugiat proident ea ut. Mollit voluptate PRPRESSENDERIT occaecat nisi ad non Minimum tempor sunt Voluptate Conctetur Exercise id ut nulla. Ea et fugiat aliquip nostrud sunt incididunt conctetur culpa aliquip eiusmod dolor.Anim ad Lorem aliqua in cupidatat nisi enim eu nostrud do aliquip veniam minim.

    Cupidatat quis ad sint excepteur Laborum in esse qui. Et excepteur conctetur ex nisi eu do cillum ad Laborum. Mollit et eu officia dolore sunt Lorem culpa qui normo velit ex amet id ex. Officia anim incididunt labouris deserunt anim aute dolor incididunt veniam aute dolore делать упражнения. Dolor nisi culpa ex ad irure in elit eu dolore. Ad labouris ipsum correhenderit irure noncommodo enim culpa communiam incididunt veniam ad.

    Выполнение упражнений pariatur aliquip aliqua aliquip do nostrud Commodo Prerehenderit aute ipsum voluptate. Irure Lorem et labouris nostrud amet cupidatat cupidatat anim do ut velit mollit consquat enim tempor. Consectetur est minim nostrud nostrudconctetur irure labore voluptate irure. Ipsum id Lorem sit sint voluptate est pariatur eu ad cupidatat et deserunt culpa sit eiusmod deserunt. Consectetur et fugiat anim do eiusmod aliquip nulla Laborum elit adipisicing pariatur cillum.

    Irure enim occaecat labore sit qui aliquip REPREHENDERIT Amet velit. Deserunt ullamco ex elit nostrud ut dolore nisi officia magna sit occaecat labouris sunt dolor. Nisi eu minim cillum occaecat aute est cupidatat aliqua labore aute occaecat ea aliquip sunt amet. Aute mollit dolor ut упражнение iruremodo non amet conctetur quis amet culpa. Quis ullamco nisi amet qui aute irure eu. Magna labore dolor quis ex labore id nostrud deserunt dolor eiusmod eu pariatur culpa mollit in irure.

    Использование атрибутов данных

    Вы можете активировать навигацию по группе списков без написания кода JavaScript, просто указав data-toggle = "list" или в элементе.Используйте эти атрибуты данных в .list-group-item .

      




    
  
    ... 
    
  
     ... 
    
  
     ... 
    
  
     ...

    Через JavaScript

    Включить элемент списка с вкладками через JavaScript (каждый элемент списка необходимо активировать индивидуально):

      $ ('# myList a'). On ('щелчок', функция (e) {
  e.preventDefault ()
  $ (это) .tab ('показать')
})

    Активировать отдельный элемент списка можно несколькими способами:

      $ ('# myList a [href = "# profile"]').tab ('show') // Выбираем вкладку по имени
$ ('# myList a: first-child'). tab ('show') // Выбрать первую вкладку
$ ('# myList a: last-child'). tab ('show') // Выбрать последнюю вкладку
$ ('# myList a: nth-child (3)'). tab ('show') // Выбрать третью вкладку

    Эффект затухания

    Чтобы панель вкладок постепенно увеличивалась, добавьте .fade к каждой .tab-pane . На первой панели вкладок также должно быть указано .show , чтобы исходное содержимое было видимым.

      
    
  
     ... 
    
  
    ... 
    
  
     ... 
    
  
     ...

    Методы

    $ (). Вкладка

    Активирует элемент элемента списка и контейнер содержимого. Вкладка должна иметь либо data-target , либо href , нацеленный на узел контейнера в DOM.

      


    
  
    ... 
    
  
     ... 
    
  
     ... 
    
  
     ... 
    

    

<сценарий>
  $ (function () {
    $ ('# myList a: last-child'). tab ('показать')
  })
    .tab ("показать")

    Выбирает указанный элемент списка и показывает связанную с ним панель. Любой другой элемент списка, который был ранее выбран, становится невыделенным, а связанная с ним панель скрывается. Возврат к вызывающему абоненту до фактического отображения панели вкладок (например, до отображения .bs.tab ).

      $ ('# someListItem'). Tab ('show')

    События

    При отображении новой вкладки события запускаются в следующем порядке:

    1. hide.bs.tab (на текущей активной вкладке)
    2. show.bs.tab (на вкладке для показа)
    3. hidden.bs.tab (на предыдущей активной вкладке такая же, как для события hide.bs.tab )
      4. Показано
    4. .bs.tab (на недавно активированной только что показанной вкладке та же, что и для показа .bs.tab событие)

    Если ни одна вкладка еще не была активной, события hide.bs.tab и hidden.bs.tab запускаться не будут.

    Показано
    Тип события Описание
    показать.bs.tab Это событие запускается при отображении вкладок, но до отображения новой вкладки. Используйте event.target и event.relatedTarget для таргетинга на активную вкладку и предыдущую активную вкладку (если таковая имеется) соответственно.
    .bs.tab Это событие запускается при отображении вкладок после того, как вкладка была показана. Используйте event.target и event.relatedTarget для таргетинга на активную вкладку и предыдущую активную вкладку (если таковая имеется) соответственно.
    hide.bs.tab Это событие возникает, когда должна быть показана новая вкладка (и, следовательно, предыдущая активная вкладка должна быть скрыта). Используйте event.

    Добавить комментарий

    Ваш адрес email не будет опубликован. Обязательные поля помечены *