第一章之初識(shí)Bootstrap

更新時(shí)間：2016年04月25日 11:03:22 作者：水之原

這篇文章主要介紹了第一章之初識(shí)Bootstrap的相關(guān)資料,需要的朋友可以參考下

學(xué)習(xí)要點(diǎn)：

1.Bootstrap 概述

2.Bootstrap 特點(diǎn)

3.Bootstrap 結(jié)構(gòu)

4.創(chuàng)建第一個(gè)頁(yè)面

5.學(xué)習(xí)的各項(xiàng)準(zhǔn)備

本節(jié)課我們主要了解一下 Boostrap 歷史、特點(diǎn)、用途，以及為什么選擇 Boostrap 來(lái)開發(fā)我們的 Web 項(xiàng)目。

一．Bootstrap 概述

Bootstrap 是由 Twitter 公司(全球最大的微博)的兩名技術(shù)工程師研發(fā)的一個(gè)基于HTML、CSS、JavaScript 的開源框架。該框架代碼簡(jiǎn)潔、視覺(jué)優(yōu)美，可用于快速、簡(jiǎn)單地構(gòu)建基于 PC 及移動(dòng)端設(shè)備的 Web 頁(yè)面需求。

2010 年 6 月，Twitter 內(nèi)部的工程師為了解決前端開發(fā)任務(wù)中的協(xié)作統(tǒng)一問(wèn)題。經(jīng)歷各種方案后，Bootstrap 最終被確定下來(lái)，并于 2011 年 8 月發(fā)布。經(jīng)過(guò)很長(zhǎng)時(shí)間的迭代升級(jí)，由最初的 CSS 驅(qū)動(dòng)項(xiàng)目發(fā)展成為內(nèi)置很多 JavaScript 插件和圖標(biāo)的多功能 Web 前端的開源框架。

Bootstrap 最為重要的部分就是它的響應(yīng)式布局，通過(guò)這種布局可以兼容 PC 端、PAD以及手機(jī)移動(dòng)端的頁(yè)面訪問(wèn)。

Bootstrap 下載及演示：

國(guó)內(nèi)文檔翻譯官網(wǎng)：http://www.bootcss.com

瓢城 Web 俱樂(lè)部官網(wǎng)：http://www.ycku.com

二．Bootstrap 特點(diǎn)

Bootstrap 非常流行，得益于它非常實(shí)用的功能和特點(diǎn)。主要核心功能特點(diǎn)如下：

(1).跨設(shè)備、跨瀏覽器

可以兼容所有現(xiàn)代瀏覽器，包括比較詬病的 IE7、8。當(dāng)然，本課程不再考慮 IE9 以下瀏覽器。

(2).響應(yīng)式布局

不但可以支持 PC 端的各種分辨率的顯示，還支持移動(dòng)端 PAD、手機(jī)等屏幕的響應(yīng)式切換顯示。

(3).提供的全面的組件

Bootstrap 提供了實(shí)用性很強(qiáng)的組件，包括：導(dǎo)航、標(biāo)簽、工具條、按鈕等一系列組件，方便開發(fā)者調(diào)用。

(4).內(nèi)置 jQuery 插件

Bootstrap 提供了很多實(shí)用性的 jquery 插件，這些插件方便開發(fā)者實(shí)現(xiàn) Web 中各種常規(guī)特效。

(5).支持 HTML5、CSS3

HTML5 語(yǔ)義化標(biāo)簽和 CSS3 屬性，都得到很好的支持。

(6).支持 LESS 動(dòng)態(tài)樣式

LESS 使用變量、嵌套、操作混合編碼，編寫更快、更靈活的 CSS。它和 Bootstrap 能很好的配合開發(fā)。

三．Bootstrap 結(jié)構(gòu)

首先，想要了解 Boostrap 的文檔結(jié)構(gòu)，需要在官網(wǎng)先把它下載到本地。Bootstrap下載地址如下：

Bootstrap 下載地址：http://v3.bootcss.com/ (選擇生產(chǎn)環(huán)境即可，v3.3.4)

　　解壓后，目錄呈現(xiàn)這樣的結(jié)構(gòu)：

　　　　　　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

主要分為三大核心目錄：css(樣式)、js(腳本)、fonts(字體)。

1.css 目錄中有四個(gè) css 后綴的文件，其中包含 min 字樣的，是壓縮版本，一般使用這個(gè)；不包含的屬于沒(méi)有壓縮的，可以學(xué)習(xí)了解 css 代碼的文件；而 map 后綴的文件則是css 源碼映射表，在一些特定的瀏覽器工具中使用。

2.js 目錄包含兩個(gè)文件，是未壓縮和壓縮的 js 文件。

3.fonts 目錄包含了不同后綴的字體文件。

四．創(chuàng)建第一個(gè)頁(yè)面

我們創(chuàng)建一個(gè) HTML5 的頁(yè)面，并且將 Bootstrap 的核心文件引入，然后測(cè)試是否正常顯示。

//第一個(gè) Bootstrap
<!DOCTYPE html>
<html lang="zh-cn">
<head>
　　<meta charset="UTF-8">
　　<title>Bootstrap 介紹</title>
　　<link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body>
　　<button class="btn btn-info">Bootstrap</button>
　　<script src="js/jquery.min.js"></script>
　　<script src="js/bootstrap.min.js"></script>
</body>
</html>

五．學(xué)習(xí)的各項(xiàng)準(zhǔn)備

1.開發(fā)工具，我們使用Sublime Text3作為Bootstrap的開發(fā)工具，并且安裝了Emmet代碼生成插件；

2.測(cè)試工具，除了常規(guī)的現(xiàn)代瀏覽器，其次就是作為移動(dòng)端的測(cè)試工具，我們這里采用的是 Opera Mobile Emulator，和 Chrome 的移動(dòng) Web 測(cè)試工具。

3.所需基礎(chǔ)，至少有 HTML5 第一季課程的基礎(chǔ)，Bootstrap 內(nèi)置了很多 jQuery 插件，雖然使用起來(lái)比 jQuery 或 JS 本身要簡(jiǎn)單的多，但如果有 jQuery 和 JS 課程的基礎(chǔ)，那學(xué)習(xí)理解力就更加深入；

4.課程分辨率：基礎(chǔ)課程，我們使用 1024 x 768 來(lái)錄制，但某些特殊部分，比如響應(yīng)式和項(xiàng)目課程，需要大分辨率錄制，會(huì)采用 1440 x 900 來(lái)錄制。

以上所述是小編給大家介紹的Bootstrap框架的相關(guān)知識(shí)，希望對(duì)大家有所幫助！

您可能感興趣的文章: