ブートストラップリストグループ
この章では、グループのリストを説明します。 複雑なカスタムコンテンツの形で提示されたリストで使用されるコンポーネントのリスト。 次のようにグループの基本的なリストを作成します。
- 要素<UL>クラスの.list-グループを追加します。
- <LI>にクラスの.list-グループの項目を追加します。
次の例では、この点を示しています。
例
<UL クラス = "リストグループ」>
<李 クラス= "リストグループ項目 」> 無料ドメイン名の登録 ます。</ li>
<李 クラス= "リストグループ項目 」> 無料ホスティングスペースウィンドウ ます。</ li>
<李 クラス= "リストグループ項目 "> 画像の枚数 ます。</ li>
<李 クラス= "リストグループ項目 "> 24 * 7 のサポート ます。</ li>
<李 クラス= "リストグループ項目 "> 年間コストを更新し ます。</ li>
</ UL>
»をお試しください
結果は以下の通りであります:
グループのリストにバッジを追加
私たちは、それが自動的に右側に配置され、任意のリスト項目にバッジコンポーネントを追加することができます。 あなただけが<LI>要素に<スパンクラス= "バッジ">を追加する必要があります。 次の例では、この点を示しています。
例
<UL クラス = "リストグループ」>
<李 クラス= "リストグループ項目 」> 無料ドメイン名の登録 ます。</ li>
<李 クラス= "リストグループ項目 」> 無料ホスティングスペースウィンドウ ます。</ li>
<李 クラス= "リストグループ項目 "> 画像の枚数 ます。</ li>
<李 クラス= "リストグループ項目 」>
<スパン クラス = "バッジ"> 新しい </ span>の24 * 7 のサポート ます。</ li>
<李 クラス= "リストグループ項目 "> 年間コストを更新し ます。</ li>
<李 クラス= "リストグループ項目 」>
<スパン クラス = "バッジ"> 新しい </ span>の ディスカウント ます。</ li>
</ UL>
»をお試しください
結果は以下の通りであります:
グループのリストへのリンクを追加
アンカータグの代わりに、項目のリストを使用することにより、我々はグループのリストへのリンクを追加することができます。 私たちは、<div>の代わりに<ulの>要素の使用する必要があります。 次の例では、この点を示しています。
例
<A href = "#" クラス= "リストグループ項目 >アクティブ" 無料のドメイン名の登録 </ A>
<A href = "#" クラス= "リストグループ項目 "> 24 * 7 のサポート </ A>
<A href = "#" クラス= "リストグループ項目 」> 無料ホスティングスペースウィンドウ </ A>
<A href = "#" クラス= "リストグループ項目 "> 画像の数 </ A>
<A href = "#" クラス= "リストグループ項目 "> </ A> 年間コストを更新
»をお試しください
結果は以下の通りであります:
グループのリストにカスタムコンテンツを追加します。
我々は、任意のHTMLコンテンツを追加するグループのリストの先頭へのリンクを追加しました。 次の例では、この点を示しています。
例
<DIV クラス = "リストグループ」>
<A href = "#" クラス= "リストグループ項目 >アクティブ"
<H4 クラス= "リストグループ項目が -heading"> ポータルパッケージ </ H4>
</ A>
<A href = "#" クラス= "リストグループ項目 」>
<H4 クラス= "リストグループ項目 -heading"> 無料ドメイン名の登録 </ H4>
<P クラス= "リストグループ項目 -text"> あなたはウェブサイトを通じて無料のドメイン名の登録となります。 </ P>
</ A>
<A href = "#" クラス= "リストグループ項目 」>
<H4 クラス= "リストグループ項目が -heading"> 24 * 7 のサポート </ H4>
<P クラス= "リストグループ項目 -text"> 私たちは、24 * 7のサポートを提供します。 </ P>
</ A>
</ DIV>
<DIV クラス = "リストグループ」>
<A href = "#" クラス= "リストグループ項目 >アクティブ"
<H4 クラス= "リストグループ項目 -heading"> ビジネスサイトパッケージ </ H4>
</ A>
<A href = "#" クラス= "リストグループ項目 」>
<H4 クラス= "リストグループ項目 -heading"> 無料ドメイン名の登録 </ H4>
<P クラス= "リストグループ項目 -text"> あなたはウェブサイトを通じて無料のドメイン名の登録となります。 </ P>
</ A>
<A href = "#" クラス= "リストグループ項目 」>
<H4 クラス= "リストグループ項目が -heading"> 24 * 7 のサポート </ H4>
<P クラス= "リストグループ項目 -text"> 私たちは、24 * 7のサポートを提供します。 </ P>
</ A>
</ DIV>
»をお試しください
結果は以下の通りであります: