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

Bootstrap は Twitter の最も人気のあるフロントエンド フレームワークの 1 つです。Bootstrap フレームワークは HTML、CSS、および JavaScript に基づいており、Web 開発を高速化します。しかし、多くの友人は ## を知りません。 #ブートストラップ フレームワークの使用方法、次の記事では、ブートストラップ フレームワークの使用方法を紹介します。

早速、本文に進みましょう~

(無料コースの推奨: ブートストラップ チュートリアル)
##1 ブートストラップで使用される一部の HTML 要素と CSS 属性では、ページを HTML5 ドキュメント タイプに設定する必要があります。つまり、ページの先頭に「8b05045a5be5764f313ed5b9168a17e6」を追加します。 レイアウト コンテナー: ブートストラップは、ページ コンテンツとグリッド システムの .container コンテナーまたはコンテナー流体 (ビューポート全体を占有するコンテナー) コンテナーをラップする必要があります。

3 グリッド システム: Bootstrap は、最大 12 列の流動的なグリッド システムを提供します。行を表す .row と幅を表す列 .col-xs-4 を使用して、グリッド レイアウトをすばやく作成できます。

4 、ブートストラップ タイポグラフィ、およびリンク スタイルは、基本的なグローバル スタイルを設定します。

font-size は 14px に設定され、line-height は 1.428 に設定されます。

e388a4556c0f65e1904146cc1a846bee (段落) 要素にも、行の高さの 1/2 (つまり 10px) に等しい下マージンが設定されます。

#ベーシックスタイル

タイプ設定:

1. タイトル、.h1 から .h6 までのカテゴリに使用できます。関連付けられた属性のテキストにはタイトル スタイルが与えられ、サブタイトルは d015d241ae6d34c34210679b5204fe85 タグまたは .small クラスの要素によってタイトル内にマークされます。

本文: .lead クラスを使用すると、段落を強調表示できます。
2. インライン テキスト、c7e6c20d04bcdda2bb94e6dadc5c2458 を使用します。 ラベルは、注釈テキスト、823db3943044a0a9a620ada8d4b1d965delete、2e44d2d3284d23d932e1fd85f3d4cf3auseless、426be984ffbbb815d7d88e3543a85d91insert、88f336217b3880082bb52d49b5de60a5underline、d015d241ae6d34c34210679b5204fe85small (親コンテナのフォント サイズ) を表します。 85%)、強調、斜体。

3. テキスト配置クラス、text-left、text-center、text-right、text-justify、text-nowrap

4. テキスト ケース クラス、text - lowercase、text-uppercase、text-capitalize

5、略語クラス、8a7974376be5f6c00c121222b727adb9 要素の title 属性を設定し、.initialism クラスを使用してフォント サイズを設定します。 若干小さくなります。例:

6. アドレスは、行の最後に 0c6dc11e160d3b678d68754cc175188a を追加するだけです。スタイル。

7. 引用、HTML 要素を b8a712a75cab9a5aded02f74998372b4 で囲み、引用スタイルを表示します。直接引用する場合は、e388a4556c0f65e1904146cc1a846bee タグを使用することをお勧めします。

8. List、list-unstyled クラスはデフォルトの list-style を削除します。 スタイルと左マージンを持つ一連の要素 (直接の子のみ)。 list-inline クラス セットは次のように表示されます。 さらに、少量のパディングを追加して、すべての要素を同じ行に配置します。 dl-horizo​​ntal クラスは、フレーズとその説明を 5c69336ffbc20d23018e48b396cdd57a 内に配置します。

#Code:

##ffbe95d20f3893062224282accb13e8f インライン スタイル コード スニペットをラップします

5e4e803d53d659f332070b5d4aa430db ラベルは、キーボード
e03b848252eb9375d56be284e690e873 を使用して入力されたコンテンツをマークします。事前スクロール可能クラスを使用すると、垂直スクロールバーで最大 350 ピクセルを設定できます。

