Bootstrap前端開發(fā)案例二

更新時(shí)間：2016年06月17日 15:24:39 作者：rongyux

Bootstrap前端開發(fā)案例二，這篇文章能夠幫助大家更還好的進(jìn)行前端開發(fā)Bootstrap，相信大家會愛上Bootstrap

我接著前面的一篇布局接著寫，前一篇我已經(jīng)完成了導(dǎo)航條和廣告的布局。

開始繼續(xù)碼起來：
我想最終實(shí)現(xiàn)的效果圖是這樣的，如下：分了三個(gè)頁面截圖，太大了：

接著上次的未完成的，繼續(xù)碼起來：
第五步、增加?xùn)鸥裣到y(tǒng)，我選擇了三列的布局col-md-4;滿格是12，4是12的三分之一，還可以響應(yīng)式布局，設(shè)置多個(gè)柵格：

<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ēng)寒看到個(gè)后面發(fā)的搜房大機(jī)構(gòu)老夫</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ēng)寒看到個(gè)后面發(fā)的搜房大機(jī)構(gòu)老夫</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ēng)寒看到個(gè)后面發(fā)的搜房大機(jī)構(gòu)老夫</p>
 <p><a href="#">click me</a></p>
 </div>
 </div>

 </div>

1）柵格必須在container 或 container-fluent （滿屏）的div里面，這樣可以自動賦予合適的排列（aligment）和內(nèi)補(bǔ)（padding）。
2）使 id為"tag_container"，類為col-md-4的部分居中對齊：

#tag_container .col-md-4{
 text-align: center;
 }

第六步、設(shè)置一行間距，分割上下部分
<hr class="divider"></hr>
css為

 hr .divider{
 margin:40px;
 }

第七步、標(biāo)簽頁的制作,下圖是三個(gè)標(biāo)簽頁的效果圖：

1）標(biāo)簽頁的原理：

<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>

標(biāo)簽頁結(jié)構(gòu)是：ul列表聲明標(biāo)簽，并且標(biāo)注class="nav nav-tabs" role="tablist"
li標(biāo)簽里的a鏈接標(biāo)注role="tab" data-toggle="tab"，這樣才可以具有標(biāo)簽頁打開頁面的功能，href="#an1"每個(gè)標(biāo)簽頁的href分別鏈接到下面的顯示布局
展開的布局結(jié)構(gòu)：<div class="tab-content">里面，每個(gè)標(biāo)簽頁一個(gè)panel ，注意id與上面的標(biāo)簽頁相互映射，為了可以打開該頁面。<div class="tab-pane" id="an3">
2）增加標(biāo)簽頁面里面的布局

<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ā)的價(jià)格啊的時(shí)間覅技術(shù)的飛機(jī)如果大使館四國警方日結(jié)果的代價(jià)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ā)的價(jià)格啊的時(shí)間覅技術(shù)的飛機(jī)如果大使館四國警方日結(jié)果的代價(jià)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ā)的價(jià)格啊的時(shí)間覅技術(shù)的飛機(jī)如果大使館四國警方日結(jié)果的代價(jià)K歌人工吊喪irjeigrugitajdokgjijrgi</p>
 </div>
 <div class="col-md-5">
  <img class="feature-image img-responsive" src="image/3.jpg">
 </div>
 </div>
 </div>

1）設(shè)置標(biāo)簽頁的上邊距

 .feature{
 padding: 30px 0
 }

2）設(shè)置標(biāo)簽頁的題目字體等

.feature-heading{
 font-size: 50px;
 color:#2a6496;
 margin-top: 120px;
 }

3）設(shè)置標(biāo)簽頁的副標(biāo)題格式：

 .feature-heading .text-muted{
 font-size: 28px;
 color: #999;
 }

第八步、增加底部版權(quán)聲明，效果圖如下：

 <footer>
 <p class="pull-right"><a href="#top">回到頂部</a></p>
 <p>@2016 rongyu制</p>
 </footer>

注意：class="pull-right"可以將元素拉到右側(cè)，這是bootstrap的css的一個(gè)功能。

第九步、增加關(guān)于的彈出框按鈕：

<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">&times;</span></button>
 <h4 class="modal-title">關(guān)于</h4>
 </div>
 <div class="modal-body">
 <p>《瘋狂動物城》由迪士尼影業(yè)出品的3D動畫片，由里奇·摩爾、拜恩·霍華德及杰拉德·布什聯(lián)合執(zhí)導(dǎo)，金妮弗·古德溫、杰森·貝特曼、夏奇拉、艾倫·圖代克、伊德瑞斯·艾爾巴、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)彈窗口，分為三部分，標(biāo)題，窗體和按鈕；其中，我們只需要一個(gè)按鈕，另一個(gè)注釋掉了。并增加 id=about，方便下面定位；
2）在關(guān)于導(dǎo)航條的菜單欄，增加toggle鏈接，data-toggle="modal"，id對應(yīng)data-target="#about"：
<li><a href="#" data-toggle="modal" data-target="#about">關(guān)于</a></li>

第十步、菜單定位

點(diǎn)擊導(dǎo)航條的特點(diǎn)欄目，就會打開對應(yīng)的標(biāo)簽頁；需要一段js代碼實(shí)現(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")導(dǎo)航，設(shè)置點(diǎn)擊事件；
2）定位到$("#tab-list a[href='" + href +"']")的打開標(biāo)簽頁的方法tab("'show")。
這樣，bootstrap的學(xué)習(xí)才剛剛起步。

如果大家還想深入學(xué)習(xí)，可以點(diǎn)擊這里進(jìn)行學(xué)習(xí)，再為大家附一個(gè)精彩的專題：Bootstrap學(xué)習(xí)教程

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: