基於bootstrap的網頁開發

1-1 課程介紹

Bootstrap是Twitter推出的一個開源的用於前端開發的工具包。它由Twitter的設計師Mark Otto和Jacob Thornton合做開發，是一個CSS/HTML框架。

 

 

 

 

1)      漂亮的設計

2)      友好的學習曲線

3)      卓越的兼容性

4)      12列的響應式柵格結構

5)      豐富的組件

Bootstrap是一款簡潔強大的前端開發框架，讓web開發更迅速、簡單。

特色：簡潔、扁平化的圖標、優雅的排版、

 

2-1 如何開始使用Bootstrap

 

Bootstrap分爲Bootstrap2 和 bootstrap3

Bootstrap2 兼容不少瀏覽器、包括IE老版本，因爲揹着這樣的包袱，功能不夠激進，代碼不夠簡潔。

自Bootstrap 2.3.2 版本以後，官方關閉了對此係列的更新。

 

Bootstrap3 則放棄了IE7和firefox 3.x 版本的支持。雖然對IE8支持，可是IE8對CSS3的支持有限，因此有些效果的呈現大大折扣。

 

咱們這裏主要研究Bootstrap 3.2.0 版本，官方頁面很簡潔，

若是不想下載能夠直接引用Bootstrap官網的CDN(在線代碼庫)

下載的文件目錄

(注意boostrap全部的樣式和插件都依賴Jquery，因此必須先引入)

 

 

以上是boostrap官方提供的模板，bootstrap 不提供IE的兼容模式，

 

 

平時用的移動瀏覽器是把頁面放在一個虛擬的視口，也就是viewport 中，虛擬視口比屏幕寬，不會形成頁面的擠壓，可是對破壞一些針對移動瀏覽優化的佈局。用戶能夠經過縮放和平移看頁面各部分信息。

Viewport可讓網頁開發者控制網頁的大小和縮放，

Width=device-width,這個就是viewport 的寬度等於設備的寬度。

Initial-scale=1 設置初始載入時的縮放比例，1表示不縮放。

 

上面的意思寬度等於設備的分辨率，不縮放，這樣頁面顯示更加細膩。

 

這段註釋解釋：

第一個引入的js 讓IE8支持html5，第二個引入是讓IE8支持media query

html5shiv主要解決HTML5提出的新的元素不被IE6-8識別，這些新元素不能做爲父節點包裹子元素，而且不能應用CSS樣式。讓CSS 樣式應用在未知元素上只需執行document.createElement(elementName) 便可實現。html5shiv就是根據這個原理建立的。

 

"指定用戶是否能夠縮放視區，即縮放Web頁面的視圖。"是user-scalable指令 ,值爲yes時容許用戶進行縮放，值爲no時不容許縮放。