× 無料のユーザー登録をすると学習状況を管理することができるようになります

【旧版】Twitter Bootstrap 2.0入門 (全28回)

最新版のレッスンはこちらから » 【最新版】Bootstrap 3.0入門 (全18回)

【新しいバージョンに対応した最新のレッスンをご利用ください】 ツイッター社が提供する、今風のウェブサイトを構築するための言語です。これを使ってHTMLとCSS、JavaScriptを簡単に拡張することができます(このレッスンはversion 2.0を元にして作成されています)。

このレッスンでは Twitter Bootstrap 2.0 / jQuery 1.7.1 を使用しています。

#01 学習に必要なファイルを揃える
2012年8月27日
Twitter Bootstrapのバージョンは現在2.1ですが、過去のバージョンが必要となる場合もあるでしょう。そうしたときはgithubの「tag」から欲しいバージョンを探してみましょう。例えばversion 2.0だと次のtagになります。
https://github.com/twitter/bootstrap/tree/v2.0.0
このようにgithubで管理されているプロジェクトの多くは過去のバージョンにさかのぼってダウンロードできるので覚えておくと良いでしょう。
2012年2月19日
Twitter Bootstrapの公式サイトは以下のとおりです。こちらからダウンロードしてください。
http://twitter.github.com/bootstrap/
#02 Twitter Bootstrapを読み込もう
2012年2月19日
jQueryをGoogleから読み込む方法については以下の動画レッスンも参考にしてみてください。
http://dotinstall.com/lessons/basic_jquery/501
#09 フォームのスタイリングをする (2)
2012年2月22日
Twitter Bootstrapにマイナーバージョンアップが行われ、label要素にもclass指定が必要になったようです。動画やソースのままだとずれてしまうので、それぞれのlabel要素に、以下のように「control-label」クラスをつけるようにしてください。
<label class="control-label">名前</label>
#12 アイコン付きボタンを作る
2012年2月19日
アイコンの一覧は以下から見ることができます。
http://twitter.github.com/bootstrap/base-css.html#icons
#15 タブメニューを作る
2012年4月16日
タブの表示でtabs-leftとしたときに、タブの内容が右側ではなくて下に表示されてしまうバグがあるようです(詳細は以下のURL参照)。
https://github.com/twitter/bootstrap/issues/2538
そのうち、修正されると思われますが、bootstrap.min.css中の、
.tab-content{display:table;width:100%;}
となっている部分を
.tab-content{display: block;}
に修正すればきちんと表示されるようです。ご参考までに…。