本文學(xué)習(xí)的內(nèi)容主要如下所示：

1.瀏覽器支持

2.圖片

3.響應(yīng)式工具

4.遇到的問(wèn)題

5.總結(jié)

瀏覽器支持

　　Bootstrap的目標(biāo)是在最新的桌面和移動(dòng)瀏覽器上有最佳的表現(xiàn)，也就是說(shuō)，在較老舊的瀏覽器上可能會(huì)導(dǎo)致某些組件表現(xiàn)出的樣式有些不同，但是功能是完整的。

被支持的瀏覽器

特別注意，Bootstrap堅(jiān)決支持這些瀏覽器的最新版本：

Chrome (Mac、Windows、iOS和Android) Safari (只支持Mac和iOS版，Windows版已經(jīng)基本死掉了) Firefox (Mac、Windows) Internet Explorer Opera (Mac、Windows)

Bootstrap在Chromium、Linux版Chrome、Linux版Firefox和Internet Explorer 7上的表現(xiàn)也是很不錯(cuò)的，雖然Bootstrap不對(duì)其進(jìn)行官方支持。

Internet Explorer 8 和 9

Internet Explorer 8 和 9 是被支持的，然而，你要知道，很多CSS3屬性和HTML5元素 -- 例如，圓角矩形和投影 -- 是肯定不被支持的。另外，Internet Explorer 8 需要Respond.j配合才能實(shí)現(xiàn)對(duì)媒體查詢（media query）的支持。

圖片

為<img>元素增加不同的class，就可以輕松的改變其樣式。

跨瀏覽器兼容性

你要知道，Internet Explorer 8是不支持圓角矩形的。

順便提一下響應(yīng)式圖片

通過(guò)添加.img-responsiveclass可以讓Bootstrap 3中的圖片對(duì)響應(yīng)式布局的支持更友好。其實(shí)質(zhì)是為圖片賦予了max-width: 100%;和height: auto;屬性，可以讓圖片按比例縮放，不超過(guò)其父元素的尺寸。

響應(yīng)式工具

通過(guò)使用這些工具class可以根據(jù)屏幕和不同的媒體查詢顯示或隱藏頁(yè)面內(nèi)容，加速針對(duì)移動(dòng)設(shè)備的開(kāi)發(fā)。

試使用這些class并避免創(chuàng)建同一個(gè)網(wǎng)站的不同版本，從而能夠完善不同設(shè)備上的顯示效果。響應(yīng)式工具目前只是針對(duì)塊級(jí)元素，不支持inline元素和表格元素。

可用的class

通過(guò)單獨(dú)或聯(lián)合使用以下列出的class，可以針對(duì)不同屏幕尺寸隱藏或顯示頁(yè)面內(nèi)容。

打印class

和常規(guī)的響應(yīng)式class一樣，使用下面的class可以針對(duì)打印機(jī)隱藏或顯示某些內(nèi)容。

測(cè)試用例

調(diào)整你的瀏覽器窗口的尺寸或者在不同的設(shè)備上加載此頁(yè)面，均可測(cè)試上面提到的工具class。

遇到的問(wèn)題

1.瀏覽器的兼容性:之前也有過(guò)介紹。暫時(shí)我主要使用的是IE10、最新版的Chrome、最新版的FireFox。

2.瀏覽器寬度變化的時(shí)候CSS文件是否會(huì)重新加載：我的答案暫時(shí)是不會(huì)的，因?yàn)樗粫?huì)去重新讀取合適當(dāng)前尺寸的樣式類。（不知道這個(gè)解釋是否合理）

3.PrntScr屏幕打印這個(gè)，暫時(shí)沒(méi)有在bootstrap找到，如果有人發(fā)現(xiàn)在什么地方可以通知一下。

4.require.js這個(gè)不知道大家都知道不，應(yīng)該主要是為了提高網(wǎng)頁(yè)瀏覽速度的，但是對(duì)于如何使用以及如何和Bootstrap使用這個(gè)暫時(shí)不了解。

5.!important的作用：這個(gè)很多前端攻城師應(yīng)該都很清楚。

6.Bootstrap.js引用：記得要先引用jQuery庫(kù)，而且要搞清楚先后順序。

當(dāng)然肯定還有其他問(wèn)題，暫時(shí)想不起來(lái)了，先記著這6個(gè)吧。

總結(jié)

簡(jiǎn)單的梳理完了Bootstrap CSS。 了解了很多的樣式類，簡(jiǎn)單的組合應(yīng)用，到該用的元素上面，那么你不用很多的了解前端就可以設(shè)計(jì)出不錯(cuò)的界面額。當(dāng)然后面還有更好的東西，Bootstrap Component和JavaScript 插件，讓前端的開(kāi)發(fā)更簡(jiǎn)單，更強(qiáng)大。

最新評(píng)論