1。ソースコードファイル
_grid.scss：グリッドシステムクラスファイル
Mixins/_grid.scss：グリッドシステムによって実装されたミックスコレクションをサポートします
Mixins/_Grid-Framework.scss： Grid Systemによって実装されたコアミキシン
2。サポートされている機能
1.レイアウトをパーセンテージで実現します
2。グリッドの位置を実現します
3.グリッドのネストを実装します
4.グリッドシステムのみを使用する場合、bootstrap-grid.scssファイルのみをエンコードできます
実装の原則
1.レイアウトパーセンテージでは、主な問題は、さまざまなデバイスで幅を均等に配布する方法です。 Bootstrapは単純な割合を使用するだけで、同じ割合が任意のサイズのデバイスで使用されます。
2。グリッドの位置：グリッドが左、右、右、およびグリッドでいくつかのセルを右に移動する能力を解決します
3。グリッドのネスト：グリッドコンテンツをネストした後、グリッドレイアウトシステムを実装します。
4。ソースコード分析
1。_GRID.SCSS：グリッドシステムによって生成されたメインクラスは、ミキシン/_grid.scss、mixins/_grid-framework.scss、variables.scssの変数と関連方法を参照しています。
最初：2つのコンテナクラスを定義します
a）コンテナ：異なるデバイスに応じて異なる幅を定義し、フル画面を埋めないグリッドコンテナ。
b）Continaer-Fluid：格子容器、サポート付きのフルスクリーン
コンテナとコンテナ蛍光の両方がMakeContainer（Mixins/_Grid.scss）を使用します。 MAKE-CONTAINERは、センタリング、左右のマージン、クリアフロートなどのコントロールのみを実装します。コンテナは、さまざまなデバイスに従ってコンテナの幅を定義します。
次に：define row（row）：
Make-row（Mixins/_Grids.scss）は、クリアリングフローティングおよび左および右マージンの定義を実現するために呼び出されます。 4.0では、フレックスレイアウトのサポートが有効になっている場合、コンテナのディスプレイは、ラップとしてフレックスおよびフレックスラップに設定され、クリアフローティングが設定されます。
次に：細胞の確立を実現するために、Make-Grid-Columns（Mixins/_Grid-framework.scss）を直接呼び出します
a）Make-Grid-Columns：セル生成、グリッドの総数、マージン幅、およびいくつかのサポートされているサイズの渡されたエントリー方法
b）make-grid-columnsは、ミキシン/_grid.scssの多くの方法を参照してください：
a）マップキー関数を使用して、マップキーコレクションをトラバースします。
@extend関数は、継承に使用され、すべてのCOLの左フローティングの実装、およびすべてのCOLの相対的な位置付けに使用されます。
@$ $ i 1から$ columns {.col-＃{$ breakpoint} - ＃{$ i} {@extend％grid-column; //拡張は継承であり、これをスタイルコレクションにマージします....}}}a）col幅の計算を実装するメイクコルスパン関数
b）ミキシン/_grid.scssのメイクコルモジーメソッドを呼び出して、プッシュ、プル、オフセットの生成を実現します。
私。プッシュ：左を使用して、いくつかのグリッドを右に押します
ii。プル：右を使用して、いくつかのグリッドを左に押します
iii。オフセット：マージン左の実装を使用して、それを右に押し上げます。
@Mixin Make-Col-Offset（$ size、$ columns：$ grid-columns）{margin-left：percentage（$ size / $ columns）;}@mixin make-col-push（$ size、$ columns：$ grid-columns）{left：if（$ size> 0、$ size / $ columns） $ grid-columns）{right：if（$ size> 0、パーセンテージ（$ size / $ columns）、auto）;}@mixin make-col-pull（$ size、$ columns：$ grid-columns）{右：if（$ size> 0、percentage（$ size / $ columns）、auto）; Dynamic Mixin @Include Support @IF $ Type == Push {@include make-col-push（$ size、$ columns）; } @else $ $ type == pull {@include make-col-pull（$ size、$ columns）; } @Else if $ type == offset {@include make-col-offset（$ size、$ columns）; }}上記はこの記事に関するものです。誰もがJavaScriptプログラミングを学ぶことが役立つことを願っています。