我接著前面的一篇佈局接著寫，前一篇我已經完成了導航條和廣告的佈局。
開始繼續碼起來：
我想最終實現的效果圖是這樣的，如下：分了三個頁面截圖，太大了：
接著上次的未完成的，繼續碼起來：
第五步、增加柵格系統，我選擇了三列的佈局col-md-4;滿格是12，4是12的三分之一，還可以響應式佈局，設置多個柵格：
<div id="tag_container"> <div> <div> <img src="image/3.jpg"> <h2>animal1</h2> <p>林卡酒店剛說風寒看到個後面發的搜房大機構老夫</p> <p><a href="#">click me</a></p> </div> <div> <img src="image/3.jpg"> <h2>animal1</h2> <p>林卡酒店剛說風寒看到個後面發的搜房大機構老夫</p> <p><a href="#">click me</a></p> </div> <div> <img src="image/3.jpg"> <h2>animal1</h2> <p>林卡酒店剛說風寒看到個後面發的搜房大機構老夫</p> <p><a href="#">click me</a></p> </div> </div> </div>
1）柵格必須在container 或container-fluent （滿屏）的div裡面，這樣可以自動賦予合適的排列（aligment）和內補（padding）。
2）使id為"tag_container"，類為col-md-4的部分居中對齊：
#tag_container .col-md-4{ text-align: center; }第六步、設置一行間距，分割上下部分
<hr></hr>
css為
hr .divider{ margin:40px; }第七步、標籤頁的製作,下圖是三個標籤頁的效果圖：
1）標籤頁的原理：
<ul role="tablist"> <li><a href="#an1" role="tab" data-toggle="tab">animal1</a></li> <li><a href="#an2" role="tab" data-toggle="tab">animal2</a></li> <li><a href="#an3" role="tab" data-toggle="tab">animal3</a></li> </ul> <div> <div id="an1"> </div> <div id="an2"> </div> <div id="an3"></div> </div>
標籤頁結構是：ul列表聲明標籤，並且標註class="nav nav-tabs" role="tablist"
li標籤裡的a鏈接標註role="tab" data-toggle="tab"，這樣才可以具有標籤頁打開頁面的功能，href="#an1"每個標籤頁的href分別鏈接到下面的顯示佈局
展開的佈局結構：<div>裡面，每個標籤頁一個panel ，注意id與上面的標籤頁相互映射，為了可以打開該頁面。 <div id="an3">
2）增加標籤頁面裡面的佈局
<ul role="tablist"> <li><a href="#an1" role="tab" data-toggle="tab">animal1</a></li> <li><a href="#an2" role="tab" data-toggle="tab">animal2</a></li> <li><a href="#an3" role="tab" data-toggle="tab">animal3</a></li> </ul> <div> <div id="an1"> <div> <div> <h2>Animal1 <span>瘋狂動物城</span></h2> <p>ajdkgjfd咯見到噶是開發的價格啊的時間技術的飛機如果大使館四國警方日結果的代價K歌人工弔喪irjeigrugitajdokgjijrgi</p> </div> <div> <img src="image/1.jpg"> </div> </div> </div> <div id="an2"> <div> <div> <h2>Animal2 <span>瘋狂動物城</span></h2> <p>ajdkgjfd咯見到噶是開發的價格啊的時間技術的飛機如果大使館四國警方日結果的代價K歌人工弔喪irjeigrugitajdokgjijrgi</p> </div> <div> <img src="image/2.jpg"> </div> </div> </div> <div id="an3"> <div> <div> <h2>Animal3 <span>瘋狂動物城</span></h2> <p>ajdkgjfd咯見到噶是開發的價格啊的時間技術的飛機如果大使館四國警方日結果的代價K歌人工弔喪irjeigrugitajdokgjijrgi</p> </div> <div> <img src="image/3.jpg"> </div> </div> </div>
1）設置標籤頁的上邊距
.feature{ padding: 30px 0 }2）設置標籤頁的題目字體等
.feature-heading{ font-size: 50px; color:#2a6496; margin-top: 120px; }3）設置標籤頁的副標題格式：
.feature-heading .text-muted{ font-size: 28px; color: #999; }第八步、增加底部版權聲明，效果圖如下：
<footer> <p><a href="#top">回到頂部</a></p> <p>@2016 rongyu制</p> </footer>
注意： class="pull-right"可以將元素拉到右側，這是bootstrap的css的一個功能。
第九步、增加關於的彈出框按鈕：
<div id="about"> <div> <div> <div> <button type="button" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <h4>關於</h4> </div> <div> <p>《瘋狂動物城》由迪士尼影業出品的3D動畫片，由里奇・摩爾、拜恩・霍華德及杰拉德・布什聯合執導，金妮弗・古德溫、傑森・貝特曼、夏奇拉、艾倫・圖代克、伊德瑞斯・艾爾巴、J・K・西蒙斯等加盟配音[1] 。 </p> </div> <div> <button type="button" data-dismiss="modal">了解了</button> <!-- <button type="button">Save changes</button> --> </div> </div><!-- /.modal-content --> </div><!-- /.modal-dialog --> </div><!-- /.modal -->
1）靜態彈窗口，分為三部分，標題，窗體和按鈕；其中，我們只需要一個按鈕，另一個註釋掉了。並增加id=about，方便下面定位；
2）在關於導航條的菜單欄，增加toggle鏈接，data-toggle="modal"，id對應data-target="#about"：
<li><a href="#" data-toggle="modal" data-target="#about">關於</a></li>
第十步、菜單定位
點擊導航條的特點欄目，就會打開對應的標籤頁；需要一段js代碼實現
<script> $(document).ready(function() { $("#demo-navbar .dropdown-menu a").click(function(){ var href = $(this).attr('href'); // alert(href); $("#tab-list a[href='" + href +"']").tab("'show"); }); }); </script>1）通過id定位$("#demo-navbar .dropdown-menu a")導航，設置點擊事件；
2）定位到$("#tab-list a[href='" + href +"']")的打開標籤頁的方法tab("'show")。
這樣，bootstrap的學習才剛剛起步。
如果大家還想深入學習，可以點擊這裡進行學習，再為大家附一個精彩的專題：Bootstrap學習教程
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。