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

相關文章

最新評論