快捷導(dǎo)航

Bootstrap CSS使用方法

更新時(shí)間：2016年12月23日 08:43:10 作者：weiweismile123

這篇文章主要為大家詳細(xì)介紹了Bootstrap中CSS的使用方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

Bootstrap中CSS的使用方法，供大家參考，具體內(nèi)容如下

1、GitHub上這樣介紹 bootstrap：

☑ 簡(jiǎn)單靈活可用于架構(gòu)流行的用戶界面和交互接口的html、css、javascript工具集。
☑ 基于html5、css3的bootstrap，具有大量的誘人特性：友好的學(xué)習(xí)曲線，卓越的兼容性，響應(yīng)式設(shè)計(jì)，12列格網(wǎng)，樣式向?qū)臋n。
☑ 自定義JQuery插件，完整的類(lèi)庫(kù)，基于Less等。

2、bootstrap模板為使IE6、7、8版本（IE9以下版本）瀏覽器兼容html5新增的標(biāo)簽，引入下面代碼文件即可。

同理為使IE6、7、8版本瀏覽器兼容css3樣式，引入下面代碼：

3、Bootstrap 使用了一些 HTML5 元素和 CSS 屬性。為了讓這些正常工作，您需要使用 HTML5 文檔類(lèi)型（Doctype）

4、Bootstrap 3 的設(shè)計(jì)目標(biāo)是移動(dòng)設(shè)備優(yōu)先，然后才是桌面設(shè)備。為了讓 Bootstrap 開(kāi)發(fā)的網(wǎng)站對(duì)移動(dòng)設(shè)備友好，確保適當(dāng)?shù)睦L制和觸屏縮放，需要在網(wǎng)頁(yè)的 head 之中添加 viewport meta 標(biāo)簽，如下所示：
（initial-scale=1.0, maximum-scale=1.0, user-scalable=no）

5、響應(yīng)式圖像

通過(guò)添加 img-responsive class 可以讓 Bootstrap 3 中的圖像對(duì)響應(yīng)式布局的支持更友好。

6、全局樣式（reset.css）
Bootstrap框架在這一部分做了一定的變更，不再一味追求歸零，而是更注重重置可能產(chǎn)生問(wèn)題的樣式（如，body,form的margin等），保留和堅(jiān)持部分瀏覽器的基礎(chǔ)樣式，解決部分潛在的問(wèn)題，提升一些細(xì)節(jié)的體驗(yàn)，具體說(shuō)明如下：

移除body的margin聲明
設(shè)置body的背景色為白色
為排版設(shè)置了基本的字體、字號(hào)和行高
設(shè)置全局鏈接顏色，且當(dāng)鏈接處于懸浮“:hover”狀態(tài)時(shí)才會(huì)顯示下劃線樣式

Bootstrap 3 使用 body {margin: 0;} 來(lái)移除 body 的邊距。
請(qǐng)看下面有關(guān) body 的設(shè)置：

body { 
font-family: “Helvetica Neue”, Helvetica, Arial, sans-serif; 
font-size: 14px; 
line-height: 1.428571429; 
color: #333333; 
background-color: #ffffff; 
}

7、避免跨瀏覽器的不一致

Bootstrap 使用 Normalize 來(lái)建立跨瀏覽器的一致性。
Normalize.css 是一個(gè)很小的 CSS 文件，在 HTML 元素的默認(rèn)樣式中提供了更好的跨瀏覽器一致性。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: