Bootstrap は Twitter の最も人気のあるフロントエンド フレームワークの 1 つです。Bootstrap フレームワークは HTML、CSS、および JavaScript に基づいており、Web 開発を高速化します。しかし、多くの友人は ## を知りません。 #ブートストラップ フレームワークの使用方法、次の記事では、ブートストラップ フレームワークの使用方法を紹介します。
早速、本文に進みましょう~
(無料コースの推奨: ブートストラップ チュートリアル)
##1
ブートストラップで使用される一部の HTML 要素と CSS 属性では、ページを HTML5 ドキュメント タイプに設定する必要があります。つまり、ページの先頭に「」を追加します。
レイアウト コンテナー: ブートストラップは、ページ コンテンツとグリッド システムの .container コンテナーまたはコンテナー流体 (ビューポート全体を占有するコンテナー) コンテナーをラップする必要があります。
3
グリッド システム: Bootstrap は、最大 12 列の流動的なグリッド システムを提供します。行を表す .row と幅を表す列 .col-xs-4 を使用して、グリッド レイアウトをすばやく作成できます。
4
、ブートストラップ タイポグラフィ、およびリンク スタイルは、基本的なグローバル スタイルを設定します。
font-size は 14px に設定され、line-height は 1.428 に設定されます。
(段落) 要素にも、行の高さの 1/2 (つまり 10px) に等しい下マージンが設定されます。
#ベーシックスタイル
タイプ設定:
1. タイトル、.h1 から .h6 までのカテゴリに使用できます。関連付けられた属性のテキストにはタイトル スタイルが与えられ、サブタイトルは
タグまたは .small クラスの要素によってタイトル内にマークされます。
本文: .lead クラスを使用すると、段落を強調表示できます。
2. インライン テキスト、<マーク> を使用します。
ラベルは、注釈テキスト、delete、useless、insert、underline、small (親コンテナのフォント サイズ) を表します。
85%)、強調、斜体。
3. テキスト配置クラス、text-left、text-center、text-right、text-justify、text-nowrap
4. テキスト ケース クラス、text - lowercase、text-uppercase、text-capitalize
5、略語クラス、 要素の title 属性を設定し、.initialism クラスを使用してフォント サイズを設定します。
若干小さくなります。例:
6. アドレスは、行の最後に
を追加するだけです。スタイル。
7. 引用、HTML 要素を
で囲み、引用スタイルを表示します。直接引用する場合は、 タグを使用することをお勧めします。
8. List、list-unstyled クラスはデフォルトの list-style を削除します。
スタイルと左マージンを持つ一連の要素 (直接の子のみ)。 list-inline クラス セットは次のように表示されます。
さらに、少量のパディングを追加して、すべての要素を同じ行に配置します。 dl-horizontal クラスは、フレーズとその説明を
内に配置します。
#Code:
## インライン スタイル コード スニペットをラップします
ラベルは、キーボード
を使用して入力されたコンテンツをマークします。事前スクロール可能クラスを使用すると、垂直スクロールバーで最大 350 ピクセルを設定できます。 </p>
<p><br><var> ラベルタグ変数</p>
<p><br><samp> プログラムが出力するタグタグの内容。 </p>
<p><br></p>Table: <p><br></p>
<p>.table クラスは、基本スタイル <br></p>
<p>.table-striped ストライプ スタイルを指定します。 <strong></strong><br>.table-border クラスにはボーダー スタイルがあり、</p>
<p><br>.table-hover クラスにはマウス ホバー スタイルがあり、</p>
<p><br>.table-condensedクラスコンパクトなスタイル。 </p>
<p><br>ステータス クラス (行またはセルの設定色): active、success、info、warning、info。 </p>
<p><br>任意の .table 要素を .table-sensitive 要素でラップして、小さな画面デバイス (768 ピクセル未満) で水平にスクロールするレスポンシブ テーブルを作成します。画面の幅が 768 ピクセルを超えると、水平スクロールバーが表示されなくなります。
</p>
<p><br></p>
<p><br>フォーム: </p>
<p><strong><br>1. 基本的な例: </strong></p> すべての設定は .form-control です。クラス <input>、<textarea>
<select> 要素の width 属性はデフォルトで width: 100% に設定されます。 <p><strong></strong>ラベル要素と前述のコントロールをラップします。
最適な配置は .form-group で取得できます。 <br></p>
<p>フォーム グループと入力ボックス グループを直接混在させないでください。入力ボックス グループをフォーム グループにネストすることをお勧めします。 </p>
<p><br>form-group、input-group、control-group、</p>
<p><br>2. インライン フォーム: </p>
<p><form> フォーム要素が追加されます。 -inline クラスを指定すると、その内容が左揃えになり、インライン ブロック レベル コントロールとして動作します。ビューポートの幅が少なくとも 768 ピクセルの場合にのみ適用されます (ビューポートの幅がこれより小さい場合、フォームが折りたたまれます)。 <br></p>
<p>インライン フォームのラジオ/複数選択ボックス コントロールの幅は width: auto に設定されます。<br></p>
<p>各入力コントロールのラベル label を設定しない場合、スクリーン リーダーは正しく識別できなくなります。これらのインライン フォームの場合、ラベルに .sr 専用クラスを設定することで非表示にできます。 <br></p>
<p>3. 水平方向に配置されたフォーム
: .form-horizontal クラスをフォームに追加して、.form-group の動作を変更します。これにより、グリッド システム <br></p>
<p>4、複数選択、ラジオ ボタンの行のように動作します。
: .radio、.radio-inline、.checkbox、.checkbox-inline。 <br></p>
<p>5. 静的コントロール
: 水平方向にレイアウトされたフォームで、プレーン テキストの行と label 要素を同じ行に配置する必要がある場合は、.form-control-static クラスを <p> 要素に追加するだけです。 <br></p>
<p>6. コントロールのステータス <br></p>
<p>.disabled クラスはコントロールを無効にします。disabled が <fieldset> に設定されている場合、含まれているすべてのコントロールが無効になります。 <br/></p><p>a タグはこれによる影響を受けません。 <br/></p><p>readonly 属性により、ユーザーがこれらのコントロールの親要素に <br/></p><p>.has-warning、.has-error、または .has-success クラスを入力することができなくなります。この要素内に含まれる .control-label、.form-control、および .help-block 要素は、これらの検証状態のスタイルを受け入れます。 <br/></p><p>検証ステータスの入力ボックスにアイコンを追加することもできます (ラベル タグによって異なることに注意してください)。対応する .has-フィードバック クラスを設定し、正しいアイコンを追加するだけです。 </p><p>7. コントロールのサイズ<br/></p><p>コントロールの高さは .input-lg .input-sm の同様のクラスを通じて設定でき、コントロールは .col-lg を通じて設定できます。 -* 同様のクラス 幅の設定<br/></p><p>.form-group-lg または .form-group-sm クラスを追加することで、.form-horizontal でラップされたラベル要素とフォーム コントロールのサイズをすばやく設定します。 <br/></p><p>入力ボックスまたはその親要素の幅は、グリッド システムの列で囲むことで簡単に設定できます。 <br/></p><p>8. 補助テキスト: ヘルプブロック クラス、フォーム コントロールの「ブロック」レベルの補助テキスト。 <br/></p><p><strong>ボタン: </strong></p><p>1. 基本スタイル、btn、btn-default、btn-primary、btn-success、btn-info、btn-warning、 btn-danger、アクティブ <br/></p><p>2、表示フォーム、btn-link、btn-block、閉じる <br/></p><p>3、サイズ スタイル、.btn-lg、.btn- sm、.btn-xs。 <br/></p><p>ボタン クラスは <a>、<button>、または <input> 要素を使用して適用できますが、一致するレンダリングを取得するには <button> 要素を使用することをお勧めします。各ブラウザの効果。 <br></p>
<p><strong>画像: </strong>画像の形状、img-rounded、img-circle、img-thumbnail、IE8 は CSS3 の角丸属性をサポートしていません。 <br></p>
<p><strong>補助: </strong>テキストミュート、テキストプライマリ、テキスト成功、テキスト情報、テキスト警告、テキスト危険
、bg-primary、bg-success、bg-info、bg-warning、bg-danger、三角形のシンボル、キャレット
、 浮く
、中心
<strong><br></strong></p>
<p><strong>コンポーネント スタイル</strong> <br></p>
<p><strong>アイコン: </strong> <br></p>
<p>200 Glyphicon Halflings のフォント アイコン。<br></p>
<p> アイコン クラスは空の要素にのみ適用でき、他のコンポーネントと組み合わせて使用することはできません。 <br></p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false"><span class="glyphicon glyphicon-search"></span>
ログイン後にコピー
Menu:
ドロップダウン メニュー トリガーとドロップダウン メニューを .dropdown で囲みます
メニューの配置: デフォルトでは、ドロップダウン メニューは親要素の上端と左端に沿って 100% の幅で自動的に配置されます。 .dropdown-menu-right クラスを .dropdown-menu に追加すると、メニューを右揃えにすることができます
#メニューのグループ化: ドロップダウン ヘッダー テーブルの説明項目、.disabled テーブルの無効な項目
ポップアップ: .dropup クラスは、トリガーされたドロップダウン メニューを上向きに開くことができます
#ボタン グループ
:
ボタン グループ.btn-group、.btn-group-* でグループ内のボタンのサイズを指定します。
Button bar.btn-toolbar
ボタンを縦に積み重ねて btn-group-vertical を表示します
ボタン グループを両端に揃えて表示しますbtn-group-justified
ナビゲーション:
Tabs.nav-tabs クラスは .nav 基本クラスに依存します。
Capsule タブ ページの .nav-pills クラスに、.nav-stacked クラスを追加して垂直スタックに変更します。
.nav-justified クラスを使用すると、タブまたはカプセルを同じ幅にすることが簡単になります。
navbar navbar-default
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
