更新時(shí)間:2020-12-11 來(lái)源:黑馬程序員 瀏覽量:
Bootstrap是美國(guó)Twitter公司的設(shè)計(jì)師Mark Otto和Jacob Thornton合作基于HTML、CSS、JavaScript 開(kāi)發(fā)的一款框架,簡(jiǎn)潔、直觀、強(qiáng)悍的的優(yōu)點(diǎn),極大地提高了前端人員的工作效率,使 Web 開(kāi)發(fā)變得更加快捷。那么如何下載和使用Bootstrap呢?本節(jié)課就來(lái)介紹下Bootstrap的下載和使用方法。
打開(kāi)瀏覽器,訪(fǎng)問(wèn)Bootstrap官方網(wǎng)站,獲取Bootstrap的下載地址。本書(shū)基于Bootstrap的4.4.1版本進(jìn)行講解。Bootstrap官方網(wǎng)站的首頁(yè)如圖1所示。
圖1 Bootstrap首頁(yè)
Bootstrap提供了3種下載方式供開(kāi)發(fā)者進(jìn)行選擇,第1種方式是下載預(yù)編譯的文件;第2種方式是下載源文件進(jìn)行手動(dòng)編譯,Bootstrap 4的源文件采用了Sass進(jìn)行編寫(xiě);第3種方式是使用CDN來(lái)引入。
如果不需要了解Bootstrap的源代碼,則可以直接選擇預(yù)編譯的文件來(lái)使用即可。由于國(guó)外網(wǎng)站訪(fǎng)問(wèn)速度慢,讀者也可以使用本書(shū)源代碼中的bootstrap-4.4.1-dist.zip文件。
Bootstrap CDN是為了簡(jiǎn)化開(kāi)發(fā),提供了大量預(yù)編譯的CSS、JavaScript和組件,使用這種方式可以直接跳過(guò)下載,將編譯好的文件直接引用到項(xiàng)目中即可,示例代碼如下。
<!-- Bootstrap 4核心CSS文件 --> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.4.1/css/bootstrap.min.css"> <!-- jQuery文件,務(wù)必在bootstrap.min.js之前引入 --> <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script> <!-- 用于彈窗、提示、下拉菜單 --> <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script> <!-- Bootstrap 4核心JavaScript 文件 --> <script src="https://cdn.staticfile.org/twitter-bootstrap/4.4.1/js/bootstrap.min.js"></script>
需要注意的是,CDN方式的代碼需要到指定服務(wù)器中進(jìn)行下載,如果是離線(xiàn)項(xiàng)目,則這種方式是無(wú)效的。