ブートストラップ フレームワークを使用するにはどうすればよいですか?ブートストラップ フレームワークの使用法の概要

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-horizo​​ntal クラスは、フレーズとその説明を

内に配置します。

#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-horizo​​ntal クラスをフォームに追加して、.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-horizo​​ntal でラップされたラベル要素とフォーム コントロールのサイズをすばやく設定します。 <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:php;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

に含まれない 要素については、.navbar-btn を追加すると、ナビゲーション バーを垂直方向の中央に配置します。

フォームを .navbar-form 内に配置すると、垂直方向の配置が適切になります (

.navbar-text

)。

##.navbar-left および .navbar-right ユーティリティ クラスは、ナビゲーション リンク、フォーム、ボタン、またはテキストを整列させます。

.navbar-fixed-top クラスを使用すると、ナビゲーション バーを上部に固定できます。

.navbar-fixed-bottom クラスを使用すると、ナビゲーション バーを上部に固定できますBottom

.navbar-static-top クラスを使用すると、ページが下にスクロールするとナビゲーション バーが非表示になります。

.navbar-inverse クラスはナビゲーション バーの外観を変更できます。

ブレッドクラム 階層ナビゲーション構造 (ブレッドクラム) を作成します。

ページング:

pagination、ページ番号は.disabledクラスと.activeクラスを状況に応じて使い分けます。

.pagination-lg または .pagination-sm クラスでは、追加のサイズを選択できます。

ページャー前後のページに簡単にページをめくることができます。前後のクラスでマークすることもできます。

Label: label ラベル基本クラス。ラベルは、label-default、label-primary、label-success、label-info、label-warning、label- を通じて変更できます。危険な外装。
バッジ。新しい情報項目または未読の情報項目を非常に目立つように表示できます。

その他: サムネイル 、プロンプトボックス 、プログレスバー 、メディア オブジェクトなど。

#カスタマイズされたスタイル

BootStrap は、独自のニーズに応じてカスタマイズするためのコンポーネントと jquery プラグインを提供し、Less ソース コードを直接変更することもできます。

以上がブートストラップ フレームワークを使用するにはどうすればよいですか?ブートストラップ フレームワークの使用法の概要の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。