プロジェクトのニーズのため、ブートストラップフレームワークをよく学ぶ予定です。少し前に学びました。フレームワークは全体的に難しくありませんが、まだ多くのことが関係しています。熟練して習得したい場合は、さらに練習する必要があります。
1。ブートストラップとは何ですか？
BSとは何ですか？つまり、フロントエンドページによって構築された標準化されたフレームワークツールは、CSS.JSスタイルで記述されており、使用するだけです。
BSの使用方法は？効果は主に異なるクラスを使用することで増加し、各クラスには対応する機能が異なります。
BSの利点：開発効率を高め、ページデザインをより美しくし、レスポンシブ開発をサポートします。アドレスをダウンロード：https：//github.com/foreverjiangting/bootstrap
学習ドキュメント：http：//v3.bootcss.com/getting-started/
2。CSSスタイルのデザイン
1。HTMLドキュメントに基づいています
BootstrapはいくつかのHTML要素を指しているため、ヘッダーは以下に示すサンプル列として記述する必要があります。
<！Doctype HTML> --- HTML5ドキュメント宣言が含まれています。すべてのブラウザは標準モードをオンにしますメタタグ *は最初に配置する必要があり、その他のコンテンツは *それらに従う必要があります！レスポンシブレイアウトがサポートされていることを確認 - > <title> bootstrap </title> [/code] [code] <！ - new bootstrapコアCSSファイル - > <link rel = "href =" // cdn.bootcss.com/3.3.5/CSS/BOOTTRAP. - > <link rel = "styleSheet" href = "// cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap-theme.css">< ！-- jqueryファイル。必ず紹介してください - > <スクリプトsrc = "// cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script> <！--最新のブートストラップコアJavascriptファイル - > <スクリプトsrc = "// cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script></head> <body> <h1> hello、world！</h1> </body> </html>
2。グリッドシステムレイアウト
行と列を設定してレイアウトコンテンツ。 Bootstrapはページを12列に設定します。 3つの等幅列を設定するなど、列の数を変更することによるレイアウト：
<！doctype html> <html lang = "zh-cn"> <head> <meta charset = "utf-8"> <meta http-equiv = "x-ua互換" content = "ie = edge"> <meta name = "viewport" content = "width =" width = bed "他のコンテンツは *それらに従う必要があります！ - > <title> </title> <link href = "css/bootstrap.css" rel = "styleSheet"> <link href = "css/bootstrap.min.css" rel = "styleSheet"> <スクリプトsrc = "http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"> </scrip> <script src = "http://cdn.bootcss.com/boottrap/3.3.4/js/js/boottrap.min.min.min.js"> </</<レイアウト - > <div> <！ - またはcontainer-fluid-> <div> - col-xs-4：768px未満の小さなデバイスを参照します<div> 11 </div> - col-SM-4：= 768px <div> 22 </div> - col-md-4：col-md-4：col-lg < less than 1200px</div> <div>11</div> <div>22</div> <div>33</div> </div> <div>33</div> </div> <div> <div>11</div> <div>22</div> <div>33</div> </div> <div>33</div> </div> <div> <div>11</div> <div>22</div> <div> 33 </div> </div> <div> <div> 11 </div> <div> 22 </div> <div> 33 </div> </div> </div> </body> </html>
主に異なるデバイスの解像度に使用されるCSSネットワーク形式を記述する4つの方法があります。
2：列を翻訳します
オフセットを使用してパンします。つまり、翻訳された列の数
<div> <！ - またはcontainer-fluid-> <div> <div> 11 </div> <div> 22 </div> <div> 33 </div> ---は33 </div> </div> div> 22 </div> <div> 33 </div>の右を参照します。 <div> 33 </div> </div> <div> 11 </div> <div> 22 </div> <div> 33 </div> </div> </div> <！ - 翻訳列 - >
効果は次のとおりです。
33 2つの列が翻訳されていたため、4列を占有するという要件を満たすことができなかったため、次の行に絞り込まれ、4列を占有し始めました。簡単に言えば、Divブロック全体を正しく移動するのと同じです。
3：ネストされた列
つまり、グリッド列のネスト列。比較しましょう。
<div><!-- or container-fluid--> <div> <div> <div>11</div> <div>22</div> <div>33</div> </div> </div> <div> <div>11</div> </div> <div>11</div> </div> <div>11</div> <div>22</div> <div>33</div> </div> </div> </div> </div> </div> <div> 11 </div> <div> 22 </div> <div> 33 </div> </div> </div> </div>
効果は次のとおりです。
何か問題を見つけましたか？上記の8つの等しい分布がないのはなぜですか？
理由：デバッグコンソールを見てみましょう
.col-xs-1、.col-xs-10、.col-xs-11、.col-xs-12、.col-xs-2、.col-xs-3、.col-xs-4、.col-xs-5、.col-xs-6、.col-xs-7、.col-xs-8、.col-xs-9 xパディング左：15px;パディング右：15px;位置：相対;}
パディング左とパディング右は両方とも15pxであることがわかった。これは、柱間のパディングが影響力に値するためです。なぜ2番目のDIVに影響がないのですか？フェンスグリッドの原理を探りましょう。
1。「row」は、適切なアライメントとパディングを与えるために、 .container （固定幅）または.container-fluid （100％幅）に含める必要があります。
2.「列」のpaddingプロパティを設定して、列間に溝を作成します。 .row要素の負のmarginを設定することにより、 .container要素のためにセットされたpaddingをオフセットします
間接的に、「列」に含まれる「列」は、 paddingのオフセットです。
注：現時点では、列は列のパディングを相殺しているため、パディング値はありません。
4：列の並べ替え
主にcol-xs-push-* col-xs-pull-*（*これらの2つのクラスを理解する方法を理解する方法を表しますか？プッシュはプッシュ、プルはプルを手に入れることを意味します。
<div> <div> 21 </div> <div> 24 </div> </div> <div> <div> 21 </div> <div> 24 </div> </div>
レンダリングは次のとおりです。
<div> 21 </div> --- div1 <div> 24 </div>として記録 - div2として記録
両方の位置を交換することであると理解できます。 div1を右の8列にプッシュする必要があり、左側に4列を引く必要があります。
3。グリッドレイアウトのストリーミング
1。列幅は、ピクセルではなくパーセンテージを使用します
2。行クラスをrow-fluidに変更します
3.他の基本関数は、上記の固定レイアウトと同じであり、応答性をサポートします。
4.特定の列を二等分線に分割する場合、ストリーミングレイアウトはパーセンテージを使用するため、6に従って計算する必要があります。
//次の状況に注意してください。 8列を両側に分割する場合、ブートストラップには12列のラスター分布があるため、2つの4Sではなく2つの6Sに設定されます。 <div> <div> <div> 2 </div> <div> 2 </div> </div> </div> </div> </div>
ストリーミングレイアウトのアプリケーションを見て、固定レイアウトと比較しましょう。
<！ - ストリーミングレイアウト - > <div> <div> 333 </div> <div> 444 </div> </div> <div> ---コンテナフライドクラスを宣言します。コンテンツはストリーミングレイアウトであることを示します。コンテナとコンテナ流体クラス、これは画面の幅<div> 333 </div> <div> 444 </div> </div>です
画面が768px未満の場合、効果は次のとおりです。
画面が992pxを超える場合、効果は次のとおりです。現時点では、1つの行は排他的です
Row-Fluidクラス（非常に重要）は、それがフローレイアウトであるかどうかを決定します。その後、コンテンツブロックコードはグリッドシステムと同じように記述され、それはそれぞれ異なる割合に対応するCOL-MD-1からCOL-MD-12に開始されます。
4。レスポンシブデザイン
簡単に言えば、適応対応のために異なるデバイス（携帯電話、PC）の解像度（960px、1366px、978pxなど）をサポートします。
<div> <div> 21 </div> <div> 24 </div> </div>
デバイスが768px未満の場合、効果は次のとおりです。
device> = 992pxの場合。効果は次のとおりです。
上記の2つのカテゴリの解像度は異なります。 COL-MD-12とは、各列に1つの行、つまり12列があることを意味します。
それでも詳細に勉強したい場合は、ここをクリックして3つのエキサイティングなトピックを勉強して添付できます。
ブートストラップ学習チュートリアル
ブートストラップ実用的なチュートリアル
ブートストラッププラグインの使用チュートリアル
上記はこの記事のすべての内容です。みんなの学習に役立つことを願っています。誰もがwulin.comをもっとサポートすることを願っています。