值得分享的最全面Bootstrap快速人門案例

更新時(shí)間：2016年12月14日 08:49:36 作者：星光筆

這篇文章主要為大家詳細(xì)介紹了最全面的前端插件Bootstrap快速人門案例，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

今天，我給小白們分享一下比較流行的Bootstrap框架，它在工作中得到許多公司的青睞，因此對(duì)于升職和加薪很重要。同時(shí)，我們可以快速完成開發(fā)任務(wù)，減少發(fā)開周期，有不對(duì)的地方望大家指正。

如果你想走的更遠(yuǎn)，那么請(qǐng)勤勞一點(diǎn)，多看看代碼，多多練習(xí)代碼，如果你仔細(xì)研究代碼，自己也可以寫出一部分的css比較好的插件。

一、Bootstrap簡(jiǎn)介

詳見官網(wǎng)：

http://www.bootcss.com/

http://v3.bootcss.com/

1.練習(xí)準(zhǔn)備資源準(zhǔn)備：

下載bootstrap資源：

http:www.bootstrap.com

新建項(xiàng)目：bootstrap/code

在code下復(fù)制下載的dist目錄下的所有文件，并且在js文件夾中引入jquery的js文件，如：jquery-1.11.3.min.js最后新建文件bt.html

2.快速開發(fā)實(shí)現(xiàn)：

注意在開發(fā)過程中如果修改css效果一定要在引入bootsrtap中的css文件，再重新添加類，本次開發(fā)案例原網(wǎng)站如下：

http://www.bootcss.com/

3.相關(guān)概念

3.1柵格系統(tǒng)

網(wǎng)頁柵格從平面柵格系統(tǒng)中發(fā)展而來，它以規(guī)則的網(wǎng)格陣列來指導(dǎo)和規(guī)范網(wǎng)頁中的版面布局以及信息分布。柵格系統(tǒng)使得網(wǎng)頁開發(fā)更加靈活與規(guī)范。

Bootstrap采用12柵格系統(tǒng)，把網(wǎng)頁的總寬度平分為12份，開發(fā)人員可以自由按份組合。

3.2結(jié)構(gòu)：

實(shí)現(xiàn)柵格，需要借助固定的結(jié)構(gòu)---布局容器+行+列

3.2.1布局容器（.container 、.container-fluid）1）固定布局

.container

固定寬度并支持響應(yīng)式（1170px、970px、750px）這里可以使用媒體查詢@media

2）流式布局

.container-fluid

100%寬度，占據(jù)全部視口的容器

3.2.2行（.row）

有了容器布局我們才可以使用柵格系統(tǒng)，需要再寫一個(gè)div.row來作為列的父級(jí)元素

3.2.3列(.col-md-*)

這里的*可以取值2-12

1）列偏移：

在一般情況下列是默認(rèn)從做到右對(duì)齊的，在實(shí)際開發(fā)中，我們不需要左邊對(duì)齊

.col-mod-* .col-md-offset-12-* 可以通過后面的整個(gè)類來實(shí)現(xiàn)。

2）列嵌套

和表格相比：在表格中，可以在td中再嵌套table

這里嵌套時(shí)，不需要再加.container,只需要加.row 再加.col-md-*即可

3）列排序

改變左右浮動(dòng)，col-md-push-* 和 col-md-pull-* 注意push 和pull之和為12；

4.刪除網(wǎng)格系統(tǒng)

通過下表可以詳細(xì)查看bootstrap的柵格系統(tǒng)在各大屏幕設(shè)備的工作

二、全局CSS樣式

5.列表

有序列表

無序列表

自定義列表

6.按鈕

1）預(yù)定義樣式

.btn-default .btn-primary .btn-success .btn-info .btn-warnint .btn-danger

Button .btn .btn-default

2）尺寸.btn-lg .btn-sm .btn-xs3）塊級(jí)按鈕.btn-block7.表單(1).垂直排列表單

在表單中，通常是提示信息和表單元素共同構(gòu)成一組。

在bs中，提供.form-group 用來表示組的。

針對(duì)具體的那一個(gè)表單元素，可以使用.form-control（包括input、select、textarea）

效果如下：

PS:關(guān)于這個(gè)父元素，帶有.form-group的元素，并不是必須是div。是塊狀元素就可以，比如li。

(2).水平排列

在form上，添加.form-horizontal，然后結(jié)合柵格系統(tǒng)。（此處，不需要使用.row，直接使用柵格列即可）

(3).內(nèi)聯(lián)表單

表單都放在一行

借助.form-inline

為form元素添加.form-inline

效果如下：

(4).文本域

Textarea，也是通過.form-control來控制的，寬度就不要再設(shè)置cols了。

但是他的高度還是要使用rows來設(shè)置

效果如下：

(5).單選和多選

單選和多選，結(jié)構(gòu)需要做變化，如下：

效果如下：

在默認(rèn)情況下，它是垂直排列的。

在大多數(shù)場(chǎng)景下，需要水平排列的。

需要使用.radio-inline，如下：

也可以使用手冊(cè)上的結(jié)構(gòu)：

