Bootstrap 2.3.2学習

3255 ワード

1.ラックパッケージをダウンロードし、コンパイルされたファイルをダウンロードします.ファイルディレクトリ構造は以下の通りです.
 
 bootstrap/
  ├── css/
  │   ├── bootstrap.css
  │   ├── bootstrap.min.css
  ├── js/
  │   ├── bootstrap.js
  │   ├── bootstrap.min.js
  └── img/
      ├── glyphicons-halflings.png
      └── glyphicons-halflings-white.png

 
min代表の追加:minを追加していないファイルを圧縮した圧縮版.
bootstrapを使用した開発ページのレイアウトは、次のとおりです.
  • Bootstrap 101 Template
  • Hello, world!


  •  
    2.開発ではHTML 5の文書型を使用する必要があります.各ページは以下の形式でなければなりません.
    中国語ではlang=「ch-CN」
  •  
  • ...

  •  
    3.デフォルトのグリッドシステム、デフォルトは12列で、940 px幅の容器を形成します.
    .rowは一行を表します..span*は局の列数、例えば2列を表す.span2
    スクリーンが940 pxの場合は、12列に分けて全面スクリーンを表します.




    .offset*はオフセット量の右寄りを表します




    最初の
    が1単位右にシフトしたときに2番目の
    を上書きするため、表示効果は赤が1つしか表示されません.
     
    4.ネスト列:ネスト列は既存のものである.spanの下で再使用する.row .span*.子クラスの列の数と親クラスの数を超えてはいけないことに注意してください.


            

                     

                     

            



     
     
    5.フローグリッドシステム:
    ピクセルではなくパーセンテージを使用します.固定グリッドシステムと同様に応答型レイアウトの機能を備えており、
    異なる解像度とデバイスを適切に調整します.
    使用法:rowを.row-fluid、その他は変わらない.span*,.offset*
    使用中row-fluidの場合、中のすべての列を12列に分けることができ、ページがきちんと表示されているため、フロー式を使用すると、
    ずっと使用して固定しないでください.
    6.レイアウト:
    固定レイアウトcontainerは、このレイアウトを使用する幅が940 pxです.

     

     
    フローレイアウト:.container-fluidは、使用画面によって幅が異なります.

     

    7.応答設計
    レスポンスデザインを使用する場合、ページにを追加し、対応する額レスポンススタイルを導入します.

  • このプロパティは一般的に使用されてから追加されます.
     
    8.基本的なスタイル:
    からまで使用可能
    bootstrapは、グローバルfont-sizeが14 px、line-heightが20 pxであることを定義し、これらのスタイルはとすべての段落に適用されます.
    また、

    には、1/2行の高さ(デフォルトは10 px)の下部外部局(margin)属性も定義されています.
     
    .lead段落を強調

    強調


    強調する必要のないsmallラベルを使用します.
    ….
     
    太字……
     
    斜体....
     
    テキストの配置:.text-left,.text-center,.text-right