Bootstrapのカスタマイズが簡単にできてしまうオンラインツール -Bootstrap Live Customizer

Post on:2014年6月10日

sponsors

Bootstrapの実際のページ表示を確認しながら、リアルタイムに簡単にカスタマイズできるオンラインツールを紹介します。

カスタマイズにはスタイルシートの知識はあまり必要なく、直感的にできます。もちろん知識がある人はより高度なカスタマイズが可能です。

使い方は非常に簡単。
左のパネルをスクロールし、Bootstrapのカスタマイズしたい箇所を表示させます。パネルの左：Bootstrapのページ、右側：カスタマイズです。

ナビゲーションとボタン

カスタマイズしたい箇所をホバーすると、編集パネルが表示されます。

編集パネル

左の「variables」をクリックすると、右パネルに該当箇所のスタイルシートが表示されるので、カラーやサイズなど変更します。

ナビゲーションのカラーを変更

右の「source」をクリックすると、該当箇所のHTMLが表示されます。

コードの確認

カスタマイズしたスタイルシートは、ページ上部からダウンロードして利用することができます。

スタイルシートのダウンロード