ブートストラップレイアウトコンポーネント
1。ブートストラップフォントアイコン
（1）フォントアイコンリストリンク
http://www.runoob.com/bootstrap/bootstrap-glyphicons.html
（2）使用法
アイコンを使用するには、次のコードを使用するだけです。アイコンとテキストの間に適切なスペースを保管してください。グリフィコンのCSSはありません。
<span> </span>
（3）カスタマイズされたフォントアイコン
フォントアイコンの使用方法を見てきましたが、次にフォントアイコンをカスタマイズする方法を確認します。
上記の例から始めて、フォントのサイズ、色、テキストの影を適用することにより、アイコンをカスタマイズします。
A.カスタムアイコン
<ボタンタイプ= "ボタン"> <span> </span>ユーザー</button>
B.カスタマイズされたフォントサイズ
アイコンのフォントサイズを増やすか、減少させることにより、アイコンを大きく見えるか小さくすることができます。
<button type = "button" style = "font-size：60px"> <span> </span> user </button>
C.フォントの色をカスタマイズします
<button type = "button" style = "color：rgb（212、106、64）;"> <span> </span> user </button>
D.テキストシャドウを適用します
<button type = "button" style = "text-shadow：black 5px 3px 3px;"> <span> </span> user </button>
2。ブートストラップドロップダウンメニュー
（1）ドロップダウンメニューは切り替え可能で、リスト形式のリンクを表示するコンテキストメニューです。これは、ドロップダウンメニュー（ドロップダウン）JavaScriptプラグインとの対話を通じて実現できます。
次のメニューを使用するには、クラスのドロップダウンにドロップダウンメニューを追加するだけです。
<div> <button type = "button" id = "dropdownmenu1" data-toggle = "dropdown">トピック<span> </span> </button> <ul role = "menu" aria-labelledby = "dropdownmenu1"> <li chole = "lole =" presention "> <a chole =" menuitem "tabindex =" -1 " <ale = "menuitem" tabindex = "-1" href = "＃">データマイニング</a> </li> <liロール= "プレゼンテーション"> <aロール= "tabindex =" -1 "href ="> data communication/network/network/network/network </a> </li> <li> <li = "menuitem" href = "＃">分離リンク</a> </li> </ul> </div>
（2）アライメント
クラス.pull-rightを.dropdown-menuに追加して、ドロップダウンメニューを右に合わせます。
（3）タイトル
クラスドロップダウンヘッダーを使用して、ドロップダウンメニューのラベル領域にタイトルを追加できます。
3.ブートストラップボタングループ
（1）ボタングループを使用すると、複数のボタンを同じラインに積み重ねることができます。これは、ボタンを一緒に揃えたいときに非常に便利です。
（2）ネスト
1つのボタングループ内に別のボタングループをネストできます。つまり、1つの.btn-group内に別の.btn-groupをネストできます。これは、一連のボタンと組み合わせてドロップダウンメニューを使用するときに使用されます。
4.ブートストラップボタンドロップダウンメニュー
Bootstrapクラスを使用して、ボタンにドロップダウンメニューを追加します。ドロップダウンメニューをボタンに追加するには、ボタンとドロップダウンメニューを.btn-groupに配置するだけです。 <Span> </span>を使用して、ボタンをドロップダウンメニューとして示すこともできます。
<div> <button type = "button" data-toggle = "dropdown">デフォルト<span> </span> </button> <ul role = "menu"> <li> <a href = "＃"> function </a> </li> <li> href = "＃">その他</a> </li> <li> </li> <li> <a href = "＃">分離リンク</a> </li> </ul> </div>
（1）[スプリット]ボタンドロップダウンメニュー
ドロップダウンメニューの分割ボタンは、ドロップダウンメニューボタンとほぼ同じスタイルを使用しますが、ドロップダウンメニューに元の機能を追加します。スプリットボタンの左側には元の関数があり、右側にはドロップダウンメニューが表示されるトグルがあります。
<div> <ボタンタイプ= "ボタン">デフォルト</button> <ボタンタイプ= "button" data-toggle = "dropdown"> <span> </span> <span>ドロップダウンメニュー</span> </button> <ul chuls = "メニュー"> <li> href = "＃">その他</a> </li> <li> </li> <li> <a href = "＃">無効リンク</a> </li> </ul> </div>
（2）ボタンドロップダウンメニューのサイズ
.btn-large、.btn-sm、または.btn-xsのさまざまなサイズのボタンを備えたドロップダウンメニューを使用できます。
（3）ボタン用のプルアップメニュー
メニューは上向きに伸ばすこともできます。親の.btn-groupコンテナに.dropupを追加するだけです。
<div> </div>
5。ブートストラップ入力ボックスグループ
ボックスグループを入力します。入力ボックスグループは、フォームコントロールから拡張されます。入力ボックスグループを使用すると、テキストベースの入力ボックスにテキストまたはボタンをプレフィックスとサフィックスとして簡単に追加できます。
入力フィールドにプレフィックスと接尾辞のコンテンツを追加することにより、ユーザー入力に共通要素を追加できます。たとえば、Twitterのユーザー名またはアプリケーションインターフェイスで必要なその他のパブリック要素の前に、ドルサインを追加したり、 @を追加したりできます。
接頭辞または接尾辞要素を.form-controlに追加する手順は次のとおりです。
A. class .input-groupを使用して、接頭辞または接尾辞要素を<div>に配置します。
B.次に、同じ<div>内で、クラス.input-group-addonの<Span>に追加のコンテンツを配置します。
C. <span>を正面または<inupt>要素の後ろに配置します。
クロスブラウザーの互換性を維持するには、WebKitブラウザーで効果を完全にレンダリングしないため、<elect>要素の使用を避けてください。また、入力ボックスグループクラスをフォームグループに直接適用しないでください。入力ボックスグループは孤立したコンポーネントです。
<form role = "form"> <div> <span> $ </span> <入力タイプ= "text" placeholder = "twitterhandle"> <span> .00 </span> </div> </form>
（1）ボックスグループのサイズを入力します
相対フォームサイズのクラスを.input-Group（.input-group-lg、input-group-sm、input-group-xsなど）に.input-groupに追加することで、入力ボックスグループのサイズを変更できます。入力ボックスの内容は自動的にサイズ変更されます。
（2）、チェックボックスとラジオプラグイン
入力ボックスグループのプレフィックスまたはサフィックス要素としてチェックボックスとラジオプラグインを使用できます
<div> <Span> <入力タイプ= "チェックボックス"> </span> <入力タイプ= "text"> </div>
（3）ボタンプラグイン
ボタンを入力ボックスグループのプレフィックスまたは接尾辞要素として使用することもできます。現時点では、.input-Group-Addonクラスを追加していません。クラス.input-group-btnを使用してボタンをラップする必要があります。これは、デフォルトのブラウザスタイルが書き換えられないため、必要です。
<div> <span> <ボタンtype = "button"> go！ </button> </span> <入力型= "text"> </div>
（4）ドロップダウンメニュー付きのボタン
入力ボックスグループにドロップダウンメニューを備えたボタンを追加すると、.input-Group-BTNクラスにラップされています。
<div> <div> <ボタンタイプ= "ボタン" data-toggle = "ドロップダウン">ドロップダウンメニュー<span> </span> </button> <ul> <li> <a href = "＃"> function </a> </li> <li> href = "＃">その他</a> </li> <li> </li> <li> <a href = "＃">分離リンク</a> </li> </div> <入力タイプ= "text"> </div>
（5）ドロップダウンメニューボタンを分割します
ドロップダウンメニューボタンとほぼ同じスタイルを使用して、入力ボックスグループにドロップダウンメニューを備えたスプリットボタンを追加しますが、ドロップダウンメニューにメイン機能を追加すると、
<div> <div> <ボタンタイプ= "ボタン" tabindex = "-1">ドロップダウンメニュー</button> <ボタンタイプ= "button" data-toggle = "ドロップダウン" tabindex = "-1"> <span> </span> <span>ドロップダウンメニュー</span> </button> <ul> <ul> <li> </ href = "＃">その他</a> </li> <li> <a href = "＃">その他</a> </li> <li> </li> <li>
6。ブートストラップナビゲーション要素
同じタグとベースクラス.navを使用します。 Bootstrapは、タグと状態を共有するためのヘルパークラスも提供します。変更されたクラスを変更し、異なるスタイル間で切り替えることができます。
（1）、テーブルナビゲーションまたはタグ
タグ付きナビゲーションメニューを作成します。
A.クラス.navの順序付けられていないリストから始めます。
B.クラス.nav-tabsを追加します。
<ul> <li> <a href = "＃"> home </a> </li> <li> <a href = "＃"> svn </a> </li> <li> <a href = "＃"> ios </a> </li> <li> <a href = "＃"> vb.net href = "＃"> java </a> </li> <li> <a href = "＃"> php </a> </li> </ul>
（2）カプセルスタイルのナビゲーションメニュー
A.基本的なカプセルナビゲーションメニュー
ラベルをカプセルスタイルに変更する必要がある場合は、.nav-tabsの代わりにclass .nav-pillsを使用するだけで、他の手順は上記と同じです。
<ul> <li> <a href = "＃"> home </a> </li> <li> <a href = "＃"> svn </a> </li> <li> <a href = "＃"> ios </a> </li> <li> <a href = "＃"> vb.net href = "＃"> java </a> </li> <li> <a href = "＃"> php </a> </li> </ul>
B.垂直カプセルナビゲーションメニュー
クラス.navと.nav-pillsを使用して、カプセルを垂直にスタックする際にクラス.navスタックを使用できます。
<ul> <li> <a href = "＃"> home </a> </li> <li> <a href = "＃"> svn </a> </li> <li> <a href = "＃"> ios </a> </li> <li> <a href = "＃"> vb.net href = "＃"> java </a> </li> <li> <a href = "＃"> php </a> </li> </ul>
（3）両端が整列したナビゲーション
画面の幅が768pxを超える場合、それぞれ.NAV、.NAV-TABS、または.NAV、および.NAVピルを使用している間、クラス.NAV-Tabs、.Nav-Pillsを使用しながらクラス.Nav-Justefiedを使用することにより、タグ付きまたはカプセルナビゲーションメニューを親要素と等しく幅広くすることができます。小さな画面では、ナビゲーションリンクが積み重ねられます。
<ul> <li> <a href = "＃"> home </a> </li> <li> <a href = "＃"> svn </a> </li> </ul> <ul> <li> <a href = "＃"> home </a> </li> </ul> <li> <a href = "
（4）リンクを無効にします
.NAVクラスごとに、.Disabledクラスが追加された場合、灰色のリンクが作成され、リンクのホバーステータスが無効になります。
<ul> <li> <a href = "＃"> home </a> </li> <li> <a href = "＃"> svn </a> </li> <li> <a href = "＃"> iOS（無効リンク）</a> </li> </ul> <ul> <li> < href = "＃"> svn </a> </li> <li> <a href = "＃"> vb.net（link）</a> </li> </ul>
（5）プルダウンメニュー
ナビゲーションメニューは、ドロップダウンメニューと同様の構文を使用します。デフォルトでは、リスト項目のアンカーは、いくつかのデータプロパティと組み合わせて動作し、.dropdown-menuクラスで順序付けられていないリストをトリガーします。
A.ドロップダウンメニュー付きのタグ
ドロップダウンメニューをタグに追加する手順は次のとおりです。
クラス.navを使用した順序付けられていないリストから始めます。
クラス.nav-tabsを追加します。
.dropdown-menuクラスを備えた順序付けられていないリストを追加します。
<ul> <li> <a href = "＃"> home </a> </li> <li> <a href = "＃"> svn </a> </li> <li> <a data-toggle = "dropdown" href = "＃"> java <span> </span> </a> <li> <a href = "＃"> swing </a> </li> <li> <a href = "＃"> swing </a> </li> <li> <a href = "＃">分離リンク</li> </li> </li> <li> <a href = "＃"
B.プルダウンメニュー付きのカプセル
手順は、ドロップダウンメニューを備えたタグを作成することと同じですが、.nav-tabsクラスを.nav-pillsに変更する必要があります。
7。ブートストラップナビゲーションバー
ナビゲーションバーは優れた機能であり、ブートストラップWebサイトの顕著な機能です。ナビゲーションバーは、アプリケーションまたはWebサイトのナビゲーションヘッダーのレスポンシブな基本コンポーネントとして機能します。ナビゲーションバーはモバイルデバイスのビューで崩壊し、ナビゲーションバーは利用可能なビューポート幅が増加すると水平方向に拡張されます。ブートストラップナビゲーションバーのコアには、ナビゲーションバーにはサイト名と基本的なナビゲーション定義スタイルが含まれています。
（1）デフォルトのナビゲーションバー
デフォルトのナビゲーションバーを作成する手順は次のとおりです。
A.クラス.navbarと.navbar-defaultを<nav>タグに追加します。
B.上記の要素にロール= "ナビゲーション"を追加すると、アクセシビリティが向上します。
C.タイトルクラス.Navbar-Headerを<div>要素に追加します。これには、クラスNAVBARブランドの<a>要素が含まれています。これにより、テキストが大きくなります。
D.ナビゲーションバーにリンクを追加するには、Class .Navと.Navbar-Navを使用して順序付けられていないリストを追加するだけです。
<nav role = "navigation"> <div> <a href = "＃"> w3cschool </a> </div> <div> <ul> <li> <a href = "＃"> iOS </a> </li> <li> href = "＃" data-toggle = "dropdown"> java <b> </b> </a> <ul> <li> </li> <li> <a href = "＃">分離リンク</a> </li> <li>
（2）レスポンシブナビゲーションバー
ナビゲーションバーにレスポンシブ機能を追加するには、崩壊するコンテンツをクラス.collapse、.navbar-collapseで<div>に包む必要があります。崩壊したナビゲーションバーは、実際にはクラス.Navbar-Toggleと2つのデータ要素を備えたボタンです。 1つ目はdata-toggleで、JavaScriptにボタンをどうするかを指示し、2番目はどの要素に切り替えるかを示すデータターゲットです。クラスを使用した3つの<Span>。これらは、.nav-collapse <div>の要素に切り替わります。これらの機能を達成するには、ブートストラップ崩壊プラグインを含める必要があります。
<nav role = "navigation"> <div> <ボタンタイプ= "button" data-toggle = "collapse" data-target = "＃example-navbar-collapse"> <span> switch Navigation </span> </span> </span> <span> </span> <span> </span> </button> id = "example-navbar-collapse"> <ul> <li> <a href = "＃"> ios </a> </li> <li> <a href = "＃"> svn </a> </li> <li> < href = "＃"> jmeter </a> </li> <li> </li> <li> <a href = "＃">分離リンク</a> </li> <li> </li> <li> <a href = ">
（3）ナビゲーションバーのフォーム
ナビゲーションバーのフォームは、Bootstrapフォームの章に記載されているデフォルトのクラスを使用せず、.navbar-formクラスを使用します。これにより、フォームの適切な垂直アライメントと、狭いビューポートでの折りたたみの動作が保証されます。アライメントオプション（これはコンポーネントアライメントセクションで詳細に説明されます）を使用して、ナビゲーションバーの内容がどこに配置されているかを決定します。
<nav role = "navigation"> <div> <a href = "＃"> w3cschool </a> </div> <div> <form role = "search"> <div> <入力タイプ= "テキスト"プレースホルダー= "search"> </div> <ボタンタイプ= "submit"> submit </button> </form> </div> </</</nav>
（4）ナビゲーションバーのボタン
class .navbar-btnを使用して、<フォーム>にない<button>要素にボタンを追加できます。 .navbar-btnは、<a>および<inupt>要素で使用できます。標準ボタンクラスではないため、.navbar-nav内の<a>要素に.navbar-btnを使用しないでください。
<nav role = "navigation"> <div> <a href = "＃"> w3cschool </a> </div> <div> <form role = "search"> <div> <入力タイプ= "テキスト"プレースホルダー= "検索"> </div> <ボタンタイプ= "送信"> submitボタン</フォーム> <ボタン "
（5）ナビゲーションバーのテキスト
ナビゲーションにテキスト文字列を含める必要がある場合は、クラス.navbar-textを使用してください。これは通常、<p>タグで使用され、適切な先頭と色を確保します。
<nav role = "navigation"> <div> <a href = "＃"> w3cschool </a> </div> <div> <p>トーマスとしてサインイン</p> </div> </nav>
（6）非ナビゲーションリンク
通常のナビゲーションバーナビゲーションコンポーネント内で標準リンクを使用したくない場合は、クラスNavbar-Linkを使用して、デフォルトおよび反転ナビゲーションバーのオプションに適切な色を追加します。
<nav role = "navigation"> <div> <a href = "＃"> w3cschool </a> </div> <div> <p> as <a href = "＃"> thomas </a> </p> </div> </div>
（7）コンポーネントアライメント
ユーティリティクラス.navbar-leftまたは.navbar-rightを使用して、左または右のナビゲーションバーのナビゲーションリンク、フォーム、ボタン、またはテキストコンポーネントを揃えることができます。両方のクラスは、指定された方向にCSSフロートを追加します。
（8）上部に固定
ブートストラップナビゲーションバーは動的に配置できます。デフォルトでは、HTMLに配置された場所に基づいて配置されるブロックレベルの要素です。一部のヘルパークラスを使用すると、ページの上部または下部に配置するか、ページと一緒にスクロールする静的ナビゲーションバーにすることができます。ナビゲーションバーをページの上部にピン留めする場合は、.navbar-fixed-topを.navbarクラスに追加します。次の例はこれを示しています。ナビゲーションバーがページの本文内の他のコンテンツの上部とのインターリーブを防ぐために、少なくとも50ピクセルのパディングを<body>タグに追加し、パディングの値はニーズに応じて設定できます。
<nav role = "navigation">
</nav>
（9）底に固定
ナビゲーションバーをページの下部にピン留めする場合は、.navbar-fixed-bottomを.navbarクラスに追加します。
<nav role = "navigation"> </nav>
（10）、静的トップ
ページと一緒にスクロールするナビゲーションバーを作成するには、.navbar-static-topクラスを追加します。このクラスでは、パディングを<body>に追加する必要はありません。
<nav role = "navigation">
</nav>
（11）、逆ナビゲーションバー
次の例に示すように、黒い背景の白いテキストで倒立ナビゲーションバーを作成するには、.navbarクラスに.navbar-inverseクラスを追加するだけです。
ナビゲーションバーがページのボディ内の他のコンテンツの上部とのインターリーニングを防ぐために、少なくとも50ピクセルのパディングを<body>タグに追加し、パディングの値をニーズに応じて設定できます。
<nav role = "navigation"> </nav>
8。ブートストラップパン粉
Breadcrumbsは、Webサイトレベルの情報に基づいた表示方法です。例として、ブログを見てみましょう。BreadCrumbNavigationは、リリース日、カテゴリ、またはタグを表示できます。これらは、ナビゲーション階層内の現在のページの位置を表しています。
Bootstrapのパン粉は、.breadcrumbクラスを備えたシンプルな順序のリストです。デリミタは、CSS（bootstrap.min.css）に示されているクラスを介して自動的に追加されます。
<ol>
<li> <a href = "＃"> home </a> </li>
<li> <a href = "＃"> 2013 </a> </li>
<li> 11月</li>
</ol>
9。ブートストラップページネーション
（1）ページネーションは順序付けられていないリストです。ブートストラップは、他のインターフェイス要素と同様にページネーションを処理します。
（2）ページターン（ページャー）
ユーザーにナビゲーションを提供するためのシンプルなページングリンクを作成する場合は、ページをめくることで実行できます。ページングリンクと同様に、ページターンも順序付けられていないリストです。デフォルトでは、リンクの中心です。次の表には、ブートストラップがページターンを処理するクラスを示します。
10。ブートストラップタグ
ブートストラップタグ。タグは、ページ上のカウント、プロンプト、またはその他のマーキングディスプレイに使用できます。修正されたクラスのラベルデフォルト、ラベルプリマリー、ラベルサクセス、ラベルインフェ、ラベルワーニング、ラベルダンガーを使用して、ラベルの外観を変更できます。
<span>デフォルトタグ</span>
<Span>メインタグ</span>
<Span>サクセスタグ</span>
<Span>情報タグ</span>
<span>警告タグ</span>
<span>ハザードタグ</span>
11。ブートストラップバッジ
（1）バッジはラベルに似ており、主な違いはバッジの角が滑らかであることです。
バッジは、主に新しいアイテムまたは未読アイテムを強調するために使用されます。バッジを使用するには、リンク、ブートストラップナビゲーション、その他の要素に<Span>を追加してください。新しいアイテムや未読のアイテムがない場合、バッジは以下を介して折りたたまれます。CSSの空のセレクターは、内部にコンテンツがないことを示します。
<a href = "＃"> mailbox <span> 50 </span> </a>
（2）ナビゲーションステータスをアクティブ化します
カプセルナビゲーションにバッジを配置し、アクティブ状態にナビゲーションをリストできます。 <Span>を使用してリンクをアクティブにします。
<h4>カプセルナビゲーションのアクティベーションステータス</h4> <ul> <li> <a href = "＃"> Homepage <span> 42 </span> </a> </li> <li> <a href = "＃">はじめに
12。ブートストラップ超大画面（ジャンボトロン）
超大画面（ジャンボトロン）。名前が示すように、このコンポーネントはタイトルのサイズを増やし、ログインページのコンテンツにさらにマージンを追加できます。ジャンボトロンを使用する手順は次のとおりです。
A.クラス.Jumbotronでコンテナ<div>を作成します。
B.より大きな<h1>に加えて、フォントウェイトフォントウェイトは200pxに減少します。
<div> <div> <h1>ログインへようこそ！ </h1> <p>これはジャンボトロンのインスタンスです。 </p> <p> <a role = "button">もっと学習</a> </p> </div> </div>
丸い角ですべての幅を占める巨大な画面を取得するには、.containerクラスの外側の.jumbotronクラスを使用します。
13。ブートストラップページタイトル（ページヘッダー）
ページヘッダーは優れた機能であり、ページタイトルの周りに適切な間隔を追加します。ページのタイトル関数は、Webページに複数のタイトルがあり、各タイトルの間に特定の間隔を追加する必要がある場合に特に役立ちます。ページヘッダーを使用するには、タイトルをクラス.page-headerで<div>に配置します。
<div> <h1>ページタイトル例<small> subtitle </small> </h1> </div>
14。ブートストラップサムネイル
（1）ブートストラップサムネイル。ほとんどのサイトでは、グリッドで画像、ビデオ、テキストなどをレイアウトする必要があります。ブートストラップは、これをサムネイルで簡単に行う方法を提供します。ブートストラップを使用してサムネイルを作成する手順は次のとおりです。
A.画像の周りにclass .thumbnailで<a>タグを追加します。
B.これにより、4つのピクセルパディングと灰色の境界線が追加されます。
C.マウスが画像の上にホーバーすると、画像の輪郭が表示されます。
<div> <a href = "＃"> <img src = "/wp-content/uploads/2014/06/kittens.jpg"> </a> </div>
（2）カスタムコンテンツを追加します
基本的なサムネイルができたので、タイトル、パラグラフ、ボタンなど、さまざまなHTMLコンテンツをサムネイルに追加できます。特定の手順は次のとおりです。
A. <a>タグをclass .thumbnailで<div>に変更します。
B.この<div>では、追加するものをすべて追加できます。これは<div>であるため、デフォルトのスパンベースのネーミングルールを使用してサイズを変更できます。
C.複数の画像をグループ化する場合は、順序付けられていないリストにそれらを配置し、各リストアイテムが左に浮かびます。
15。ブートストラップ警告（アラート）
警告のためにブートストラップが提供するアラートとクラス。アラートは、メッセージスタイルを定義する方法をユーザーに提供します。これらは、一般的なユーザー操作のためのコンテキスト情報フィードバックを提供します。警告ボックスにオプションのクローズボタンを追加できます。インラインキャンセル可能な警告ボックスを作成するには、アラートjQueryプラグインを使用します。
a <div>を作成し、.Alertクラスと4つのコンテキストクラスのいずれかを追加することにより、基本的な警告ボックスを追加できます（つまり、.Alert-success、.Alert-info、.Alert-Warning、.Alert-Danger）。
<div>成功！提出は非常にうまく行われました。 </div>
<div>情報！この情報に注意してください。 </div>
<div>警告！提出しないでください。 </div>
<div>エラー！いくつかの変更を加えてください。 </div>
（1）キャンセル可能な警告（解雇アラート）
キャンセル可能な警告（解雇アラート）を作成する手順は次のとおりです。
A. A <div>を作成し、.Alertクラスと4つのコンテキストクラスのいずれかを追加して、基本的な警告ボックスを追加します（つまり、.Alert-Success、.Alert-Info、.Alert-Warning、.Alert-Danger）。
B.同時に、上記のクラスにオプションの.Alert-disissableを追加します。
C.閉じるボタンを追加します。
<div> <ボタンタイプ= "button" data-dismiss = "alert" aria-hidden = "true">×</button> success！提出は非常にうまく行われました。 </div>
（2）アラートのリンク
アラートでリンクを作成する手順は次のとおりです。
A. A <div>を作成し、.Alertクラスと4つのコンテキストクラスのいずれかを追加して、基本的な警告ボックスを追加します（つまり、.Alert-Success、.Alert-Info、.Alert-Warning、.Alert-Danger）。
B. .Alert-Link Entityクラスを使用して、一致する色のリンクをすばやく提供します。
<div>
<a href = "＃">成功！提出は非常にうまく行われました。 </a>
</div>
16。BootstrapProgress Bar
この章では、Bootstrap Progress Barについて説明します。このチュートリアルでは、Bootstrapを使用して、読み込み、リダイレクト、またはアクション状態のための進行状況バーを作成する方法がわかります。
Bootstrap Progress Barは、CSS3トランジションとアニメーションを使用してこの効果を得ます。 Internet Explorer 9および以前のバージョンおよびFirefoxの古いバージョンはこの機能をサポートせず、Opera 12はアニメーションをサポートしていません。
（1）デフォルトの進行状況バー
基本的な進行状況バーを作成する手順は次のとおりです。
A.クラス.Progressで<div>を追加します。
B.次に、上記の<div>にクラス.progress-barで空の<div>を追加します。
C.スタイル= "60％"など、パーセンテージで表される幅のスタイル属性を追加します。進行状況バーが60％であることを示すため。
<div> <div role = "progressbar" aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100"> <span> 40％完了</span> </div> </div>
（2）交互の進行状況バー
さまざまなスタイルの進行状況バーを作成する手順は次のとおりです。
A.クラス.Progressで<div>を追加します。
B.次に、上記の<div>で、クラス.progress-barおよびclass progress-bar-*を備えた空の<div>を追加します。その中で、 *成功、情報、警告、危険になる可能性があります。
C.スタイル= "60％"など、パーセンテージで表される幅のスタイル属性を追加します。進行状況バーが60％であることを示すため。
<div> <div role = "progressbar" aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100"> <span> 90％完了（成功）</span> </div> </div>
（3）ストライプの進行中のバー
ストリークの進行状況バーを作成する手順は次のとおりです。
A.クラス.Progressと.ProgressのストライプでA <div>を追加します。
B.次に、上記の<div>で、クラス.progress-barおよびclass progress-bar-*を備えた空の<div>を追加します。その中で、 *成功、情報、警告、危険になる可能性があります。
C.スタイル= "60％"など、パーセンテージで表される幅のスタイル属性を追加します。進行状況バーが60％であることを示すため。
<div> <div role = "progressbar" aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100"> <span> 90％完了（成功）</span> </div> </div>
（4）アニメーションの進捗バー
アニメーションの進行状況バーを作成する手順は次のとおりです。
A.クラス.Progressと.ProgressのストライプでA <div>を追加します。また、Class .Activeを追加します。
B.次に、上記の<div>にクラス.progress-barで空の<div>を追加します。
C.スタイル= "60％"など、パーセンテージで表される幅のスタイル属性を追加します。進行状況バーが60％であることを示すため。
これにより、ストライプに右から左への動きの感覚が与えられます。
<div> <div role = "progressbar" aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100"> <span> 40％完了</span> </div> </div>
（5）積み重ねられた進行状況バー
複数の進行状況バーを積み重ねることもできます。同じ.progressで複数の進行状況バーを積み重ねることができます。
17。Bootstrapマルチメディアオブジェクト（メディアオブジェクト）
ブートストラップのマルチメディアオブジェクト（メディアオブジェクト）。これらの抽象的なオブジェクトスタイルは、さまざまなタイプのコンポーネント（ブログコメントなど）を作成するために使用されます。コンポーネントでグラフィックとテキストのミキシングを使用でき、画像を左または右に整列させることができます。メディアオブジェクトは、より少ないコードを使用して、メディアオブジェクトとテキストの混合配置を実現できます。
メディアオブジェクトの軽量タグ付けとスケーリングの簡単なプロパティは、クラスを簡単なタグに適用することで実現されます。次の2つのフォームをHTMLタグに追加して、メディアオブジェクトをセットアップできます。
A.メディア：このクラスでは、メディアオブジェクトのマルチメディア（画像、ビデオ、オーディオ）がコンテンツブロックの左または右に浮かぶことができます。
B.メディアリスト：リストが必要な場合、各アイテムは順序付けられていないリストの一部です。このクラスを使用できます。コメントリストと記事リストに使用できます。
<div> <a href = "＃"> <img src = "/wp-content/uploads/2014/06/64.jpg"> </a> <div> <h4>メディアタイトル</h4>ここにサンプルテキストがあります。ここにいくつかのサンプルテキストがあります。 </div> </div>
18.ブートストラップリストグループ
リストコンポーネントは、複雑なコンテンツとカスタムコンテンツをリスト形式のレンダリングに使用します。基本的なリストグループを作成する手順は次のとおりです。
A. class .list-groupを要素<ul>に追加します。
B. class .list-group-itemを<li>に追加します。
<ul> <li>無料ドメイン名登録</li> <li>無料のウィンドウスペースホスティング</li> </ul>
（1）リストグループにバッジを追加します
任意のリストアイテムにバッジコンポーネントを追加できます。これは自動的に右に配置されます。 <li>要素に<Span>を追加するだけです。
<ul> <li>無料ドメイン名登録</li> <li> <span> new </span> 24*7サポート</li> </ul>
（2）リストグループにリンクを追加します
リスト項目の代わりにアンカータグを使用することにより、リストグループにリンクを追加できます。 <ul>要素の代わりに<div>を使用する必要があります。
<a href = "＃"> 24*7サポート</a>
<a href = "＃">フリーウィンドウスペースホスティング</a>
（3）リストグループにカスタムコンテンツを追加します
上記のリンクに追加されたリストグループにHTMLコンテンツを追加できます。
19。ブートストラップパネル（パネル）
ブートストラップパネル（パネル）。パネルアセンブリは、DOMアセンブリをボックスに挿入するために使用されます。基本パネルを作成するには、クラス.Panelとクラス.Panel-Defaultを<div>要素に追加するだけです。
<div> <div>これは基本パネル</div> </div>です
（1）パネルタイトル
2つの方法でパネルタイトルを追加できます。
A. .Panel-Headingクラスを使用すると、パネルにタイトルコンテナを簡単に追加できます。
B. .Panel-Titleクラスで<H1> - <H6>を使用して、事前定義されたスタイルのタイトルを追加します。
<div> <div>タイトルなしのプラットフォームタイトル</div> <div>プラットフォームコンテンツ</div> </div>
（2）パネル脚注
パネルに脚注を追加し、クラス.Panel-Footerを使用して<div>にボタンまたはサブテキストを配置するだけです。
<div> <div>これは基本的なパネルです</div> <div>パンボード脚注</div> </div>
（3）コンテキスト色のパネル
コンテキスト状態クラスのパネルプライマリー、パネルサクセス、パネルINFO、パネル警告、パネルダンガーを使用して、コンテキスト色のパネルをセットアップします。
<div> <div> <h3>プラットフォームタイトル</h3> </div> <div>これは基本パネルです</div> </div>
（4）テーブル付きのパネル
パネルにボーダーレステーブルを作成するには、パネルでclass .tableを使用できます。 .panel-bodyを含む<div>があると仮定すると、テーブルの上部に追加の境界線を追加して分離できます。 .panel-bodyを含む<div>がない場合、コンポーネントはパネルヘッドからテーブルに移動します。
<div> <div> <h3>プラットフォームタイトル</h3> </div> <div>これは基本パネルです</div> <table> <th> fort </th> <th thth </th> <tr> <td>製品a </td> <td> 200 </td> </tr> <tr> <td>製品
（5）リストグループのパネル
任意のパネルにリストグループを含め、<div>要素に.panelおよび.panel-defaultクラスを追加してパネルを作成し、パネルにリストグループを追加できます。
<div> <div>プラットフォームタイトル</div> <div> <p>これは基本的なパネルコンテンツです。 </p> </div> <ul> <li>無料ドメイン名登録</li> <li>年次更新コスト</li> </ul> </div>
20。ブートストラップよく
まあ、コンテンツ<div>にへこみまたはイラスト効果を引き起こす容器です。井戸を作成するには、クラス.Wellを使用してコンテンツを<div>に配置するだけです。
<div>こんにちは、私は順調です！ </div>
（1）サイズ
Well-LGまたはWell-SMのオプションクラスを使用して、ウェルのサイズを変更できます。これらの2つのクラスは、.wellクラスと組み合わせて使用されます。これらの2つのクラスはパディングに影響し、使用するクラスによっては、井戸が大きく見えます。
<div>こんにちは、私は大きな井戸にいます！ </div>
<div>こんにちは、私は小さな井戸にいます！ </div>
上記はこの記事のすべての内容です。みんなの学習に役立つことを願っています。誰もがwulin.comをもっとサポートすることを願っています。