學習要點:
1.Bootstrap 概述
2.Bootstrap 特點
3.Bootstrap 結構
4.創建第一個頁面
5.學習的各項准備
本節課我們主要了解一下 Boostrap 歷史、特點、用途,以及為什麼選擇 Boostrap 來開發我們的 Web 項目。
一.Bootstrap 概述
Bootstrap 是由 Twitter 公司(全球最大的微博)的兩名技術工程師研發的一個基於HTML、CSS、JavaScript 的開源框架。該框架代碼簡潔、視覺優美,可用於快速、簡單地構建基於 PC 及移動端設備的 Web 頁面需求。
2010 年 6 月,Twitter 內部的工程師為了解決前端開發任務中的協作統一問題。經歷各種方案後,Bootstrap 最終被確定下來,並於 2011 年 8 月發布。經過很長時間的迭代升級,由最初的 CSS 驅動項目發展成為內置很多 JavaScript 插件和圖標的多功能 Web 前端的開源框架。
Bootstrap 最為重要的部分就是它的響應式布局,通過這種布局可以兼容 PC 端、PAD以及手機移動端的頁面訪問。
Bootstrap 下載及演示:
國內文檔翻譯官網:http://www.bootcss.com
瓢城 Web 俱樂部官網:http://www.ycku.com
二.Bootstrap 特點
Bootstrap 非常流行,得益於它非常實用的功能和特點。主要核心功能特點如下:
(1).跨設備、跨浏覽器
可以兼容所有現代浏覽器,包括比較诟病的 IE7、8。當然,本課程不再考慮 IE9 以下浏覽器。
(2).響應式布局
不但可以支持 PC 端的各種分辨率的顯示,還支持移動端 PAD、手機等屏幕的響應式切換顯示。
(3).提供的全面的組件
Bootstrap 提供了實用性很強的組件,包括:導航、標簽、工具條、按鈕等一系列組件,方便開發者調用。
(4).內置 jQuery 插件
Bootstrap 提供了很多實用性的 jquery 插件,這些插件方便開發者實現 Web 中各種常規特效。
(5).支持 HTML5、CSS3
HTML5 語義化標簽和 CSS3 屬性,都得到很好的支持。
(6).支持 LESS 動態樣式
LESS 使用變量、嵌套、操作混合編碼,編寫更快、更靈活的 CSS。它和 Bootstrap 能很好的配合開發。
三.Bootstrap 結構
首先,想要了解 Boostrap 的文檔結構,需要在官網先把它下載到本地。Bootstrap下載地址如下:
Bootstrap 下載地址:http://v3.bootcss.com/ (選擇生產環境即可,v3.3.4)
解壓後,目錄呈現這樣的結構:
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 目錄中有四個 css 後綴的文件,其中包含 min 字樣的,是壓縮版本,一般使用這個;不包含的屬於沒有壓縮的,可以學習了解 css 代碼的文件;而 map 後綴的文件則是css 源碼映射表,在一些特定的浏覽器工具中使用。
2.js 目錄包含兩個文件,是未壓縮和壓縮的 js 文件。
3.fonts 目錄包含了不同後綴的字體文件。
四.創建第一個頁面
我們創建一個 HTML5 的頁面,並且將 Bootstrap 的核心文件引入,然後測試是否正常顯示。
//第一個 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>
五.學習的各項准備
1.開發工具, 我們使用Sublime Text3作為Bootstrap的開發工具, 並且安裝了Emmet代碼生成插件;
2.測試工具,除了常規的現代浏覽器,其次就是作為移動端的測試工具,我們這裡采用的是 Opera Mobile Emulator,和 Chrome 的移動 Web 測試工具。
3.所需基礎,至少有 HTML5 第一季課程的基礎,Bootstrap 內置了很多 jQuery 插件,雖然使用起來比 jQuery 或 JS 本身要簡單的多,但如果有 jQuery 和 JS 課程的基礎,那學習理解力就更加深入;
4.課程分辨率:基礎課程,我們使用 1024 x 768 來錄制,但某些特殊部分,比如響應式和項目課程,需要大分辨率錄制,會采用 1440 x 900 來錄制。
以上所述是小編給大家介紹的Bootstrap框架的相關知識,希望對大家有所幫助!