Bootstrap, из Twitter, является самой популярной фронтальной структурой в настоящее время. Bootstrap основан на HTML, CSS и JavaScript. Это просто и гибко, что делает веб -разработку быстрее.
Группы списков - это гибкие и мощные компоненты, которые могут использоваться не только для отображения простого набора элементов, но и для сложного индивидуального контента. Группа списка может использоваться для создания списков списков, вертикальной навигации и других эффектов, а также может создавать более красивые компоненты с другими компонентами. Группа списка также является независимым компонентом в рамках начальной загрузки, поэтому она также имеет свой собственный независимый исходный код:
Меньше: List-group.less
Sass: _list-group.scss
Группа списка выглядит так, будто элементы списка символов списка удаляются, и они оснащены некоторыми конкретными стилями. Основная группа списков в платформе начальной загрузки в основном включает в себя две части:
Список группы: контейнер группы, обычно используется элемент UL, или он может быть элемент OL или DIV
Список группы-элемент: список, обычно используемый элемент LI, или он может быть элементом Div
Для базовой группы списков нет слишком большого количества настройки стиля, а расстояние между расстоянием, границами и округлыми углами в основном установлены;
.list-group {padding-left: 0; Margin-Bottom: 20px;}. List-Group-item {позиция: относительно; дисплей: блок; падки: 10px 15px; margin-bottom: -1px; фоновый цвет: #fff; граница: 1px solid #ddd;}. списка-item: first-child {border-radium 4px; граница-вершина-Radight-Radius: 4px;}. List-Group-item: последний ребенок {Margin-Bottom: 0; граница-бот-прайт-Radius: 4px; пограничный-дюйм-левый радий: 4px;}Давайте посмотрим на пример:
<h1> Основная группа списков </h1> <ul> <li> Тушеное картофельное рис </li> <li> Престная жареная куриная лапша </li> <li> Corilla Chop Egg Tofu </li> <li> Жареная лошадь в голландских бобах </li> <li> Ribs Hawthorn </li> <li> жареные реки с чистками </li> </ur> </ur> </ur> </ur> </ur> </ur> <li> hawthorn rits </li> <li> жареные подходы </li> <li>
Список группы со значками
Группа списка со значками на самом деле является эффектом объединения компонента значка и базового компонента списка в платформе начальной загрузки. Конкретный метод очень прост. Просто добавьте компонент значка «значок» в.
Принцип реализации:
Конечно, установите правый поплавок для значка, если два значка появляются в элементе списка одновременно, также установлено расстояние между ними.
.list-group-item> .badge {float: right;}. List-group-item> .badge + .badge {margin-right: 5px;}пример:
<h1> Группа списка со значком </h1> <ul> <li> <pan> 13 </span> рис с беконом и картофелем </li> <li> <pan> 20 </span> острый аромат жареные куриные наггеты </li> <li> <ppan> 12 </span> grilla -in ogget </li> <li> <pap>. Бобы </li> <li> <pan> 8 </span> Ribs Hawthorn </li> <li> <pan> 15 </span> Fried River Shrimp в луке </li> </ul>
Список группы со ссылками
Группа списка с подключениями фактически означает, что каждый элемент списка имеет эффект ссылки. Обычно люди думают, чтобы добавить ссылки на текст элемента списка на основе основной группы списков, например:
<ul> <li> <a href = "#"> BAO свиная тушеный рис </a> </li> <li> <a href = "#"> острые жареные куриные наггеты </a> </li> <li> <a href = "#"> Perfice in in in in in lighe in in ginese in in grill Бобы </a> </li> <li> <a href = "#"> Ribs Hawthorn </a> </li> <li> <a href = "#"> Fried River Crimp в луке </a> </li> </ul>
Эффекты следующие:
В этом есть недостаток, то есть область щелчка ссылки действительна только в тексте; Но часто я надеюсь, что любая область элемента списка может быть нажатием, поэтому мне нужно добавить дополнительный стиль на метку ссылки: дисплей: блок; Но в рамках начальной загрузки все еще используется другой метод реализации, который должен заменить группу ul.list на группу div.list и li.list-group-item с A.List-Group-item, так что можно достичь желаемого эффекта.
Принцип реализации:
Если вы используете A.List-Group-ITEM, необходимо обработать стиль, например: удалить текст подчеркивает, увеличивает эффект подвески и т. Д.; Ниже приведен исходный код CSS:
a.list-group-item {color: #555;} a.list-group-item .list-group-item-gheading {color: #333;} a.list-group-item: Hover, A.List-Group-item: Focus {Color: #555; текстовое декорация: нет; фоновый цвет: #f5f5f5;}Использование групп списков ссылок:
<h1> Группа списка со ссылками </h1> <ul> <a href = "#"> baised с беконом и картофельным рисом </a> <a href = "#"> острые жареные куриные самородки </a> <a href = "#"> Corilla Peell Egg Tofu </a> <A href = "#" href = "#"> Ribs Hawthorn </a> <a href = "#"> Fried River Crimp с луком -пореем </a> </ul>
Эффекты следующие:
Пользовательская группа
Структура начальной загрузки добавляет два стиля в группу списков ссылок:
.list Group-item Heading: используется для определения стиля заголовка элемента списка
.List Group-item-Text: используется для определения основного содержания элемента списка
Самая большая функция этих двух стилей - помочь разработчикам настроить контент в элементе списка
Принцип реализации:
Эти два стиля в основном контролируют цвет текста в несовместимом состоянии. Ниже приведен исходный код CSS:
a.list-group-item.list-group-item-gheading {color: #333;}. List-group-item.disabled .list-group-item-gheading, .list-group-item.disabled: hover .list-item-item-gheading, .list-item.disabled: focus .list-gup-head-head-head-head-head-ghe-haud-gain-gain-gupd-gainsdistem-gabroup-item. .list-group-item-text, .list-group-item.disabled: focus .list-group-item-text {color: #777;}. .LIST-GROUP-ITEM-HEARING> Small, .List Group-item.active: Hover .list-Group-Item-Heading> Small, .list-Group-item.active: Focus .list-Group-item-Heading> Small, stist-item-item.active .list-roup-item-gheading> .small, .list-roup-item.-item. .small, .list-group-item.active: Focus .list-group-item-heading> .small {color: inherit;}. List-group-item.active .list-group-item-текст,. #e1edf7;}. List-group-item-heading {margin-top: 0; margin-bottom: 5px;}. List-group-item-text {margin-bottom: 0; line-hight: 1.3;}Использование пользовательских групп списков
<h1>Custom list group</h1><ul><a><h4>List 1 title</h4><p>List 1 content list 1 content list 1 content list 1 content list 1 content list 1 content list 1 content list 1 content list 1 content list 1 content list 1 content list 1 content list 1 content list 1 content list 1 content list 1 content list 2 content list 2 content list 2 content list 2 content list 2 content list 2 content list 2 content list 2 content list 2 content list 2 content list 2 content list 2 content list 2 content list 2 content list 2 content list 2 content list 2 content list 2 content list 2 content list 3 content list 3 content list 3 content list 3 content list 4 content list 4 content list 4 content list 4 content list 4 content list 4 content list 4 content list 4 content list 4 content list 4 content list 4 content list 4 content list 4 content list 4 content list 4 content list 4 content list 4 content list 4 content list 4 content list 4 content list 4 content list 4 content list 4 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 4 content list 4 content list 4 content list 4 content list 4 content list 4 content list 4 content list 4 content list 4 content list 4 content list 4 content list 4 content list 4 content list 4 content list 4 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 Content list 4 Content list 4 Content list 4 Content list 4 Content list 4 Content list 4 Content list 4 Content list 4 Content list 4 Content list 4 Content list 4 Content list 4 Content list 4 Content list 4 Content list 4 Content list 4 Content list 4 Content list 5 Content list 5 Content list 5 Content list 5 Content list 5 Content list 5 Content list 5 Content list 5 Content list 5 Content list 5 Content list 5 Content list 5 Content list 5 Content list 5 Content list 5 Content list 5 Content list 5 Content list 5 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content Список 6 Список контента 6 Список контента 6 Список контента 6 Список контента 6 Список контента 6 Список контента 6 Список контента 6 Список контента 6 Список контента 6 Список контента 6 Список контента 6 Список контента 6 Список контента 6 Список контента 6 Список контента 6 Список контента 6 Список контента 6 Список контента 6 Список контента 6 Список контента 6 Список контента 6 Список контента 6 Список контента 6 Список контента.
Настройки статуса для элементов списка
Структура начальной загрузки также обеспечивает эффекты состояния для объединения элементов списков, особенно связывания групп списков. Метод реализации аналогичен компонентам, представленным выше. В группе списков вам нужно только добавить имена классов в соответствующие элементы списка:.
Принцип реализации:
С точки зрения стиля, цвет фона и текст элемента списка в основном стилизованы. Ниже приведен исходный код CSS:
.list-group-item.disabled, .list-group-item.disabled: Hover, .list-group-item.disabled: фокус {Цвет: #777; фоновый цвет: #EEE;}. #428bca; пограничный цвет: #428bca;}пример:
<h1>List group status settings</h1><ul><a><h4>List 1 title</h4><p>List 1 content list 1 content list 1 content list 1 content list 1 content list 1 content list 1 content list 1 content list 1 content list 1 content list 1 content list 1 content list 1 content list 1 content list 1 content list 1 content list 1 content list 2 content list 2 content list 2 content list 2 content list 2 content list 2 content list 2 content list 2 content list 2 content list 2 content list 2 content list 2 content list 2 content list 2 content list 2 content list 2 content list 2 content list 2 content list 2 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 4 content list 4 content list 4 content list 4 content list 4 content list 4 content list 4 content list 4 content list 4 content list 4 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 4 content list 4 content list 4 content list 4 content list 4 content list 4 content list 4 content list 4 content list 4 content list 4 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 4 content list 4 content list 4 content list 4 content list 4 4 Content list 4 Content list 4 Content list 4 Content list 4 Content list 4 Content list 4 Content list 4 Content list 4 Content list 4 Content list 4 Content list 4 Content list 4 Content list 4 Content list 4 Content list 4 Content list 4 Content list 4 Content list 5 Content list 5 Content list 5 Content list 5 Content list 5 Content list 5 Content list 5 Content list 5 Content list 5 Content list 5 Content list 5 Content list 5 Content list 5 Content list 5 Content list 5 Content list 5 Content list 5 Content list 5 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content Список 6 Список контента 6 Список контента 6 Список контента 6 Список контента 6 Список контента 6 Список контента 6 Список контента 6 Список контента 6 Список контента 6 Список контента 6 Список контента 6 Список контента 6 Список контента 6 Список контента 6 Список контента 6 Список контента 6 Список контента 6 Список контента 6 Список контента 6 Список контента 6 Список контента 6 Список контента 6 Список контента 6 Список контента 6 Контент.
Эффект заключается в следующем (третий элемент списка отключен. На ней есть значок отключения, когда мышь перемещается. Вот прямой скриншот, и этот эффект не видно):
Красочная группа списков
Компонент группы списка такой же, как и предупреждающий компонент. Bootstrap предоставляет разные цвета фоновых цветов и цвета текста для разных состояний. Вы можете использовать эти имена классов для определения элементов списка с разными цветами фона:
.list-Group-item-Success: успех зеленый (цвет фона) .List Group-item-info: Информация Blue (цвет фона). Список группы
Принцип реализации:
Эти имена классов только изменяют цвет фона и цвет текста, а соответствующий исходный код следующим образом:
.list-group-item-success {color: #3c763d; фоновый цвет: #dff0d8;} a.list-group-item-success {color: #3c763d;} a.list-item-item-success .list-item-heading {color: Унаследовать;} a.list-group-item-success: hover, a.list-group-item-success: focus {color: #3c763d; фоновый цвет: #d0e9c6;} a.list-group-item-success.active, a.list-group-item-success.active: hover, hover, a.list-group-tem-success.comactor.fcure. #3C763D; пограничный цвет: #3C763D;}Для других кодов стилей состояния, пожалуйста, проверьте файл исходного кода. Если вы хотите добавить цвет фона в элемент списка, просто добавьте соответствующее имя класса в класс.
Использование красочных групп списков:
<h1> Красочная группа списков </h1> <ul> <a href = "#"> List Item1 <pan> 10 </span> </a> <a href = "#"> List emit1 <pan> 10 </span> </a> <a href = "#"> item1 <pan> 10 </span> </a> <a href = "#"> list1 <pan> 10 </span> </a> <a href = "#"> 10 <pan> 10 <span> </a> <a href = "#". href = "#"> list item1 <pan> 10 </span> </a> </ul>
Эффекты следующие: