码迷,mamicode.com
首页 > 其他好文 > 详细

Bootstrap 标签页

时间:2015-04-17 15:23:01      阅读:115      评论:0      收藏:0      [点我收藏+]

标签:

标签页可以在一个页面中切换显示的内容。要构成标签页需要两个元素。第一个是一个列表

<ul class="nav nav-tabs">  nav-tabs 可换成nav-pills 由标签切换成胶囊式样式。
   <li class="active"><a href="#identifier" data-toggle="tab">Home</a></li>
<li><a href="#" data-toggle="tab">some link text</a> ... </ul>
的列表。
第二个元素是内容,是一个tab-content的块,里面每个元素需要指定id.
<div class="tab-content">
  <div class="tab-pane fade in active" id="home">...</div>
  <div class="tab-pane fade" id="svn">...</div>
  <div class="tab-pane fade" id="ios">...</div>
  <div class="tab-pane fade" id="java">...</div>
</div>

如果需要为标签页设置淡入淡出效果,请添加 .fade 到每个 .tab-pane 后面。第一个标签页必须添加 .in 类,以便淡入显示初始内容,如下面实例所示:


Bootstrap 标签页

标签:

原文地址:http://www.cnblogs.com/liuyuanhao/p/4434955.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!