Eine eingehende Analyse der Bootstrap-Listengruppenkomponente

Bootstrap von Twitter ist derzeit das beliebteste Frontend-Framework. Bootstrap basiert auf HTML, CSS und JAVASCRIPT. Es ist einfach und flexibel und beschleunigt die Webentwicklung.

Listengruppe ist eine flexible und leistungsstarke Komponente, die nicht nur zum Anzeigen eines einfachen Satzes von Elementen, sondern auch für komplexe benutzerdefinierte Inhalte verwendet werden kann. Die Listengruppe kann zum Erstellen von Listenlisten, zur vertikalen Navigation und anderen Effekten verwendet werden. Sie kann auch mit anderen Komponenten verwendet werden, um schönere Komponenten zu erstellen. Die Listengruppe ist auch eine unabhängige Komponente im Bootstrap-Framework. Daher verfügt es auch über einen eigenen unabhängigen Quellcode:

LESS：list-group.less
SASS:_list-group.scss

Die Listengruppe sieht aus wie ein Listenelement ohne Listensymbol und ist mit einigen spezifischen Stilen ausgestattet. Die grundlegende Listengruppe im Das Bootstrap-Framework besteht hauptsächlich aus zwei Teilen:

list-group: Listengruppencontainer, häufig verwendet wird das UL-Element, es kann auch ein OL- oder P-Element sein

list-group -item: Listenelement, häufig verwendet Es ist ein li-Element oder ein p-Element

hat nicht zu viele Stileinstellungen für die grundlegende Listengruppe vorgenommen, hauptsächlich deren Abstände, Ränder und abgerundete Ecken

.list-group {
padding-left: 0;
margin-bottom: 20px;
}
.list-group-item {
position: relative;
display: block;
padding: 10px 15px;
margin-bottom: -1px;
background-color: #fff;
border: 1px solid #ddd;
}
.list-group-item:first-child {
border-top-left-radius: 4px;
border-top-right-radius: 4px;
}
.list-group-item:last-child {
margin-bottom: 0;
border-bottom-right-radius: 4px;
border-bottom-left-radius: 4px;
}

Sehen wir uns ein Beispiel an:

基础列表组腊肉土豆焖饭香辣风味炸鸡块香菜皮蛋豆腐荷兰豆炒马蹄山楂排骨韭菜炒河虾

Listengruppe mit Abzeichen

Die Listengruppe mit Abzeichen ist eigentlich ein Effekt, der die Abzeichenkomponente und die grundlegende Listenkomponente im Bootstrap-Framework kombiniert. Die spezifische Methode ist sehr einfach. Fügen Sie sie einfach auf der Grundlage von hinzu. list-group-item Badge-Komponente „badge“

Implementierungsprinzip:

setzt ein Recht Floating für das Badge. Natürlich, wenn beides Abzeichen befinden sich gleichzeitig im selben Listenelement. Beim Erscheinen in

.list-group-item > .badge {
float: right;
}
.list-group-item > .badge + .badge {
margin-right: 5px;
}

Beispiel:

带徽章的列表组13腊肉土豆焖饭20香辣风味炸鸡块12香菜皮蛋豆腐5荷兰豆炒马蹄8山楂排骨15韭菜炒河虾

Listengruppe mit Link

Mit Link Listengruppen bedeuten eigentlich, dass jedes Listenelement einen Linkeffekt hat. Im Allgemeinen denken die Leute daran, Links zum Text der Listenelemente basierend auf der grundlegenden Listengruppe hinzuzufügen, wie zum Beispiel:

腊肉土豆焖饭香辣风味炸鸡块香菜皮蛋豆腐荷兰豆炒马蹄山楂排骨韭菜炒河虾

Der Effekt ist wie folgt:

Ein Nachteil dabei ist, dass der Klickbereich Der Link ist nur im Text gültig. Oft möchten Sie jedoch einen beliebigen Bereich des Listenelements anklickbar machen, was das Hinzufügen eines zusätzlichen Stils zum Link-Label erfordert: display: block; Bootstrap-Framework, eine andere Implementierung wird verwendet, um ul.list-group durch p.list-group und li.list-group-item durch a.list-group-item zu ersetzen, um den gewünschten Effekt zu erzielen.

Implementierungsprinzip:

Wenn Sie ein.list-group-item verwenden, erfordert der Stil eine bestimmte Verarbeitung, z. B. das Entfernen der Textunterstreichung und das Hinzufügen einer Unterbrechung Effekte usw.; das Folgende ist der CSS-Quellcode:

a.list-group-item {
color: #555;
}
a.list-group-item .list-group-item-heading {
color: #333;
}
a.list-group-item:hover,
a.list-group-item:focus {
color: #555;
text-decoration: none;
background-color: #f5f5f5;
}

Verwendung verknüpfter Listengruppen:

带链接的列表组腊肉土豆焖饭香辣风味炸鸡块香菜皮蛋豆腐荷兰豆炒马蹄山楂排骨韭菜炒河虾

Die Wirkung ist wie folgt:

Benutzerdefinierte Listengruppe

Das Bootstrap-Framework fügt zwei Stile basierend auf der verknüpften Listengruppe hinzu:

.list-group-item- Überschrift: wird verwendet, um den Kopfzeilenstil des Listenelements zu definieren

.list-group-item-text: wird verwendet, um den Hauptinhalt des Listenelements zu definieren

Die größte Rolle von Diese beiden Stile sollen Gruppenentwicklern helfen, den Inhalt in den Listenelementen anzupassen.

Implementierungsprinzip:

Diese beiden Stile steuern hauptsächlich die Status Die Textfarbe unter , das Folgende ist der CSS-Quellcode:

