Latest web development tutorials
×

Bootstrap コース

Bootstrap コース Bootstrap 簡単な紹介 Bootstrap 設置環境

Bootstrap CSS

Bootstrap CSS 概要 Bootstrap グリッド方式 Bootstrap 組版 Bootstrap コード Bootstrap テーブル Bootstrap フォーム Bootstrap プッシュボタン Bootstrap 絵 Bootstrap 補助クラス Bootstrap レスポンシブユーティリティ

Bootstrap レイアウトコンポーネント

Bootstrap フォントのアイコン Bootstrap ドロップダウンメニュー Bootstrap ボタングループ Bootstrap ボタンのドロップダウンメニュー Bootstrap 入力ボックスグループ Bootstrap ナビゲーション要素 Bootstrap ナビゲーションバー Bootstrap パン粉 Bootstrap ページング Bootstrap ラベル Bootstrap バッジ Bootstrap 大画面 Bootstrap ページタイトル Bootstrap サムネイル Bootstrap 警告 Bootstrap プログレスバー Bootstrap マルチメディアオブジェクト Bootstrap 一覧グループ Bootstrap パネル Bootstrap Wells

Bootstrap ウィジェット

Bootstrap プラグインの概要 Bootstrap 転移効果 Bootstrap モーダルボックス Bootstrap ドロップダウンメニュー Bootstrap スクロールモニター Bootstrap タブ Bootstrap ツールヒント Bootstrap ポップアップボックス Bootstrap 警告ボックス Bootstrap プッシュボタン Bootstrap 折り畳みます Bootstrap 回転木馬 Bootstrap 追加のナビゲーション

Bootstrap 他の

Bootstrap UI エディタ Bootstrap V2 コース Bootstrap HTML コーディング規約 Bootstrap CSS コーディング規約

ブートストラップリストグループ

この章では、グループのリストを説明します。 複雑なカスタムコンテンツの形で提示されたリストで使用されるコンポーネントのリスト。 次のようにグループの基本的なリストを作成します。

  • 要素<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>

»をお試しください

結果は以下の通りであります:

グループのカスタムコンテンツのリスト