(1)知識(shí)點(diǎn)
- (1.1)定義
- (1.2)包含的內(nèi)容
- (1.3)如何使用
- (1.4)注意事項(xiàng)
(2)細(xì)化
(2.1)定義
什么是 Bootstrap
Bootstrap 是一個(gè)用于快速開(kāi)發(fā) Web 應(yīng)用程序和網(wǎng)站的前端框架。
移動(dòng)設(shè)備優(yōu)先:自 Bootstrap 3 起,框架包含了貫穿于整個(gè)庫(kù)的移動(dòng)設(shè)備優(yōu)先的樣式芹啥。
所有的主流瀏覽器都支持 Bootstrap菜谣。
Bootstrap 的響應(yīng)式 CSS 能夠自適應(yīng)于臺(tái)式機(jī)沾乘、平板電腦和手機(jī)氏仗。
它為開(kāi)發(fā)人員創(chuàng)建接口提供了一個(gè)簡(jiǎn)潔統(tǒng)一的解決方案矫夷;包含了功能強(qiáng)大的內(nèi)置組件股冗,易于定制霹陡;還提供了基于 Web 的定制;并且還是開(kāi)源的。
(2.2)包含的內(nèi)容
基本結(jié)構(gòu):Bootstrap 提供了一個(gè)帶有網(wǎng)格系統(tǒng)穆律、鏈接樣式惠呼、背景的基本結(jié)構(gòu)
CSS:Bootstrap 自帶以下特性:全局的 CSS 設(shè)置、定義基本的 HTML 元素樣式峦耘、可擴(kuò)展的 class剔蹋,以及一個(gè)先進(jìn)的網(wǎng)格系統(tǒng)。
組件:Bootstrap 包含了十幾個(gè)可重用的組件辅髓,用于創(chuàng)建圖像泣崩、下拉菜單、導(dǎo)航洛口、警告框矫付、彈出框等等。
JavaScript 插件:Bootstrap 包含了十幾個(gè)自定義的 jQuery 插件第焰。您可以直接包含所有的插件买优,也可以逐個(gè)包含這些插件。
定制:您可以定制 Bootstrap 的組件挺举、LESS 變量和 jQuery 插件來(lái)得到您自己的版本杀赢。
(2.3)如何使用
關(guān)于如何使用,w3cshool上面講解的很清晰湘纵,可以根據(jù)步驟進(jìn)行脂崔。
如何使用
(2.4)注意事項(xiàng)
(1)Bootstrap使用的是jquery的2.1.4版本,這個(gè)版本在IE8下會(huì)報(bào)錯(cuò)梧喷,導(dǎo)致Bootstrap的js插件不能執(zhí)行砌左。查看Bootstrap官網(wǎng),采用的是:
<script>window.jQuery || document.write('<script src="js/jquery.min.js"><\/script>')</script>
不支持高版本的jquery庫(kù)就采用這個(gè)低版本庫(kù)铺敌,在IE8下雖然會(huì)報(bào)錯(cuò)汇歹,但呈現(xiàn)效果是正常的。
或者可以直接使用jquery1.x版本的庫(kù)偿凭,不需要做兼容處理产弹。
(2)HTML5 Shim 和 Respond.js 用于讓 IE8 支持 HTML5元素和媒體查詢
注意: 如果通過(guò) file:// 引入 Respond.js 文件,則該文件無(wú)法起效果
<!--[if lt IE 9]>
<script src="https://.../html5shiv.js"></script>
<script src="https://.../respond.min.js"></script>
<![endif]-->