您好,登錄后才能下訂單哦!
這篇文章主要介紹了如何引入bootstrap,具有一定借鑒價(jià)值,需要的朋友可以參考下。希望大家閱讀完這篇文章后大有收獲。下面讓小編帶著大家一起了解一下。
Bootstrap的使用一般有兩種方法:
引用在線的Bootstrap的樣式,
將Bootstrap下載到本地進(jìn)行引用。
在線引用
基本模板如下:
<html> <head> <meta charset="UTF-8"> <title>Bootstrap引入</title> <!-- 新 Bootstrap 核心 CSS 文件 --> <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css"> <!-- jQuery文件。務(wù)必在bootstrap.min.js 之前引入 --> <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script> <!-- 最新的 Bootstrap 核心 JavaScript 文件 --> <script src="http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> </head>
優(yōu)點(diǎn):不用本地安裝Bootstrap,也不用考慮引用時(shí)的路徑問(wèn)題
缺點(diǎn):一旦在線樣式掛了,那么會(huì)影響整個(gè)頁(yè)面樣式的呈現(xiàn)
本地引用
將Bootstrap下載到本地。
直接訪問(wèn)上述代碼中的3個(gè)網(wǎng)址來(lái)獲取代碼
去Bootstrap的官網(wǎng) http://v3.bootcss.com/ 和JQuery
的官網(wǎng) http://jquery.com/ 下載相應(yīng)的文件
將需要的文件放在項(xiàng)目下,便于引用
bootstrap的目錄結(jié)構(gòu)如下:
bootstrap/ ├── css/ │ ├── bootstrap.css │ ├── bootstrap.css.map │ ├── bootstrap.min.css │ ├── bootstrap.min.css.map │ ├── bootstrap-theme.css │ ├── bootstrap-theme.css.map │ ├── bootstrap-theme.min.css │ └── bootstrap-theme.min.css.map ├── js/ │ ├── bootstrap.js │ └── bootstrap.min.js └── fonts/ ├── glyphicons-halflings-regular.eot ├── glyphicons-halflings-regular.svg ├── glyphicons-halflings-regular.ttf ├── glyphicons-halflings-regular.woff └── glyphicons-halflings-regular.woff2
最常用的是css/bootstrap.min.css、js/bootstrap.min.js
jquery.min.js可以在JQuery官網(wǎng)下載
最后,在相應(yīng)文件中引入即可。
優(yōu)點(diǎn):確保網(wǎng)絡(luò)狀況不佳的情況下,頁(yè)面樣式依然可以正常顯示
缺點(diǎn):需要提前安裝或下載,引用時(shí)要考慮路徑問(wèn)題。
感謝你能夠認(rèn)真閱讀完這篇文章,希望小編分享如何引入bootstrap內(nèi)容對(duì)大家有幫助,同時(shí)也希望大家多多支持億速云,關(guān)注億速云行業(yè)資訊頻道,遇到問(wèn)題就找億速云,詳細(xì)的解決方法等著你來(lái)學(xué)習(xí)!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。