Bootstrap前端開發(fā)案例二
我接著前面的一篇布局接著寫，前一篇我已經完成了導航條和廣告的布局。
開始繼續(xù)碼起來：
我想最終實現(xiàn)的效果圖是這樣的，如下：分了三個頁面截圖，太大了：
接著上次的未完成的，繼續(xù)碼起來：
第五步、增加柵格系統(tǒng)，我選擇了三列的布局col-md-4;滿格是12，4是12的三分之一，還可以響應式布局，設置多個柵格：
<div class="container" id="tag_container"> <div class="row"> <div class="col-md-4"> <img src="image/3.jpg" alt="animal1" width="200px" height="200px"> <h2>animal1</h2> <p>林卡酒店剛說風寒看到個后面發(fā)的搜房大機構老夫</p> <p><a href="#">click me</a></p> </div> <div class="col-md-4"> <img src="image/3.jpg" alt="animal1" width="200px" height="200px"> <h2>animal1</h2> <p>林卡酒店剛說風寒看到個后面發(fā)的搜房大機構老夫</p> <p><a href="#">click me</a></p> </div> <div class="col-md-4"> <img src="image/3.jpg" alt="animal1" width="200px" height="200px"> <h2>animal1</h2> <p>林卡酒店剛說風寒看到個后面發(fā)的搜房大機構老夫</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 class="divider"></hr>
css為
hr .divider{
margin:40px;
}
第七步、標簽頁的制作,下圖是三個標簽頁的效果圖：
1）標簽頁的原理：
<ul class="nav nav-tabs" role="tablist"> <li class="active"><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 class="tab-content"> <div class="tab-pane active" id="an1"> </div> <div class="tab-pane" id="an2"> </div> <div class="tab-pane" id="an3"></div> </div>
標簽頁結構是：ul列表聲明標簽，并且標注class="nav nav-tabs" role="tablist"
li標簽里的a鏈接標注role="tab" data-toggle="tab"，這樣才可以具有標簽頁打開頁面的功能，href="#an1"每個標簽頁的href分別鏈接到下面的顯示布局
展開的布局結構：<div class="tab-content">里面，每個標簽頁一個panel ，注意id與上面的標簽頁相互映射，為了可以打開該頁面。<div class="tab-pane" id="an3">
2）增加標簽頁面里面的布局
<ul class="nav nav-tabs" role="tablist"> <li class="active"><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 class="tab-content"> <div class="tab-pane active" id="an1"> <div class="row feature"> <div class="col-md-7"> <h2 class="feature-heading">Animal1 <span class="text-muted">瘋狂動物城</span></h2> <p class="lead">ajdkgjfd咯見到噶是開發(fā)的價格啊的時間覅技術的飛機如果大使館四國警方日結果的代價K歌人工吊喪irjeigrugitajdokgjijrgi</p> </div> <div class="col-md-5"> <img class="feature-image img-responsive" src="image/1.jpg"> </div> </div> </div> <div class="tab-pane" id="an2"> <div class="row feature"> <div class="col-md-7"> <h2 class="feature-heading">Animal2 <span class="text-muted">瘋狂動物城</span></h2> <p class="lead">ajdkgjfd咯見到噶是開發(fā)的價格啊的時間覅技術的飛機如果大使館四國警方日結果的代價K歌人工吊喪irjeigrugitajdokgjijrgi</p> </div> <div class="col-md-5"> <img class="feature-image img-responsive" src="image/2.jpg"> </div> </div> </div> <div class="tab-pane" id="an3"> <div class="row feature"> <div class="col-md-7"> <h2 class="feature-heading">Animal3 <span class="text-muted">瘋狂動物城</span></h2> <p class="lead">ajdkgjfd咯見到噶是開發(fā)的價格啊的時間覅技術的飛機如果大使館四國警方日結果的代價K歌人工吊喪irjeigrugitajdokgjijrgi</p> </div> <div class="col-md-5"> <img class="feature-image img-responsive" 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 class="pull-right"><a href="#top">回到頂部</a></p> <p>@2016 rongyu制</p> </footer>
注意：class="pull-right"可以將元素拉到右側，這是bootstrap的css的一個功能。
第九步、增加關于的彈出框按鈕：
<div class="modal fade" id="about"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <h4 class="modal-title">關于</h4> </div> <div class="modal-body"> <p>《瘋狂動物城》由迪士尼影業(yè)出品的3D動畫片，由里奇·摩爾、拜恩·霍華德及杰拉德·布什聯(lián)合執(zhí)導，金妮弗·古德溫、杰森·貝特曼、夏奇拉、艾倫·圖代克、伊德瑞斯·艾爾巴、J·K·西蒙斯等加盟配音[1] 。</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">了解了</button> <!-- <button type="button" class="btn btn-primary">Save changes</button> --> </div> </div><!-- /.modal-content --> </div><!-- /.modal-dialog --> </div><!-- /.modal -->
1）靜態(tài)彈窗口，分為三部分，標題，窗體和按鈕；其中，我們只需要一個按鈕，另一個注釋掉了。并增加 id=about，方便下面定位；
2）在關于導航條的菜單欄，增加toggle鏈接，data-toggle="modal"，id對應data-target="#about"：
<li><a href="#" data-toggle="modal" data-target="#about">關于</a></li>
第十步、菜單定位
點擊導航條的特點欄目，就會打開對應的標簽頁；需要一段js代碼實現(xiàn)
<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學習教程
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
這篇文章主要介紹了uni-app 組件里面獲取元素寬高的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-12-12
這篇文章主要給大家介紹了關于如何在現(xiàn)代JavaScript中編寫異步任務的相關資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2021-01-01
echartjs實現(xiàn)cross十星輔助線實現(xiàn)示例詳解
這篇文章主要為大家介紹了echartjs實現(xiàn)cross十星輔助線實現(xiàn)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-12-12
今天小編就為大家分享一篇關于JavaScript常用事件介紹，小編覺得內容挺不錯的，現(xiàn)在分享給大家，具有很好的參考價值，需要的朋友一起跟隨小編來看看吧2019-01-01
這篇文章主要介紹了移動端如何用下拉刷新的方式實現(xiàn)上拉加載，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2018-12-12
這篇文章主要介紹了小程序ios音頻播放沒聲音問題的解決，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-07-07
js和jquery設置disabled屬性為true使按鈕失效
這篇文章主要介紹了js和jquery使按鈕失效的方法,需要的朋友可以參考下2014-08-08
這篇文章主要介紹了es6中Promise 對象基本功能與用法,結合實例形式分析了es6中Promise對象的基本功能、用法及操作注意事項,需要的朋友可以參考下2020-02-02
對支持sourceIndex的HTML文檔的節(jié)點重排，使用JK提供的思路，速度至少比單純使用nodes.sort(function(a,b){return a.sourceIndex - b.sourceIndex})這種方式快兩倍2011-01-01
JavaScript事件學習小結(五）js中事件類型之鼠標事件
這篇文章主要介紹了JavaScript事件學習小結(五）js中事件類型之鼠標事件的相關資料,非常不錯具有參考借鑒價值，需要的朋友可以參考下2016-06-06