数日前にブートストラップを学び、グリッドシステムを整理しました。エラーがある場合は、自由に修正してください。
概要：グリッドシステムは、PC、パッド、モバイル端子のレスポンシブWebページを開発しており、さまざまな画面解像度に基づいてさまざまなソリューションがあります。
（0.1、スクリーンデバイスのサイズが1200pxを超えていますcol-lg選択
（0.2。スクリーンデバイスのサイズは970pxから1200pxの間です。
（0.3。スクリーンデバイスのサイズは768pxから970pxの間です。
（0.4。スクリーンデバイスサイズが768px未満ですcol-xs選択
1.グリッドシステムは、次のようにページを12列（最大12列）に分割します。
<！doctype html> <html lang = "zh-cn"> <head> <meta charset = "utf-8"> <meta name = "viewport" content = "width、initial-width、intially-scale = 1、maxinum-scale、user-scalable = no"> <title> <titlesheet " href = "library/bootstrap.min.css"> <style> .a {height：50px;境界線：1px赤色の固体;背景：ピンク; } </style> </head> <body> <div> <div> <div> div> <div> 1 </div> <div> 1 </div> <div> 1 </div> <div> </div> <div> </div> </div> </div> <div> 1 </div> <div> 1 </div> <div> 1 </div> <div> 1 </div> <div> 1 </div> <div> 1 </div> <div> 1 </div> <div> 1 </div> <div> </div> </div> <scrip src = "library/jq.js"> </scrip> <スクリプトsrc = "library/bootstrap.min.js"> </scrip> </body> </html>（2.1、col-MD-1は列で、合計12列が「水平列」で覆われています。MDの後にトレーニングする数は、割り当てられた列の数です（col-lg、col-sm、col-xsは同じです）
3.画面解像度が異なるデバイスでは、表示されるページは対応する「ラスターフォーマットバーページ」であり、次のように応答性のあるレイアウトが実現します。
<！doctype html> <html lang = "zh-cn"> <head> <meta charset = "utf-8"> <meta name = "viewport" content = "width、initial-width、intially-scale = 1、maxinum-scale、user-scalable = no"> <title> <titlesheet " href = "library/bootstrap.min.css"> <style> .a {height：50px;境界線：1px赤色の固体;背景：ピンク; } </style> </head> <body> <div> <div> <div> div> <div> 1 </div> <div> 1 </div> <div> 1 </div> <div> </div> <div> </div> </div> </div> <div> 1 </div> <div> 1 </div> <div> 1 </div> <div> 1 </div> <div> 1 </div> <div> 1 </div> </div> </div> </div> <script src = "library/jq.js"> </script> <scrc = "boottrap.min.js">（3.1。上のコードは、画面デバイスのサイズが1200pxを超える場合、1つの水平行の列には4つの列があり、1つの大きな列には3つの小さな列があり、小さな列には合計12列があることを示しています。
（3.2、画面デバイスのサイズが970pxから1200pxの間であることを示しています（まずこのステージに縮小するブラウザを見ることができます）、水平列に3つの列があり、大きな列に4つの列があり、合計12列があります。
（3.2、画面デバイスのサイズが768pxから970pxの間であることを示しています（まずこの段階に縮小するブラウザを見ることができます）、水平列に2つの大きな列があり、大きな列に6つの小さな列があり、合計12列があります。
（3.2、画面デバイスのサイズが768px未満の場合（まずこの段階に縮小するブラウザを見ることができる）、水平列に大きな列があり、大きな列には12列が12列のある12列があることを示しています。
4。ラスターシステムの列のオフセット、ネスト、スワップ位置
（4.1、列オフセット
<div> <div> 8 </div> <div> 3 </div> <！ - 列が右に1つずつオフセット - > </div>
（4.2、ネスト
<div> <！ - nesting-> <div style = "padding：0;"> <div> </div> <div> </div> <div> </div> </div> <div> 3 </div> </div>
（4.3、スワップ位置
<div> <！ - スワップ位置 - > <div> 9 </div> <！ - プッシュ、右に移動 - > <div> 3 </div> <！ - 左に移動 - > </div>
それでも詳細に勉強したい場合は、ここをクリックして3つのエキサイティングなトピックを勉強して添付できます。
ブートストラップ学習チュートリアル
ブートストラップ実用的なチュートリアル
ブートストラッププラグインの使用チュートリアル
この記事では、最も単純なケースを使用して、すべての人の学習に役立つことを望んで、ケースに関連するキーレイアウトポイントを分析します。