bootstrap使用心得まとめ

背景紹介:2015年9月からbootstrapフロントエンドフレームワークセットに触れ始めましたが、なぜかというと、それはあまりにも火がついているので、慕課網、菜鳥教程など私がよくぶらぶらしているサイトのbootstrapはすべてテーマで、しかも簡単で上手なので、それを選んで入門しました.項目:1.電子マニュアル読書サイトの構築;2.個人ブログサイトの構築.
bootstrapの特徴:1.レスポンスレイアウトの概念:レスポンスWebレイアウトは、ユーザーが異なるサイズのブラウザで良好な視覚を得ることができる方法です.現在比較的流行しているレイアウト方法です.実現原理:CSS 3 Media Queries(メディア(デバイス)クエリー)により、メディアクエリーはページ内容を異なるメディア環境で実行する際に異なるスタイルを示すことができる(このスタイルはもちろん私たちが規定を書くことになる).メディアは、CSS 3に規定された属性であり、異なるメディアデバイスに対して異なるスタイルを設定する目的を実現することができる.また、同じデバイスでもブラウザサイズをリセットするときに、ブラウザの幅と高さに応じてページを再レンダリングできます.@Mediaの文法

@media mediatype and|not|only (media feature) {
    CSS-Code;
}

このうちmediatypeにはprint(印刷装置)、screen(パソコンの画面、タブレット、スマートフォンなどに用いられる)、speech(スクリーンリーダーなどの発声装置に応用される)、Media featureは、最大幅または最小幅のように規定するために使用される.
bootstrapのレイアウトコンテナの例を見てみましょう.Bootstrapはページの内容とグリッドシステムを包む必要があります.container容器.次のように

 
<div class="container">
  ...
</div>
   
<div class="container-fluid">
  ...
</div>

bootstrapのcssドキュメントで@mediaプロパティ

1591~1605 

@media (min-width: 768px) {
  .container { width: 750px; }
}
@media (min-width: 992px) {
  .container { width: 970px; }
}
@media (min-width: 1200px) {
  .container { width: 1170px; }
}
……

以上のコードはブラウザ幅の変化に伴ってcontainerコンテナの幅も変化することを実現した.
2.モバイル機器優先
htmlファイルにhead領域にこのようなmetaタグを付ける.name=「viewpoint」とは、このタグがモバイルデバイスに有効であることを意味し、contentではwidth=device-widthは幅がデバイス幅であることを意味し、initial-scale=1は初期スケールが1であることを意味する.

 <meta name="viewport" content="width=device-width, initial-scale=1">

ただし、Bootstrapではデフォルトのモバイルデバイスが優先されるため、cssドキュメントではスーパースクリーンにメディアクエリー関連のコードは定義されていません.

/*  （ ，  768px） */
/*  ，  Bootstrap  （  Bootstrap  ？） */

/*  （ ，  768px） */
@media (min-width: @screen-sm-min) { ... }

/*  （ ，  992px） */
@media (min-width: @screen-md-min) { ... }

/*  （ ，  1200px） */
@media (min-width: @screen-lg-min) { ... }