首頁  >  文章  >  web前端  >  bootstrap框架怎麼在html頁面載入使用教學課程

bootstrap框架怎麼在html頁面載入使用教學課程

巴扎黑
巴扎黑原創
2017-06-26 14:23:521772瀏覽

今天敲程式碼的時候,剛好碰到這個問題.

跟大家分享這個解決方法:

 
 

1/7

到bootstrap官方網站下載,對於我們開發者來說,直接下載編譯和壓縮後的CSS 、JavaScript文件,另外還包含字型文件,但不包含文件和原始碼文件。打開解壓縮包之後可以發現包含三個資料夾 css、fonts、js。這是最基本的Bootstrap組織形式:未壓縮版的檔案可以在任意web專案中直接使用。我們提供了壓縮(bootstrap.min.*)與未壓縮 (bootstrap.*)的CSS和JS檔。字體圖示檔案來自於Glyphicons

 
 

 

2/7
所有Bootstrap外掛程式都依賴jQuery。而且在正式的專案當中我們推薦使用壓縮之後的版本,因為它的體積很小,到官網下載jQuery支持,如圖:
## 
 

 

#3/7

將下載後的就jQuery放到bootstrap中的js目錄下,如圖:
 
 

 

#4/7

在bootstrap的根目錄下新建一個demo.html文件,(注意,必須在根目錄下面新建,因為後面的步驟中要將bootstrap框架中的css和js文件鏈接到創建的demo中)
 
 

5/7

編輯demo.html文件,加入對bootstrap框架中css和js的引用,內容如下,圖片有註解說明,這樣,我們就基本上建立了對bootstrap框架的基本使用架構
 

 

6/7
另外,bootstrap官方提供了連結服務,永久免費,即使你不下載bootstrap框架檔案到本地,也可以直接在html中使用,使用下面這段程式碼:
## ##########< ;script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js?1.1.11">########### ## ######### ############

以上是bootstrap框架怎麼在html頁面載入使用教學課程的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn