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

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

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

サイトのキャプチャ

Bootstrap Live Customizer

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

サイトのキャプチャ

ナビゲーションとボタン

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

サイトのキャプチャ

編集パネル

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

サイトのキャプチャ

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

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

サイトのキャプチャ

コードの確認

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

サイトのキャプチャ

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

sponsors

top of page

©2018 coliss