Bootstrap 快速人門案例——前端最火的插件
今天，我給小白們分享一下比較流行的Bootstrap框架，它在工做中獲得許多公司的青睞，所以對於升職和加薪很重要。同時，咱們能夠快速完成開發任務，減小發開週期，有不對的地方望你們指正。css
若是你想走的更遠，那麼請勤勞一點，多看看代碼，多多練習代碼，若是你仔細研究代碼，本身也能夠寫出一部分的css比較好的插件。html
1、Bootstrap簡介
詳見官網：前端
http://www.bootcss.com/jquery
1.練習準備資源準備：
下載bootstrap資源：bootstrap
http:www.bootstrap.com瀏覽器
新建項目：bootstrap/code微信
在code下複製下載的dist目錄下的全部文件，而且在js文件夾中引入jquery的js文件，如：jquery-1.11.3.min.js最後新建文件bt.html框架
2.快速開發實現：
注意在開發過程當中若是修改css效果必定要在引入bootsrtap中的css文件，再從新添加類，本次開發案例原網站以下：less
3.相關概念
3.1柵格系統
網頁柵格從平面柵格系統中發展而來，它以規則的網格陣列來指導和規範網頁中的版面佈局以及信息分佈。柵格系統使得網頁開發更加靈活與規範。
Bootstrap採用12柵格系統，把網頁的總寬度平分爲12份，開發人員能夠自由按份組合。
3.2結構：
實現柵格，須要藉助固定的結構---佈局容器+行+列
3.2.1佈局容器（.container 、.container-fluid）
1）固定佈局
.container
固定寬度並支持響應式（1170px、970px、750px）這裏可使用媒體查詢@media
2）流式佈局
.container-fluid
100%寬度，佔據所有視口的容器
3.2.2行（.row）
有了容器佈局咱們纔可使用柵格系統，須要再寫一個div.row來做爲列的父級元素
3.2.3列(.col-md-*)
這裏的*能夠取值2-12
1）列偏移：
在通常狀況下列是默認從作到右對齊的，在實際開發中，咱們不須要左邊對齊
.col-mod-* .col-md-offset-12-* 能夠經過後面的整個類來實現。
2）列嵌套
和表格相比：在表格中，能夠在td中再嵌套table
這裏嵌套時，不須要再加.container,只須要加.row 再加.col-md-*便可
3）列排序
改變左右浮動，col-md-push-* 和 col-md-pull-* 注意push 和pull之和爲12；
4.刪除網格系統
經過下表能夠詳細查看bootstrap的柵格系統在各大屏幕設備的工做
2、全局CSS樣式
5.列表
有序列表
無序列表
自定義列表
6.按鈕
1）預約義樣式
.btn-default .btn-primary .btn-success .btn-info .btn-warnint .btn-danger
Button .btn .btn-default
2）尺寸.btn-lg .btn-sm .btn-xs
3）塊級按鈕.btn-block
7.表單
(1).垂直排列表單
在表單中，一般是 提示信息 和 表單元素 共同構成一組。
在bs中，提供.form-group 用來表示組的。
針對具體的那一個表單元素，可使用.form-control（包括input、select、textarea）
效果以下：
Ps:關於這個父元素，帶有.form-group的元素，並非必須是div。是塊狀元素就能夠，好比li。
(2).水平排列
在form上，添加.form-horizontal，而後結合柵格系統。（此處，不須要使用.row，直接使用柵格列便可）
(3).內聯表單
表單都放在一行
藉助.form-inline
爲form元素添加.form-inline
效果以下：
(4).文本域
Textarea，也是經過.form-control來控制的，寬度就不要再設置cols了。
可是他的高度 仍是要使用rows來設置
效果以下：
(5).單選和多選
單選和多選，結構須要作變化，以下：
效果以下：
在默認狀況下，它是垂直排列的。
在大多數場景下，須要水平排列的。
須要使用.radio-inline，以下：
也可使用手冊上的結構：
關於checkbox和radio，老是有一點對不齊，全部瀏覽器都有這麼一個毛病。
Bs封裝的這個用法，解決這樣的問題。
(6).輔助文本
在文本框的下方有一些提示信息，其實就是輔助文本。
只須要添加一個span.help-block
效果以下：
1.表格
基本樣式
.table，應用在table標籤上
條紋狀表格
.table-striped
帶邊框的表格
.table-bordered
鼠標懸停
.table-hover
緊縮表格
.table-condensed
主要是指 每一行的行高，變得更小一點
狀態類
.active .success .info .warning .danger 應用在tr/td上
2.輔助類
l 背景顏色
l 三角符號
箭頭
直接使用 .caret類，以下：
Ps：一般要結合 button 來使用，表示下拉菜單。
l 關閉按鈕
X.
效果以下：
l 快速浮動
.pull-left和.pull-right
l 清除浮動
.clearfix
l 塊狀居中
.center-block
l 顯示和隱藏
直接使用 .hidden 和 .show便可。
3.響應式工具
前面用來響應式柵格。
在響應式設計中，還有以下的一個需求：
在大屏幕下，全部的信息都會顯示。
可是在小屏幕小，有針對性的隱藏某些信息。
針對這個需求，bs提供了一個響應式的工具，能夠設置根據不一樣的屏幕，能夠隱藏或顯示 指定的內容。
上述代碼，當頁面縮小到 小於 992px如下，都會隱藏側欄。
二.組件
1.well
窪地，
例如，新浪微博的發佈框
2.頁頭
.page-header來顯示，如bootstrap的官網：
3.巨幕
不少網站，都有一個相似baner的地方，顯示一些比較重要的信息。尤爲是國外的網站，很是的常見，各類教程的網站。
好比bootstrap的官網：
使用以下：
結果以下：
4.label和badge
label，就是標籤
典型的應用場景：
使用以下：
badge，就是徽章
典型場景，如微博的未讀消息，郵箱、微信、qq等消息
一般須要結合其餘元素來使用
效果以下：
5.警告框
一般是在後臺操做的時候，會用到。
主要是在某個操做完成以後，進行的一種提示，刪除成功，更新失敗等。
基類
.alert
修飾類
.alert-success .alert-info .alert-warning .alert-danger
可關閉的警告框
添加.alert-dismissible
在內部添加一個關閉按鈕 button，而且使用data-dismisss=「alert」啓動關閉功能
警告框中的超連接
使用.alert-link
顯示效果以下：
6.分頁
用到的是列表，ul
基本使用，只須要給ul添加.pagination
當前頁，能夠加.active
若是要禁用某一頁，須要加上 .disabled
使用以下：
當面默認的是中等大小，還能夠更改分頁的大小。
尺寸
.pagination-lg .pagination-sm
7.路徑導航
路徑導航，又稱爲麪包屑導航。
在大多數網站中，都會有的一個結構。給用戶一個明確的指示，還知道本身在哪兒，不至於迷路了。
典型的應用：
列表結構，在ol或者ul上添加 .breadcrumb
8.進度條
相對來講，出現的少一些。
典型應用場景 ---- 文件上傳（圖片）
基本使用
進度條，一般是由父元素和子元素共同構成的，
.progress（父） + .progress-bar（子）
進度條的顏色
.progress-bar-success .progress-bar-info .progress-bar-warning .progress-bar-danger
條紋效果
.progress-bar-striped
動畫效果
.active
效果以下：
9.按鈕組
前面，咱們已經會單個的按鈕，在web開發中，常常須要將按鈕使用組的形式來呈現。
只須要將button放在 一個容器（如div）中，給容器加一個 .btn-group
也能夠更改按鈕組的尺寸，
.btn-group-lg .btn-group-sm .btn-group-xs
3、返回頂部的按鈕效果實現：
1 <a href="#top" id="scrollUp"><i class="fa fa-angle-up"></i></a>
注意引入字體文件css
<link href="http://cdn.bootcss.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
4、代碼分享
bt.html
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale = 1"> 6 <title>Bootstrap中文網</title> 7 <link rel="stylesheet" href="css/bootstrap.min.css"> 8 <link href="http://cdn.bootcss.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"> 9 <style> 10 .jumbotron{ 11 position: relative; 12 padding: 40px 0; 13 color: #fff; 14 text-align: center; 15 text-shadow: 0 1px 3px rgba(0,0,0,.4),0 0 30px rgba(0,0,0,.075); 16 background: #020031; 17 background: -moz-linear-gradient(45deg,#020031 0,#6d3353 100%); 18 background: -webkit-gradient(linear,left bottom,right top,color-stop(0%,#020031),color-stop(100%,#6d3353)); 19 background: -webkit-linear-gradient(45deg,#020031 0,#6d3353 100%); 20 background: -o-linear-gradient(45deg,#020031 0,#6d3353 100%); 21 background: -ms-linear-gradient(45deg,#020031 0,#6d3353 100%); 22 background: linear-gradient(45deg,#020031 0,#6d3353 100%); 23 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#020031', endColorstr='#6d3353', GradientType=1); 24 -webkit-box-shadow: inset 0 3px 7px rgba(0,0,0,.2),inset 0 -3px 7px rgba(0,0,0,.2); 25 -moz-box-shadow: inset 0 3px 7px rgba(0,0,0,.2),inset 0 -3px 7px rgba(0,0,0,.2); 26 box-shadow: inset 0 3px 7px rgba(0,0,0,.2),inset 0 -3px 7px rgba(0,0,0,.2); 27 } 28 .jumbotron a{ 29 color:rgba(255,255,255,.5) 30 -webkit-transition:all .2s ease-in-out; 31 -moz-transition:all .2s ease-in-out; 32 -o-transition:all .2s ease-in-out; 33 -ms-transition:all .2s ease-in-out; 34 transition:all .2s ease-in-out; 35 } 36 .jumbotron a:hover{ 37 color:#fff; 38 } 39 .jumbotron a.btn{ 40 color:#fff; 41 } 42 .thumbnail{height:330px;} 43 .footer{ 44 padding:30px 0; 45 border-top:1px solid #e5e5e5; 46 margin-top: 70px; 47 } 48 .footer a{color:#777;} 49 .footer .about>div h4{ 50 color:#563d7c; 51 font-size: 16px; 52 } 53 #scrollUp{ 54 background-color:#777; 55 font-size: 40px; 56 line-height: 1; 57 text-align:center; 58 text-decoration:none; 59 position:fixed; 60 right:20px; 61 bottom:20px; 62 overflow:hidden; 63 width: 46px; 64 height: 46px; 65 border:none; 66 opacity:.8; 67 display:none; 68 } 69 .fa-angle-up:before{ 70 content:"\f106"; 71 } 72 </style> 73 <script src="js/jquery-1.11.3.min.js"></script> 74 <script src= "js/bootstrap.min.js"></script> 75 </head> 76 <body> 77 <nav class="navbar navbar-default navbar-fixed-top navbar-inverse "> 78 <div class="container"> 79 <div class=" navbar-header"> 80 <a href=""class="navbar-brand">Bootstrap中文網</a></div> 81 <ul class="nav navbar-nav"> 82 <li> 83 <a href="">Bootstrap2中文文檔</a> 84 </li> 85 <li> 86 <a href="">Bootstrap3中文文檔</a> 87 </li> 88 <li> 89 <a href="">less教程</a> 90 </li> 91 <li> 92 <a href="">網站實例</a> 93 </li> 94 </ul> 95 </div> 96 </nav> 97 <div class="jumbotron masthead"> 98 <h1>Bootstrap</h1> 99 <p>簡潔、直觀、強悍的前端開發框架，讓web開發更迅速、簡單。</p> 100 <a href="" class="btn btn-primary btn-lg">Bootstrap2中文文檔(v2.3.2)</a> 101 102 <br> 103 <br> 104 <p><a href=""><small>Bootstrap2中文文檔(v2.3.2)</small></a></p> 105 </div> 106 <div class="container"> 107 <div class="page-header text-center"> 108 <h1>Bootstrap相關優質項目推薦</h1> 109 <p>這些項目或者是對Bootstrap進行了有益的補充，或者是基於Bootstrap開發的</p> 110 </div> 111 <div class="row"> 112 <div class="col-md-3"> 113 <div class="thumbnail"> 114 <a href=""><img src="image/bs1.png" alt="Headroom.js"></a> 115 <div class="caption text-center"> 116 <h4>Bootstrap編碼規範<br> 117 <small>by @mdo</small> 118 </h4> 119 <p>Bootstrap編碼規範：編寫靈活、穩定、高質量的HTML和CSS代碼的規範。</p> 120 </div> 121 </div> 122 </div> 123 <div class="col-md-3"> 124 <div class="thumbnail"> 125 <a href=""><img src="image/bs2.png" alt="jQuery API 中文文檔/手冊"></a> 126 <div class="caption text-center"> 127 <h4>jQuery API<br> 128 <small>中文手冊</small> 129 </h4> 130 <p>根據最新的 jQuery 1.11.x 和 2.1.x 版本翻譯的 jQuery API 中文文檔/手冊</p> 131 </div> 132 </div> 133 </div> 134 <div class="col-md-3"> 135 <div class="thumbnail"> 136 <a href=""><img src="image/bs3.png" alt=""></a> 137 <div class="caption text-center"> 138 <h4>Bootstrap編碼規範<br> 139 <small>by @mdo</small> 140 </h4> 141 <p>Bootstrap編碼規範：編寫靈活、穩定、高質量的HTML和CSS代碼的規範。</p> 142 </div> 143 </div> 144 </div> 145 <div class="col-md-3"> 146 <div class="thumbnail"> 147 <a href=""><img src="image/bs5.png" alt="w3schools 原版國內鏡像"></a> 148 <div class="caption text-center"> 149 <h4>w3schools<br> 150 <small>原版國內鏡像</small> 151 </h4> 152 <p>w3schools.com 是最受歡迎的前端技術教程網站，可是國內用戶一直不能訪問，而且國內的中文翻譯版本十分陳舊。所以作了個鏡像，但願英文好的同窗直接去看原版教程吧！</p> 153 </div> 154 </div> 155 </div> 156 </div> 157 <div class="row"> 158 <div class="col-md-3"> 159 <div class="thumbnail"> 160 <a href=""><img src="image/bs1.png" alt="Headroom.js"></a> 161 <div class="caption text-center"> 162 <h4>Bootstrap編碼規範<br> 163 <small>by @mdo</small> 164 </h4> 165 <p>Bootstrap編碼規範：編寫靈活、穩定、高質量的HTML和CSS代碼的規範。</p> 166 </div> 167 </div> 168 </div> 169 <div class="col-md-3"> 170 <div class="thumbnail"> 171 <a href=""><img src="image/bs2.png" alt="jQuery API 中文文檔/手冊"></a> 172 <div class="caption text-center"> 173 <h4>jQuery API<br> 174 <small>中文手冊</small> 175 </h4> 176 <p>根據最新的 jQuery 1.11.x 和 2.1.x 版本翻譯的 jQuery API 中文文檔/手冊</p> 177 </div> 178 </div> 179 </div> 180 <div class="col-md-3"> 181 <div class="thumbnail"> 182 <a href=""><img src="image/bs3.png" alt=""></a> 183 <div class="caption text-center"> 184 <h4>Bootstrap編碼規範<br> 185 <small>by @mdo</small> 186 </h4> 187 <p>Bootstrap編碼規範：編寫靈活、穩定、高質量的HTML和CSS代碼的規範。</p> 188 </div> 189 </div> 190 </div> 191 <div class="col-md-3"> 192 <div class="thumbnail"> 193 <a href=""><img src="image/bs5.png" alt="w3schools 原版國內鏡像"></a> 194 <div class="caption text-center"> 195 <h4>w3schools<br> 196 <small>原版國內鏡像</small> 197 </h4> 198 <p>w3schools.com 是最受歡迎的前端技術教程網站，可是國內用戶一直不能訪問，而且國內的中文翻譯版本十分陳舊。所以作了個鏡像，但願英文好的同窗直接去看原版教程吧！</p> 199 </div> 200 </div> 201 </div> 202 </div> 203 <div class="row"> 204 <div class="col-md-3"> 205 <div class="thumbnail"> 206 <a href=""><img src="image/bs1.png" alt="Headroom.js"></a> 207 <div class="caption text-center"> 208 <h4>Bootstrap編碼規範<br> 209 <small>by @mdo</small> 210 </h4> 211 <p>Bootstrap編碼規範：編寫靈活、穩定、高質量的HTML和CSS代碼的規範。</p> 212 </div> 213 </div> 214 </div> 215 <div class="col-md-3"> 216 <div class="thumbnail"> 217 <a href=""><img src="image/bs2.png" alt="jQuery API 中文文檔/手冊"></a> 218 <div class="caption text-center"> 219 <h4>jQuery API<br> 220 <small>中文手冊</small> 221 </h4> 222 <p>根據最新的 jQuery 1.11.x 和 2.1.x 版本翻譯的 jQuery API 中文文檔/手冊</p> 223 </div> 224 </div> 225 </div> 226 <div class="col-md-3"> 227 <div class="thumbnail"> 228 <a href=""><img src="image/bs3.png" alt=""></a> 229 <div class="caption text-center"> 230 <h4>Bootstrap編碼規範<br> 231 <small>by @mdo</small> 232 </h4> 233 <p>Bootstrap編碼規範：編寫靈活、穩定、高質量的HTML和CSS代碼的規範。</p> 234 </div> 235 </div> 236 </div> 237 <div class="col-md-3"> 238 <div class="thumbnail"> 239 <a href=""><img src="image/bs5.png" alt="w3schools 原版國內鏡像"></a> 240 <div class="caption text-center"> 241 <h4>w3schools<br> 242 <small>原版國內鏡像</small> 243 </h4> 244 <p>w3schools.com 是最受歡迎的前端技術教程網站，可是國內用戶一直不能訪問，而且國內的中文翻譯版本十分陳舊。所以作了個鏡像，但願英文好的同窗直接去看原版教程吧！</p> 245 </div> 246 </div> 247 </div> 248 </div> 249 <div class="row"> 250 <div class="col-md-3"> 251 <div class="thumbnail"> 252 <a href=""><img src="image/bs1.png" alt="Headroom.js"></a> 253 <div class="caption text-center"> 254 <h4>Bootstrap編碼規範<br> 255 <small>by @mdo</small> 256 </h4> 257 <p>Bootstrap編碼規範：編寫靈活、穩定、高質量的HTML和CSS代碼的規範。</p> 258 </div> 259 </div> 260 </div> 261 <div class="col-md-3"> 262 <div class="thumbnail"> 263 <a href=""><img src="image/bs2.png" alt="jQuery API 中文文檔/手冊"></a> 264 <div class="caption text-center"> 265 <h4>jQuery API<br> 266 <small>中文手冊</small> 267 </h4> 268 <p>根據最新的 jQuery 1.11.x 和 2.1.x 版本翻譯的 jQuery API 中文文檔/手冊</p> 269 </div> 270 </div> 271 </div> 272 <div class="col-md-3"> 273 <div class="thumbnail"> 274 <a href=""><img src="image/bs3.png" alt=""></a> 275 <div class="caption text-center"> 276 <h4>Bootstrap編碼規範<br> 277 <small>by @mdo</small> 278 </h4> 279 <p>Bootstrap編碼規範：編寫靈活、穩定、高質量的HTML和CSS代碼的規範。</p> 280 </div> 281 </div> 282 </div> 283 <div class="col-md-3"> 284 <div class="thumbnail"> 285 <a href=""><img src="image/bs5.png" alt="w3schools 原版國內鏡像"></a> 286 <div class="caption text-center"> 287 <h4>w3schools<br> 288 <small>原版國內鏡像</small> 289 </h4> 290 <p>w3schools.com 是最受歡迎的前端技術教程網站，可是國內用戶一直不能訪問，而且國內的中文翻譯版本十分陳舊。所以作了個鏡像，但願英文好的同窗直接去看原版教程吧！</p> 291 </div> 292 </div> 293 </div> 294 </div> 295 <div class="row"> 296 <div class="col-md-3"> 297 <div class="thumbnail"> 298 <a href=""><img src="image/bs1.png" alt="Headroom.js"></a> 299 <div class="caption text-center"> 300 <h4>Bootstrap編碼規範<br> 301 <small>by @mdo</small> 302 </h4> 303 <p>Bootstrap編碼規範：編寫靈活、穩定、高質量的HTML和CSS代碼的規範。</p> 304 </div> 305 </div> 306 </div> 307 <div class="col-md-3"> 308 <div class="thumbnail"> 309 <a href=""><img src="image/bs2.png" alt="jQuery API 中文文檔/手冊"></a> 310 <div class="caption text-center"> 311 <h4>jQuery API<br> 312 <small>中文手冊</small> 313 </h4> 314 <p>根據最新的 jQuery 1.11.x 和 2.1.x 版本翻譯的 jQuery API 中文文檔/手冊</p> 315 </div> 316 </div> 317 </div> 318 <div class="col-md-3"> 319 <div class="thumbnail"> 320 <a href=""><img src="image/bs3.png" alt=""></a> 321 <div class="caption text-center"> 322 <h4>Bootstrap編碼規範<br> 323 <small>by @mdo</small> 324 </h4> 325 <p>Bootstrap編碼規範：編寫靈活、穩定、高質量的HTML和CSS代碼的規範。</p> 326 </div> 327 </div> 328 </div> 329 <div class="col-md-3"> 330 <div class="thumbnail"> 331 <a href=""><img src="image/bs5.png" alt="w3schools 原版國內鏡像"></a> 332 <div class="caption text-center"> 333 <h4>w3schools<br> 334 <small>原版國內鏡像</small> 335 </h4> 336 <p>w3schools.com 是最受歡迎的前端技術教程網站，可是國內用戶一直不能訪問，而且國內的中文翻譯版本十分陳舊。所以作了個鏡像，但願英文好的同窗直接去看原版教程吧！</p> 337 </div> 338 </div> 339 </div> 340 </div> 341 <div class="row"> 342 <div class="col-md-3"> 343 <div class="thumbnail"> 344 <a href=""><img src="image/bs1.png" alt="Headroom.js"></a> 345 <div class="caption text-center"> 346 <h4>Bootstrap編碼規範<br> 347 <small>by @mdo</small> 348 </h4> 349 <p>Bootstrap編碼規範：編寫靈活、穩定、高質量的HTML和CSS代碼的規範。</p> 350 </div> 351 </div> 352 </div> 353 <div class="col-md-3"> 354 <div class="thumbnail"> 355 <a href=""><img src="image/bs2.png" alt="jQuery API 中文文檔/手冊"></a> 356 <div class="caption text-center"> 357 <h4>jQuery API<br> 358 <small>中文手冊</small> 359 </h4> 360 <p>根據最新的 jQuery 1.11.x 和 2.1.x 版本翻譯的 jQuery API 中文文檔/手冊</p> 361 </div> 362 </div> 363 </div> 364 <div class="col-md-3"> 365 <div class="thumbnail"> 366 <a href=""><img src="image/bs3.png" alt=""></a> 367 <div class="caption text-center"> 368 <h4>Bootstrap編碼規範<br> 369 <small>by @mdo</small> 370 </h4> 371 <p>Bootstrap編碼規範：編寫靈活、穩定、高質量的HTML和CSS代碼的規範。</p> 372 </div> 373 </div> 374 </div> 375 <div class="col-md-3"> 376 <div class="thumbnail"> 377 <a href=""><img src="image/bs5.png" alt="w3schools 原版國內鏡像"></a> 378 <div class="caption text-center"> 379 <h4>w3schools<br> 380 <small>原版國內鏡像</small> 381 </h4> 382 <p>w3schools.com 是最受歡迎的前端技術教程網站，可是國內用戶一直不能訪問，而且國內的中文翻譯版本十分陳舊。所以作了個鏡像，但願英文好的同窗直接去看原版教程吧！</p> 383 </div> 384 </div> 385 </div> 386 </div> 387 <div class="row"> 388 <div class="col-md-3"> 389 <div class="thumbnail"> 390 <a href=""><img src="image/bs1.png" alt="Headroom.js"></a> 391 <div class="caption text-center"> 392 <h4>Bootstrap編碼規範<br> 393 <small>by @mdo</small> 394 </h4> 395 <p>Bootstrap編碼規範：編寫靈活、穩定、高質量的HTML和CSS代碼的規範。</p> 396 </div> 397 </div> 398 </div> 399 <div class="col-md-3"> 400 <div class="thumbnail"> 401 <a href=""><img src="image/bs2.png" alt="jQuery API 中文文檔/手冊"></a> 402 <div class="caption text-center"> 403 <h4>jQuery API<br> 404 <small>中文手冊</small> 405 </h4> 406 <p>根據最新的 jQuery 1.11.x 和 2.1.x 版本翻譯的 jQuery API 中文文檔/手冊</p> 407 </div> 408 </div> 409 </div> 410 <div class="col-md-3"> 411 <div class="thumbnail"> 412 <a href=""><img src="image/bs3.png" alt=""></a> 413 <div class="caption text-center"> 414 <h4>Bootstrap編碼規範<br> 415 <small>by @mdo</small> 416 </h4> 417 <p>Bootstrap編碼規範：編寫靈活、穩定、高質量的HTML和CSS代碼的規範。</p> 418 </div> 419 </div> 420 </div> 421 <div class="col-md-3"> 422 <div class="thumbnail"> 423 <a href=""><img src="image/bs5.png" alt="w3schools 原版國內鏡像"></a> 424 <div class="caption text-center"> 425 <h4>w3schools<br> 426 <small>原版國內鏡像</small> 427 </h4> 428 <p>w3schools.com 是最受歡迎的前端技術教程網站，可是國內用戶一直不能訪問，而且國內的中文翻譯版本十分陳舊。所以作了個鏡像，但願英文好的同窗直接去看原版教程吧！</p> 429 </div> 430 </div> 431 </div> 432 </div> 433 <div class="row"> 434 <div class="col-md-3"> 435 <div class="thumbnail"> 436 <a href=""><img src="image/bs1.png" alt="Headroom.js"></a> 437 <div class="caption text-center"> 438 <h4>Bootstrap編碼規範<br> 439 <small>by @mdo</small> 440 </h4> 441 <p>Bootstrap編碼規範：編寫靈活、穩定、高質量的HTML和CSS代碼的規範。</p> 442 </div> 443 </div> 444 </div> 445 <div class="col-md-3"> 446 <div class="thumbnail"> 447 <a href=""><img src="image/bs2.png" alt="jQuery API 中文文檔/手冊"></a> 448 <div class="caption text-center"> 449 <h4>jQuery API<br> 450 <small>中文手冊</small> 451 </h4> 452 <p>根據最新的 jQuery 1.11.x 和 2.1.x 版本翻譯的 jQuery API 中文文檔/手冊</p> 453 </div> 454 </div> 455 </div> 456 <div class="col-md-3"> 457 <div class="thumbnail"> 458 <a href=""><img src="image/bs3.png" alt=""></a> 459 <div class="caption text-center"> 460 <h4>Bootstrap編碼規範<br> 461 <small>by @mdo</small> 462 </h4> 463 <p>Bootstrap編碼規範：編寫靈活、穩定、高質量的HTML和CSS代碼的規範。</p> 464 </div> 465 </div> 466 </div> 467 <div class="col-md-3"> 468 <div class="thumbnail"> 469 <a href=""><img src="image/bs5.png" alt="w3schools 原版國內鏡像"></a> 470 <div class="caption text-center"> 471 <h4>w3schools<br> 472 <small>原版國內鏡像</small> 473 </h4> 474 <p>w3schools.com 是最受歡迎的前端技術教程網站，可是國內用戶一直不能訪問，而且國內的中文翻譯版本十分陳舊。所以作了個鏡像，但願英文好的同窗直接去看原版教程吧！</p> 475 </div> 476 </div> 477 </div> 478 </div> 479 <div class="row"> 480 <div class="col-md-3"> 481 <div class="thumbnail"> 482 <a href=""><img src="image/bs1.png" alt="Headroom.js"></a> 483 <div class="caption text-center"> 484 <h4>Bootstrap編碼規範<br> 485 <small>by @mdo</small> 486 </h4> 487 <p>Bootstrap編碼規範：編寫靈活、穩定、高質量的HTML和CSS代碼的規範。</p> 488 </div> 489 </div> 490 </div> 491 <div class="col-md-3"> 492 <div class="thumbnail"> 493 <a href=""><img src="image/bs2.png" alt="jQuery API 中文文檔/手冊"></a> 494 <div class="caption text-center"> 495 <h4>jQuery API<br> 496 <small>中文手冊</small> 497 </h4> 498 <p>根據最新的 jQuery 1.11.x 和 2.1.x 版本翻譯的 jQuery API 中文文檔/手冊</p> 499 </div> 500 </div> 501 </div> 502 <div class="col-md-3"> 503 <div class="thumbnail"> 504 <a href=""><img src="image/bs3.png" alt=""></a> 505 <div class="caption text-center"> 506 <h4>Bootstrap編碼規範<br> 507 <small>by @mdo</small> 508 </h4> 509 <p>Bootstrap編碼規範：編寫靈活、穩定、高質量的HTML和CSS代碼的規範。</p> 510 </div> 511 </div> 512 </div> 513 <div class="col-md-3"> 514 <div class="thumbnail"> 515 <a href=""><img src="image/bs5.png" alt="w3schools 原版國內鏡像"></a> 516 <div class="caption text-center"> 517 <h4>w3schools<br> 518 <small>原版國內鏡像</small> 519 </h4> 520 <p>w3schools.com 是最受歡迎的前端技術教程網站，可是國內用戶一直不能訪問，而且國內的中文翻譯版本十分陳舊。所以作了個鏡像，但願英文好的同窗直接去看原版教程吧！</p> 521 </div> 522 </div> 523 </div> 524 </div> 525 <div class="row"> 526 <div class="col-md-3"> 527 <div class="thumbnail"> 528 <a href=""><img src="image/bs1.png" alt="Headroom.js"></a> 529 <div class="caption text-center"> 530 <h4>Bootstrap編碼規範<br> 531 <small>by @mdo</small> 532 </h4> 533 <p>Bootstrap編碼規範：編寫靈活、穩定、高質量的HTML和CSS代碼的規範。</p> 534 </div> 535 </div> 536 </div> 537 <div class="col-md-3"> 538 <div class="thumbnail"> 539 <a href=""><img src="image/bs2.png" alt="jQuery API 中文文檔/手冊"></a> 540 <div class="caption text-center"> 541 <h4>jQuery API<br> 542 <small>中文手冊</small> 543 </h4> 544 <p>根據最新的 jQuery 1.11.x 和 2.1.x 版本翻譯的 jQuery API 中文文檔/手冊</p> 545 </div> 546 </div> 547 </div> 548 <div class="col-md-3"> 549 <div class="thumbnail"> 550 <a href=""><img src="image/bs3.png" alt=""></a> 551 <div class="caption text-center"> 552 <h4>Bootstrap編碼規範<br> 553 <small>by @mdo</small> 554 </h4> 555 <p>Bootstrap編碼規範：編寫靈活、穩定、高質量的HTML和CSS代碼的規範。</p> 556 </div> 557 </div> 558 </div> 559 <div class="col-md-3"> 560 <div class="thumbnail"> 561 <a href=""><img src="image/bs5.png" alt="w3schools 原版國內鏡像"></a> 562 <div class="caption text-center"> 563 <h4>w3schools<br> 564 <small>原版國內鏡像</small> 565 </h4> 566 <p>w3schools.com 是最受歡迎的前端技術教程網站，可是國內用戶一直不能訪問，而且國內的中文翻譯版本十分陳舊。所以作了個鏡像，但願英文好的同窗直接去看原版教程吧！</p> 567 </div> 568 </div> 569 </div> 570 </div> 571 <div class="row"> 572 <div class="col-md-3"> 573 <div class="thumbnail"> 574 <a href=""><img src="image/bs1.png" alt="Headroom.js"></a> 575 <div class="caption text-center"> 576 <h4>Bootstrap編碼規範<br> 577 <small>by @mdo</small> 578 </h4> 579 <p>Bootstrap編碼規範：編寫靈活、穩定、高質量的HTML和CSS代碼的規範。</p> 580 </div> 581 </div> 582 </div> 583 <div class="col-md-3"> 584 <div class="thumbnail"> 585 <a href=""><img src="image/bs2.png" alt="jQuery API 中文文檔/手冊"></a> 586 <div class="caption text-center"> 587 <h4>jQuery API<br> 588 <small>中文手冊</small> 589 </h4> 590 <p>根據最新的 jQuery 1.11.x 和 2.1.x 版本翻譯的 jQuery API 中文文檔/手冊</p> 591 </div> 592 </div> 593 </div> 594 <div class="col-md-3"> 595 <div class="thumbnail"> 596 <a href=""><img src="image/bs3.png" alt=""></a> 597 <div class="caption text-center"> 598 <h4>Bootstrap編碼規範<br> 599 <small>by @mdo</small> 600 </h4> 601 <p>Bootstrap編碼規範：編寫靈活、穩定、高質量的HTML和CSS代碼的規範。</p> 602 </div> 603 </div> 604 </div> 605 <div class="col-md-3"> 606 <div class="thumbnail"> 607 <a href=""><img src="image/bs5.png" alt="w3schools 原版國內鏡像"></a> 608 <div class="caption text-center"> 609 <h4>w3schools<br> 610 <small>原版國內鏡像</small> 611 </h4> 612 <p>w3schools.com 是最受歡迎的前端技術教程網站，可是國內用戶一直不能訪問，而且國內的中文翻譯版本十分陳舊。所以作了個鏡像，但願英文好的同窗直接去看原版教程吧！</p> 613 </div> 614 </div> 615 </div> 616 </div> 617 </div> 618 <footer class="footer"> 619 <div class="container"> 620 <div class="row foorer-top"> 621 <div class="col-sm-6 col-lg-6"> 622 <h4> 623 <img src="image/logo .png" alt=""> 624 </h4> 625 <p>本網站所列開源項目的中文版文檔所有由<a href="http://www.bootcss.com">Bootstrap中文網</a>成員翻譯整理，並所有遵循<a href="http://creativecommons.org/licenses/by/3.0/"target="_blank">CC BY3.0</a>協議發佈。</p> 626 </div> 627 <div class="col-sm-6 col-lg-5 col-lg-offset-1"> 628 <div class="row about"> 629 <div class="col-xs-3"> 630 <h4>關於</h4> 631 <ul class="list-unstyled"> 632 <li><a href="">關於咱們</a></li> 633 <li><a href="">廣告合做</a></li> 634 <li><a href="">友情連接</a></li> 635 <li><a href="">招聘</a></li> 636 </ul> 637 </div> 638 <div class="col-xs-3"> 639 <h4>聯繫方式</h4> 640 <ul class="list-unstyled"> 641 <li><a href="">新浪微博</a></li> 642 <li><a href="">電子郵件</a></li> 643 </ul> 644 </div> 645 <div class="col-xs-3"> 646 <h4>旗下網站</h4> 647 <ul class="list-unstyled"> 648 <li><a href="">Laravel中文網</a></li> 649 <li><a href="">Ghost中國</a></li> 650 </ul> 651 </div> 652 <div class="col-xs-3"> 653 <h4>贊助商</h4> 654 <ul class="list-unstyled"> 655 <li><a href="">UCloud</a></li> 656 <li><a href="">又拍雲</a></li> 657 </ul> 658 </div> 659 </div> 660 </div> 661 </div> 662 <hr> 663 <div class="row foot-bottom"> 664 <ul class="list-inline text-center"> 665 <li><a href="">京ICP備11008151號</a></li>| 666 <li><a href="">京公網安備11010802014853</a></li> 667 </ul> 668 </div> 669 </div> 670 </footer> 671 <a href="#top" id="scrollUp"><i class="fa fa-angle-up"></i></a> 672 <script> 673 $(function(){ 674 var $nav = $('#scrollUp'); 675 var win_height = $(window).height(); 676 677 //當窗口滾動的時候，若是 窗口上面隱藏的高度>=一屏高度 ，返回頂部圖標應該顯示；不然，隱藏 678 $(window).scroll(function(){ 679 if($(window).scrollTop()>=win_height){ 680 $nav.fadeIn(500); 681 }else{ 682 $nav.fadeOut(500); 683 } 684 }); 685 686 $nav.click(function(){ 687 // $(window).scrollTop(0); //沒有動畫 688 $('html,body').animate({scrollTop:0}, 1000); 689 }); 690 }) 691 </script> 692 </body> 693 </html>
相關文章
- 1. gulp前端自動化工具的快速入門案例
- 2. mybatis分頁插件使用案例（前端bootstrap）
- 3. 前端UI框架——Vue概述和快速入門案例
- 4. Echarts快速入門案例
- 5. socket.io快速入門案例
- 6. Elasticsearch快速入門案例
- 7. 表單驗證插件jQuery.validate 介紹+快速入門案例
- 8. 【前端】小白都能快速入門的前端插件（2020），還不快來用。
- 9. [後端人員耍前端系列]Bootstrap篇：30分鐘快速掌握Bootstrap
- 10. 前端快速入門
- 更多相關文章...
- • SQL 快速參考 - SQL 教程
- • Eclipse 快速修復 - Eclipse 教程
- • 使用阿里雲OSS+CDN部署前端頁面與加速靜態資源
- • PHP Ajax 跨域問題最佳解決方案
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
