話題のTwitter Bootstrap。このブログもTwitter Bootstrapを使用しています（2013年9月現在）。やっぱり何かと便利です。今日は、そのTwitter Bootstrapでタブを使ったときに少し手こずったので忘れない為にメモしておきます。
※Twitter Bootstrapのバージョンは2.0.4

Twitter Bootstrapのタブは以下のようなものです。

では、順番に。

タブを表示する部分の記述

<ul class=&quot;nav nav-tabs&quot;>
  <li class=&quot;active&quot;><a href=&quot;#home&quot; data-toggle=&quot;tab&quot;>Home</a></li>
  <li><a href=&quot;#profile&quot; data-toggle=&quot;tab&quot;>Profile</a></li>
  <li><a href=&quot;#messages&quot; data-toggle=&quot;tab&quot;>Messages</a></li>
  <li><a href=&quot;#settings&quot; data-toggle=&quot;tab&quot;>Settings</a></li>
</ul>
<div class=&quot;tab-content&quot;>
  <div class=&quot;tab-pane active&quot; id=&quot;home&quot;>Homeです。</div>
  <div class=&quot;tab-pane&quot; id=&quot;profile&quot;>Profileです。</div>
  <div class=&quot;tab-pane&quot; id=&quot;messages&quot;>Messageです。</div>
  <div class=&quot;tab-pane&quot; id=&quot;settings&quot;>Settingsです。</div>
</div>

スクリプトファイルの読み込みと記述

<script>
  jQuery(function () {
    $('.tabs a:last').tab('show')
  })
</script>
<script type=&quot;text/javascript&quot; src=&quot;http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js&quot;></script>
<script type=&quot;text/javascript&quot; src=&quot;<?php bloginfo( 'template_url' );?>/js/bootstrap.js&quot;></script>

私はjQueryの古いバージョンも読み込んでいるため、その読み込み順の違いで最初は動かずに手こずりました。（つまりBootstrapじゃないとこで手こずったということです）