<！DOCTYPE HTML>
<HTML LANG = "ZH-CN">
<HEAD>
<METAのcharset = "UTF-8">
<META HTTP-当量= "X - UA互換"コンテンツ= "のIE =エッジ">
<名前=メタ「ビューポート」コンテンツ=>「幅=幅デバイス、初期スケール= 1。」
<！ - * 3つのメタタグは、トップ*、* *その後に続くべき他のコンテンツの上に配置する必要があります！- >
<タイトル> BootstrapTest </ TITLE>
<！ -ブートストラップ- >
<リンクのhref = "https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"のrel = "スタイルシート">
<！ - - HTML5のシムとRespond.jsはIE8のサポートHTML5要素とメディアクエリ（メディアクエリ）関数のようにすることです>
//プロトコルは（つまり、直接参照するには、HTMLページをドラッグ＆ドロップします- <警告:!経由のファイルを> -原子炉が）ページがRespond.jsアクセスしたときに動作しません
<！ - [IF LT IEを9]>
<SCRIPT SRC =「https://cdn.jsdelivr.net/npm/[email protected]/dist /html5shiv.min.js "> </ SCRIPT>
<SCRIPT SRC =" https://cdn.jsdelivr.net/npm/[email protected]/dest/respond.min.js「> </ SCRIPT>
<！[endifの] - >
</ HEAD>
<BODY>
<DIV CLASS = "コンテナ">
<H1>こんにちは、世界！<の/ H1>
基礎ブートストラップに使用されるフレキシブルグリッドレイアウトブートストラップ。画面12個のアリコートに分割され、ブートストラップ、特にDIVに二分占有デジタルDIVを提供することによって占められる画面の幅に決定することができます。以下のような：
<DIV CLASS = "行"> <！ - 新しい行を表します。 - >
<divのクラス= -スタイル= "国境：1pxのソリッドブラック;高さ：100pxに、" "MD COL 8。"> </ div>
<クラス= divのスタイル= "4-COL-MD。" "国境：1pxのソリッドブラック;高さ：100pxに;"> </ div>
</ div>の
最初のdivクラス= "COL-MD-8で "、 最初の2 DIVクラス=「COL-MD-4 」、 「8」と「4」の数値パーセントDIV画面幅では、「12」に等しい一緒に添加しました。第一は、第DIV「4/12」を表す画面DIV「8/12」の全幅です。注：ブロックを強調するために上記のコードでは、我々は、1つの画素DIV黒い実線の境界線の幅を設定し、高さが100個のピクセルです。
<スパンクラス= "削除-glyphiconをglyphicon"アリア-隠された= "trueに"> </ span>の
<HR>
<テーブルクラス= "テーブル">
<！ -行オン- >
<TRクラス= "アクティブ"> <TD> DDD </ TD> </ TR>
<TRクラス= "成功"> <TD> FFF < / TD </ TR>
<TRクラス= "警告"> <TD> D </ TD </ TR>
<TRクラス= "危険"> <TD> DD </ TD </ TR>
<TRクラス= "インフォ「> <TD> D </ TD </ TR>
</ TABLE>
<HR>
COL-XS- *超小型携帯電話の画面（<768px）<BR>
COL-SM- *小型薄型（≥768px）<BR>
COL-MD- *媒体画面デスクトップモニタ（≥992px）<BR>
COL-LG- *大画面大きなデスクトップモニタ（≥1200px）<BR>
<DIV CLASS = "行"> <！ -別の行を表します。 - >
<divのクラス= "COL-XS-4"スタイル= "国境：1pxのソリッドブラック;高さ：100pxに; "> </ div>
<divのクラス=" COL-MD-4 "スタイル="国境：1pxのソリッドブラック;高さ：100pxに;「> </ div>
</ div>
<H3>複数のレイアウトプロパティ</ H3>
あなたはDIVをしたい場合は、それを行う方法を別の画面で別の画面幅を占有？ブートストラップは、DIVは別の画面で異なる画面の幅を提示するように、私たちは、DIVのレイアウトプロパティに複数のカテゴリを書き込むことができます。例えば：
<DIV CLASS = "行">
<DIV CLASS = "COL-MD- 8 COL-XS- 6 COL-LG- 4。。。"スタイル= "ボーダー：1ピクセルベタ黒;高さ：100pxに;"> </ div>
</ div>の
電話で「8/12」所有「6/12」で、画面の中央にあるDIVの所持は、画面が大画面の「4/12」の割合を占めています。
<HR>
の<divクラス= "ナビゲーションバーナビゲーションバー-逆ナビゲーションバー-固定-トップ"役割= "ナビゲーション">
<DIV CLASS = "コンテナ">
<DIV CLASS = "ナビゲーションバー、ヘッダー">
<クラス=「ナビゲーションバー-ブランドアクティブ"のhref ="ホームページのURL ">トップリクエストネットワーク</a>の
<a class="navbar-brand"href="图书页面URL">ブックス</a>の
<=クラスA"
ナビゲーションバーブランド"のhref = "文章页面URL">文章</a>の</ div>
<divのクラス= "BTN-グループ"スタイル="マージントップ：10pxの; フロート：右; ">
<！ -すべてのJavaScriptのプラグインのブートストラップ・ロード。また、必要に応じて、単一のプラグインをロードすることができます。- > <SCRIPT SRC = "https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"> </ SCRIPT> </ BODY> </ HTML>
