Bootstrap_html/css_WEB-ITnose を使ってすぐに始めましょう-htmlチュートリアル-php.cn

Bootstrap_html/css_WEB-ITnose を使ってすぐに始めましょう

WBOY

リリース： 2016-06-24 11:27:35

オリジナル

1386 人が閲覧しました

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. DOCTYPE

Bootstrap は 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=1.0 が user-scalable=no とともに使用される場合。ズームを無効にすると、ユーザーはスクロールのみできるようになり、Web サイトがネイティブアプリのように見えます。

このように設定すると、画像または要素も style="width:100%" で設定されるため、画像も全画面表示されます。

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-*

<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>

ログイン後にコピー

.col-xs=* クラスはオフセットをサポートしません。空のセルを使用するだけでこの効果を実現できます。

このスタイルは、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 列を左に引く必要があります。