一.Bootstrap介紹
Bootstrap 是現(xiàn)在為止最受程序員喜愛的前端框架,。它是由 Twitter(推特)公司的兩名技術(shù)工程師研發(fā)的一個(gè)基于HTML、CSS、JavaScript 的開源框架。該框架代碼簡潔明了、視覺優(yōu)美,可用于快速、簡單地構(gòu)建基于 PC 及移動(dòng)端設(shè)備的 Web 頁面需求。
2010 年 6 月,Twitter 內(nèi)部的工程師為了解決前端開發(fā)任務(wù)中的協(xié)作統(tǒng)一問題。經(jīng)歷各種方案后,Bootstrap 最終被確定下來,并于 2011 年 8 月發(fā)布。經(jīng)過很長時(shí)間的迭代升級(jí),由最初的 CSS 驅(qū)動(dòng)項(xiàng)目發(fā)展成為內(nèi)置很多 JavaScript 插件和圖標(biāo)的多功能 Web 前端的開源框架。
Bootstrap 最為重要的部分就是它的響應(yīng)式布局,通過這種布局可以兼容 PC 端、PAD以及手機(jī)移動(dòng)端的頁面訪問。
二.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 語義化標(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 下載地址:Bootstrap最新版本 (選擇生產(chǎn)環(huán)境即可,v3.3.4)
解壓后,目錄呈現(xiàn)這樣的結(jié)構(gòu):
├── css/
│├── bootstrap.css
│├── bootstrap.css.map
│├── bootstrap.min.css
│├── bootstrap-theme.css
├── js/
│├── bootstrap.js
│└── bootstrap.min.js
└── fonts/
├── glyphicons-halflings-regular.eot
├── glyphicons-halflings-regular.svg
├── glyphicons-halflings-regular.ttf
├── glyphicons-halflings-regular.woff
主要分為三大核心目錄:css(樣式)、js(腳本)、fonts(字體)。
- css 目錄中有四個(gè) css 后綴的文件,其中包含 min 字樣的,是壓縮版本,一般使用這個(gè);不包含的屬于沒有壓縮的,可以學(xué)習(xí)了解 css 代碼的文件;而 map 后綴的文件則是css 源碼映射表,在一些特定的瀏覽器工具中使用。
- js 目錄包含兩個(gè)文件,是未壓縮和壓縮的 js 文件。
- fonts 目錄包含了不同后綴的字體文件。
四.創(chuàng)建第一個(gè)頁面
我們創(chuàng)建一個(gè) HTML5 的頁面,并且將 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)備
- 開發(fā)工具, 我們使用Sublime Text3作為Bootstrap的開發(fā)工具, 并且安裝了Emmet代碼生成插件;
- 測試工具,除了常規(guī)的現(xiàn)代瀏覽器,其次就是作為移動(dòng)端的測試工具,我們這里采用的是 Opera Mobile Emulator,和 Chrome 的移動(dòng) Web 測試工具。
- 所需基礎(chǔ),至少有 HTML5 第一季課程的基礎(chǔ),Bootstrap 內(nèi)置了很多 jQuery 插件,雖然使用起來比 jQuery 或 JS 本身要簡單的多,但如果有 jQuery課程 和 JS 課程的基礎(chǔ),那學(xué)習(xí)理解力就更加深入;
- 課程分辨率:基礎(chǔ)課程,我們使用 1024 x 768 來錄制,但某些特殊部分,比如響應(yīng)式和項(xiàng)目課程,需要大分辨率錄制,會(huì)采用 1440 x 900 來錄制。