Bootstrapサイトを制作するなら知っておきたいWebサービス5選


Bootstrapサイトを制作するときに便利なWebサイトまとめ

BootstrapなどのCSSフレームワークは効率よくWebサイト制作が出来ますので本当に便利です。

Bootstrap公式に用意されている標準の機能やデザインだけでは足りないと、足りない機能を作ったり…最悪、あきらめたりなんて事も。

しかし、Bootstrapは世界中で広く利用されているCSSフレームワークですから、そんな事態になる前に、世界中の開発者が公開している機能がないかまずは探してみよう。

ということで、今回はBootstrapサイト制作時に見たいBootstrapのテーマやテンプレートなどのサイトまとめ5選。


この記事の紹介サイト


Flat-UI-Free-Bootstrap-Framework-and-Theme


ページ下部の「Download」ボタンよりzipファイルダウロード。


Flat-UI-Free-Bootstrap-Framework-and-Theme-download


Flat-UI-Free-Bootstrap-Framework-and-Theme-file


ダウロードしたzipファイルを解凍すると各種フォルダとファイルがある。
各種パーツのhtmlは「docs」フォルダ内を参照。「dist」フォルダ内にcss・js・indexなどが入っている。

*sample-image

Flat-UI-Free-Bootstrap-Framework-and-Theme-sampleimage




get-shit-done


ダウンロードよりzipファイルダウンロード。
解答したフォルダ(x_GSDK_production_1.3)内の「template.html」を開いたらソースを表示するとBasicTemplateとなる。


*sample-image
get-shit-done-sample



Bootswatch-Free-themes-for-Bootstrap


こちらは有名サイト。テーマが沢山あります。


Bootswatch-Free-themes-for-Bootstrap



Bootswatchの簡単な使い方説明

例:「Darkly」テーマを適用、Bootstrap標準のディレクトリはダウンロード済みとする、Google Chrome・Brackets使用。
「Darkly」サムネイルの「Download」ボタンをクリック。


Bootswatch使い方


するとブラウザ(Chromeの場合)にCSSが表示されるので全てコピーして、使用するCSSフォルダなどの中に新しくCSSファイルを作りペーストする。
(IEの場合はメモ帳が開くので保存)


Bootswatch使い方


次にエディタでCSSまでのリンクを記述する。


Bootswatch使い方


これでBootswatchの「Darkly」が適用される。


使いたいパーツはプレビューを表示して、ソースコードをコピー&ペースト。


Bootswatch使い方


Previewサイトが表示されたら使用したいパーツの右上<>の部分をクリック(カーソルを持っていくと現れる)。


Bootswatch使い方


するとソースが表示されるのでコピーしてエディタにペースト。
Bootswatch使い方


今回はNavbarを使ってみた。


Bootswatch使い方


すごく簡単にテーマを適用させることができるので便利。



Templates

Bootstrap Zero

BootstrapZero


Bootstrap Zeroはテンプレートが沢山あっていいですね。
BootstrapZero1


個人的にはStarter Templatesがとても便利かと思います。
たとえばStarter TemplatesのSlider Bootstrap Template。


BootstrapZero



components

UI Bootstrap

AngularJSと一緒に使うコンポーネント集。
ui_bootstrap


便利ですね。
ui_github




この投稿へのコメント

コメントはありません。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

この投稿へのトラックバック

トラックバックはありません。

トラックバック URL