01.はじめに
Twitterのブートストラップは、現在非常に人気のあるフロントエンドフレームワークです。
ブートストラップはHTMLCSS JavaScriptに基づいており、シンプルで柔軟性があります
Web開発を高速化する
レスポンシブデザイン
boostrap.cssを導入します
boostrap.jsを紹介します
jqueryを導入する
02.グローバルスタイルのレイアウトコンテナとグリッドシステム
.container クラスは、固定幅でレスポンシブレイアウトをサポートするコンテナーに使用されます。
.container-fluid クラスは、幅が100％で、ビューポート全体を占めるコンテナに使用されます。指定しない場合は、親の幅を継承します
グリッドシステム
グリッドシステムは、一連の行と列の組み合わせによってページレイアウトを作成するために使用され、コンテンツはこれらの作成されたレイアウトに配置できます。ブートストラップグリッドシステムの動作原理の概要は次のとおりです。
Bootstrapは、応答性の高いモバイルデバイスファーストのストリーミンググリッドシステムを提供します。画面またはビューポートのサイズが大きくなると、システムは自動的に最大12列に分割されます。
さまざまな画面サイズの大画面のmdlg画面xs小さな行合計12の部分は、彼にいくつかの書き込みを説明することを望んでいました
xs-offset-右にオフセットする行数
03.植字
題名
HTMLのすべての見出しタグ<h1> から <h6> を使用できます。さらに 、インライン属性のテキストにタイトルのスタイル を与えるために、クラス.h1から .h6も提供され ます。
メインページ
Bootstrapは、グローバル フォントサイズ を 14pxに設定し、行の高さ を 1.428に設定します。これらの属性は、<body> 要素とすべての段落要素に直接割り当てられ ます。さらに、<p> （段落）要素も、行の高さの1/2（つまり、10px）に等しい下マージンで設定されます。
段落は、.leadクラスを追加する ことで強調表示できます。
インラインテキストスタイル<マーク>
削除されたテキストには<del> タグを使用します 。
役に立たないテキストには<s> タグを使用します 。
追加の挿入テキストには<ins> タグを使用します
テキストに下線を引くには、<u> タグを使用します
テキストを揃える-方向を揃える
04.フォーム
テーブル
奇数行に色を追加するためにストライプ
bordertは境界線を追加します
ホバー
| .active |
マウスを行またはセルの上に置いたときに設定される色 |
| 。成功 |
成功または前向きな行動を特定する |
| .info |
一般的なプロンプトメッセージまたはアクションを特定する |
| 。警告 |
警告に署名するか、ユーザーの注意が必要 |
| 。危険 |
危険または潜在的に否定的な行動を特定する |
ラップ任意 .tableの要素を .table応答 小画面装置上に水平にスクロールする応答テーブルを作成する素子（以下768pxより）。画面の幅が768pxを超えると、水平スクロールバーが消えます。
05-フォーム
個々のフォームコントロールには、いくつかのグローバルスタイルが自動的に与えられます。.form-control クラスが 設定されているすべての<input> 、<textarea> 、および <select>要素は、 width：100％に設定されます。デフォルトでは 。.form-groupで ラップされた前述の ラベル要素とコントロールは 、最適な配置を得ることができます。
.form-inline クラスを <form> 要素に追加すると、 そのコンテンツを左揃えにして、インラインブロック レベルのコントロールとして動作させることができ ます。ビューポートの幅が768px以上の場合にのみ適用されます（ビューポートの幅が小さいほどフォームが折りたたまれます）。
.form-horizontal クラスをフォームに追加し、 Bootstrapによって事前設定されたグリッドクラスと組み合わせることで、ラベル ラベルとコントロールグループを水平に並べて配置できます 。そうすること で、.form-groupの動作が変更さ れ、グリッドシステムに行として表示されるため、.rowを追加する必要はありません 。
フォームの 同じ行にプレーンテキストとラベル要素の 行を配置する必要がある場合は 、.form-control-static クラスを<p>要素に 追加します 。
コントロールサイズinput-lglarge input-sm smalldefaultは追加されていません
06.ボタンカッティングエイドクラス
事前定義されたスタイルデフォルトのプライマリプリファレンス成功成功一般情報情報警告危険危険リンクリンク
btnbtnスタイル
4つのサイズbtn-lg大きいbtn-sm小さいbtn-xs超小さい
BのTN-ブロックは、ブロックレベル要素となります
activerはデフォルトでアクティブになっています
D isabled
画像
レスポンシブ画像
.img-sensitive クラスを使用すると、画像でレスポンシブレイアウトをサポートできます。画像の本質は次のように設定されている 最大幅：100％; 、 高さ：自動; と 表示：ブロック;
img-丸みを帯びたフィレット
img-円y円
img-サムネイルの 外側は広い
補助クラス
コンテキストテキストの色
図を色で表示します。Bootstrapには一連のツールが用意されています。これらのクラスはリンクに適用でき、デフォルトのリンクと同じように、マウスが上にあるときに色を暗くすることができます。
T ext-
状況の背景色
コンテキストテキストカラークラスと同様に、コンテキスト背景カラークラスを使用して要素の背景を設定できます。リンクコンポーネントの色は、上記のコンテキストテキストの色クラスと同様に、マウスがその上を通過すると暗くなります。
B g-
シンボルを閉じる
×；
右側にクラス名を追加します
三角形の記号
クラスキャレットを追加する
ファストフロート
左に引く-左に
右に引く
Cエンターブロック中央
ナビゲーション
ナビゲーションコンポーネントを使用してナビゲーションバー機能を実装している場合は、必ず role = "navigation" 属性を<ul> の最も外側の論理親要素に追加する か 、ナビゲーションコンポーネント全体を<nav>要素でラップしてください。 支援機器（障害者向け）では実際のリストとして認識される可能性があるため、<ul>に役割属性を追加しないでください 。
ブックマークページ
<ul class = "nav nav-tabs" >
<LIの 役割= "プレゼンテーション" クラス= "アクティブ" > <a href= "#">ホーム</a>の</ LI>
<LIの 役割= "プレゼンテーション" > <a href= "#">プロフィール</a>の</ LI>
<LI 役割= "プレゼンテーション" > <a href= "#">メッセージ</a>の</ LI>
</ ul>
カプセルタブ
<ul class = "nav nav-pills" >
<LIの 役割= "プレゼンテーション" クラス= "アクティブ" > <a href= "#">ホーム</a>の</ LI>
<LIの 役割= "プレゼンテーション" > <a href= "#">プロフィール</a>の</ LI>
<LI 役割= "プレゼンテーション" > <a href= "#">メッセージ</a>の</ LI>
</ ul>
正当化されたタブ
.nav-正当化
垂直タブ
.nav-stacked
ドロップダウンメニューのあるタブページ
<ul class = "nav nav-tabs" >
..。
<li role = "presentation" class = "dropdown" >
<a class= "dropdown-toggle" data-toggle= "dropdown" href= "#" role= "button" aria-haspopup= "true" aria-expanded= "false">
ドロップダウン< spanclass = "caret" > </ span>
</a>
<ul class = "ドロップダウンメニュー" >
..。
</ ul>
</ li>
... </ ul>