nav-tabsとnav-itemで作る
<ul class="nav nav-tabs"> <li class="nav-item"> <a class="nav-link active">タブ1</a> </li> <li class="nav-item"> <a class="nav-link">タブ2</a> </li> <li class="nav-item"> <a class="nav-link">タブ3</a> </li> <li class="nav-item"> <a class="nav-link">タブ4</a> </li> </ul>
これでもうタブが出来る
<ul class="nav nav-tabs"> <li class="nav-item"> <a href="#tab1" class="nav-link active" data-toggle="tab">タブ1</a> </li> <li class="nav-item"> <a href="#tab2" class="nav-link" data-toggle="tab">タブ2</a> </li> <li class="nav-item"> <a href="#tab3" class="nav-link" data-toggle="tab">タブ3</a> </li> <li class="nav-item"> <a href="#tab4" class="nav-link" data-toggle="tab">タブ4</a> </li> </ul> <div class="tab-content"> <div id="tab1" class="tab-pane active"> タブ1のコンテンツが入ります </div> <div id="tab2" class="tab-pane"> タブ2のコンテンツが入ります </div> <div id="tab3" class="tab-pane"> タブ3のコンテンツが入ります </div> <div id="tab4" class="tab-pane"> タブ4のコンテンツが入ります </div> </div>
おお、かなり凄え
### Bootstrap入門本
Bootstrapは、あんまり本を買って勉強するイメージはないけど、多用されている場合はあった方が良いかも..