a.list-group-item .list-group-item-heading {
color: #333;
}
.list-group-item.disabled .list-group-item-heading,
.list-group-item.disabled:hover .list-group-item-heading,
.list-group-item.disabled:focus .list-group-item-heading {
color: inherit;
}
.list-group-item.disabled .list-group-item-text,
.list-group-item.disabled:hover .list-group-item-text,
.list-group-item.disabled:focus .list-group-item-text {
color: #777;
}
.list-group-item.active .list-group-item-heading,
.list-group-item.active:hover .list-group-item-heading,
.list-group-item.active:focus .list-group-item-heading,
.list-group-item.active .list-group-item-heading > small,
.list-group-item.active:hover .list-group-item-heading > small,
.list-group-item.active:focus .list-group-item-heading > small,
.list-group-item.active .list-group-item-heading > .small,
.list-group-item.active:hover .list-group-item-heading > .small,
.list-group-item.active:focus .list-group-item-heading > .small {
color: inherit;
}
.list-group-item.active .list-group-item-text,
.list-group-item.active:hover .list-group-item-text,
.list-group-item.active:focus .list-group-item-text {
color: #e1edf7;
}
.list-group-item-heading {
margin-top: 0;
margin-bottom: 5px;
}
.list-group-item-text {
margin-bottom: 0;
line-height: 1.3;
}

Verwendung einer benutzerdefinierten Liste Gruppe

自定义列表组列表1标题列表1内容列表1内容列表1内容列表1内容列表1内容列表1内容列表1内容列表1内容列表1内容列表2标题
列表2内容列表2内容列表2内容列表2内容列表2内容列表2内容列表2内容列表2内容列表2内容列表2内容列表2内容列表2内容
列表3标题列表3内容列表3内容列表3内容列表3内容列表3内容列表3内容列表3内容列表3内容列表3内容列表3内容列表3内容
列表3内容列表3内容列表3内容列表3内容列表3内容列表3内容列表3内容列表3内容列表4标题列表4内容列表4内容列表4内容
列表4内容列表4内容列表4内容列表4内容列表4内容列表4内容列表4内容列表4内容列表4内容列表4内容列表4内容列表4内容
列表4内容列表4内容列表4内容列表5标题列表5内容列表5内容列表5内容列表5内容列表5内容列表5内容列表5内容列表5内容
列表5内容列表5内容列表5内容列表5内容列表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内容列表6内容列表6内容列表6内容列表6内容列表6内容列表6内容

列表项的状态设置

bootstrap框架中也给组合列表项提供了状态效果，特别是链接列表组，实现方法和前面介绍的组件类似，在列表组中只需在对应的列表项中添加类名：.active(表示当前状态)、.disabled（表示禁用状态）

实现原理：

在样式上主要对列表项的背景色和文本做了样式设置，下面是css源码：

.list-group-item.disabled,
.list-group-item.disabled:hover,
.list-group-item.disabled:focus {
color: #777;
background-color: #eee;
}
.list-group-item.active,
.list-group-item.active:hover,
.list-group-item.active:focus {
z-index: 2;
color: #fff;
background-color: #428bca;
border-color: #428bca;
}

例子：

列表组状态设置列表1标题列表1内容列表1内容列表1内容列表1内容列表1内容列表1内容列表1内容列表1内容列表1内容
列表2标题列表2内容列表2内容列表2内容列表2内容列表2内容列表2内容列表2内容列表2内容列表2内容列表2内容列表2内容
列表2内容列表3标题列表3内容列表3内容列表3内容列表3内容列表3内容列表3内容列表3内容列表3内容列表3内容列表3内容
列表3内容列表3内容列表3内容列表3内容列表3内容列表3内容列表3内容列表3内容列表3内容列表4标题列表4内容列表4内容
列表4内容列表4内容列表4内容列表4内容列表4内容列表4内容列表4内容列表4内容列表4内容列表4内容列表4内容列表4内容
列表4内容列表4内容列表4内容列表4内容列表5标题列表5内容列表5内容列表5内容列表5内容列表5内容列表5内容列表5内容
列表5内容列表5内容列表5内容列表5内容列表5内容列表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内容列表6内容列表6内容列表6内容列表6内容列表6内容列表6内容

效果如下（第三个列表项是禁用状态，鼠标移放在它上面有个禁用图标，这里是直接截的图，看不到这个效果）：

多彩列表组

列表组组件和警告组件一样，bootstrap为不同的状态提供了不同的背景色和文本色，可以使用这几个类名定义不同背景色的列表项：

.list-group-item-success:成功 绿色（背景色）
.list-group-item-info:信息 蓝色（背景色）
.list-group-item-warning:警告 黄色（背景色）
.list-group-item-danger:错误 红色（背景色）

实现原理：

这几个类名仅修改了背景色和文本色，对应的源码如下：

.list-group-item-success {
color: #3c763d;
background-color: #dff0d8;
}
a.list-group-item-success {
color: #3c763d;
}
a.list-group-item-success .list-group-item-heading {
color: inherit;
}
a.list-group-item-success:hover,
a.list-group-item-success:focus {
color: #3c763d;
background-color: #d0e9c6;
}
a.list-group-item-success.active,
a.list-group-item-success.active:hover,
a.list-group-item-success.active:focus {
color: #fff;
background-color: #3c763d;
border-color: #3c763d;
}

其它状态样式代码请查看源码文件,如果想给列表项添加背景色，只需在类.lis-group-item的基础上追加对应的类名即可。

多彩列表组的运用：

多彩列表组列表项110列表项110列表项110列表项110列表项110

效果如下：

 以上就是深入浅析Bootstrap列表组组件的内容，更多相关内容请关注PHP中文网（www.php.cn）！