标签页是一个经常使用的组件，可以放置较多的内容，又可以节省页面空间，其实吧，就是我们常说的选项卡。
<!-- 标签页的设置，分为两部分，一个是标签列表，一个是内容区 .nav .nav-tabs 定义一个标签页 --> <ul class="nav nav-tabs" role="tablist">
<li class="active">
<!-- 定义一个标签选项 href="" 指向内容区的id号 -->
<a href="#tab-chrome" role="tab" data-toggle="tab">Chrome</a>
</li>
<li>
<a href="#tab-firefox" role="tab" data-toggle="tab">Firefox</a>
</li>
<li> <a href="#tab-safari" role="tab" data-toggle="tab">Safari</a> </li>
<li> <a href="#tab-opera" role="tab" data-toggle="tab">Opera</a> </li>
<li> <a href="#tab-ie" role="tab" data-toggle="tab">IE</a> </li>
</ul>
<!-- .tab-content 定义了标签页的内容区域 -->
<div class="tab-content">
<!-- .tab-pane 定义了一个标签的内容 id=""的值和标签列表相对应 --> <div class="tab-pane active" id="tab-chrome">
</div>
<div class="tab-pane" id="tab-firefox">
</div>
<div class="tab-pane" id="tab-safari">
</div>
<div class="tab-pane" id="tab-opera">
</div>
<div class="tab-pane" id="tab-ie">
</div>
</div>
弹出框制作：用于弹出提示信息，浮动于页面之上。
一个完整的弹出框包含三部分：头部、内容、底部。弹出框一般从属于body元素，为弹出框分配一个id，然后在需要弹出的元素上设置data-toggle="modal" data-target="#about" 首先设置一个点击事件： <a href="#" data-toggle="modal" data-target="#linux">Linux</a> 然后设置弹出框内容： <!-- .modal 定义一个弹出框 #linux为这个弹出框指定一个id， 如果弹出框很多的时候便于区分 --> <div class="modal fade" id="linux" tabindex="-1" role="dialog" aria-labelledby="modal-label" aria-hidden="true"> <div class="modal-dialog"> <!-- .modal-content 开始弹出框的内容信息 内容信息可以分为三部分 1. .modal-header 头部信息 2. .modal-body 信息主干 3. .modal-footer 信息尾部 --> <div class="modal-content"> <div class="modal-header"> <!--点击关闭的按钮--> <button type="button" class="close" data-dismiss="modal"> <span aria-hidden="true">×</span> <span class="sr-only">关闭</span> </button> <h4 class="modal-title" id="modal-label">linux</h4> </div> <!--内容信息--> <div class="modal-body"> <p>linux是一款非常牛叉的系统，广泛应用于web服务器。</p> </div> <!-- .modal-footer 信息的尾部，一般都是确定、取消等按钮 --> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal"> 关闭 </button> </div> </div> </div> </div> .