Bootstrap簡(jiǎn)介，如何下載和使用Bootstrap？

　　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)瀏覽器，訪問(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)站訪問(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àng)目，則這種方式是無(wú)效的。

猜你喜歡：

Normalize.樣式庫(kù)的特點(diǎn)，如何下載和使用Normalize.css？

TypeScript零基礎(chǔ)入門(mén)教程下載【傳智教育】

傳智播客web前端培訓(xùn)課程