這篇文章主要介紹了如何引入bootstrap,具有一定借鑒價值,需要的朋友可以參考下。希望大家閱讀完這篇文章后大有收獲。下面讓小編帶著大家一起了解一下。
Bootstrap的使用一般有兩種方法:
引用在線的Bootstrap的樣式,
將Bootstrap下載到本地進行引用。
在線引用
基本模板如下:
<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文件。務必在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)點:不用本地安裝Bootstrap,也不用考慮引用時的路徑問題
缺點:一旦在線樣式掛了,那么會影響整個頁面樣式的呈現(xiàn)
本地引用
將Bootstrap下載到本地。
直接訪問上述代碼中的3個網(wǎng)址來獲取代碼
去Bootstrap的官網(wǎng) http://v3.bootcss.com/ 和JQuery
的官網(wǎng) http://jquery.com/ 下載相應的文件
將需要的文件放在項目下,便于引用
bootstrap的目錄結構如下:
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ōu)點:確保網(wǎng)絡狀況不佳的情況下,頁面樣式依然可以正常顯示
缺點:需要提前安裝或下載,引用時要考慮路徑問題。
感謝你能夠認真閱讀完這篇文章,希望小編分享如何引入bootstrap內容對大家有幫助,同時也希望大家多多支持創(chuàng)新互聯(lián)建站,關注創(chuàng)新互聯(lián)網(wǎng)站制作公司行業(yè)資訊頻道,遇到問題就找創(chuàng)新互聯(lián)建站,詳細的解決方法等著你來學習!
網(wǎng)頁標題:如何引入bootstrap-創(chuàng)新互聯(lián)
文章路徑:http://jinyejixie.com/article2/pchic.html
成都網(wǎng)站建設公司_創(chuàng)新互聯(lián),為您提供面包屑導航、搜索引擎優(yōu)化、營銷型網(wǎng)站建設、網(wǎng)站收錄、用戶體驗、移動網(wǎng)站建設
聲明:本網(wǎng)站發(fā)布的內容(圖片、視頻和文字)以用戶投稿、用戶轉載內容為主,如果涉及侵權請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內容未經(jīng)允許不得轉載,或轉載時需注明來源: 創(chuàng)新互聯(lián)