小螞蟻學習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