小蚂蚁学习Bootstrap（3）——标签页Tags制作和弹出框制作

标签页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">&times;</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

来源：oschina

链接：https://my.oschina.net/u/1423209/blog/528169