Bootstrap リスト グループの詳細な紹介

この章ではリストグループについて説明します。リスト コンポーネントは、複雑なカスタム コンテンツをリストの形式で表示するために使用されます。基本的なリスト グループを作成する手順は次のとおりです:

クラス .list-group を要素

に追加します。

クラス .list-group-item を <li> に追加します。

次の例はこれを示しています:

例

<ul class="list-group">
    <li class="list-group-item">免费域名注册</li>
    <li class="list-group-item">免费 Window 空间托管</li>
    <li class="list-group-item">图像的数量</li>
    <li class="list-group-item">24*7 支持</li>
    <li class="list-group-item">每年更新成本</li></ul>

基本リストグループ

基本リストグループは、リスト記号が削除され、いくつかの特定のスタイルが装備されたリスト項目のように見えます。 Bootstrap フレームワークの基本的なリスト グループは主に 2 つの部分で構成されます:

☑ list-group: リスト グループ コンテナ、一般的に使用されるのは ul 要素ですが、もちろん ol 要素や div 要素でも構いません

☑ list-group-item : list item、一般的に使用されるのは li 要素ですが、もちろん div 要素にすることもできます

基本的なリスト グループの場合、スタイルの設定はあまりなく、主に間隔、境界線、角の丸めなどを設定します

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

<li>HTML <li>CSS <li>javascript <li>bootstrap <li>jquery

badge

バッジ付きリストグループは、実際にはBootstrapフレームワークのバッジコンポーネントと基本的なリストグループを組み合わせたエフェクトです。具体的な方法は、「list-group-item」にバッジコンポーネント「badge」を追加するだけです。もちろん、バッジを2つ設定するだけです。同時にリスト項目に表示される場合、それらの間の距離も設定されます

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

<li> 33HTML <li> 60CSS <li> 192javascript <li> 20bootstrap <li> 26jquery

Link

代わりに <a></a> タグを使用してください<li> タグのすべてがリンクであるリスト グループを形成できます (<ul></ul> タグは タグに置き換える必要があることにも注意してください)。 div> タグ）。リストグループ内の各要素に親要素を追加する必要はありません

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

<a></a> 标签代替 <li> 标签可以组成一个全部是链接的列表组（还要注意的是，需要将 <ul></ul> 标签替换为 

 标签）。没必要给列表组中的每个元素都加一个父元素

<div>
  <a>HTML</a>
  <a>CSS</a>
  <a>javascript</a>
  <a>bootstrap</a>
  <a>jquery</a>
</div>

<div>
  <button>HTML</button>
  <button>CSS</button>
  <button>javascript</button>
  <button>bootstrap</button>
  <button>jquery</button>
</div>

 

按钮

　　列表组中的元素也可以直接就是按钮（也同时意味着父元素必须是 

 而不能用 <ul></ul> 了），并且无需为每个按钮单独包裹一个父元素。注意不要使用标准的 .btn

<div>
<a><h4 id="HTML">HTML</h4>
<p>HTML被认为是前端知识体系里面最简单的知识，几年前，很多人都推荐在W3C上学习个几天就能够基本掌握。但随着HTML5和移动端的强势发展，HTML的技能点也越来越难。世上无难事，好学好总结...</p></a><a><h4 id="CSS">CSS</h4>
<p>CSS是前端工程师的基本功，但好多执迷于学习javascript的人的基本功并不扎实。可能一些人从w3school网站匆匆过了一遍，只是对CSS常用概念有一些表面上的理解，就一头扎进javascript的深坑里跳不出来。实际上，javascript中比较复杂的逻辑很有可能使用CSS几行样式就能解决问题，而且性能还好。CSS之所以能成为一门优雅的语言，以及有其对应的重构工程师的岗位，是因为这本语言本身就有很强的存在价值，且真正要理解它并不容易。从CSS禅意花园开始，写CSS成为一种艺术。从CSS2.1到3再到4，CSS所涵盖的内容及可实现的功能得到了极大的丰富，使得CSS的学习成本也越来越高。再多的知识，一个知识点一个知识点去学，总能学明白...</p></a><a><h4 id="javascript">javascript</h4>
<p>javascript就如同魔法一样，它是一门充满活力、简单易用的语言，又是一门具有许多复杂微妙技术的语言。即使是经验丰富的javascript开发者，如果没有认真学习的话，也无法真正理解它们，这就是javascript的矛盾之处。由于javascript不必理解就可以使用，因此通常来说很难真正理解语言本身，这就是我们面临的挑战。不满足于只是让代码正常工作，而是想要弄清楚为什么，勇于挑战这条崎岖颠簸的少有人走的路，拥抱整个javascript...</p></a>    </div>

Button

リストグループ内の要素は直接ボタンにすることもできます（これは親要素も意味します）要素は <ul></ul> ではなく <div> である必要があります)、ボタンごとに個別の親要素をラップする必要はありません。 <span class="text-danger">標準の <code>.btn クラスを使用しないように注意してください

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

カスタマイズされたコンテンツ

Bootstrap ボックスはベースに追加されますリンク リスト グループの 2 つの新しいスタイルが追加されました:

☑ list-group-item-Heading: リスト項目ヘッダー スタイルの定義に使用されます

☑ list-group-item-text: のメイン コンテンツを定義するために使用されますlist item

これら 2 つのスタイル 最大の役割は、開発者がリスト アイテムのコンテンツをカスタマイズできるようにすることです

<div>
  <a>HTML</a>
  <a>CSS</a>
  <a>javascript</a>
  <a>bootstrap</a>
  <a>jquery</a>
</div>

状態設定

Bootstrap フレームワークは、結合されたリスト アイテム、特にリンク リスト グループにステータス効果を提供します。共通ステータスや無効ステータスなど。実装方法は先ほど紹介したコンポーネントと同様で、リストグループ内で対応するリスト項目にクラス名を追加するだけです:

☑ active: 現在の状態を示します

☑ disabled: 無効な状態を示します

。

<div>
<a>默认</a>
<a>成功</a>
<a>信息</a>
<a>警告</a>
<a>错误</a>
</div>

rrreee

☑ list -group-item-success: 成功、背景色は緑です

☑ list-group-item-info: 情報、背景色は青です

☑ list-group-item-warning:警告、背景色は黄色です

☑ list -group-item-danger: エラー、背景色は赤色です

リスト項目に背景色を追加したい場合は、対応するクラス名を「list-group-item」の基礎

🎜rrreee🎜