标签页Tags
标签页是一个经常使用的组件,可以放置较多的内容,又可以节省页面空间,其实吧,就是我们常说的选项卡。
<!--
标签页的设置,分为两部分,一个是标签列表,一个是内容区
.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>
学PHP的小蚂蚁 原创博客 http://my.oschina.net/woshixiaomayi/blog