關(guān)于checkbox和radio，總是有一點(diǎn)對(duì)不齊，所有瀏覽器都有這么一個(gè)毛病。

Bs封裝的這個(gè)用法，解決這樣的問題。

(6).輔助文本

在文本框的下方有一些提示信息，其實(shí)就是輔助文本。

只需要添加一個(gè)span.help-block

效果如下：

1.表格

基本樣式

.table，應(yīng)用在table標(biāo)簽上

條紋狀表格

.table-striped

帶邊框的表格

.table-bordered

鼠標(biāo)懸停

.table-hover

緊縮表格

.table-condensed

主要是指每一行的行高，變得更小一點(diǎn)

狀態(tài)類

.active .success .info .warning .danger 應(yīng)用在tr/td上

2.輔助類

l背景顏色

l三角符號(hào)

箭頭

直接使用 .caret類，如下：

Ps：通常要結(jié)合 button 來使用，表示下拉菜單。

l關(guān)閉按鈕

效果如下：

l快速浮動(dòng)

.pull-left和.pull-right

l清除浮動(dòng)

.clearfix

l塊狀居中

.center-block

l顯示和隱藏

直接使用 .hidden 和 .show即可。

3.響應(yīng)式工具

前面用來響應(yīng)式柵格。

在響應(yīng)式設(shè)計(jì)中，還有如下的一個(gè)需求：

在大屏幕下，所有的信息都會(huì)顯示。

但是在小屏幕小，有針對(duì)性的隱藏某些信息。

針對(duì)這個(gè)需求，bs提供了一個(gè)響應(yīng)式的工具，可以設(shè)置根據(jù)不同的屏幕，可以隱藏或顯示指定的內(nèi)容。

上述代碼，當(dāng)頁面縮小到小于 992px以下，都會(huì)隱藏側(cè)欄。

二.組件

1.well

例如，新浪微博的發(fā)布框

2.頁頭

.page-header來顯示，如bootstrap的官網(wǎng)：

3.巨幕

很多網(wǎng)站，都有一個(gè)類似baner的地方，顯示一些比較重要的信息。尤其是國外的網(wǎng)站，非常的常見，各種教程的網(wǎng)站。

比如bootstrap的官網(wǎng)：

使用如下：

結(jié)果如下：

4.label和badge

label，就是標(biāo)簽

典型的應(yīng)用場(chǎng)景：

使用如下：

badge，就是徽章

典型場(chǎng)景，如微博的未讀消息，郵箱、微信、qq等消息

通常需要結(jié)合其他元素來使用

效果如下：

5.警告框

通常是在后臺(tái)操作的時(shí)候，會(huì)用到。

主要是在某個(gè)操作完成之后，進(jìn)行的一種提示，刪除成功，更新失敗等。

基類

.alert

修飾類

.alert-success .alert-info .alert-warning .alert-danger

可關(guān)閉的警告框

添加.alert-dismissible

在內(nèi)部添加一個(gè)關(guān)閉按鈕 button，并且使用data-dismisss=“alert”啟動(dòng)關(guān)閉功能

警告框中的超鏈接

使用.alert-link

顯示效果如下：

6.分頁

用到的是列表，ul

基本使用，只需要給ul添加.pagination

當(dāng)前頁，可以加.active

如果要禁用某一頁，需要加上 .disabled

使用如下：

當(dāng)面默認(rèn)的是中等大小，還可以更改分頁的大小。

尺寸

.pagination-lg .pagination-sm

7.路徑導(dǎo)航

路徑導(dǎo)航，又稱為面包屑導(dǎo)航。

在大多數(shù)網(wǎng)站中，都會(huì)有的一個(gè)結(jié)構(gòu)。給用戶一個(gè)明確的指示，還知道自己在哪兒，不至于迷路了。

典型的應(yīng)用：

列表結(jié)構(gòu)，在ol或者ul上添加 .breadcrumb

8.進(jìn)度條

相對(duì)來說，出現(xiàn)的少一些。

典型應(yīng)用場(chǎng)景 ---- 文件上傳（圖片）

基本使用

進(jìn)度條，通常是由父元素和子元素共同構(gòu)成的，

.progress（父） + .progress-bar（子）

進(jìn)度條的顏色

.progress-bar-success .progress-bar-info .progress-bar-warning .progress-bar-danger

條紋效果

.progress-bar-striped

動(dòng)畫效果

.active

效果如下：

9.按鈕組

前面，我們已經(jīng)會(huì)單個(gè)的按鈕，在web開發(fā)中，經(jīng)常需要將按鈕使用組的形式來呈現(xiàn)。

只需要將button放在一個(gè)容器（如div）中，給容器加一個(gè) .btn-group

也可以更改按鈕組的尺寸，

.btn-group-lg .btn-group-sm .btn-group-xs

三、返回頂部的按鈕效果實(shí)現(xiàn)

注意引入字體文件css

復(fù)制代碼代碼如下:

四、代碼分享

