サンプル通りに書くと，
Tabの表示が出来なかったのですが，
以下を追加すると，
Tabが動くようになりました！
（ 以下のcodeはほぼHTMLです．
とはいえ，scriptの中に変な□の表示が出てしまうので，
jsp表示としています．
↑実際に動かしているのもjspです．
あしからず; ）
※ 私のための備忘録です．
momoclo.jsp
<html>
<head>
<link href="../bootstrap/css/bootstrap.css" rel="stylesheet">
<!-- 下を追加 -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script>
</head>
<body>
<!-- tab -->
<div class="tabbale">
<div id="content">
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#2" >Red</a></li>
<li class=""><a data-toggle="tab" href="#4">Pink</a></li>
<li class=""><a data-toggle="tab" href="#1">Yellow</a></li>
<li class=""><a data-toggle="tab" href="#3" >Green</a></li>
<li class=""><a data-toggle="tab" href="#5">Purple</a></li>
</ul>
<div id="my-tab-content" class ="tab-content">
<div class="tab-pane active" id="1">
<h1>Yellow</h1>
<p>しおりん</p>
</div>
<div class="tab-pane" id="2">
<h1>Red</h1>
<p>かなこ</p>
</div>
<div class="tab-pane" id="3">
<h1>Green</h1>
<p>ももか</p>
</div>
<div class="tab-pane" id="4">
<h1>Pink</h1>
<p>あーりん</p>
</div>
<div class="tab-pane" id="5">
<h1>Purple</h1>
<p>れにちゃん</p>
</div>
</div>
</div>
<!-- ここが重要！ -->
<script type="text/javascript">
jQuery(document).ready(function ($) {
$('#tabs').tab();
});
</script>
</div> <!-- container -->
<!-- これも忘れずに！！bootstrap.jsを読み込んであげましょう -->
<script type="text/javascript" src="../bootstrap/js/bootstrap.js"></script>
</body>
</html>