WS000003

ノンデザイナーな自分がweb開発に最早必須になっている「twitter bootstrap」 そんな twitter bootstrap を更に便利に使うためのサイトを自分のメモがてらにまとめてみようと思います。

2013/01/13 Bootstrap Tour を追加しました。

twitter bootstrap の基礎(ドットインストール)

WS000011

youtubeを使ってプログラミングを懇切丁寧に教えてくれる ドットインストール さんの「twitter bootstrapの基礎」レッスンです。

そもそも、twitter bootstrap ってなに?って所から初めてくれるのでプログラミング初心者の方に最適です。

自分も手っ取り早く学びたい時には、色々なサイト調べるより解りやすいのでよく利用させて頂いてます。

twitter bootstrapの基礎

 

twitter bootstrap の便利なコードスニペット集「Bootsnipp」

コードスニペットとは、簡単に言うとコピペで使えるサンプルコードの事です。

↑こんなボタンのパーツや

こんなメニューリストも

コードスニペットをコピペで出来ちゃいます。

twitter bootstrap の機能全てを使いこなすのはなかなか難しいと思いますがここからインスピレーションを得たりするのにも役立ちそうですね。

bootsnipp.com

twitter bootstrap と組み合わせて編集フォームをカッコよくする「Editable for Bootstrap」

twitter bootstrp を拡張して編集フォームのユーザビリティを上げてスタイリッシュにしてくれます。

jQueryとBootstrapを読み込んで・・

	<link href="path/to/bootstrap/css/bootstrap.css" rel="stylesheet" /><script type="text/javascript" src="path/to/bootstrap/js/bootstrap.min.js"></script>

ダウンロードしたbootstrap-editableのファイルをプラグイン的に読み込むだけ

	<link href="path/to/bootstrap-editable/css/bootstrap-editable.css" rel="stylesheet" /><script type="text/javascript" src="path/to/bootstrap-editable/js/bootstrap-editable.min.js"></script>

ダウンロード&詳細は以下からどうぞ

Editable for Bootstrap

twitter Bootstrap と組み合わせて見出しを装飾できるcss

作者の方も仰ってますが twitter bootstrap は便利なんだけど意外と見出し(h1タグなど)の装飾が無いんですよね。

このエントリーはデザインができない自分にとってはとてもありがたかったです! 画像には一部しかありませんが、提供して下さっているcssを読み込めばかなりの数の見出しのパターンが使えますのでとってもオススメです。

使い片などの詳細は作者の方のブログが分かりやすいので参照してください。

twitter Bootstrap で見出しを装飾したい

twitter bootstrap の過去のバージョンをダウンロードできる「Bootstrap History」

 説明の必要も無いくらいそのままですが、twitter bootstrap の過去のバージョンを網羅してダウンロードすることができます。

特に、1.2.0、1.4.0、2.0.0辺りは大きく変更があるので元ファイル欲しいなーとか過去のバージョンの方が使い安かったなと言う場合には重宝するので覚えておいて損はないと思います。

Bootstrap History

モックアップをcacoo的に作れる「Div Shot」

今回、紹介するサイトで一番凄いなと思ったオンラインツール。

もっと早く知っていれば・・

左がbootstrapのモックアップ画面で右にタグの名前がズラリ。
WS000007

例えばbuttonタグをドラッグして
WS000004-001

右のモックアップ画面にドロップすると・・
WS000006

buttonが出来た!
divshot5

更にHTMLファイルをダウンロードして使うことも可能。
WS000001

Div Shot

twitter bootstrapでサイトツアーを実装できる「Bootstrap Tour」

WS000008

↑こんな感じでサイトの使い方を説明する時に便利なやつです。

イメージが沸かない方はデモを参照。

デモ

ダウンロードはgithubから

ダウンロード

使い方詳細は以下から

使い方詳細