欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

20分鐘成功編寫bootstrap響應式頁面 就這么簡單

 更新時間:2016年05月12日 10:51:02   投稿:lijiao  
這篇文章主要教大家如何在20分鐘內(nèi)成功編寫bootstrap響應式頁面,其實很簡單,培養(yǎng)大家分分鐘開發(fā)出一個高大上的頁面能力,感興趣的小伙伴們可以參考一下

最近發(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)了分分鐘編寫一個響應式頁面的承諾。

相關文章

最新評論