TwitterのBootstrapは、現在最も人気のあるフロントエンドフレームワークです。 Bootstrapは、HTML、CSS、およびJavaScriptに基づいています。シンプルで柔軟で、Web開発をより速くします。
リストグループは、単純な要素セットを表示するためだけでなく、複雑なカスタマイズされたコンテンツにも使用できる柔軟で強力なコンポーネントです。リストグループを使用して、リストリスト、垂直ナビゲーション、その他の効果を作成し、他のコンポーネントでより美しいコンポーネントを作成することもできます。リストグループは、Bootstrapフレームワークの独立したコンポーネントでもあるため、独自の独立したソースコードもあります。
Less：list-group.less
SASS：_LIST-GROUP.SCSS
リストグループは、リストシンボルのリスト項目が削除されているように見え、特定のスタイルが装備されています。ブートストラップフレームワークの基本リストグループには、主に2つの部分が含まれています。
リストグループ：リストグループコンテナ、一般的に使用されるのはUL要素であるか、OLまたはDIV要素である可能性があります
List-Group-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＃dddd;}。 4PX; Border-Top-Right-Radius：4PX;}。リストグループ項目：last-child {margin-bottom：0; border-bottom-right-radius：4px; border-bottom-left-radius：4px;}例を見てみましょう：
<h1>基本リストグループ</h1> <ul> <li>蒸しポテトライス</li> <li>スパイシーフライドチキンヌードル</li> <li>コリラチョップエッグ豆腐</li> <li>ダッチビーンズのフライドホースシュー</li> <li>ハウソーンリブ</li>
バッジ付きのグループをリストします
バッジを備えたリストグループは、実際には、ブートストラップフレームワークのバッジコンポーネントと基本リストコンポーネントを組み合わせる効果です。特定の方法は非常に簡単です。バッジコンポーネント「バッジ」を.list-group-itemに追加するだけです。
実装の原則：
もちろん、バッジに右フロートを設定します。もちろん、2つのバッジがリスト項目に同時に表示される場合、それらの間の距離も設定されます。
.list-group-item> .badge {float：right;}。list-group-item> .badge + .badge {margin-right：5px;}例：
<h1>バッジ付きのリストグループ</h1>> <ul> <li> <li> 13 </span>ベーコンとジャガイモと塩漬けご飯豆</li> <li> <span> 8 </span>ホーソーンのrib骨</li> <li> 15 </span>揚げた川のエビ</li> </ul>
リンクを持つグループをリストします
接続を持つリストグループは、実際に各リスト項目にリンク効果があることを意味します。一般的に考えるのは、以下などの基本リストグループに基づいて、リスト項目のテキストへのリンクを追加することです。
<ul> <li> <a href = "＃"> bao pork svided rice </a> </li> <li> <a href = "＃">スパイシーフライドチキンナゲット</a> </li> <li> Beans </a> </li> <li> <a href = "＃"> Hawthorn ribs </a> </li> <li> <a href = "＃"> fried river river shrimp in leks </a> </li> </ul>
効果は次のとおりです。
これには欠点があります。つまり、リンクのクリック領域はテキストでのみ有効です。しかし、多くの場合、リストアイテムの領域がクリック可能であることを願っています。そのため、リンクラベルに追加のスタイルを追加する必要があります。表示：block;しかし、Bootstrapフレームワークでは、UL.LIST-GROUPをDiv.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 none background-color：＃color：＃f5ff5f5;リンクリストグループの使用：
リンクを備えた<h1>リストグループ</h1>> <ul> <a href = "＃"> baisedベーコンとポテトライス</a> <a href = "＃">スパイシーフライドチキンナゲット</a> < href = "＃">ホーソーンのrib骨</a> <a href = "＃">揚げた川のエビとネギ</a> </ul>
効果は次のとおりです。
カスタムリストグループ
ブートストラップフレームワークは、リンクリストグループに2つのスタイルを追加します。
.list-group-item-heading：リストアイテムヘッダーのスタイルを定義するために使用されます
.list-group-item-text：リスト項目のメインコンテンツを定義するために使用されます
これらの2つのスタイルの最大の機能は、開発者がリスト項目のコンテンツをカスタマイズするのを支援することです
実装の原則：
これらの2つのスタイルは、主に互換性のない状態のテキスト色を制御します。以下はCSSソースコードです。
a.list-group-item.list-group-item-heading {color：＃333;}。list-group-item.disabled .list-item-heading、.list-group-item.disabled：hover .list-group-item-heading、.list-group-head-hed：disabled：force exenset;}。list-group-item.disabled .list-group-item-text、.list-group-item.disabled：focus .list-group-item-text {color：＃777;} .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：fluction-group-aitem.tem .list-group-item-heading> small、.list-group-item.active .list-group-item-heading> .small、.list-group-item.active：hover .list-group-heading> .small、.small、.list-group-item.active：call-group-heading>。継承;}。 5px;}。list-group-item-text {margin-bottom：0; line-height：1.3;}カスタムリストグループの使用
<h1>カスタムリストグループ</h1> <ul> <a> <a> <h4>リスト1タイトル</h4> <p>リスト1コンテンツリスト1コンテンツリスト1コンテンツリスト1コンテンツリスト1コンテンツリスト1コンテンツリスト1コンテンツリスト1コンテンツリスト1コンテンツリスト1コンテンツリスト1コンテンツリスト1コンテンツリスト1コンテンツリスト2コンテンツリスト2 2コンテンツリスト2 2コンテンツリスト2コンテンツリスト2コンテンツリスト2コンテンツリスト2 2コンテンツリスト2コンテンツリスト2コンテンツリスト2コンテンツリスト2コンテンツリスト2コンテンツリスト3コンテンツリスト3コンテンツリスト3コンテンツリスト3コンテンツリスト4コンテンツリスト4コンテンツリスト4コンテンツリスト4コンテンツリスト4コンテンツリスト4コンテンツリスト4コンテンツリスト4コンテンツリスト4コンテンツリスト4コンテンツリスト4コンテンツリスト4コンテンツリスト4コンテンツリスト4コンテンツリストコンテンツリスト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コンテンツリスト3コンテンツリスト3コンテンツリスト3コンテンツリスト3コンテンツリスト3コンテンツリスト3コンテンツリスト3コンテンツリスト3コンテンツリスト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コンテンツリスト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コンテンツリスト6コンテンツリスト6コンテンツリスト6コンテンツリスト6コンテンツリスト6コンテンツリスト6コンテンツリスト6コンテンツリスト6コンテンツリスト
リスト項目のステータス設定
ブートストラップフレームワークは、リスト項目、特にリストグループをリンクするための状態効果も提供します。実装方法は、上記のコンポーネントに似ています。リストグループでは、対応するリスト項目にクラス名を追加する必要があります。
実装の原則：
スタイルに関しては、リスト項目の背景色とテキストは主にスタイルが付けられています。以下はCSSソースコードです。
.list-group-item.disabled、.list-group-item.disabled：hover、.list-group-item.disabled：focus {color：＃777; background-color：#eee;}。 2;色：#fff; background-color：＃428bca; border-color：＃428bca;}例：
<h1>リストグループステータス設定</h1> <ul> <a> <h4>リスト1タイトル</h4> <p>リスト1コンテンツリスト1コンテンツリスト1コンテンツリスト1コンテンツリスト1コンテンツリスト1コンテンツリスト1コンテンツリスト1コンテンツリスト1コンテンツリスト1コンテンツリスト1コンテンツリスト1コンテンツリスト1コンテンツリスト2 2コンテンツリスト2 2コンテンツリスト2 2コンテンツリスト2コンテンツリスト2コンテンツリスト2コンテンツリスト2コンテンツリスト2コンテンツリスト2コンテンツリスト2コンテンツリスト2コンテンツリスト2コンテンツリスト2コンテンツリスト3コンテンツリスト3コンテンツリスト3コンテンツリスト3コンテンツリスト3コンテンツリスト3コンテンツリスト3コンテンツリスト3コンテンツリスト3コンテンツリスト4コンテンツリスト4コンテンツリスト4コンテンツリスト4コンテンツリスト4コンテンツリスト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コンテンツリスト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コンテンツリスト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コンテンツリスト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コンテンツリスト6コンテンツリスト6コンテンツリスト6コンテンツリスト6コンテンツリスト6コンテンツリスト6コンテンツリスト6コンテンツ
効果は次のとおりです（3番目のリスト項目は無効になっています。マウスを移動すると無効化されたアイコンがあります。ここに直接スクリーンショットがあり、この効果はわかりません）：
カラフルなリストグループ
リストグループコンポーネントは、警告コンポーネントと同じです。 Bootstrapは、さまざまな状態でさまざまな背景色とテキスト色を提供します。これらのクラス名を使用して、異なる背景色のリスト項目を定義できます。
.list-group-item-success：success green（background color）.list-group-item-info：information blue（background color）.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：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;}他の状態スタイルコードについては、ソースコードファイルを確認してください。リスト項目に背景色を追加する場合は、Class.lis-Group-Itemに対応するクラス名を追加するだけです。
カラフルなリストグループの使用：
<h1>カラフルリストグループ</h1> <ul> <a href = "＃">リストitem1 <span> 10 </span> </a> <a href = "＃"> list item1 <span> 10 </span> </a> href = "＃">リストitem1 <span> 10 </span> </a> </ul>
効果は次のとおりです。