ブートストラップ3.0グリッド説明

Question

誰かがブートストラップ3.0グリッドシステムを説明することはできますか？私は、単純なspan1を持つBootstrap v2グリッドをspanのspan12に使っています。今ではブートストラップ3.0には、コロン - コル - sm - 。コル - lg -

のような異なるタイプのカラムサイズがありますが、私はこの例を見つけました：http://examples.getbootstrap.com/grid/index.htmlしかし、それは私が理解できなかったように、 .col-12。col-lg-8が一緒になっている「モバイルとデスクトップ」グリッド。

私はBootstrap v2のWebサイトをBootstrap v3に移行したいと考えていますが、これらの変更をあまりにも多く探しています。

説明してください。

EDIT：（。私はここに私の質問をした後に、この記事が来た、それは未来の読者をホープ） はまた、ブートストラップ3グリッドが説明この素敵な記事を得た：http://blog.jetstrap.com/2013/08/bootstrap-3-grids-explained/

Answer 1

それの基本的な要点はあるものの異なる回の反復.colクラスを使用すると、デバイス（電話、タブレット、デスクトップ）ごとにグリッド動作を指定できます。したがって、この例では.col-lg-8について質問すると、divがデスクトップ上で8列を占めるように指定し、.col-12はdivがモバイルデバイス上で12列（行全体）を占めるように指定しています。この特異性のレベルは、ブートストラップ2で簡単ではなかった方法でコンテンツをさまざまな画面サイズにどのようにレイアウトするかを正確に制御します。

一般的に、これらの意味を理解するには最良の方法を見つけました実際には、さまざまなデバイスタイプにサンプルページを表示するか、ブラウザウィンドウのサイズを変更して結果を単純に比較するだけです。

また、あなたの質問へのコメントに記載されているように、ブートストラップ2から3に移行するというアイディアは必ずしも目標ではありません。既存の.span*クラスを新しい.col-*クラスに更新することでそれを試みることができますが、既存のプロジェクトが固定幅であるか、またはこれに問題を引き起こす可能性があるかどうかなどの他の考慮事項があります。グリッドレイアウト以外の2つのバージョン間には、他にも多くの変更があり、問題が発生する可能性があります。

Answer 2

アウトブートストラップ3

http://www.helloerik.com/bootstrap-3-grid-introduction