開発者にとってBootstrapの最大の利点は、そのレスポンシブレイアウトといくつかの優れたスタイルです。
次に、ブートストラップを使用するためにいくつかのステップと一般的に使用されるものを紹介します。
1。ヘッダーを書きます
<head> <meta charset = "utf-8"> <！ - ieを最新のレンダリングモードを使用するために、このタグを追加するために、> <メタhttp-equiv = "x-ua互換" content = "ie = edge"> <！ - レスポンシブレイアウトの場合、最初にデバイスの物理的幅を取得します。 name = "Viewport" content = "width = device-width、initial-scale = 1"> <title> LearnBootstrap </title> <！ - ファイルを直接参照 - > <link rel = "styleSheet" text/css "href =" css/boottrap.min.css "> href = "// cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css"> <！ - ie9以下をサポートするために、これらを追加するために、これらを追加する - > <！ src = "https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"> </script> <！ - 彼にメディアクエリをサポートする、つまり、レスポンティブ - > <スクリプトsrc = "https://oss.maxcdn.com/respond/1.4.2/respond.min.js"> </script> <！ - [endif] - > </head>
2. JSを紹介します
これは体に書くことができます
<！ - jQueryファイル。必ず紹介 - > <スクリプトsrc = "// cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script> <！--最新のブートストラップコアJavascriptファイル - >
3.コンテナクラスを使用します
コンテナクラスは、一般的に使用されるDivクラスです
主にセンタリング関数を使用します
<div>こんにちは</div>
4.ラスター化されたシステムを使用します
Rasterized Systemは、ブートストラップ用に非常に一般的に使用されるレイアウトシステムです
次のように簡単に使用します
<div> <！ - xsは電話で、SMはタブレットで、MDはデスクトップで意味があります。次の数字は、占有されている列の数を表しています。フルスクリーンは12列 - > <！ - コンテンツがグリッドの高さを超え、高さが増加し、幅が増加しません - > <！ - オフセットは、右に移動する列の数を意味します - > <div> .12 .COL-SM-6 .COL-MD-8.COL-XS-2 .COL-SM-6 .COL-MD-8.COL-MD-8.COL-MD-8.COL-MD-8. .col-sm-6 .col-md-4 </div> </div> <div> <！ - プッシュを後方に移動し、前方に移動します - > <div> .col-xs-12 .col-sm-6 .col-md-8 </div> <div> .col-xs-6 .col-md-4 </div> </div> div> div> div> div> div>
ラスター化されたシステムは、異なるデバイスに従って異なる幅を調整できることがわかります。
5。フォームを使用します
<div> <！ - レスポンシブテーブル、コンテンツは左右に移動するには長すぎます - > <div> <！ - 最後のいくつかのテーブルは、境界のあるテーブルです。マウスがTbodyの列を通過すると、色が暗く、テーブルが圧縮されます - > <taup> <thead> <tr> <th>テーブルタイトル</th> <th>テーブルタイトル</th> <th>テーブルタイトル</th> </tr> </thead> <tbody> <！コンテンツ</th> <th>テーブルコンテンツ</th> <th>テーブルコンテンツ</th> <th>テーブルコンテンツ</th> <th>テーブルコンテンツ</th> <th>テーブルコンテンツ</th> <th>テーブルコンテンツ</th> <th> <th> <th> <th> <th> <th> <th> <th> <th> <th> <th> <！ - 行の色はベージュです - > <tr> <th>テーブルコンテンツ</th> <th>テーブルコンテンツ</th> <th>テーブルコンテンツ</th> <th>テーブルコンテンツ</th> <th>テーブルコンテンツ</th> <th>テーブルコンテンツ</th> <th> <th> <th> <th> <th> <th> <th> <th> <th> <th </th </th> <th>テーブルコンテンツ</th> <th>テーブルコンテンツ</th> <th>テーブルコンテンツ</th> <th>テーブルコンテンツ</th> <th>テーブルコンテンツ</th> <th>テーブルコンテンツ</th> <th>テーブルコンテンツ</th> <th> <th>
特定のグリッドの色を変更したい場合は、THタグにTRのようなクラスを追加できます
6.フォームを使用します
最も基本的な使用法は次のとおりです
<div> <form> <！ - アイテムの一部は、ラベルと入力を備えたフォームグループの親レイアウトです - > <div> <！ - 入力IDに対応するラベル - > <ラベル= "emblyinputemail1"> emailアドレス</label> <！ - 入力クラスはフォームコントロールに設定する必要があります - > <入力タイプ= "id =" emputentemail1 "> </</</</< for = "exampleinputpassword1"> password </label> <入力タイプ= "password" id = "examplutpassword1" placeholder = "placeholder"> </div> <div> <label for = "emblyinputfile"> file input </label> <入力タイプ= "ファイル" id = "emblutinputfile"> <> <p> <p> <p> <p> </<> <入力タイプ= "チェックボックス">私をチェックアウト</label> </div> <button type = "submit"> submit </button> </form> </div>
フォームクラスをフォームインラインに設定すると、すべての要素が同じ行に表示されます
フォームクラスをForm-Horizontalに設定すると、各フォームグループは1行を表示しますが、幅を自分で設定する必要があります
のように
<div> <！ - 各フォームグループに1つの行を表示するようにしますが、各フォームグループの子は幅を指定する必要があります - > <フォーム> <div> <ラベル= "emai"> email </label> <！ - input-group let let displements and Supplementsは同じ行に表示されます - > <> div> <入力タイプ= "メール"プレースホルダー= "emai" emai "> </< for = "passwor">パスワード</label> <div> <入力タイプ= "password" placeholder = "placeholder =" id "=" passwor "> </div> </div> <button =" submit "> summit </button> </form> </div>
通常、アカウントを登録すると、情報が正しくないか正しい場合は、その隣にプロンプトが表示され、入力ボックスの色が異なります。
Bootstrapは、この非常に実用的な機能を提供します
<div> <form> <！ - 親のクラスに2つの項目を追加する必要があります - > <！ - 成功ステータス - > <div> <div> <inputsuccess2 "> input ="入力タイプ= "テキスト=" ID = "inputsuccess2" aria-describedby = "inputsuccess2status" <！ - この情報が隠されており、コードの読みやすさを高めます - > <span id = "inputsuccess2status">（success）</span> </div> <！ - 警告ステータス - > <div> <for = "inputwarning2">警告付きの入力</label> <input type = "text" id = "inputwarning2" aria-hidden = "true"> </span> <span id = "inputwarning2status">（警告）</span> </div> <！ - エラーステータス - > <div> <div> <div> <inputerror2 ">エラーを備えた入力</label> <入力タイプ="テキスト "Id =" interia2 "aria-described =" inputerror2status "> </> <> <> </sprian id = "exterror2status">（error）</span> </div> </form> </div>
7。ボタン
ボタンが不可欠です
<！ - 白い背景 - > <ボタンタイプ= "ボタン">（デフォルトスタイル）デフォルト</button> <！ - 青色の背景 - > <ボタンタイプ= "ボタン">（設定）プライマリ</ボタン> <！警告</button> <！ - 赤い背景 - > <ボタンタイプ= "ボタン">（危険）危険</button>
クラスに寸法を追加することもできます
<ボタンタイプ= "ボタン">（大きなボタン）大きなボタン</button> <ボタンタイプ= "ボタン">（デフォルトサイズ）デフォルトボタン</button> <ボタンタイプ= "ボタン">（小さなボタン）小さなボタン</button> <ボタン= "ボタン">（小さなボタン）余分な小さなボタン</ボタン>
上記は、ブートストラップの手順と一般的な使用法です
このフレームワークを使用した後、開発速度が向上しただけでなく、品質も向上しました。
それでも詳細に勉強したい場合は、ここをクリックして3つのエキサイティングなトピックを勉強して添付できます。
ブートストラップ学習チュートリアル
ブートストラップ実用的なチュートリアル
ブートストラッププラグインの使用チュートリアル
上記はこの記事のすべての内容です。みんなの学習に役立つことを願っています。誰もがwulin.comをもっとサポートすることを願っています。