bt.html

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale = 1">
 <title>Bootstrap中文網(wǎng)</title>
 <link rel="stylesheet" href="css/bootstrap.min.css">
 <link  rel="stylesheet">
 <style>
  .jumbotron{
   position: relative;
   padding: 40px 0;
   color: #fff;
   text-align: center;
   text-shadow: 0 1px 3px rgba(0,0,0,.4),0 0 30px rgba(0,0,0,.075);
   background: #020031; 
   background: -moz-linear-gradient(45deg,#020031 0,#6d3353 100%);
    background: -webkit-gradient(linear,left bottom,right top,color-stop(0%,#020031),color-stop(100%,#6d3353)); 
   background: -webkit-linear-gradient(45deg,#020031 0,#6d3353 100%); 
   background: -o-linear-gradient(45deg,#020031 0,#6d3353 100%);
   background: -ms-linear-gradient(45deg,#020031 0,#6d3353 100%);
   background: linear-gradient(45deg,#020031 0,#6d3353 100%); 
   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#020031', endColorstr='#6d3353', GradientType=1);
   -webkit-box-shadow: inset 0 3px 7px rgba(0,0,0,.2),inset 0 -3px 7px rgba(0,0,0,.2); 
   -moz-box-shadow: inset 0 3px 7px rgba(0,0,0,.2),inset 0 -3px 7px rgba(0,0,0,.2);
    box-shadow: inset 0 3px 7px rgba(0,0,0,.2),inset 0 -3px 7px rgba(0,0,0,.2);
  }
  .jumbotron a{
   color:rgba(255,255,255,.5)
   -webkit-transition:all .2s ease-in-out;
   -moz-transition:all .2s ease-in-out;
   -o-transition:all .2s ease-in-out;
   -ms-transition:all .2s ease-in-out;
   transition:all .2s ease-in-out;
  }
  .jumbotron a:hover{
   color:#fff;
  }
  .jumbotron a.btn{
   color:#fff;
  }
  .thumbnail{height:330px;}
  .footer{
   padding:30px 0;
   border-top:1px solid #e5e5e5;
   margin-top: 70px;
  }
  .footer a{color:#777;}
  .footer .about>div h4{
   color:#563d7c;
   font-size: 16px;
  }
  #scrollUp{
   background-color:#777;
   font-size: 40px;
   line-height: 1;
   text-align:center;
   text-decoration:none;
   position:fixed;
   right:20px;
   bottom:20px;
   overflow:hidden;
   width: 46px;
   height: 46px;
   border:none;
   opacity:.8;
   display:none;
  }
  .fa-angle-up:before{
   content:"\f106";
  }
 </style>
 <script src="js/jquery-1.11.3.min.js"></script>
 <script src= "js/bootstrap.min.js"></script>
</head>
<body>
 <nav class="navbar navbar-default navbar-fixed-top navbar-inverse ">
  <div class="container">
   <div class=" navbar-header">
    <a href=""class="navbar-brand">Bootstrap中文網(wǎng)</a></div>
   <ul class="nav navbar-nav">
    <li>
     <a href="">Bootstrap2中文文檔</a>
    </li>
    <li>   
     <a href="">Bootstrap3中文文檔</a>
    </li>
    <li>
     <a href="">less教程</a>
    </li>
    <li>
     <a href="">網(wǎng)站實(shí)例</a>
    </li>
   </ul>
  </div>
 </nav>
 <div class="jumbotron masthead">
  <h1>Bootstrap</h1>
  <p>簡(jiǎn)潔、直觀、強(qiáng)悍的前端開發(fā)框架，讓web開發(fā)更迅速、簡(jiǎn)單。</p>
  <a href="" class="btn btn-primary btn-lg">Bootstrap2中文文檔(v2.3.2)</a>

  <br>
  <br>
  <p><a href=""><small>Bootstrap2中文文檔(v2.3.2)</small></a></p>
 </div>
 <div class="container">
  <div class="page-header text-center">
   <h1>Bootstrap相關(guān)優(yōu)質(zhì)項(xiàng)目推薦</h1>
   <p>這些項(xiàng)目或者是對(duì)Bootstrap進(jìn)行了有益的補(bǔ)充，或者是基于Bootstrap開發(fā)的</p>
  </div>
  <div class="row">
   <div class="col-md-3">
     <div class="thumbnail">
      <a href=""><img src="image/bs1.png" alt="Headroom.js"></a>
      <div class="caption text-center">
       <h4>Bootstrap編碼規(guī)范<br>
        <small>by @mdo</small>
       </h4>
       <p>Bootstrap編碼規(guī)范：編寫靈活、穩(wěn)定、高質(zhì)量的HTML和CSS代碼的規(guī)范。</p>
      </div>
     </div>
   </div>
   <div class="col-md-3">
    <div class="thumbnail">
     <a href=""><img src="image/bs2.png" alt="jQuery API 中文文檔/手冊(cè)"></a>
     <div class="caption text-center">
      <h4>jQuery API<br>
       <small>中文手冊(cè)</small> 
      </h4>
      <p>根據(jù)最新的 jQuery 1.11.x 和 2.1.x 版本翻譯的 jQuery API 中文文檔/手冊(cè)</p>
     </div>
    </div>
   </div>
   <div class="col-md-3">
     <div class="thumbnail">
      <a href=""><img src="image/bs3.png" alt=""></a>
      <div class="caption text-center">
       <h4>Bootstrap編碼規(guī)范<br>
        <small>by @mdo</small>
       </h4>
       <p>Bootstrap編碼規(guī)范：編寫靈活、穩(wěn)定、高質(zhì)量的HTML和CSS代碼的規(guī)范。</p>
      </div>
     </div>
   </div>
   <div class="col-md-3">
     <div class="thumbnail">
      <a href=""><img src="image/bs5.png" alt="w3schools 原版國內(nèi)鏡像"></a>
      <div class="caption text-center">
       <h4>w3schools<br>
        <small>原版國內(nèi)鏡像</small>
       </h4>
       <p>w3schools.com 是最受歡迎的前端技術(shù)教程網(wǎng)站，但是國內(nèi)用戶一直不能訪問，并且國內(nèi)的中文翻譯版本十分陳舊。因此做了個(gè)鏡像，希望英文好的同學(xué)直接去看原版教程吧！</p>
      </div>
     </div>
   </div>
  </div>
  <div class="row">
   <div class="col-md-3">
     <div class="thumbnail">
      <a href=""><img src="image/bs1.png" alt="Headroom.js"></a>
      <div class="caption text-center">
       <h4>Bootstrap編碼規(guī)范<br>
        <small>by @mdo</small>
       </h4>
       <p>Bootstrap編碼規(guī)范：編寫靈活、穩(wěn)定、高質(zhì)量的HTML和CSS代碼的規(guī)范。</p>
      </div>
     </div>
   </div>
   <div class="col-md-3">
    <div class="thumbnail">
     <a href=""><img src="image/bs2.png" alt="jQuery API 中文文檔/手冊(cè)"></a>
     <div class="caption text-center">
      <h4>jQuery API<br>
       <small>中文手冊(cè)</small> 
      </h4>
      <p>根據(jù)最新的 jQuery 1.11.x 和 2.1.x 版本翻譯的 jQuery API 中文文檔/手冊(cè)</p>
     </div>
    </div>
   </div>
   <div class="col-md-3">
     <div class="thumbnail">
      <a href=""><img src="image/bs3.png" alt=""></a>
      <div class="caption text-center">
       <h4>Bootstrap編碼規(guī)范<br>
        <small>by @mdo</small>
       </h4>
       <p>Bootstrap編碼規(guī)范：編寫靈活、穩(wěn)定、高質(zhì)量的HTML和CSS代碼的規(guī)范。</p>
      </div>
     </div>
   </div>
   <div class="col-md-3">
     <div class="thumbnail">
      <a href=""><img src="image/bs5.png" alt="w3schools 原版國內(nèi)鏡像"></a>
      <div class="caption text-center">
       <h4>w3schools<br>
        <small>原版國內(nèi)鏡像</small>
       </h4>
       <p>w3schools.com 是最受歡迎的前端技術(shù)教程網(wǎng)站，但是國內(nèi)用戶一直不能訪問，并且國內(nèi)的中文翻譯版本十分陳舊。因此做了個(gè)鏡像，希望英文好的同學(xué)直接去看原版教程吧！</p>
      </div>
     </div>
   </div>
  </div>
  <div class="row">
   <div class="col-md-3">
     <div class="thumbnail">
      <a href=""><img src="image/bs1.png" alt="Headroom.js"></a>
      <div class="caption text-center">
       <h4>Bootstrap編碼規(guī)范<br>
        <small>by @mdo</small>
       </h4>
       <p>Bootstrap編碼規(guī)范：編寫靈活、穩(wěn)定、高質(zhì)量的HTML和CSS代碼的規(guī)范。</p>
      </div>
     </div>
   </div>
   <div class="col-md-3">
    <div class="thumbnail">
     <a href=""><img src="image/bs2.png" alt="jQuery API 中文文檔/手冊(cè)"></a>
     <div class="caption text-center">
      <h4>jQuery API<br>
       <small>中文手冊(cè)</small> 
      </h4>
      <p>根據(jù)最新的 jQuery 1.11.x 和 2.1.x 版本翻譯的 jQuery API 中文文檔/手冊(cè)</p>
     </div>
    </div>
   </div>
   <div class="col-md-3">
     <div class="thumbnail">
      <a href=""><img src="image/bs3.png" alt=""></a>
      <div class="caption text-center">
       <h4>Bootstrap編碼規(guī)范<br>
        <small>by @mdo</small>
       </h4>
       <p>Bootstrap編碼規(guī)范：編寫靈活、穩(wěn)定、高質(zhì)量的HTML和CSS代碼的規(guī)范。</p>
      </div>
     </div>
   </div>
   <div class="col-md-3">
     <div class="thumbnail">
      <a href=""><img src="image/bs5.png" alt="w3schools 原版國內(nèi)鏡像"></a>
      <div class="caption text-center">
       <h4>w3schools<br>
        <small>原版國內(nèi)鏡像</small>
       </h4>
       <p>w3schools.com 是最受歡迎的前端技術(shù)教程網(wǎng)站，但是國內(nèi)用戶一直不能訪問，并且國內(nèi)的中文翻譯版本十分陳舊。因此做了個(gè)鏡像，希望英文好的同學(xué)直接去看原版教程吧！</p>
      </div>
     </div>
   </div>
  </div>
  <div class="row">
   <div class="col-md-3">
     <div class="thumbnail">
      <a href=""><img src="image/bs1.png" alt="Headroom.js"></a>
      <div class="caption text-center">
       <h4>Bootstrap編碼規(guī)范<br>
        <small>by @mdo</small>
       </h4>
       <p>Bootstrap編碼規(guī)范：編寫靈活、穩(wěn)定、高質(zhì)量的HTML和CSS代碼的規(guī)范。</p>
      </div>
     </div>
   </div>
   <div class="col-md-3">
    <div class="thumbnail">
     <a href=""><img src="image/bs2.png" alt="jQuery API 中文文檔/手冊(cè)"></a>
     <div class="caption text-center">
      <h4>jQuery API<br>
       <small>中文手冊(cè)</small> 
      </h4>
      <p>根據(jù)最新的 jQuery 1.11.x 和 2.1.x 版本翻譯的 jQuery API 中文文檔/手冊(cè)</p>
     </div>
    </div>
   </div>
   <div class="col-md-3">
     <div class="thumbnail">
      <a href=""><img src="image/bs3.png" alt=""></a>
      <div class="caption text-center">
       <h4>Bootstrap編碼規(guī)范<br>
        <small>by @mdo</small>
       </h4>
       <p>Bootstrap編碼規(guī)范：編寫靈活、穩(wěn)定、高質(zhì)量的HTML和CSS代碼的規(guī)范。</p>
      </div>
     </div>
   </div>
   <div class="col-md-3">
     <div class="thumbnail">
      <a href=""><img src="image/bs5.png" alt="w3schools 原版國內(nèi)鏡像"></a>
      <div class="caption text-center">
       <h4>w3schools<br>
        <small>原版國內(nèi)鏡像</small>
       </h4>
       <p>w3schools.com 是最受歡迎的前端技術(shù)教程網(wǎng)站，但是國內(nèi)用戶一直不能訪問，并且國內(nèi)的中文翻譯版本十分陳舊。因此做了個(gè)鏡像，希望英文好的同學(xué)直接去看原版教程吧！</p>
      </div>
     </div>
   </div>
  </div>
  <div class="row">
   <div class="col-md-3">
     <div class="thumbnail">
      <a href=""><img src="image/bs1.png" alt="Headroom.js"></a>
      <div class="caption text-center">
       <h4>Bootstrap編碼規(guī)范<br>
        <small>by @mdo</small>
       </h4>
       <p>Bootstrap編碼規(guī)范：編寫靈活、穩(wěn)定、高質(zhì)量的HTML和CSS代碼的規(guī)范。</p>
      </div>
     </div>
   </div>
   <div class="col-md-3">
    <div class="thumbnail">
     <a href=""><img src="image/bs2.png" alt="jQuery API 中文文檔/手冊(cè)"></a>
     <div class="caption text-center">
      <h4>jQuery API<br>
       <small>中文手冊(cè)</small> 
      </h4>
      <p>根據(jù)最新的 jQuery 1.11.x 和 2.1.x 版本翻譯的 jQuery API 中文文檔/手冊(cè)</p>
     </div>
    </div>
   </div>
   <div class="col-md-3">
     <div class="thumbnail">
      <a href=""><img src="image/bs3.png" alt=""></a>
      <div class="caption text-center">
       <h4>Bootstrap編碼規(guī)范<br>
        <small>by @mdo</small>
       </h4>
       <p>Bootstrap編碼規(guī)范：編寫靈活、穩(wěn)定、高質(zhì)量的HTML和CSS代碼的規(guī)范。</p>
      </div>
     </div>
   </div>
   <div class="col-md-3">
     <div class="thumbnail">
      <a href=""><img src="image/bs5.png" alt="w3schools 原版國內(nèi)鏡像"></a>
      <div class="caption text-center">
       <h4>w3schools<br>
        <small>原版國內(nèi)鏡像</small>
       </h4>
       <p>w3schools.com 是最受歡迎的前端技術(shù)教程網(wǎng)站，但是國內(nèi)用戶一直不能訪問，并且國內(nèi)的中文翻譯版本十分陳舊。因此做了個(gè)鏡像，希望英文好的同學(xué)直接去看原版教程吧！</p>
      </div>
     </div>
   </div>
  </div>
  <div class="row">
   <div class="col-md-3">
     <div class="thumbnail">
      <a href=""><img src="image/bs1.png" alt="Headroom.js"></a>
      <div class="caption text-center">
       <h4>Bootstrap編碼規(guī)范<br>
        <small>by @mdo</small>
       </h4>
       <p>Bootstrap編碼規(guī)范：編寫靈活、穩(wěn)定、高質(zhì)量的HTML和CSS代碼的規(guī)范。</p>
      </div>
     </div>
   </div>
   <div class="col-md-3">
    <div class="thumbnail">
     <a href=""><img src="image/bs2.png" alt="jQuery API 中文文檔/手冊(cè)"></a>
     <div class="caption text-center">
      <h4>jQuery API<br>
       <small>中文手冊(cè)</small> 
      </h4>
      <p>根據(jù)最新的 jQuery 1.11.x 和 2.1.x 版本翻譯的 jQuery API 中文文檔/手冊(cè)</p>
     </div>
    </div>
   </div>
   <div class="col-md-3">
     <div class="thumbnail">
      <a href=""><img src="image/bs3.png" alt=""></a>
      <div class="caption text-center">
       <h4>Bootstrap編碼規(guī)范<br>
        <small>by @mdo</small>
       </h4>
       <p>Bootstrap編碼規(guī)范：編寫靈活、穩(wěn)定、高質(zhì)量的HTML和CSS代碼的規(guī)范。</p>
      </div>
     </div>
   </div>
   <div class="col-md-3">
     <div class="thumbnail">
      <a href=""><img src="image/bs5.png" alt="w3schools 原版國內(nèi)鏡像"></a>
      <div class="caption text-center">
       <h4>w3schools<br>
        <small>原版國內(nèi)鏡像</small>
       </h4>
       <p>w3schools.com 是最受歡迎的前端技術(shù)教程網(wǎng)站，但是國內(nèi)用戶一直不能訪問，并且國內(nèi)的中文翻譯版本十分陳舊。因此做了個(gè)鏡像，希望英文好的同學(xué)直接去看原版教程吧！</p>
      </div>
     </div>
   </div>
  </div>
  <div class="row">
   <div class="col-md-3">
     <div class="thumbnail">
      <a href=""><img src="image/bs1.png" alt="Headroom.js"></a>
      <div class="caption text-center">
       <h4>Bootstrap編碼規(guī)范<br>
        <small>by @mdo</small>
       </h4>
       <p>Bootstrap編碼規(guī)范：編寫靈活、穩(wěn)定、高質(zhì)量的HTML和CSS代碼的規(guī)范。</p>
      </div>
     </div>
   </div>
   <div class="col-md-3">
    <div class="thumbnail">
     <a href=""><img src="image/bs2.png" alt="jQuery API 中文文檔/手冊(cè)"></a>
     <div class="caption text-center">
      <h4>jQuery API<br>
       <small>中文手冊(cè)</small> 
      </h4>
      <p>根據(jù)最新的 jQuery 1.11.x 和 2.1.x 版本翻譯的 jQuery API 中文文檔/手冊(cè)</p>
     </div>
    </div>
   </div>
   <div class="col-md-3">
     <div class="thumbnail">
      <a href=""><img src="image/bs3.png" alt=""></a>
      <div class="caption text-center">
       <h4>Bootstrap編碼規(guī)范<br>
        <small>by @mdo</small>
       </h4>
       <p>Bootstrap編碼規(guī)范：編寫靈活、穩(wěn)定、高質(zhì)量的HTML和CSS代碼的規(guī)范。</p>
      </div>
     </div>
   </div>
   <div class="col-md-3">
     <div class="thumbnail">
      <a href=""><img src="image/bs5.png" alt="w3schools 原版國內(nèi)鏡像"></a>
      <div class="caption text-center">
       <h4>w3schools<br>
        <small>原版國內(nèi)鏡像</small>
       </h4>
       <p>w3schools.com 是最受歡迎的前端技術(shù)教程網(wǎng)站，但是國內(nèi)用戶一直不能訪問，并且國內(nèi)的中文翻譯版本十分陳舊。因此做了個(gè)鏡像，希望英文好的同學(xué)直接去看原版教程吧！</p>
      </div>
     </div>
   </div>
  </div>
  <div class="row">
   <div class="col-md-3">
     <div class="thumbnail">
      <a href=""><img src="image/bs1.png" alt="Headroom.js"></a>
      <div class="caption text-center">
       <h4>Bootstrap編碼規(guī)范<br>
        <small>by @mdo</small>
       </h4>
       <p>Bootstrap編碼規(guī)范：編寫靈活、穩(wěn)定、高質(zhì)量的HTML和CSS代碼的規(guī)范。</p>
      </div>
     </div>
   </div>
   <div class="col-md-3">
    <div class="thumbnail">
     <a href=""><img src="image/bs2.png" alt="jQuery API 中文文檔/手冊(cè)"></a>
     <div class="caption text-center">
      <h4>jQuery API<br>
       <small>中文手冊(cè)</small> 
      </h4>
      <p>根據(jù)最新的 jQuery 1.11.x 和 2.1.x 版本翻譯的 jQuery API 中文文檔/手冊(cè)</p>
     </div>
    </div>
   </div>
   <div class="col-md-3">
     <div class="thumbnail">
      <a href=""><img src="image/bs3.png" alt=""></a>
      <div class="caption text-center">
       <h4>Bootstrap編碼規(guī)范<br>
        <small>by @mdo</small>
       </h4>
       <p>Bootstrap編碼規(guī)范：編寫靈活、穩(wěn)定、高質(zhì)量的HTML和CSS代碼的規(guī)范。</p>
      </div>
     </div>
   </div>
   <div class="col-md-3">
     <div class="thumbnail">
      <a href=""><img src="image/bs5.png" alt="w3schools 原版國內(nèi)鏡像"></a>
      <div class="caption text-center">
       <h4>w3schools<br>
        <small>原版國內(nèi)鏡像</small>
       </h4>
       <p>w3schools.com 是最受歡迎的前端技術(shù)教程網(wǎng)站，但是國內(nèi)用戶一直不能訪問，并且國內(nèi)的中文翻譯版本十分陳舊。因此做了個(gè)鏡像，希望英文好的同學(xué)直接去看原版教程吧！</p>
      </div>
     </div>
   </div>
  </div>
  <div class="row">
   <div class="col-md-3">
     <div class="thumbnail">
      <a href=""><img src="image/bs1.png" alt="Headroom.js"></a>
      <div class="caption text-center">
       <h4>Bootstrap編碼規(guī)范<br>
        <small>by @mdo</small>
       </h4>
       <p>Bootstrap編碼規(guī)范：編寫靈活、穩(wěn)定、高質(zhì)量的HTML和CSS代碼的規(guī)范。</p>
      </div>
     </div>
   </div>
   <div class="col-md-3">
    <div class="thumbnail">
     <a href=""><img src="image/bs2.png" alt="jQuery API 中文文檔/手冊(cè)"></a>
     <div class="caption text-center">
      <h4>jQuery API<br>
       <small>中文手冊(cè)</small> 
      </h4>
      <p>根據(jù)最新的 jQuery 1.11.x 和 2.1.x 版本翻譯的 jQuery API 中文文檔/手冊(cè)</p>
     </div>
    </div>
   </div>
   <div class="col-md-3">
     <div class="thumbnail">
      <a href=""><img src="image/bs3.png" alt=""></a>
      <div class="caption text-center">
       <h4>Bootstrap編碼規(guī)范<br>
        <small>by @mdo</small>
       </h4>
       <p>Bootstrap編碼規(guī)范：編寫靈活、穩(wěn)定、高質(zhì)量的HTML和CSS代碼的規(guī)范。</p>
      </div>
     </div>
   </div>
   <div class="col-md-3">
     <div class="thumbnail">
      <a href=""><img src="image/bs5.png" alt="w3schools 原版國內(nèi)鏡像"></a>
      <div class="caption text-center">
       <h4>w3schools<br>
        <small>原版國內(nèi)鏡像</small>
       </h4>
       <p>w3schools.com 是最受歡迎的前端技術(shù)教程網(wǎng)站，但是國內(nèi)用戶一直不能訪問，并且國內(nèi)的中文翻譯版本十分陳舊。因此做了個(gè)鏡像，希望英文好的同學(xué)直接去看原版教程吧！</p>
      </div>
     </div>
   </div>
  </div>
  <div class="row">
   <div class="col-md-3">
     <div class="thumbnail">
      <a href=""><img src="image/bs1.png" alt="Headroom.js"></a>
      <div class="caption text-center">
       <h4>Bootstrap編碼規(guī)范<br>
        <small>by @mdo</small>
       </h4>
       <p>Bootstrap編碼規(guī)范：編寫靈活、穩(wěn)定、高質(zhì)量的HTML和CSS代碼的規(guī)范。</p>
      </div>
     </div>
   </div>
   <div class="col-md-3">
    <div class="thumbnail">
     <a href=""><img src="image/bs2.png" alt="jQuery API 中文文檔/手冊(cè)"></a>
     <div class="caption text-center">
      <h4>jQuery API<br>
       <small>中文手冊(cè)</small> 
      </h4>
      <p>根據(jù)最新的 jQuery 1.11.x 和 2.1.x 版本翻譯的 jQuery API 中文文檔/手冊(cè)</p>
     </div>
    </div>
   </div>
   <div class="col-md-3">
     <div class="thumbnail">
      <a href=""><img src="image/bs3.png" alt=""></a>
      <div class="caption text-center">
       <h4>Bootstrap編碼規(guī)范<br>
        <small>by @mdo</small>
       </h4>
       <p>Bootstrap編碼規(guī)范：編寫靈活、穩(wěn)定、高質(zhì)量的HTML和CSS代碼的規(guī)范。</p>
      </div>
     </div>
   </div>
   <div class="col-md-3">
     <div class="thumbnail">
      <a href=""><img src="image/bs5.png" alt="w3schools 原版國內(nèi)鏡像"></a>
      <div class="caption text-center">
       <h4>w3schools<br>
        <small>原版國內(nèi)鏡像</small>
       </h4>
       <p>w3schools.com 是最受歡迎的前端技術(shù)教程網(wǎng)站，但是國內(nèi)用戶一直不能訪問，并且國內(nèi)的中文翻譯版本十分陳舊。因此做了個(gè)鏡像，希望英文好的同學(xué)直接去看原版教程吧！</p>
      </div>
     </div>
   </div>
  </div>
  <div class="row">
   <div class="col-md-3">
     <div class="thumbnail">
      <a href=""><img src="image/bs1.png" alt="Headroom.js"></a>
      <div class="caption text-center">
       <h4>Bootstrap編碼規(guī)范<br>
        <small>by @mdo</small>
       </h4>
       <p>Bootstrap編碼規(guī)范：編寫靈活、穩(wěn)定、高質(zhì)量的HTML和CSS代碼的規(guī)范。</p>
      </div>
     </div>
   </div>
   <div class="col-md-3">
    <div class="thumbnail">
     <a href=""><img src="image/bs2.png" alt="jQuery API 中文文檔/手冊(cè)"></a>
     <div class="caption text-center">
      <h4>jQuery API<br>
       <small>中文手冊(cè)</small> 
      </h4>
      <p>根據(jù)最新的 jQuery 1.11.x 和 2.1.x 版本翻譯的 jQuery API 中文文檔/手冊(cè)</p>
     </div>
    </div>
   </div>
   <div class="col-md-3">
     <div class="thumbnail">
      <a href=""><img src="image/bs3.png" alt=""></a>
      <div class="caption text-center">
       <h4>Bootstrap編碼規(guī)范<br>
        <small>by @mdo</small>
       </h4>
       <p>Bootstrap編碼規(guī)范：編寫靈活、穩(wěn)定、高質(zhì)量的HTML和CSS代碼的規(guī)范。</p>
      </div>
     </div>
   </div>
   <div class="col-md-3">
     <div class="thumbnail">
      <a href=""><img src="image/bs5.png" alt="w3schools 原版國內(nèi)鏡像"></a>
      <div class="caption text-center">
       <h4>w3schools<br>
        <small>原版國內(nèi)鏡像</small>
       </h4>
       <p>w3schools.com 是最受歡迎的前端技術(shù)教程網(wǎng)站，但是國內(nèi)用戶一直不能訪問，并且國內(nèi)的中文翻譯版本十分陳舊。因此做了個(gè)鏡像，希望英文好的同學(xué)直接去看原版教程吧！</p>
      </div>
     </div>
   </div>
  </div>
 </div>
 <footer class="footer">
  <div class="container">
   <div class="row foorer-top">
    <div class="col-sm-6 col-lg-6">
     <h4>
      <img src="image/logo .png" alt="">
     </h4>
     <p>本網(wǎng)站所列開源項(xiàng)目的中文版文檔全部由<a >Bootstrap中文網(wǎng)</a>成員翻譯整理，并全部遵循<a >CC BY3.0</a>協(xié)議發(fā)布。</p>
    </div>
    <div class="col-sm-6 col-lg-5 col-lg-offset-1">
     <div class="row about">
      <div class="col-xs-3">
       <h4>關(guān)于</h4>
       <ul class="list-unstyled">
        <li><a href="">關(guān)于我們</a></li>
        <li><a href="">廣告合作</a></li>
        <li><a href="">友情鏈接</a></li>
        <li><a href="">招聘</a></li>
       </ul>
      </div>
      <div class="col-xs-3">
       <h4>聯(lián)系方式</h4>
       <ul class="list-unstyled">
        <li><a href="">新浪微博</a></li>
        <li><a href="">電子郵件</a></li>
       </ul>
      </div>
      <div class="col-xs-3">
       <h4>旗下網(wǎng)站</h4>
       <ul class="list-unstyled">
        <li><a href="">Laravel中文網(wǎng)</a></li>
        <li><a href="">Ghost中國</a></li>
       </ul>
      </div>
      <div class="col-xs-3">
       <h4>贊助商</h4>
       <ul class="list-unstyled">
        <li><a href="">UCloud</a></li>
        <li><a href="">又拍云</a></li>
       </ul>
      </div>
     </div>
    </div>
   </div>
   <hr>
   <div class="row foot-bottom">
    <ul class="list-inline text-center">
     <li><a href="">京ICP備11008151號(hào)</a></li>|
     <li><a href="">京公網(wǎng)安備11010802014853</a></li>
    </ul>
   </div>
  </div>
 </footer>
 <a href="#top" id="scrollUp"><i class="fa fa-angle-up"></i></a>
 <script>
  $(function(){
  var $nav = $('#scrollUp');
  var win_height = $(window).height();

  //當(dāng)窗口滾動(dòng)的時(shí)候，如果 窗口上面隱藏的高度>=一屏高度 ，返回頂部圖標(biāo)應(yīng)該顯示；否則，隱藏
  $(window).scroll(function(){
   if($(window).scrollTop()>=win_height){
    $nav.fadeIn(500);
   }else{
    $nav.fadeOut(500);
   }
  });

  $nav.click(function(){
   // $(window).scrollTop(0); //沒有動(dòng)畫
   $('html,body').animate({scrollTop:0}, 1000);
  });
 })
 </script>
</body>
</html>

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

您可能感興趣的文章: