web-dev-qa-db-ja.com

Bootstrap 3からレスポンシブグリッドを取得する方法は？

Twitter Bootstrapを使用して、レスポンシブデザイン機能をWebアプリケーションに追加する必要があります。レスポンシブな動作が必要なだけで、タイポグラフィ、コンポーネント、またはBootstrapに含まれるその他のものには興味がありません。

customized Bootstrap version グリッドシステムを選択するだけです。ただし、生成されたCSSをアプリケーションに追加すると、すべてのスタイル（ヘッダー、リンクなど）が台無しになります。なぜそれが起こっているのですか？グリッドシステムだけでBootstrap CSSを取得するにはどうすればよいですか？ Bootstrapファイルを手動で変更することは避けたいです。

ありがとう！

htmlcsstwitter-bootstrapresponsive-design
103
Manuel Zapata

http://getbootstrap.com/customize/ に移動し、BS3フレームワークから必要なものだけを切り替えて、[コンパイルとダウンロード]をクリックすると、選択したCSSとJSが表示されます。

Bootstrap Customizer

CSSを開き、グリッドを除くすべてを削除します。それらにはいくつかのノーマライズも含まれています。そして、サイトのすべてのスタイルをボックスサイズに調整する必要があります。border-box- http://www.w3schools.com/cssref/css3_pr_box-sizing.asp

150
Christina

チェックアウト zirafa/bootstrap-grid-only 。これには、ブートストラップグリッドと応答性ユーティリティのみが含まれており（リセットなどは不要）、複雑さLESSファイルを直接操作すること。

16
burrbrown

Grid systemと「レスポンシブユーティリティ」を選択するだけで、次のようになります。 http://jsfiddle.net/7LVzs/

7
Jmorvan

Bootstrap 3.3.5グリッドのみでGruntビルドを作成しました。

https://github.com/horgen/grunt-builds/tree/master/bootstrap-grid

最小化された最大10 KB。

Bootstrapから他のパーツが必要な場合は、/ src/less/bootstrap.lessに追加してください。

4
horgen

Bootstrap 4sの新しいダウンロード機能でグリッドのみをダウンロードできるようです。

1
Richard Clifford

代わりにMDOの http://getpreboot.com/ を使用することをお勧めします。 v2では、prebootはBootstrap 3.0グリッドシステムの作成に使用されるLESSミックスイン/変数を移植し、CSSジェネレーターを使用するよりもはるかに軽量です。実際、preboot.lessのみを含めると、ファイル全体がミックスイン/変数で構成され、最終出力ではなくプリコンパイルでのみ使用されるため、オーバーヘッドはありません。

1
srquinn

この質問が聞かれてからしばらく経ちましたが、今ではおそらくBootstrapを完全に捨ててCSSグリッドを使用できるようになりました！ （それはよりシンプルで、よりきれいで、より柔軟でより高速です）。このクールな記事を参照してください： Bootstrapの使用をやめる—コンポーネントベースのUIに実用的なCSSグリッドテンプレートを作成する

0
Alex Firebrand