ホーム WEBデザイン Bootstrapでグリッドシステムだけ使いたい場合、カスタマイズしたものをダウンロードすればいい。
Bootstrap(ブートストラップ)の便利なところはやはりグリッドシステムだと思う。他のクラスとバッティングすることもあるので、今回はBootstrap(ブートストラップ)のグリッドシステムだけを使いたい人の記事です。
スポンサーリンク
Bootstrapのサイトで、グリッドシステムのみのCSSをダウンロード
なんてことはありません。Bootstrapのサイトでカスタマイズしたものをダウンロードすればいいだけです。
![0](https://i0.wp.com/bbp.jp/wp-content/uploads/2016/05/0-6.jpg?resize=640%2C483&ssl=1)
まずはBootstrapのサイトのCustomizeのページへ移動。
BootstrapサイトCustomizeのページはこちら
![1](https://i0.wp.com/bbp.jp/wp-content/uploads/2016/05/1-7.jpg?resize=640%2C483&ssl=1)
すべてチェックを外します。
Less filesの「Toggle all」をクリックしてすべてのチェックを外します。
![2](https://i0.wp.com/bbp.jp/wp-content/uploads/2016/05/2-7.jpg?resize=640%2C483&ssl=1)
すると、すべてのチェックが外れます。
![3](https://i0.wp.com/bbp.jp/wp-content/uploads/2016/05/3-7.jpg?resize=640%2C483&ssl=1)
今回はグリッドシステムのみ使うので、その中の「Grid system」だけチェックします。
![4](https://i0.wp.com/bbp.jp/wp-content/uploads/2016/05/4-4.jpg?resize=640%2C483&ssl=1)
「jQuery plugins」でも、「Toggle all」をクリックしてすべてのチェックを外します。
![5](https://i0.wp.com/bbp.jp/wp-content/uploads/2016/05/5-5.jpg?resize=640%2C483&ssl=1)
すると、すべてのチェックが外れます。
![6](https://i0.wp.com/bbp.jp/wp-content/uploads/2016/05/6-5.jpg?resize=640%2C483&ssl=1)
同じカンジで、「Less variables」でも「Reset to defaults」をクリックします。
![7](https://i0.wp.com/bbp.jp/wp-content/uploads/2016/05/7-4.jpg?resize=640%2C483&ssl=1)
するとすべて空になります。
![8](https://i0.wp.com/bbp.jp/wp-content/uploads/2016/05/8-4.jpg?resize=640%2C483&ssl=1)
最後に「Compile and Download」をクリックしてダウンロードします。
するとbootstrap.zipがダウンロードされます。
![10](https://i0.wp.com/bbp.jp/wp-content/uploads/2016/05/10-3.jpg?resize=407%2C216&ssl=1)
解凍されたら、bootstrap.min.cssのみ取り出し、の前に
<link rel="stylesheet" href="サイトURL/bootstrap.min.css">
のようにして読み込むソースを入れれば、boostrapのグリッドシステムのみ使えるようになります。他の機能も追加したり、削除したり自由にカスタマイズしてBootstrapを有効に利用できます。
スポンサーリンク
Twitter でbbpをフォローしよう!
Follow @https_bbp_jpこんな記事もあります。
コメント
プロフィール
![](https://bbp.jp/wp-content/themes/bbp/img/bbp.jpg)
bbb
はWEBデザインと輸出入の仕事をしてます。趣味程度のブログです。キュレーションへの投稿、ページのいいねとシェアに喜びます。