Bootstrap 3(2.xも)を活用する時に役立つリソースのまとめ

Bootstrapは先日リリースされたBootstrap 3rc1で、モバイルファーストのフロンドエンド用のフレームワークに生まれ変わりました。2.xまでは、デスクトップ用のブラウザを想定したインターフェイスのコンポーネントを核にしていました。

Bootstrapをカスタマイズしたり、もっと活用するためのリソースを紹介します。
まずは、本家のBootstrapから。

サイトのキャプチャ

Bootstrap 3

スマフォやタブレットでの利用を優先したシンプルでパワフルなUIエレメントが揃ったフロントエンド用のフレームワーク。
最新のBootstrap 3rc1(7/27に公開)はリリース候補版です。

サイトのキャプチャ

Examples Templates for Bootstrap

Bootstrap純正のテンプレートやページの仕掛けが揃っています。

  • Narrow marketing
    小さいプロジェクト用の軽量のテンプレート。
  • Carousel jumbotron
    マーケティングサイト用のカルーセル。
  • Fixed top navbar
    スクロールしても上部に表示されるナビゲーションバー。
サイトのキャプチャ

Bootply
キャプチャは、Bootable Template(スクロールすると面白いですよ)

Bootstrapのテンプレートをはじめ、使用例、スニペットなど、役立つコードが満載のサイト。オンラインエディタでBootstrapをカスタマイズすることもできます。

サイトのキャプチャ

Bootstrap 2 to Bootstrap 3 HTML Upgrader

Bootstrap 2.3のHTMLをBootstrap 3用に変換してくれるオンラインサービス。変更した箇所は一覧表示されます。
ページの下には3で変更になったリスト、3用のテーマファイルもあります。

サイトのキャプチャ

Bootswatch

Bootstrapのオープンソースの無料のテーマを数多く配布しています。
シンプルながらバリエーションが豊富です。
※現在は2.3.xのものが主流です。

サイトのキャプチャ

WrapBootstrap

こちらは有料のテーマを配布しているサイト。有料といっても少額です。また、無料にはないさまざまなデザインのものがあるので、インスピレーションを得るのにも最適です。

サイトのキャプチャ

Love Bootstrap

Bootstrapで作られた世界中の秀逸なサイトをコレクションしています。

サイトのキャプチャ

Bootstrap Expo

Bootstrap自ら紹介するBootstrapのベストサイトのまとめ。

サイトのキャプチャ

StyleBootstrap

BootstrapのさまざまなUIエレメントのカラーやサイズなど、スタイルをカスタマイズできます。

サイトのキャプチャ

Golden Bootstrap

Bootstrapのグリッドを黄金比にし、レイアウトを構築できます。

サイトのキャプチャ

Flatstrap

グラデーションやシャドウを全て排除した、フラットなスタイルにします。

サイトのキャプチャ

Bootstrap Templates Starter KIT

Bootstrap 3rc1をベースにしたテンプレートのスターターキット。個人のみ無料で、商用は有料ですが$10ほどです。

サイトのキャプチャ

Bootstrap 3 PSD

Bootstrap 3のレイアウト作成用のPSD素材。

サイトのキャプチャ

Twitter Bootstrap 2.0 Photoshop Template PSD

Bootstrap 2のPhotoshopとFireworks用のデザインテンプレート素材。

サイトのキャプチャ

Fireworks Tool Kits

Fireworks用のBootstrap 3rc1, 2.3.1をはじめ、前述のFlatstrapなどの有料素材。

サイトのキャプチャ

Bad Ass Resources

Bootstrapの活用するリソースのまとめ。現在319個!

top of page

©2017 coliss