Bootstrap 3(2.xも)を活用する時に役立つリソースのまとめ
Post on:2013年8月7日
Bootstrapは先日リリースされたBootstrap 3rc1で、モバイルファーストのフロンドエンド用のフレームワークに生まれ変わりました。2.xまでは、デスクトップ用のブラウザを想定したインターフェイスのコンポーネントを核にしていました。
Bootstrapをカスタマイズしたり、もっと活用するためのリソースを紹介します。
まずは、本家のBootstrapから。
スマフォやタブレットでの利用を優先したシンプルでパワフルなUIエレメントが揃ったフロントエンド用のフレームワーク。
最新のBootstrap 3rc1(7/27に公開)はリリース候補版です。
Examples Templates for Bootstrap
Bootstrap純正のテンプレートやページの仕掛けが揃っています。
- Narrow marketing
小さいプロジェクト用の軽量のテンプレート。 - Carousel jumbotron
マーケティングサイト用のカルーセル。 - Fixed top navbar
スクロールしても上部に表示されるナビゲーションバー。
Bootply
キャプチャは、Bootable Template(スクロールすると面白いですよ)
Bootstrapのテンプレートをはじめ、使用例、スニペットなど、役立つコードが満載のサイト。オンラインエディタでBootstrapをカスタマイズすることもできます。
- Bootstrapのカスタマイズ(ハンドコーディング)
- Bootstrapのカスタマイズ(ドラッグ&ドロップ)
- Bootstrap 2.xからBootstrap 3への移行ガイド
- 2.xから3で変更されたclassの一覧
- Bootstrap 3を使ったデモ一覧
Bootstrap 2 to Bootstrap 3 HTML Upgrader
Bootstrap 2.3のHTMLをBootstrap 3用に変換してくれるオンラインサービス。変更した箇所は一覧表示されます。
ページの下には3で変更になったリスト、3用のテーマファイルもあります。
Bootstrapのオープンソースの無料のテーマを数多く配布しています。
シンプルながらバリエーションが豊富です。
※現在は2.3.xのものが主流です。
こちらは有料のテーマを配布しているサイト。有料といっても少額です。また、無料にはないさまざまなデザインのものがあるので、インスピレーションを得るのにも最適です。
Bootstrapで作られた世界中の秀逸なサイトをコレクションしています。
Bootstrap自ら紹介するBootstrapのベストサイトのまとめ。
BootstrapのさまざまなUIエレメントのカラーやサイズなど、スタイルをカスタマイズできます。
Bootstrapのグリッドを黄金比にし、レイアウトを構築できます。
グラデーションやシャドウを全て排除した、フラットなスタイルにします。
Bootstrap Templates Starter KIT
Bootstrap 3rc1をベースにしたテンプレートのスターターキット。個人のみ無料で、商用は有料ですが$10ほどです。
Bootstrap 3のレイアウト作成用のPSD素材。
Twitter Bootstrap 2.0 Photoshop Template PSD
Bootstrap 2のPhotoshopとFireworks用のデザインテンプレート素材。
Fireworks用のBootstrap 3rc1, 2.3.1をはじめ、前述のFlatstrapなどの有料素材。
Bootstrapの活用するリソースのまとめ。現在319個!
sponsors