Bootstrap向下滑动的选项卡

1、准备好需要用到的字体图标。

3、书写hmtl代艨位雅剖码。<div class="demo"> <di即枢潋雳v class="container"> <div class="row"> <div class="col-md-offset-3 col-md-6"> <div class="tab" role="tabpanel"> <!-- Nav tabs --> <ul class="nav nav-tabs" role="tablist"> <li role="presentation" class="active"><a href="#Section1" aria-controls="home" role="tab" data-toggle="tab">Section 1</a></li> <li role="presentation"><a href="#Section2" aria-controls="profile" role="tab" data-toggle="tab">Section 2</a></li> <li role="presentation"><a href="#Section3" aria-controls="messages" role="tab" data-toggle="tab">Section 3</a></li> </ul> <!-- Tab panes --> <div class="tab-content tabs"> <div role="tabpanel" class="tab-pane fade in active" id="Section1"> <h3>Section 1</h3> <p>第一个选项卡P标签</p> </div> <div role="tabpanel" class="tab-pane fade" id="Section2"> <h3>Section 2</h3> <p>第2个选项卡P标签</p> </div> <div role="tabpanel" class="tab-pane fade" id="Section3"> <h3>Section 3</h3> <p>第3个选项卡P标签</p> </div> </div> </div> </div> </div> </div></div>

5、书写并添加js代码。<script src="js/jquery.min.js"></script><script src="js/bootstrap.min.js"></script>

7、查看效果。