Bootstrapアダプティブ

BootstrapはHTMLベースです.css.JAvaScriptの開発の簡潔さ、直観性、強いフロントエンドの開発フレームワークは、web開発と家が迅速に応答式のホームページを作ることができるようにする.
bootstrapアダプティブ:Bootstrapはスクリーンサイズバーによって超小画面、小画面、中画面、大画面の4種類に分けられ、スクリーンを12列に分けて対応するスクリーン幅は:
超小画面(携帯電話):0-768 px対応設定class=col-xs-number小画面(タブレット):768-992 px対応設定class=col-sm-number中等画面(パソコン):992-1200 px対応設定class=col-md-number大画面(パソコン):1200 px-?対応設定class=col-lg-number
chromeブラウザでは、elementsウィンドウで、画面幅が768未満の場合、com-xs-12のみが有効であることがわかります.
適応:Webページは異なるデバイスに適応し、bootstrapフレームワークで
原理:メディア(デバイス/ブラウザ)クエリー@media only screenクエリーデバイスの幅
下地は@media only screen and(min-width:最小値)and(max-width:最大値)で表示されます.
例1対の背景:

@media only screen and (min-width:0px) and (max-width:480px){
body{
background-color:red;
}
}
@media only screen and (min-width:481px) and (max-width:720px){
body{
background-color:green;
}
}
@media only screen and (min-width:721px){
body{
background-color:blue;
}
}

例2対のブロックレベル要素div

div1
div2

bootstarpによる統合適応手順
1.linkタグはbootstrapを導入する.cssファイル2.bootstrapで定義1)ルート要素はdiv class値がcontainer 2に等しい必要があります)ルート要素は行要素を含む必要があり、行要素class値はrow 3に等しい必要があります)行に列classを含む値はcol-*-numberである必要があります
例:

div1

div2

div3