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

【旧版】Twitter Bootstrap 2.1入門 (全18回)

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

ツイッター社が提供する、今風のウェブサイトを構築するための言語です。これを使ってHTMLとCSS、JavaScriptを簡単に拡張することができます。

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

#01 Twitter Bootstrapとは何か?
2013年9月9日
2013年8月現在、Bootstrap 3が発表されていますがまだRC(リリース候補版)となっています。レッスンで紹介されているBootstrap 2系については以下から参照してみてください。

・Bootstrap
http://getbootstrap.com/2.3.2/
2012年11月29日
Twitter Bootstrapの古いバージョンのドキュメントが見たい時は以下のサイトが便利です。
http://www.akiyan.com/bootstrap-history/
2012年10月31日
2012/10/31にTwitter Bootstrapの2.2.0が発表されましたが、このレッスンで紹介されている記法はそのまま問題なく使えますので安心してご利用ください。
http://twitter.github.com/bootstrap/
#03 グリッドレイアウトを使おう
2012年9月21日
グリッドシステムで「ここはspan4の幅なんだけど、左側にspan2分空けたい」というときもあります。そうしたときには「class="span4 offset2」と指定してあげればOKです。
中央だけにコンテンツを配置したり、デザイン的に左側に空白を持ちたい時に便利です。より詳しくは以下のマニュアルの「Offsetting columns」を見てみましょう。
http://twitter.github.com/bootstrap/scaffolding.html#gridSystem
#17 モーダルウィンドウを作ろう
2013年1月17日
モーダルウィンドウは、

$('#myModal').modal();

のように書くことで、JavaScriptから実行することも可能です。.modalの引数にはオプションを与えることができます。詳しくはリファレンスを参照して色々と試してみてください。

また、.on を使うことでモーダルが表示される前後に実行する処理を指定することもできます。

// .on の第1引数には show, shown, hide, hidden を指定可能。
$('#myModal').on('hidden', function () {
  // ...
});

http://twitter.github.com/bootstrap/javascript.html#modals
#18 ツールチップとポップオーバー
2013年12月6日
ツールチップとポップオーバーですが、このままだとそれらを設定したテキストをクリックするとページの先頭に飛ばされてしまいます。そうさせないようにするためには以下のようにコードを変更すればOKです。ご参考までに。
$(function() {
    $('a[rel=tooltip]').tooltip({'placement': 'bottom'});
    $('a[rel=popover]').popover();
    $('a[rel=tooltip], a[rel=popover]').click(function(e) {
        e.preventDefault();
    });
});