Bootstarpグリッドレイアウト

開発ツールとキーテクノロジー:Visual StudioとBootstarp

著者:黄缶

書き込み時間:2019年5月23日

中国語に翻訳BootstarpはBootstarpを直接使用することができ、外部ファイルBootstarp Bootstarp定義されたクラスへの直接参照の導入後、オープンソースのフロントエンドプラグ、CSSは良いパッケージを持っている様々なスタイル、である、ブートストラップ/ヘルパーの意味でありますBootstarpスタイルは、あなたが開発時間を大幅に節約することができので、手動で、独自のスタイルを記述する必要はありません。私たちの最も重要なことの開発中の資源を十分に活用するためのリソースを節約するためにある、Bootstarpその他のパッケージリソースが、私たちはプログラマにプロジェクトを行うにはより多くの時間を作るためには、このリソースの活用は、開発時間の大部分を保存することができ作りますより良いです。

良いページレイアウトカプセル化Bootstarp:グリッドレイアウト、グリッドレイアウトグリッドシステムは、ツールの、強力で柔軟性と応答性のメディアオブジェクトであるが、それを言うことができるという基本的なグリッドレイアウト応答レイアウトフレックス弾性およびレイアウト(Flexは、フローレイアウトと言うことができます)。

基本的な前提条件の--containerコンテナがあるBootstarpグリッドレイアウトを開始します。コンテナ船は、ウィンドウ・レイアウトの基本的な要素であり、我々は、応答の選択されたタイプに対応する、すべてのスタイルを.containerまたは.container流体容器内に定義されていることをお勧めし、固定幅のコンテナ、またはストリーミング適応ブラウジングを選択します最大法的幅またはコンテナウィンドウ(その幅はいつでも、常に100%であることを意味します)。.containerコンテナは入れ子にすることができますが、ほとんどは.container流体のタイプを使用して、レイアウトをする必要はありません、幅のdivの全幅(そうでない場合はCSSべきブラウザのランタイムを含む他のコンテナに拡張することができます幅、又は親の最大幅は、一般に、幅の100%とした容器)中で許容されるべきです。[公式サイトからBootstarp]

Bootstarp公式サイトによる合意単純な形式の詳細については、画面やさまざまなデバイス上のブートストラップグリッドシステムを表示するには
ここに画像を挿入説明

確かに、列の最大のクラスBootstarpグリッドシステムで、Bootstarpプラグインのライン(.row)と列(.COL)避けられない使用して、グリッドシステムを用いたシステムのカイパークソンアフターマーケット自動車部品、Webページのバージョンを書きますクラスは、グリッドレベルの5つの列がある:特小.col- 、小SM-.COL。MDには、 - COL 、大LG- .COL、大型(大、大幅とも呼ばれてもよいです、ワイド).COL-XL- *。* 1-12,1-12デジタルかもしれませ5つの段階でいくつかのグリッドの12個の部分に分けることができ、それぞれの行は、あなたがあなたにしたい場合は、行の数は、部品を等しく記載されている12個の部分に分けることができることを意味し、 DIV 4つの同じ行(.Row)の4つのアリコートを必要とする上部3の12(例:COL-LG-3)グリッドの5段階のレベル。

ここに画像を挿入説明

等量の4つの部分に分割されている行(.Row)に示すように、ページレイアウトは、4つのdiv DIVの各ページ(すなわち:1/4)の4つのDIVの3/12を占め、結果を得ましたDIVのいずれかの含有量がこの線(.Row)の対応するdivの上に配置されている任意1/4カラム。

ここに画像を挿入説明

.containerコンテナが入れ子にすることができても、ネストされたが、よりエレガントなネストされたビルドページの少なくともレベルすることができますように、ライン(.row)も、行(.row)入れ子にすることができます。OK(.Row)ネストされた行(.Row)も等しく5つのラスタ列アリコートレベルとすることができる、レベル5ラスタ列だけ等しく、任意の行(.Row)限り、割り当てられてもよいことはできません同じレベルですべての子要素は、12列に等しいがそれに足し割り当てられています。

ここに画像を挿入説明

特定のレイアウトは、特定の分析を必要とする、小規模農家が間違っている場合、私を修正してください、ありがとう、早く到着しました

おすすめ

転載: blog.csdn.net/weixin_44542088/article/details/90520421