コードを変更：
結果を見る »
<!DOCTYPE html> <html> <head> <title>Bootstrap 3 Navs Pills</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <!-- タブの定義 --> <ul class="nav nav-pills"> <li class="active"><a href="#tab_a" data-toggle="pill">Pill A</a></li> <li><a href="#tab_b" data-toggle="pill">Pill B</a></li> <li><a href="#tab_c" data-toggle="pill">Pill C</a></li> <li><a href="#tab_d" data-toggle="pill">Pill D</a></li> </ul> <!-- タブのリンク先の定義 --> <div class="tab-content"> <div class="tab-pane active" id="tab_a"><!-- Pill A (#tab_a) --> <h1>Pane A</h1> <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p> </div> <div class="tab-pane" id="tab_b"><!-- Pill B (#tab_b) --> <h1>Pane B</h1> <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p> </div> <div class="tab-pane" id="tab_c"><!-- Pill C (#tab_c) --> <h1>Pane C</h1> <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p> </div> <div class="tab-pane" id="tab_d"><!-- Pill D (#tab_d) --> <h1>Pane D</h1> <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p> </div> </div><!-- tab content --> </div><!-- end of container --> </body> </html>
結果：