首頁(yè)技術(shù)文章正文

什么是Bootstrap?如何下載和使用Bootstrap?

更新時(shí)間:2020-12-11 來(lái)源:黑馬程序員 瀏覽量:

1577370495235_學(xué)IT就到黑馬程序員.gif

  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的下載地址。本書基于Bootstrap的4.4.1版本進(jìn)行講解。Bootstrap官方網(wǎng)站的首頁(yè)如圖1所示。

undefined

  圖1 Bootstrap首頁(yè)

  Bootstrap提供了3種下載方式供開(kāi)發(fā)者進(jìn)行選擇,第1種方式是下載預(yù)編譯的文件;第2種方式是下載源文件進(jìn)行手動(dòng)編譯,Bootstrap 4的源文件采用了Sass進(jìn)行編寫;第3種方式是使用CDN來(lái)引入。

  如果不需要了解Bootstrap的源代碼,則可以直接選擇預(yù)編譯的文件來(lái)使用即可。由于國(guó)外網(wǎng)站訪問(wèn)速度慢,讀者也可以使用本書源代碼中的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ú)效的。




猜你喜歡:

彈性盒布局的4種常用屬性演示【前端技術(shù)文章】?

什么是Sass?Sass的優(yōu)勢(shì)有哪些?

黑馬程序員web前端培訓(xùn)課程 

分享到:
在線咨詢 我要報(bào)名
和我們?cè)诰€交談!