b7f90f73cad438258bf67e62f79b2113 ラベルタグ変数

162cd570ab1483e383d78dcb7f452f7c プログラムが出力するタグタグの内容。

Table:

.table クラスは、基本スタイル

.table-striped ストライプ スタイルを指定します。
.table-border クラスにはボーダー スタイルがあり、

.table-hover クラスにはマウス ホバー スタイルがあり、

.table-condensedクラスコンパクトなスタイル。

ステータス クラス (行またはセルの設定色): active、success、info、warning、info。

任意の .table 要素を .table-sensitive 要素でラップして、小さな画面デバイス (768 ピクセル未満) で水平にスクロールするレスポンシブ テーブルを作成します。画面の幅が 768 ピクセルを超えると、水平スクロールバーが表示されなくなります。

フォーム:

1. 基本的な例:

すべての設定は .form-control です。クラス d5fd7aea971a85678ba271703566ebfd、4750256ae76b6b9d804861d8f69e79d3 221f08282418e2996498697df914ce4e 要素の width 属性はデフォルトで width: 100% に設定されます。

ラベル要素と前述のコントロールをラップします。 最適な配置は .form-group で取得できます。

フォーム グループと入力ボックス グループを直接混在させないでください。入力ボックス グループをフォーム グループにネストすることをお勧めします。

form-group、input-group、control-group、

2. インライン フォーム:

ff9c23ada1bcecdd1a0fb5d5a0f18437 フォーム要素が追加されます。 -inline クラスを指定すると、その内容が左揃えになり、インライン ブロック レベル コントロールとして動作します。ビューポートの幅が少なくとも 768 ピクセルの場合にのみ適用されます (ビューポートの幅がこれより小さい場合、フォームが折りたたまれます)。

インライン フォームのラジオ/複数選択ボックス コントロールの幅は width: auto に設定されます。

各入力コントロールのラベル label を設定しない場合、スクリーン リーダーは正しく識別できなくなります。これらのインライン フォームの場合、ラベルに .sr 専用クラスを設定することで非表示にできます。

3. 水平方向に配置されたフォーム : .form-horizo​​ntal クラスをフォームに追加して、.form-group の動作を変更します。これにより、グリッド システム

4、複数選択、ラジオ ボタンの行のように動作します。 : .radio、.radio-inline、.checkbox、.checkbox-inline。

5. 静的コントロール : 水平方向にレイアウトされたフォームで、プレーン テキストの行と label 要素を同じ行に配置する必要がある場合は、.form-control-static クラスを e388a4556c0f65e1904146cc1a846bee 要素に追加するだけです。

6. コントロールのステータス

.disabled クラスはコントロールを無効にします。disabled が 2d47ade9e2c287df4a5ae32dd136bb3b、bb9345e55eb71822850ff156dfde57c8、または d5fd7aea971a85678ba271703566ebfd 要素を使用して適用できますが、一致するレンダリングを取得するには bb9345e55eb71822850ff156dfde57c8 要素を使用することをお勧めします。各ブラウザの効果。

画像: 画像の形状、img-rounded、img-circle、img-thumbnail、IE8 は CSS3 の角丸属性をサポートしていません。

補助: テキストミュート、テキストプライマリ、テキスト成功、テキスト情報、テキスト警告、テキスト危険 、bg-primary、bg-success、bg-info、bg-warning、bg-danger、三角形のシンボル、キャレット 、 浮く 、中心

コンポーネント スタイル

アイコン:

200 Glyphicon Halflings のフォント アイコン。

アイコン クラスは空の要素にのみ適用でき、他のコンポーネントと組み合わせて使用​​することはできません。

<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

ff9c23ada1bcecdd1a0fb5d5a0f18437 に含まれない bb9345e55eb71822850ff156dfde57c8 要素については、.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 サイトの他の関連記事を参照してください。