Bootstrap之选项卡

<div class="container"> <!-- nav-tabs作为选项卡头部样式 --> <ul class="nav nav-tabs"> <li class="active"><a href="">one</a></li> <li><a href="">two</a></li> <li><a href="">three</a></li> </ul> <!-- nav-justified端点对齐 按钮宽度总和等于父级宽度 --> <ul class="nav nav-tabs nav-justified"> <li class="active"><a href="">one</a></li> <li><a href="">two</a></li> <li><a href="">three</a></li> </ul> <!-- nav-tabs-justified 底线端点对齐(自适应) --> <ul class="nav nav-tabs nav-tabs-justified"> <li class="active"><a href="">one</a></li> <li><a href="">two</a></li> <li><a href="">three</a></li> </ul> <!-- nav-pills按钮选项卡 加上nav-justified可端点对齐(自适应宽度) --> <ul class="nav nav-tabs nav-pills nav-justified"> <li class="active"><a href="">one</a></li> <li><a href="">two</a></li> <li><a href="">three</a></li> </ul> <!-- nav-stacked竖向选项卡 配合nav-pills使用 --> <ul class="nav nav-tabs nav-pills nav-stacked"> <li class="active"><a href="">one</a></li> <li><a href="">two</a></li> <li><a href="">three</a></li> </ul> <ul class="nav nav-tabs"> <!-- data-toggle='tab'切换属性 然后可通过锚点进行切换--> <li class="active"><a href="#a" data-toggle='tab'>one</a></li> <li><a href="#b" data-toggle='tab'>two</a></li> <li><a href="#c" data-toggle='tab'>three</a></li> </ul> <!-- tab-content内容部分 --> <ul class="tab-content"> <!-- fade淡入淡出 in为一开始为显示 --> <li id="a" class="tab-pane fade in active">aaaaa</li> <li id="b" class="tab-pane fade">bbbbb</li> <li id="c" class="tab-pane fade">ccccc</li> </ul> </div>

 

转载于:https://www.cnblogs.com/dreamerC/p/6208117.html

相关资源：Bootstrap选项卡动态切换效果