Bootstrap中CSS的使用方法,供大家參考,具體內(nèi)容如下
1、GitHub上這樣介紹 bootstrap:
☑ 簡單靈活可用于架構(gòu)流行的用戶界面和交互接口的html、css、javascript工具集。
☑ 基于html5、css3的bootstrap,具有大量的誘人特性:友好的學(xué)習(xí)曲線,卓越的兼容性,響應(yīng)式設(shè)計(jì),12列格網(wǎng),樣式向?qū)臋n。
☑ 自定義JQuery插件,完整的類庫,基于Less等。
2、bootstrap模板為使IE6、7、8版本(IE9以下版本)瀏覽器兼容html5新增的標(biāo)簽,引入下面代碼文件即可。
同理為使IE6、7、8版本瀏覽器兼容css3樣式,引入下面代碼:
3、Bootstrap 使用了一些 HTML5 元素和 CSS 屬性。為了讓這些正常工作,您需要使用 HTML5 文檔類型(Doctype)
4、Bootstrap 3 的設(shè)計(jì)目標(biāo)是移動(dòng)設(shè)備優(yōu)先,然后才是桌面設(shè)備。為了讓 Bootstrap 開發(fā)的網(wǎng)站對移動(dòng)設(shè)備友好,確保適當(dāng)?shù)睦L制和觸屏縮放,需要在網(wǎng)頁的 head 之中添加 viewport meta 標(biāo)簽,如下所示:
(initial-scale=1.0, maximum-scale=1.0, user-scalable=no)
5、響應(yīng)式圖像
<img src="..." class="img-responsive" alt="響應(yīng)式圖像">
通過添加 img-responsive class 可以讓 Bootstrap 3 中的圖像對響應(yīng)式布局的支持更友好。
6、全局樣式(reset.css)
Bootstrap框架在這一部分做了一定的變更,不再一味追求歸零,而是更注重重置可能產(chǎn)生問題的樣式(如,body,form的margin等),保留和堅(jiān)持部分瀏覽器的基礎(chǔ)樣式,解決部分潛在的問題,提升一些細(xì)節(jié)的體驗(yàn),具體說明如下:
Bootstrap 3 使用 body {margin: 0;} 來移除 body 的邊距。
請看下面有關(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 來建立跨瀏覽器的一致性。
Normalize.css 是一個(gè)很小的 CSS 文件,在 HTML 元素的默認(rèn)樣式中提供了更好的跨瀏覽器一致性。
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持武林網(wǎng)。
新聞熱點(diǎn)
疑難解答
網(wǎng)友關(guān)注