フロントエンドベース06 Bootstrapフレーム

BootstrapはTwitterオープンソースのHTML、CSS、JavaScriptベースのフロントエンドフレームワークです.
Bootstrapダウンロード
公式住所:https://getbootstrap.com
中国語住所:http://www.bootcss.com/
Bootstrap環境構築

bootstrap-3.3.7-dist/
├── css  // CSS  
│   ├── bootstrap-theme.css  // Bootstrap      
│   ├── bootstrap-theme.css.map
│   ├── bootstrap-theme.min.css  //           
│   ├── bootstrap-theme.min.css.map
│   ├── bootstrap.css
│   ├── bootstrap.css.map
│   ├── bootstrap.min.css  //   CSS      
│   └── bootstrap.min.css.map
├── fonts  //     
│   ├── glyphicons-halflings-regular.eot
│   ├── glyphicons-halflings-regular.svg
│   ├── glyphicons-halflings-regular.ttf
│   ├── glyphicons-halflings-regular.woff
│   └── glyphicons-halflings-regular.woff2
└── js  // JS  
    ├── bootstrap.js
    ├── bootstrap.min.js  //   JS    
    └── npm.js

Bootstrapの一部のコンポーネントはjQueryに依存するため、Bootstrap関連コンポーネントが正常に動作することを保証するために、対応するバージョンのjQueryファイルをダウンロードしてください.
概要
グローバルCSSスタイルを設定します.基本的なHTML要素はclassでスタイルを設定し、強化効果を得ることができます.先進的なグリッドシステムもあります.
モバイルデバイス優先
Bootstrapはモバイルデバイスが優先し、適切な描画とタッチスクリーンのスケールを確保するために、viewportメタデータラベルを追加する必要があります.

Normalize.css
ブラウザ間での一貫性を向上させるために、Normalize.cssを使用してmargin:0などのダウンロードアドレスを手動で指定する必要はありません.https://www.bootcdn.cn/normalize/
レイアウトコンテナ
Bootstrapは、ページの内容とグリッドシステムに.containerコンテナ.containerクラスを包む必要があります.幅を固定し、応答レイアウトをサポートするコンテナです.

  ...

グリッドシステム
Bootstrapは、画面またはビューポートのサイズが大きくなるにつれて、最大12列に自動的に分割される応答型、モバイルデバイス優先のストリーミンググリッドシステムを提供します.
概要
グリッドシステムは、一連の行(row)と列(column)の組み合わせでページレイアウトを作成するために使用され、作成したレイアウトにコンテンツを入れることができます.12列以上の場合は、1行が置かれず、2行目に置かれます.
図例:
凡例コード:

  
.col-md-1
  
.col-md-1
  
.col-md-1
  
.col-md-1
  
.col-md-1
  
.col-md-1
  
.col-md-1
  
.col-md-1
  
.col-md-1
  
.col-md-1
  
.col-md-1
  
.col-md-1


  
.col-md-8
  
.col-md-4


  
.col-md-4
  
.col-md-4
  
.col-md-4


  
.col-md-6
  
.col-md-6

グリッドパラメータ中等スクリーンデスクトップディスプレイ(≧992 px)

.col-md-

列オフセット
.cl-md-offset-クラスを使用して、列を右側にオフセットします.これらのクラスは、実際にはセレクタを使用して現在の要素に左側のマージンを追加します.たとえば、.co l-md-offset-4クラスは、.co-md-4要素を4つのカラムの幅を右側にオフセットします.例図:例コード:

  
.col-md-4
  
.col-md-4 .col-md-offset-4


  
.col-md-3 .col-md-offset-3
  
.col-md-3 .col-md-offset-3


  
.col-md-6 .col-md-offset-3

列のソート
.cl-md-push-と.cl-md-pull-クラスを使用することで、カラムの順序を簡単に変更できます.例図:例コード:

  
.col-md-9 .col-md-push-3
  
.col-md-3 .col-md-pull-9

コメントの使用
クイックフローティング

...
...