ホームページ >ウェブフロントエンド >htmlチュートリアル >Bootstrap_html/css_WEB-ITnose を使ってすぐに始めましょう
Bootstrap_html/css_WEB-ITnose を使ってすぐに始めましょう
- WBOYオリジナル
- 2016-06-24 11:27:351440ブラウズ
Bootstrap をすぐに始めましょう
1. Bootstrap を使用する際に参照するファイル
Bootstrap を使用するには、基本構造が以下のファイルを参照する必要があります:
<link href="bootstrap.min.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" scr="jquery-1.10.2.min.js"></script> <script type="text/javascript" scr="bootstrap.min.js"></script>
最も簡単な例コードは
<!doctype html><head> <meta charset="utf-8"> <title>js</title> <link href="ace.min.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" scr="jquery-1.10.2.min.js"></script> <script type="text/javascript" scr="bootstrap.min.js"></script></head><body><div> <h1 class="btn btn-success btn-large"><i class="icon-user icon-white"></i>Hello,World</h1></div></body></html>
表示効果は次のとおりです:
2. 使用前のポイント 1. DOCTYPEBootstrap は HTML5 要素を使用するため、HTML ヘッダーを追加する必要があります
<!DOCTYPE html> <html> .... </html>2. ビューポート
<meta name="viewport" content="width=device-width, initial-scale=1.0">
- Width =device-width => ページの幅は、異なる画面解像度のデバイスで正しくレンダリングできるかどうかを意味します。調整される (はい/いいえ);
- initial-scale=1.0 = > スケーリングなしの 1:1 の比率で表示される、最小許容スケーリング率を示します。 maximum-scale=2.0: 最大許容スケーリング比。
- Maximum-scale=1.0 が user-scalable=no とともに使用される場合。ズームを無効にすると、ユーザーはスクロールのみできるようになり、Web サイトがネイティブ アプリのように見えます。
3. img-sensitive レスポンシブ画像
画像のレイアウトに対する応答性を高めるには、画像に img-sensitive 属性を追加します。そのスタイルは次のとおりです:
.img-responsive { display: inline-block; height: auto; max-width: 100%;} この属性が追加された画像は縮小されますが、メソッドは縮小されません。 上記の width:100% を直接設定すると、画像が拡大され、歪みが発生する可能性があります。
3. Bootstrap グリッド システム
1. グリッド システムとは何ですか? Bootstrap はページを 12 列に分割し、数値を指定して幅を設定できます。簡単な例:
<div class="row"> <div class="col-xs-3">3</div> <div class="col-xs-6">6</div> <div class="col-xs-3">3</div></div>表示効果は次のとおりです:
ブラウザの幅が縮小されると (次の応答性の説明に道を開くため)、表示効果は次のとおりです:
キー ポイント:
1. 行はコンテナであり、グリッド スタイルは行コンテナ内に配置する必要があります。 2. Web ページには 12 列があります。
3. 合計 4 つのグリッド クラス プレフィックスがあり、異なる解像度のデバイスに適用されます。
グラフは次のとおりです:
2. レスポンシブグリッド
説明例:
<div class="row"> <div class="col-xs-12 col-sm-6 col-md-3">3</div> <div class="col-xs-12 col-sm-6 col-md-3">3</div> <div class="col-xs-12 col-sm-6 col-md-3">3</div> <div class="col-xs-12 col-sm-6 col-md-3">3</div> </div>表示効果は次のとおりです:
ブラウザをズームアウトした場合:
さらにズームアウトした場合:
これはいわゆる応答性とは、端的に言うと、「応答性」とは、ブラウザーの幅に基づいて使用するクラスを決定することです
上記の効果は、応答性の高いレイアウトの原理を示しています:
画面の幅が u≥1200px の場合、ブートストラップは次のようになります。自動的にこのクラスを使用します。col-lg-*
- 画面幅 u ≥ 992px の場合、ブートストラップは自動的にクラス Col-sm-* を選択します。 md-*;
- 画面の幅が u 3. オフセット列とは、分割される列の数を意味します。
- 例:
-
<div class="col-xs-12 col-sm-6 col-md-3">3</div> //向右偏移2列了 <div class="col-md-offset-2 col-xs-12 col-sm-6 col-md-3">3</div>
表示効果は次のとおりです:
このスタイルは、margin: width * 列数を設定するのと同じです。
4. ネストされた列
グリッド内にグリッドをネストする
出力効果は次のとおりです:5. 列の並べ替え
".col-md-push-*" と ".col-md -pull" を使用する-*」は順序を入れ替えることができます。ここで、* の範囲は 1 ～ 11 です。 例は次のとおりです:
<div class="row"> <div class="col-xs-8"> <div class="col-xs-2">2</div> <div class="col-xs-2">2</div> <div class="col-xs-2">2</div> <div class="col-xs-2">2</div> </div> </div>表示効果は次のとおりです:
上記のクラスの使用法を理解すると、元は First が 4 列を占め、Second が 8 列を占めます。位置を交換したい場合、First は次のようにする必要があります。 8 列を右に押し、2 番目は 4 列を左に引く必要があります。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。