Bootstrap リスト グループ コンポーネントの詳細な分析

Twitter の

Bootstrap は、現在最も人気のあるフロントエンド フレームワーク です。 Bootstrap は HTML、CSS、および JAVASCRIPT に基づいており、Web 開発を高速化します。

リスト グループ は、単純な要素セットの表示に使用できるだけでなく、複雑なカスタマイズされたコンテンツにも使用できる、柔軟で強力なコンポーネントです。リスト グループは、リスト リスト、垂直方向の ナビゲーション などのエフェクトを作成するために使用できます。リスト グループは、ブートストラップ フレームワークの独立したコンポーネントでもあります。したがって、独自の独立したソース コードもあります。

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

リスト グループは、リスト記号が削除されたリスト項目のように見え、いくつかの特定のスタイルが装備されています。ブートストラップ フレームワークには主に 2 つの部分が含まれます:

list-group: リスト グループ コンテナー、一般的に使用されるのは ul 要素ですが、ol 要素または p 要素にすることもできます

list-group -item: リスト項目、一般的に使用されます。これは li 要素または p 要素です。

は、基本的なリスト グループに対してあまり多くのスタイル設定を行っていません。主に間隔、境界線、角の丸めを設定しています。

.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;
}

例を見てみましょう:

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

バッジ付きリスト グループ

バッジ付きリストグループは、実際にはブートストラップフレームワークのバッジコンポーネントと基本リストコンポーネントを組み合わせたエフェクトであり、具体的な方法は非常に簡単で、 をベースに追加するだけです。 list-group-item バッジ コンポーネント "badge"

実装原則:

は、バッジの右側の

フローティング を設定します。バッジが同じリスト項目に同時に存在する場合

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

例:

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

リンク付きリストグループ

リンク付きリスト グループとは、実際には各リスト項目にリンク効果があることを意味します。一般的に考えられるのは、

効果は次のとおりです。

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

この欠点の 1 つは、クリック領域が表示されないことです。リンクはテキスト上でのみ有効ですが、多くの場合、リスト項目の任意の領域をクリック可能にしたい場合は、リンク label:display:block; に追加のスタイルを追加する必要があります。ブートストラップ フレームワークでは、別の実装が使用されます。この方法では、目的の効果を達成するために、ul.list-group を p.list-group に、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-heading {
color: #333;
}
a.list-group-item:hover,
a.list-group-item:focus {
color: #555;
text-decoration: none;
background-color: #f5f5f5;
}

リンク リスト グループの使用:

効果は次のとおりです:

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

カスタム リスト グループ
ブートストラップ フレームワークは、リンク リスト グループに基づいて 2 つのスタイルを追加します:

.list-group-item- header: 使用 リスト項目のヘッダー スタイルを定義します

.list-group-item-text: リスト項目のメイン コンテンツの定義に使用

の最大の役割これら 2 つのスタイルは、グループ開発者がリスト項目のコンテンツをカスタマイズできるようにするためのものです

実装原則:

これら 2 つのスタイルは主に

ステータス

の下のテキストの色。以下は CSS ソース コードです:

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;
}

カスタム リストの使用グループ

自定义列表组列表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）！