20分鐘成功編寫bootstrap響應式頁面 就這么簡單
最近發(fā)現(xiàn)一個叫 Bootstrap 的好東西,Bootstrap 是現(xiàn)在最流行的響應式 CSS 框架,它以移動設備優(yōu)先,能夠快速適應不同設備。使用它編寫響應式頁面快捷、方便,而且屏蔽了瀏覽器差異。使用了 Bootstrap 后,再也無法想象過去使用原始的 CSS 編寫網(wǎng)頁的悲慘生活了。
經(jīng)過學習,我發(fā)現(xiàn)自己也具備了分分鐘開發(fā)出一個高大上的頁面的能力。本文將會為大家介紹 Bootstrap,并且?guī)ьI大家一起實現(xiàn)一個響應式頁面。
圖 1. 移動優(yōu)先,適應不同設備
一、安裝
最簡單的方式是直接在網(wǎng)頁中引用內(nèi)容分發(fā)網(wǎng)絡(CDN)提供的 Bootstrap,當用戶訪問網(wǎng)頁時,會從就近的服務器上獲取資源。
清單 1. 從內(nèi)容分發(fā)網(wǎng)絡上獲取 Bootstrap
<!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="bootstrap/3.3.4/css/bootstrap.min.css "> <!-- Optional theme --> <link rel="stylesheet" href="bootstrap/3.3.4/css/bootstrap-theme.min.css "> <!-- Latest compiled and minified JavaScript --> <script src="bootstrap/3.3.4/js/bootstrap.min.js"> </script>
還可以選擇下載 Bootstrap 在本地部署。用戶可以下載頁面下載完整的 Bootstrap,也可以在定制頁面根據(jù)項目需要,選擇項目用到的功能,編譯并下載一個簡化版的 Bootstrap。下載完成后得到一個 zip 文件,解壓后的目錄結構如下所示:
清單 2. Bootstrap 目錄結構
bootstrap/
├── css/
│ ├── bootstrap.css
│ ├── bootstrap.css.map
│ ├── bootstrap.min.css
│ ├── bootstrap-theme.css
│ ├── bootstrap-theme.css.map
│ └── bootstrap-theme.min.css
├── js/
│ ├── bootstrap.js
│ └── bootstrap.min.js
└── fonts/
├── glyphicons-halflings-regular.eot
├── glyphicons-halflings-regular.svg
├── glyphicons-halflings-regular.ttf
├── glyphicons-halflings-regular.woff
└── glyphicons-halflings-regular.woff2
這里我們主要關注三個簡化后的文件:bootstrap.min.css 是 Bootstrap 的主要組成部分,包含了大量要用到的 CSS 類;bootstrap-theme.min.css 包含了可選的 Bootstrap 主題;bootstrap.min.js 提供了一些 JavaScript 方法,需要注意的是 Bootstrap 依賴于 jQuery,因此使用 bootstrap.min.js 前必須引入 jQuery。和使用內(nèi)容分發(fā)網(wǎng)絡一樣,我們使用相對路徑在自己的頁面中引入相應的 CSS 和 JavaScript。在實際開發(fā)中,我們常常使用 Bootstrap 提供的模板作為起點,該模板引入了響應式頁面需要的元數(shù)據(jù)和 Bootstrap,開發(fā)者可在此基礎之上編寫自己的響應式頁面:
清單 3. Bootstrap 基礎模板
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags --> <title>Bootstrap 101 Template</title> <!-- Bootstrap --> <link href="css/bootstrap.min.css" rel="stylesheet"> <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> <![endif]--> </head> <body> <h1>Hello, world!</h1> <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <!-- Include all compiled plugins (below), or include individual files as needed --> <script src="js/bootstrap.min.js"></script> </body> </html>
二、CSS
Bootstrap 首先是一個 CSS 框架,它預定義了很多 CSS 類,開發(fā)者只需要為 HTML 元素添加適當?shù)?CSS 類,就能得到想要的樣式,可以完成頁面的布局、排版等功能。Bootstrap 提供的 CSS 功能異常強大,本文將重點放在其提供的網(wǎng)格系統(tǒng)上,對于其他功能,只在應用時順便提及。您若想了解更多功能,可參考官方文檔。
容器
使用 Bootstrap 布局時,需要將 HTML 元素包含在一個容器(.container)里,Bootstrap 提供了兩種容器:.container 和 .container-fluid。前者將內(nèi)容固定寬度居中顯示,后者讓內(nèi)容橫向撐滿整個瀏覽器窗口,如下所示:
清單 4. .container 和 .container-fluid
<div class="container"> <p>“小時候每當我生病,母親都會為我沖一杯咖啡,她溫柔地說:“外國人都喝這個的。 ”幼小的我總害怕咖啡,酸甜苦澀交錯。如今我走遍米蘿、上島、星巴克都找不到小時候喝的那個味道, 直到那天我喝了一杯板藍根。” </p> </div> <div class="container-fluid"> <p>“小時候每當我生病,母親都會為我沖一杯咖啡,她溫柔地說:“外國人都喝這個的?!? 幼小的我總害怕咖啡,酸甜苦澀交錯。如今我走遍米蘿、上島、星巴克都找不到小時候喝的那個味道, 直到那天我喝了一杯板藍根。” </p> </div>
下圖是顯示在瀏覽器中的樣子:
圖 2. 容器
網(wǎng)格系統(tǒng)
和我們在《編寫第一個響應式頁面》中設計的網(wǎng)格系統(tǒng)一樣,Bootstrap 也將頁面分為行(.row),每行 12 列(.col-md-*)。行必須包含在容器里,根據(jù)屏幕大小不同,列又分為.col-xs-、.col-sm-、.col-md-、.col-lg-,分別對應手機(<768px)、平板(≥768px)、中等屏幕電腦(≥992px)和大屏幕電腦(≥1200px)。其中出現(xiàn)的這些像素稱為臨界點,每當瀏覽器大小或屏幕尺寸從一個臨界點到達另一個臨界點時,相應的 CSS 類就會起作用,頁面布局就會發(fā)生變化。詳見下圖:
圖 3.網(wǎng)格系統(tǒng)
怎么理解上面這個表格呢?假如在電腦上瀏覽頁面,需要將頁面分為三列,分別占行寬的 1/4、2/4、1/4,則可編寫代碼如下:
清單 5. 一行分三列
<div class="row"> <div class="col-md-3">.col-md-3</div> <div class="col-md-6">.col-md-6</div> <div class="col-md-3">.col-md-3</div> </div>
打開瀏覽器,可以看到它們各自占據(jù)了 12 列中的 3、6、3 列,加起來恰好是 12 列。如果我們縮小瀏覽器窗口,直到其小于 970px,此時會發(fā)現(xiàn)變成了三行,堆在一起顯示。除過.col-xs-,其他 CSS 類的行為都一樣,在屏幕尺寸小于其臨界點時,會堆起來顯示,只有在屏幕尺寸大于其臨界點時,才按列顯示,而.col-xs- 在任何情況下都按列顯示。
對應不同屏幕尺寸的 CSS 類可以混合使用,比如我想讓一個頁面在電腦上顯示 3 列,在手機上顯示成 2 列,則可編寫代碼如下,在手機上,第三列會換行到下一行顯示,并且占據(jù)行寬的一半:
清單 6. 在電腦和手機上顯示不同數(shù)量的列
<div class="row"> <div class="col-xs-6 col-md-3">.col-md-3</div> <div class="col-xs-6 col-md-6">.col-md-6</div> <div class="col-xs-6 col-md-3">.col-md-3</div> </div>
如果希望在所有設備上顯示相同的列,只需要定義最小尺寸的.col-xs- 即可,布局會自動擴展到更大尺寸,反之則不成立:
清單 7. 所有設備上顯示同數(shù)量的列
<div class="row"> <div class="col-xs-6">.col-xs-6</div> <div class="col-xs-6">.col-xs-6</div> </div>
還可以給列一定的偏移量,比如第一列占行寬的 1/4,我們希望第二列向右偏移 6 列,占用行末的 3 列:
清單 8. 列偏移
<div class="row"> <div class="col-md-3">.col-md-3</div> <div class="col-md-3 col-md-offset-6">.col-md-3</div> </div>
列的順序也可以通過.col-md-push-* 和 .col-md-pull-* 調(diào)整,它們的含義是將某元素向后推或向前拉若干列,開發(fā)者可使用該特性,將重要內(nèi)容在手機顯示時,拉到前面:
清單 9. 推拉列
<div class="row"> <div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div> <div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div> </div>
更讓人興奮的是,這種網(wǎng)格系統(tǒng)還可以嵌套,這樣就能進行各種各樣復雜的布局了:
清單 10. 嵌套
<div class="row"> <div class="col-sm-9"> Level 1: .col-sm-9 <div class="row"> <div class="col-xs-8 col-sm-6"> Level 2: .col-xs-8 .col-sm-6 </div> <div class="col-xs-4 col-sm-6"> Level 2: .col-xs-4 .col-sm-6 </div> </div> <div class="col-sm-3"> Level 1: .col-sm-3 </div> </div> </div>
上面的代碼總體上分成兩列,其中第一列又嵌套了兩列。
Bootstrap 的網(wǎng)格功能為網(wǎng)頁布局提供了各種可能性,而且使用起來非常簡單,下面我們不妨通過一個案例,看看使用 Bootstrap 編寫一個響應式頁面是多么簡單。
三、實戰(zhàn)
假設現(xiàn)在要實現(xiàn)一個如下面的圖片所示的網(wǎng)頁:
圖 4. 網(wǎng)頁設計
首先,我們先將網(wǎng)頁元素劃分成相應的行和列,下圖是作者的劃分:
圖 5. 將網(wǎng)頁設計劃分成行和列
據(jù)此,定義我們的 HTML 結構,并添加適當?shù)?Bootstrap CSS 類:
清單 11. 定義 HTML 結構
<div class="container"> <div class="row"> <div class="col-md-3"> <img src="http://placehold.it/150x150"> </div> <div class="col-md-9"> <h1>Jane Doette</h1> <h3>front-end ninja</h3> </div> </div> <hr> <div class="row"> <div class="col-md-12"> <img src="http://placehold.it/950x350"> </div> </div> <div class="row"> <div class="col-md-12"> <h2>Featured Work</h2> </div> </div> <div class="row"> <div class="col-md-4"> <img src="http://placehold.it/250x250"> <h2>applify</h2> <a >https://github.com/udacity/applify</a> </div> <div class="col-md-4"> <img src="http://placehold.it/250x250"> <h2>sunflower</h2> <a >https://github.com/udacity/sunflower</a> </div> <div class="col-md-4"> <img src="http://placehold.it/250x250"> <h2>bokeh</h2> <a >https://github.com/udacity/bokeh</a> </div> </div> </div>
作者編寫上述代碼花了不到 10 分鐘,由于沒有圖片,作者使用了網(wǎng)上提供的占位圖片。在瀏覽器里打開該頁面,已經(jīng)接近設計了,但字體、大小寫、排版還與設計不符。接下來就要進行微調(diào),瀏覽 Bootstrap 文檔,可以發(fā)現(xiàn)相關的 CSS 類,最終完成的效果如下圖所示:
圖 6. 實現(xiàn)效果
更有意思的是,當你縮小瀏覽器窗口,或者從手機上訪問該頁面時,會發(fā)現(xiàn)它已經(jīng)是一個簡單的響應式頁面了,而我們并沒有添加任何額外代碼!看一下時間,總共花了不到 20 分鐘,我也兌現(xiàn)了分分鐘編寫一個響應式頁面的承諾。
相關文章
JavaScript鼠標事件,點擊鼠標右鍵,彈出div的簡單實例
下面小編就為大家?guī)硪黄狫avaScript鼠標事件,點擊鼠標右鍵,彈出div的簡單實例。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-08-08Bootstrap Table表格一直加載(load)不了數(shù)據(jù)的快速解決方法
bootstrap-table是一個基于Bootstrap風格的強大的表格插件神器。接下來通過本文給大家介紹Bootstrap Table表格一直加載(load)不了數(shù)據(jù)的快速解決方法,感興趣的朋友一起看看吧2016-09-09簡單實用的js調(diào)試logger組件實現(xiàn)代碼
開發(fā)js組件的時間調(diào)試總是麻煩的,最常用的就是用alert或者debugger來測試js的運行狀態(tài)。2010-11-11JS和jQuery使用submit方法無法提交表單的原因分析及解決辦法
這篇文章主要介紹了JS和jQuery使用submit方法無法提交表單的原因分析及解決辦法的相關資料,需要的朋友可以參考下2016-05-05