1.Bootstrap説明：
1.コンセプト：Twitterからフロントエンドの開発フレームワーク、ブートストラップは、現在、非常に人気のフロントエンドのフレームワークです。ブートストラップは、Web開発者となるよう、より迅速に、HTML、CSS、JavaScriptをベースとし、それは、シンプルで柔軟性があります。
*フレーム：半完成ソフトウェアは、開発者がコーディングを簡素化し、開発中に、基礎フレームすることができます。
*利点：
1. JSとCSSスタイルプラグインの多くを定義します。私たちの開発者は、これらのスタイルを使用することができますし、エフェクトプラグインが豊富なページを取得します。
2.Responseレイアウト。
*異なる解像度の互換デバイスとのページ。
2.クイックスタート
1.ダウンロードブートストラップします。https：//v3.bootcss.com/getting-started/#download
2.これらの3つのフォルダ{CSSスタイル]フォルダ、JS、フォントやフォント、アイコンプロジェクトフォルダ内}
3.必要なリソースファイルを紹介し、HTMLページを作成します。以下のような：jQueryの
3.ケース・プレゼンテーション
<！DOCTYPE HTML>
<HTML LANG = "CN-ZH">
<HEAD>
<METAのcharset = "UTF-8">
<META HTTP-当量= "X - UA互換"コンテンツ=「のIE =エッジ「>
<META NAME =」ビューポート「コンテンツ=」幅=幅デバイス、初期スケール= 1「>。
<！ - * 3つのメタタグは*前面に、* *他のコンテンツでなければなりません後に続きます！- >
のHelloWorld </タイトル>ブートストラップ<タイトル>
！ブートストラップ- - <>
<リンクのhref = "CSS / bootstrap.min.css"のrel = "スタイルシート">
<！ -ブートストラップのすべてのためのjQueryの（JavaScriptがプラグインjQueryのに依存している、それは）前に配置する必要があります- >
<スクリプトSRC = "JS / jQueryの-3.3.1.min.js"> </ SCRIPT>
<！ -をJavaScriptのプラグインのロードブートストラップのすべて。また、必要に応じて、単一のプラグインをロードすることができます。- >
</ HTML>
に応じて4レイアウト
のページの同じセットは、異なる解像度のデバイスと互換性を持つことができます。
*達成：システムは、グリッドに依存：グリッド線が均等に指定することができるいくつかのグリッド要素を表す、12に分割されている
*手順を：
1.コンテナを定義します。上記の表に対応する、
*容器の分類：
1.コンテナ：ブランクの両側に
2コンテナ液：各デバイスは、幅の100％である
2が定義された行です。同等のtrスタイル前：行
3.定義された要素。異なるデバイスで指定された要素、占有格子の数。スタイル：col-機器コード-格子の数
*コード装置：
1. XS：超小型の携帯電話の画面（<768px）：COL-XS-12は、
小さなスクリーン版（≥768px）：2. SM
3. MD：中画面デスクトップモニタ（≥992px）
4. LG：大画面大きなデスクトップモニタ（≥1200px）
*注意：
1.グリッド線の数は、余分なラップを12を超える場合。
2.ラスター上位互換クラス属性。スクリーングリッドよりも大きいか、カットオフポイント装置の大きさに等しい幅のクラスが使用されます。
3.実際の幅は、デバイスクラスの最小値は、要素が行全体でカバーされる、ラスタデバイスコード属性よりも小さい場合。
5. CSSスタイルとJSプラグ
グローバルCSSスタイル：
*ボタン：クラス= "BTN-BTNデフォルト"
*画像：
*クラス= "IMG応答性"：任意のサイズの画像が100％
*画像形状
* <IMG SRC = "..." ALT = " ..."クラス= "IMG-丸め">： スクエア
* <IMG SRC = "..." ALT = "..."クラス= "IMG-サークル">： 円形
* <IMG SRC = "..." ALT = "..."クラス= "IMG-サムネイル">： フレーム
*表
*表
*表接さ
*表hover-
*フォーム
*項目がテーブルに追加：クラス=「フォームコントロール」
2.コンポーネント：
*ナビゲーション
*バータブ
3.ウィジェット：
*図の回転
ケース・プレゼンテーション
<！DOCTYPE HTML>
<HTML LANG = "ZH-CN">
<HEAD>
<METAのcharset = "UTF-8">
<META HTTP-当量= "X - UA互換"コンテンツ= "のIE =エッジ">
<名前=メタ「ビューポート」コンテンツ=>「幅=幅デバイス、初期スケール= 1。」
<！ - * 3つのメタタグは、トップ*、* *その後に続くべき他のコンテンツの上に配置する必要があります！- >
のHelloWorld </タイトル>ブートストラップ<タイトル>
！ブートストラップ- - <>
<リンクのhref = "CSS / bootstrap.min.css"のrel = "スタイルシート">
<！ -ブートストラップのすべてのためのjQueryの（JavaScriptがプラグインjQueryのに依存している、それは）前に配置する必要があります- >
<スクリプトSRC = "JS / jQueryの-3.3.1.min.js"> </ SCRIPT>
<！ -をJavaScriptのプラグインのロードブートストラップのすべて。また、必要に応じて、単一のプラグインをロードすることができます。- >
<
スクリプトSRC = "JS / bootstrap.min.js"> </ SCRIPT> <スタイル>
.paddtop {
パディングトップ：10pxの;
}
.search-BTN {
フロート：左;
国境：1pxの固体＃ffc900。
幅：90PX;
高さ：35px;
背景色：＃ffc900。
テキスト整列：センター;
行の高さ：35px;
マージントップ：15ピクセル;
}
.search入力{
フロート：左;
ボーダー：2ピクセル固体＃ffc900。
幅：400ピクセル;
高さ：35px;
パディング左：5pxの;
マージントップ：15ピクセル;
}
.jx {
ボーダー底：2ピクセル固体＃ffc900。
パディング：5pxの;
}
.company {
高さ：40ピクセル。
背景色：＃ffc900。
テキスト整列：センター;
行の高さ：40ピクセル;
フォントサイズ：8px;
}
</スタイル>
</ head>の
<BODY>
<！ - 1页眉部分- >
<ヘッダ・クラス= "コンテナ流体">
<DIV CLASS = "行">
<IMG SRC = "IMG / top_banner.jpg"クラスは= "IMG応答">
</ div>
<DIV CLASS ="行paddtop ">
<DIV CLASS =" COL-MD-3 ">
<IMG SRC =" IMG / logo.jpg」クラス= "IMG応答">
</ div>
<DIV CLASS = "COL-MD-5">
<入力クラス= "検索入力を"プレースホルダ= "请输入线路名称">
<a class="search-btn" href="#">搜索する</a>
</ DIV>
<DIV CLASS = "COL-MD-4">
<IMG SRC = "IMG / hotel_tel.png"クラス=」"> IMG-応答
</ div>
</ div>
<！ -导航栏- >
<divのクラス="行">
ナビゲーションバーナビゲーションバー-デフォルト"> = <NAVクラス"
の<divクラス="コンテナ流体」 >
<！ - -トグルブランドとは、より良いモバイルディスプレイのためにグループ化します>
<DIV CLASS = "ナビゲーションバーヘッダを">
<！ -定义汉堡按钮- >
<ボタンタイプ= "ボタン"クラス= "トグルは、ナビゲーションバー崩壊します"データトグル="崩壊」データターゲット= "＃1、BS-例えば、ナビゲーションバー-崩壊-1" ARIA拡張= "偽">
<スパンクラス= "SR-のみ">トグルナビゲーション</スパン>
の<spanクラス= "アイコンバー"> </ span>の
<スパンクラス= "アイコンバー"> </ span>の
<スパンクラス= "アイコンバー"> </ span>を
</ button>の
<クラス= "ナビゲーションバー-ブランド」のhref = "＃">首页</a>の
</ div>
<！ - NAVリンク、フォームを収集し、そしてトグルするための他のコンテンツ- >
<DIV CLASS = "崩壊ナビゲーションバー、崩壊" ID = "BS-例えば、ナビゲーションバー-崩壊-1">
<ULクラス= "NAVナビゲーションバー-NAV">
<LIクラス= "アクティブ"> <a href="#">リンク<スパンクラス= "SR-のみ">（現在の）</スパン> </a>の</ LI>
<LI> <HREF =」 ＃ ">リンクする</a>ます。</ li>
<LI> <a href="#">リンクする</a>ます。</ li>
<LI> <a href="#">リンクする</a> </ LI>
<LI> <a href="#">リンクする</a>ます。</ li>
<LI> <a href="#">リンクする</a>ます。</ li>
</ ulの>
</ div> <！ - /.navbar-collapse - >
</ div> <！ - /.container-fluid - >
</ NAV>
</ div>
<！ -轮播图- >
<divのクラス= "行">
<DIV ID = "カルーセル-例えば、一般的な"クラス= "カルーセルスライド"データ乗り= "カルーセル">
<！ -インジケータ- >
<オールクラス= "カルーセル・インジケーター">
<LIデータ・ターゲット= "＃カルーセル-例-一般的な"データslide- = "0"クラス= "アクティブ"> </ LI>
<LIデータターゲット=「＃カルーセル、例えば汎用」データスライドへ=「1」> </ LI>
<LIデータターゲット=「＃カルーセル、例えば汎用」データスライドへ= "2 "> </ LI>
</ OL>
<！ -スライドのラッパー- >
<divのクラス="カルーセル・インナー"役割= "リストボックス">
<DIV CLASS = "項目アクティブ">
<IMG SRC =" IMG /banner_1.jpg "ALT =" ... ">
</ div>
<divのクラス="アイテム">
<IMG SRC =" IMG / banner_2.jpg "ALT =" ... ">
</ div>
<div要素クラス= "アイテム">
<IMG SRC = "IMG / banner_3.jpg" ALT = "...">
</ div>
</ div>
<！-コントロール- >
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<スパンクラス= "glyphicon glyphiconシェブロン左"ARIA-隠さ="真の"> </ span>を
<スパンクラス= "SR-のみ">前</ span>の
</a>の
<クラス= "右カルーセル・コントロール"のhref = "＃カルーセル-例-一般的な"役割= "ボタン"データ・スライド= "次">
<スパンクラス=" glyphicon glyphiconシェブロン右」ARIA-隠さ= "真の"> </ span>の
<スパンクラス= "SR-のみ">次へ</ span>を
</a>の
</ DIV>
< / DIV>
</ヘッダ>
<！ - 2主体部分- >
<DIV CLASS = "コンテナ">
<DIV CLASS = "行JX">
<IMG SRC = "IMG / icon_5.jpg">
の<span>热门精选</スパン>
</ div>
<DIV CLASS = "行paddtop">
<クラス= DIV "MD - 。COL 3">
<divのクラスは=> "サムネイル"
"= <IMG SRC = "IMG / jiangxuan_3.jpg" Altキーを">
<P>直接青島、大連4後半自由5日（年前売り+家族/ハネムーン/レジャー選択肢+高級ホテル+オプションのシャトル機）</ P>
<フォント色= "赤">＆円、699 </ FONT>
</ div>
</ div>
<DIV CLASS = "COL-MD- 3。">
<DIV CLASS = "サムネイル">
<IMGのSRC =「IMG / jiangxuan_3.jpg「ALT =」「>
<p型>上海ノンストップ長春4泊5日の自由な行使（春祭りの前売り+家族/ハネムーン/レジャー選択肢+高級ホテル+オプションのシャトル機）</ p型>
<フォントの色= "赤">＆円; 699 </ FONT>
</ div>
</ div>
<divのクラス= "MD - COL 3">
<divのクラスは= "サムネイル">
<IMG SRC =「IMG / jiangxuan_3.jpg 「ALT =」「>
<p型>北京ノンストップ5日4泊自由な行使（春祭りの前売り+家族/ハネムーン/レジャー選択肢+高級ホテル+オプションのシャトル機）雲南を</ p型>
<フォント色=」レッド「>＆円; 699 </ FONT>
</ div>
</ DIV>
<DIV CLASS = "MD - 。COL 3">
<divのクラスには、=> "サムネイル"
<IMG SRC = "IMG / jiangxuan_3.jpg" Altキーは= "">
<P>直接上海トリメチレン5日4泊を自由な行使（春祭りの前売り+家族/ハネムーン/レジャー選択肢+高級ホテル+オプションのシャトル機）</ P>
フォントの色=「赤」>＆円。699 </ FONT> </ div> </ div> <DIV CLASS = "COL-MD-4"> <DIVクラスは= "サムネイル"> <IMG SRC = "IMG / jiangxuan_3.jpg" ALT = "">
三亜へ<P>上海直行便5日4泊自由な行使（春祭りの前売り+家族/ハネムーン/レジャー選択肢+ラグジュアリーホテル+オプションのシャトル機）</ p型>
<フォント色=「赤」>＆円、699 < / FONT>
</ div>
</ div>
<DIV CLASS = "COL-MD-。4">
<DIVクラスは= "サムネイル">
<IMG SRC = "IMG / jiangxuan_3.jpg" Altキー= "">
<P>三亜上海直行便5日4泊自由な行使（春祭りの前売り+家族/ハネムーン/レジャー選択肢+高級ホテル+オプションのシャトル機）</ p型>
<フォント色=「赤」>＆円; 699 </ FONT>
</ div>
</ div>
</ div>
<DIV CLASS = "行は">
<DIV CLASS = "COL-MD-。4">
<DIVクラスは= "サムネイル">
<IMG SRC =「IMG / jiangxuan_3.jpg "Altキー="「>
<P>三亜上海直行便5日4泊自由な行使（春祭りの前売り+家族/ハネムーン/レジャー選択肢+ラグジュアリーホテル+オプションのシャトル機）</ p型>
<フォント色=「赤」>＆円; 699 </ FONT>
</ div>
</ div>
<DIV CLASS = "COL-MD-。4">
<DIVクラスは= "サムネイル">を
<IMG SRC =「IMG / jiangxuan_3.jpg」ALT =「」>
三亜に<p型>上海直行便5日4泊自由な行使（春祭りの前売り+家族/ハネムーン/レジャー選択肢+ラグジュアリーホテル+空港送迎オプション） </ P>
<フォント色= "赤">＆円、699 </ FONT>
</ div>
</ div>
<DIV CLASS = "COL-MD-4">
<DIVクラスは= "サムネイル">
<IMG SRC =「IMG / jiangxuan_3.jpg」ALT =「」>
<p型>三亜上海直行便5日4泊自由な行使（春祭りの前売り+家族/ハネムーン/レジャー選択肢+高級ホテル+オプションのシャトル機）</ P >
<フォント色= "赤">＆円; 699 </ FONT>
</ div>
</ div>
</ div>
</ div>
</ div>
</ div>
<！ - 3.フッタ- - >
<フッタクラス= "コンテナ流体">
<DIV CLASS = "行">
<IMG SRC = "IMG / footer_service.png"クラスは= "IMG応答">
</ div>
<divのクラス= "行会社">
若い学校の教師CSDNブログ著作権著作権2017年から2019年、すべての権利予約呂ICP -1 19007759
</ DIV>
</フッタ>
</ BODY>
</ HTML>
------------ ---------