0560_nav.html

<!-- navシリーズ -->
<!DOCTYPE html>
<html lang="ja">
<html>
  <head>
    <meta charset="UTF-8" />
    <link href="assets/bootstrap.css" media="screen" rel="stylesheet" type="text/css" />
    <script src="assets/jquery.js" type="text/javascript"></script>
    <script src="assets/coffee-script.js" type="text/javascript"></script>
    <script src="assets/bootstrap.js" type="text/javascript"></script>
  </head>
  <body>
    <div class="container">
      <ul>
        <li>li.a に対して data-toggle="tab" をつけなければ通常リンク集として使える</li>
        <li>アクティブにするには li.active</li>
      </ul>

      <h4>nav nav-tabs</h4>
      <ul class="nav nav-tabs">
        <li><a href="#id1" data-toggle="tab">T1</a></li>
        <li><a href="#id2" data-toggle="tab">T2</a></li>
      </ul>
      <h4>nav nav-pills</h4>
      <ul class="nav nav-pills">
        <li><a href="#id1" data-toggle="tab">T1</a></li>
        <li><a href="#id2" data-toggle="tab">T2</a></li>
      </ul>
      <h4>nav nav-tabs nav-stacked (わかりにくいので、これで切り替えるなら tabbable tabs-left を使うこと)</h4>
      <ul class="nav nav-tabs nav-stacked">
        <li><a href="#id1" data-toggle="tab">T1</a></li>
        <li><a href="#id2" data-toggle="tab">T2</a></li>
      </ul>
      <h4>nav nav-pills nav-stacked</h4>
      <ul class="nav nav-pills nav-stacked">
        <li><a href="#id1" data-toggle="tab">T1</a></li>
        <li><a href="#id2" data-toggle="tab">T2</a></li>
      </ul>

      <h4>対応するコンテンツ</h4>
      <div class="tab-content">
        <div class="tab-pane active" id="id1">A</div>
        <div class="tab-pane" id="id2">B</div>
      </div>
    </div>
  </body>
</html>