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


109

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

グリッドシステムを選択するだけで、カスタマイズされたBootstrapバージョンを取得しました。しかし、生成されたCSSをアプリケーションに追加すると、すべてのスタイル(ヘッダー、リンクなど)がめ​​ちゃくちゃになります。なぜそれが起こっているのですか?グリッドシステムだけでブートストラップCSSを取得するにはどうすればよいですか?Bootstrapファイルの手動変更を回避したいと思います。

回答:


159

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

ブートストラップカスタマイザ

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


クリスティーナに感謝します。グリッドスタイルだけを取得する方法があると思っていました。
Manuel Zapata、

8
いいえ、彼らはまた、サポートするものをダウンロードし、正規化し、scaffolding.less(グローバルなボーダーボックスを持っています)をダウンロードします。以前は、ボックスに10pxのパディングがあり、合計は200pxでしたが、内側は180pxだったため、幅を180pxに設定する必要がありました。今度は、幅を200pxまたは何も設定せずに、グリッド列クラスに貼り付けます。
クリスティーナ


それでもそれはnormalize.cssを持っています
rab

@rab-それは答えで述べられています。必要に応じて削除しますが、便利です。
クリスティーナ

17

zirafa / bootstrap-grid-onlyをチェックアウトします。ブートストラップグリッドと必要な応答ユーティリティ(リセットなどは必要ありません)のみが含まれ、LESSファイルを直接操作する複雑さが簡素化されます




1

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



0

この質問が出されて久しぶりですが、ブートストラップを完全に無視してCSSグリッドを使用できるようになりました!(それはよりシンプルで、きちんと、より柔軟でより速いです)。次のクールな記事を参照してください。Bootstrapの使用を停止します—コンポーネントベースのUI用の実用的なCSSグリッドテンプレートを作成します


0

Bootstrap 4では、GitHubにすでに別のファイルがあります。あなたはここでそれらを見つけることができます

https://github.com/twbs/bootstrap/tree/main/dist/css
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.