Bootstrap學習---css

1、GitHub上這樣介紹 bootstrap:

☑  簡單靈活可用於架構流行的用戶界面和交互接口的html、css、javascript工具集。
☑  基於html5、css3的bootstrap,具有大量的誘人特性:友好的學習曲線,卓越的兼容性,響應式設計,12列格網,樣式嚮導文檔。
☑  自定義JQuery插件,完整的類庫,基於Less等。

2、bootstrap模板爲使IE6、7、8版本(IE9以下版本)瀏覽器兼容html5新增的標籤,引入下面代碼文件即可。

同理爲使IE6、7、8版本瀏覽器兼容css3樣式,引入下面代碼:

3、Bootstrap 使用了一些 HTML5 元素和 CSS 屬性。爲了讓這些正常工作,您需要使用 HTML5 文檔類型(Doctype)
4、Bootstrap 3 的設計目標是移動設備優先,然後纔是桌面設備。爲了讓 Bootstrap 開發的網站對移動設備友好,確保適當的繪製和觸屏縮放,需要在網頁的 head 之中添加 viewport meta 標籤,如下所示:
(initial-scale=1.0, maximum-scale=1.0, user-scalable=no)
5、響應式圖像

<img src="..." class="img-responsive" alt="響應式圖像">

通過添加 img-responsive class 可以讓 Bootstrap 3 中的圖像對響應式佈局的支持更友好。
6、全局樣式(reset.css)
Bootstrap框架在這一部分做了一定的變更,不再一味追求歸零,而是更注重重置可能產生問題的樣式(如,body,form的margin等),保留和堅持部分瀏覽器的基礎樣式,解決部分潛在的問題,提升一些細節的體驗,具體說明如下:

移除body的margin聲明
設置body的背景色爲白色
爲排版設置了基本的字體、字號和行高
設置全局鏈接顏色,且當鏈接處於懸浮“:hover”狀態時纔會顯示下劃線樣式

Bootstrap 3 使用 body {margin: 0;} 來移除 body 的邊距。
請看下面有關 body 的設置:
body {
font-family: “Helvetica Neue”, Helvetica, Arial, sans-serif;
font-size: 14px;
line-height: 1.428571429;
color: #333333;
background-color: #ffffff;
}
7、避免跨瀏覽器的不一致
Bootstrap 使用 Normalize 來建立跨瀏覽器的一致性。
Normalize.css 是一個很小的 CSS 文件,在 HTML 元素的默認樣式中提供了更好的跨瀏覽器一致性。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章