1：ブートストラップの紹介
Boostrapは、フロントエンドチームの開発効率を大幅に向上させる非常に人気のあるフロントエンド開発フレームワークです。 Bootstrapは、一般的なCSSレイアウトコンポーネントとJavaScriptプラグインを完成させ、開発者が簡単に使用できるようにします。 Bootstrapを使用して、美しくレスポンシブなページをすばやく作成し、モバイルデバイスと互換性があります。
2：ブートストラップ機能
CSSプラグインの完全なセット、豊富な事前定義されたスタイルシート、jQueryベースのJSプラグインテーブルのセットを提供します。柔軟なレスポンシブグリッド削除システム。 Less and SASSに基づくモバイルファーストベースの開発。
3：ブートストラップを使用します
1。ステップ1：
http://www.bootcss.com/で最新のブートストラップをダウンロードしてください。減圧後、3つのフォルダーがあり、それぞれCSS、JS、およびフォントを配置します。 CSSおよびJavaScriptファイルの圧縮バージョンがあり、ニーズに応じてバージョンを選択できます。非圧縮バージョンは開発中に使用され、圧縮バージョンはリリース中に使用されます。
2。テンプレートコード表示を修正しました
<！doctype html> <html lang = "zh-cn"> <head> <meta charset = "utf-8"> <meta http-equiv = "x-ua互換" content = "ie = edge、chrome = 1"> <！ - ie = edgeは、最新のエンジンを使用するために最新のエンジンを使用するためにIEを使用します。 name = "Viewport" content = "width = device-width、initial-scale = 1"> <！ - 上記の3つのメタタグ *は正面に配置する必要があり、その他のコンテンツは *それらに従う必要があります。 - > <title> Bootstrapテンプレートスタイル</title> <！ - bootstrapの紹介 - > <link href = "css/bootstrap.min.css" rel = "styleSheet"> <！ - IE8およびIE9をサポートするHTML5フレームワークとRespons.jsを紹介します。 IE 8は、メディアクエリのサポートを達成するために、Respons.jsの協力を必要とします。 respons.jsはファイルの下で実行できなくなります：//パスfile：//-> <！ - [if lt ie 9]は、ie9-> <！ - [if lt ie 9]> <script src = "// cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js" src = "// cdn.bootcss.com/respond.js/1.4.2/respond.min.js"> </script> <！[endif] - > </head> <body> <h1> hello、world！ </h1> <！ - bootstrapの動的効果を実現するために下部のjqueryプラグインを引用してください - > <script src = "// cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script><！ src = "js/bootstrap.min.js"> </script> </body> </html>
3。基本的な使用法：
3.1全体的なフレームワーク-12グリッドシステム
Bootstrapのコアは、12ラスターシステムです。 12グリッドシステムは、Webページのコンテンツ領域を幅に応じて12コピーに分割します。 Web開発者は、それを部分に自由に組み合わせることができ、Webページのレイアウトを容易にし、レイアウトをきれいに標準化します。
Bootstarpは、コンテナと呼ばれるスタイルコンテナを提供します。コンテナは、自動中心の高度に適応的なスタイルです。 .Containerを使用すると、Webページコンテンツの最も外側のDIVスタイルとして使用できます。12グリッドWebページレイアウトを簡単に実装できます。さらに、この12グリッドシステムは画面サイズに適応し、.Containerは画面サイズに従ってグリッドの総幅と平均幅を自動的に調整します。
col-lg-n最大列幅95px> = 1200pxピクセルの場合、.container12を均等に分割します。残りの幅は100％です
Col-MD-N最大幅78px; .container12を均等に分割します> = 992pxピクセルの残り100％
col-sm-n最大列幅60px> = 768pxピクセルの場合、.container12を残りのケースと均等に分割します100％
col-xs-n列の幅はビューポートサイズ12に等しくなります。コンテナ12任意のサイズの画面に等しい
3.2基本スタイル
（1）BootstrapのH1-H6スタイルは太字でキャンセルされ、上下のマージンはH1-H3マージントップで再定義されています：20px;マージンボトム-10px; H3-H6マージントップ：10px;マージンボトム-10px;
（2）4つのアライメントスタイル、つまり.text-left、.text-center、.text-right、.text-justify .text-justify英語文字の両端を定義します。
（3）Bootstrapは5つのデフォルトのカラースタイル、-primaryキーブルー、-Success Success Green、-info情報青色の警告オレンジ、 - デンジャー危険な赤を提供します
3.3BTNコンポーネント +BTN-GROUP
<button type = "button" class = "btn btn-primary">キーボタン</button>アラートコンポーネント<div class = "alert" class = "alert alert-danger">危険警告</div>
一般的なコンポーネントには、ウルトラスマールXS、小型SM、通常、および大規模なLGの4つのサイズがあります。メソッドを使用します。コンポーネントname-size <button type = "button" class = "btn btn-lg"> ultra-large button </button>同じコンポーネントのさまざまな種類のボタンを組み合わせて使用できます。
<ボタンタイプ= "button" class = "btn btn-primary btn-lg"> ultra-largeキーボタン</button </button> <！ - btn-group-> <div> <butth> home </button> <butth> button> <ボタン> <ボタン>ページ2 </button> <ボタン>最後のページ> <div> <ボタンタイプ= "div> <ボタン="データ - リスト<span> </span> </button> <ul> <li> lenovo </li> <li> asus </li> <li> Apple </li> </ul> </div>
3.4テーブルテーブルスタイル：
テーブル要素にdiv親要素を追加し、このdivにclass = "table-responsive"を追加します。対応するテーブルを作成します。ビューポートピクセルが768px未満の場合、水平スクロールバーが表示されます。
<！ - テーブル、テーブルストライプのリストの間に間隔の色があります、テーブル応答テーブルAdaptive - > <div> <table> <tr> <td> 1 </td> <td> 1 </td> <td> 1 </td> <td> 1 </td> </tr> <tr> <td> 2 </td> <td> 2 </td> <td> 2 </td> </tr> <tr> <td> 2 </td> </tr> <tr> <td> 3 </td> <td> 3 </td> <td> 3 </td> </tr> </table> </div>
3.5バッジバッジ
<！ - バッジバッジ - > <br/> <a href = "＃"> Special Care <span> 42 </span> </a> <br/>
3.6ナビゲーションバー
（1）カプセルナビゲーションバー
<ul> <li> <a href = "＃"> dynamic <span> 42 </span> </a> </li> <li> <a href = "＃">プロフィール</a> </li> <li> <a href = ">プライベートメッセージ<span> 3 </span> </a> </li>
（2）ラベルナビゲーションバー
<！ - タグナビゲーションメニュー - > <ul> <li> <a href = "＃news1" data-toggle = "tab">会社news </a> </li> <li> <a href = "＃news2" date-toggle = "tab">業界ニュース</a> </li> <li> <a href3 "＃news3" data-toggle = "tab">通知</a> </li> </ul> <div> <div div = "news1"> <ul> <li> Company News </li> </ul> </div> <div div news2 "> <ul> <li>業界ニュース</li> </li> </li> </div> <div発表</li> </ul> </div> </div>
3.7入力グループ
<！ - 入力+ボタンの組み合わせ - > <div> <入力タイプ= "text"> <span> <butth>検索</button> </span> </div>
3.8カルーセル
<！doctype html> <html lang = "zh-cn"> <head> <meta charset = "utf-8"> <meta http-equiv = "x-ua互換" content = "ie = edge、chrome = 1"> <meta name = "viewport ="スタイル</title> <link href = "../ css/bootstrap.min.css" rel = "styleSheet"> <style> body {background：eee} .item {position：relative;高さ：400px} .item img {position：relative;幅：100％;高さ：400px} .item p {position：absolute;トップ：40％;幅：100％;色：#fff; } .item h1 {position：absolute;トップ：20％;幅：100％;色：#fff; TEXT-ALIGN：center} @media（max-width：768px）{.slide {width：100％}} </style> <！ - [if lt ie 9]> <script src = "../ js/html5shiv.min.js"> </script> < src="../js/respond.min.js"></script><![endif]--><script src="../js/jquery.min.js"></script><script src="../js/bootstrap.min.js"></script></head><body><div><div id="myCarousel" data-ride="carousel" > <！ - スライドナビゲーション - > <ol> <li data-target = "＃mycarousel" data-slide-to = "0"> </li> <li data-target = "＃mycarousel" data-slide-to = "1"> </li> <li date-target = "＃mycarousel"＃mycarousel "slide =" 1 "> </li> < data-slide-to = "2"> </li> </ol> <div style = "height：400px"> <！ - first slide-> <div style = "height：400px"> <img data-holder rendered = "true" src = "../ images/icon1.png"> <h1> title < 1 </div> </div> <！ - 2番目のスライド - > <div> <img data-holder rendered = "true" src = "../ images/icon2.png"> <div> title2 </div> </div> <！ src = "../ images/icon3.png"> <div> title3 </div> </div> <！ - live-right navigation-> <a href = "＃mycarousel" data-slide = "prev"> <span aria-hidd = "true"> </span> <span>前</span </a> aria-hidden = "true"> </span> <span> next </span> </a> </div> </div> <script> $（function（）{$（ '＃mycarousel'）3.9パネルグループ
<！Doctype html> <HTML> <ヘッド> <メタcharset = "utf-8"> <title> bootstrapインスタンスページ（タブ）プラグイン</title> <link rel = "styleSheet" href = "../ css/boottrap.min.css"> <src = ".. js/jsmin. src = "../ js/bootstrap.min.js"> </script> <body> <div id = "panel-group"> <！ - パネルコンテンツクローズ - > <div> <div> <div> <div> <h4> <a data-toggle = "collapse" data-parent = "＃panel-group" href = "＃collapsone" id = "collapseone"> <div>パネルコンテンツ</div> </div> <！ - パネルコンテンツオープン - > <div> <div> <div> <h4> <a data-toggle = "collapse" data-parent = "＃panel-group" href = "＃collapsetwo">パネルタイトル</a> </h4>コンテンツ</div> </div> </div> </body>
3.10メディアクエリ
<！doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <meta name = "viewport" content = "content ="最大スケール= 1.0、ユーザースケール= 1.0、width = device-width、height、hight、hight = 1.0 "/> <titlid> 200px;バックグラウンドカラー：赤;}/*最大味の良い幅が980pxの場合、つまり味が良い<= 980px内部スタイルが有効になります*/@メディア（最大 - width：320px）{div {font-size：10px; background：yellow;}}} query </div> </body> <script> window.onresize = function（）{var mydiv = document.getelementsbytagname（ "div"）[0]; mydiv.innerhtml = document.documentelement.clientWidth;} </script> </html>4：注意すべきこと
1。コンテナ、col-（ラスター）は、別のdivに包まれてから、その中の他のコンテンツを定義する必要があります。
2.メディアクエリに対して定義できないクラスまたはIDを設定する場合は、要素に対して定義できず、定義col-（ラスター）のクラスまたはIDをDivに書き込むことはできません。
Medioは、メディアクエリを定義するためのクラスエラーを書き込む方法<div> aa </div>
それを書く正しい方法はです
<div> <div> aa </div> </div>
3.高さの適応を実現するためにコンテナを使用する場合、要素に高さを追加することはできません。また、その親要素に対してオーバーフローハンドを設定する必要があります。
4.要素の位置を設定した後、要素の幅は0です。要素を中央に置きたい場合は、幅を追加する必要があります：100％。テキストアライグ：センター;
5.入力タグを使用する場合、col-（ラスター）が親クラスに対して定義されている場合、入力にフォームコントロールを追加して、入力のサイズを親クラスと同じくらい大きく設定できます。