Bootstrap3 0學習筆記之CSS相關補充

2022-09-21 04:00:13 字數 1890 閱讀 2704

1.瀏覽器支援

2. 3.響應式工具

4.遇到的問題

5.總結

瀏覽器支援

bootstrap的目標是在最新的桌面和移動瀏覽器上有最佳的表現,也就是說,在較老舊的瀏覽器上可能會導致某些元件表現出的樣式有些不同,但是功能是完整的。

被支援的瀏覽器

特別注意,bootstrap堅決支援這些瀏覽器的最新版本:

chrome (mac、windows、ios和android) safari (只支援mac和ios版,windows版已經基本死掉了) firefox (mac、windows) internet explorer opera (mac、windows)

bootstrap在chromium、linux版chrome、linux版firefox和internet explorer 7上的表現也是很不錯的,雖然bootstrap不對其進行官方支援。

internet explorer 8 和 9

internet explorer 8 和 9 是被支援的,然而,你要知道,很多css3屬性和html5元素 -- 例如,圓角矩形和投影 -- 是肯定不被支援的。另外,internet explorer 8 需要respond.j配合才能實現對**查詢(media query)的支援。www.cppcns.com

為元素增加不同的class,就可以輕鬆的改變其樣式。

跨瀏覽器相容性

你要知道,internet explorer 8是不支援圓角矩形的。

複製**

**如下:

順便提一下響應式

通過新增.img-responsiveclass可以讓bootstrap 3中的對響應式布局的支援更友好。其實質是為賦予了max-width: 100%;和he auto;屬性,可以讓按比例縮放,不超過其父元素的尺寸。

複製**

**如下:

響應式工具

通過使用這些工具class可以根據螢幕和不同的**查詢顯示或隱藏頁面內容,加速針對移動裝置的開發。

試使用這些class並避免建立同乙個**的不同版本,從而能夠完善不同裝置上的顯示效果。響應式工具目前只是針對塊級元素,不支援inline元素和**元素。

可用的class

通過單獨或聯合使用以下列出的class,可以針對不同螢幕尺寸隱藏或顯示頁面內容。

列印class

和常規的響應式class一樣,使用下面的class可以針對印表機隱藏或顯示某些內容。

測程式設計客棧試用例

調整你的瀏覽器視窗的尺寸或者在不同的裝置上載入此頁面,均可測試上面提到的工具class。

遇到的問題

1.瀏覽器的相容性:之前也有過介紹。暫時我主要使用的是ie10、最新版的chrome、最新版的firefox。

2.瀏覽器寬度變化的時候css檔案是否會重新載入:我的答案暫時是不會的,因為www.cppcns.com他只會去重新讀取合適當前尺寸的樣式類。(不知道這個解釋是否合理)

3.prntscr螢幕列印這個,暫時沒有在bootstrap找到,如果有人發現在什麼地方可以通知一下。

4.require.js這個不程式設計客棧知道大家都知道不,應該主要是為了提高網頁瀏覽速度的,但是對於如何使用以及如何和bootstrap使用這個暫時不了解。

5.!important的作用:這個很多前端攻城師應該都很清楚。

6.bootstrap.js引用:記得要先引用jquery庫,而且要搞清楚先後順序。

當然肯定還有其他問題,暫時想不起來了,先記著這6個吧。

總結簡單的梳理完了bootstrap css。 了解了很多的樣式類,簡單的組合應用,到該用的元素上面,那麼你不用很多的了解前端就可以設計出不錯的介面額。當然後面還有更好的東西,bootstrap component和j**ascript 外掛程式,讓前端的開發更簡單,更強大。

本文位址:

Bootstrap3 0學習筆記之按鈕與下拉列表

前面的文章算是把bootstrap css部分簡單的學習了一遍,應該忽視了比較多的細節問題。不過大部分的內容我都過了一遍,並且用 實現了一遍,而且看到了真實的效果。挺不錯的。那麼接下來的幾篇文章主要來講解bootstrap的元件。那麼本文主要來講解以下內容 1.下拉列表 2.按鈕組 3.按鈕式下拉列...

bootstrap學習筆記

學習 然後對bootstrap進行引用 柵格系統中,列數是12,行數不固定 例項 手機 平板 桌面 在上面案例的基礎上,通過使用針對平板裝置的 col sm 類,我們來建立更加動態和強大的布局吧。col xs 12 col sm 6 col md 8 col xs 6 col md 4 col xs...

bootstrap學習筆記

1 引入的檔案 script script 2 柵格系統布局 bootstrap把頁面設定為12列,通過改變列的數字來進行布局。col xs 4 指小於768px的小裝置 11 col sm 4 指 768px的裝置 22 col md 4 指 992px裝置 33 col lg 4 值1200px...