Bootstrap框架安裝使用簡單介紹
下載 Bootstrap
可以從 http://getbootstrap.com/ 上下載 Bootstrap 的最新版本。
Download Bootstrap：下載 Bootstrap。點擊該按鈕，您可以下載 Bootstrap CSS、JavaScript 和字體的預編譯的壓縮版本。不包含文檔和最初的源代碼文件。
Download Source：下載源代碼。點擊該按鈕，您可以直接從 from 上得到最新的 Bootstrap LESS 和 JavaScript 源代碼。
源代碼需要編譯 LESS 文件來生成可重用的 CSS 文件。對于編譯 LESS 文件，Bootstrap 官方只支持 Recess，這是 Twitter 的基于 less.js 的 CSS 提示。
Download Sass：下載Sass代碼，類似于源代碼，可以編譯生成可用的CSS文件。
我們這里初步學習直接使用編譯好的Bootstrap框架即可，以后熟悉了可以再研究源碼或者Sass代碼。
文件結構
下載下來的文件是壓縮包，我們解壓之后可以看到文件的結構。
預編譯的 Bootstrap
如上圖所示，可以看到已編譯的 CSS 和 JS（bootstrap.*），以及已編譯壓縮的 CSS 和 JS（bootstrap.min.*）。同時也包含了 Glyphicons 的字體，這是一個可選的 Bootstrap 主題。
Bootstrap 源代碼
下載源代碼壓縮包 解壓后結構如下:
less/、js/ 和 fonts/ 下的文件分別是 Bootstrap CSS、JS 和圖標字體的源代碼。
dist/ 文件夾包含了上面預編譯下載部分中所列的文件和文件夾。
docs-assets/、examples/ 和所有的 *.html 文件是 Bootstrap 文檔。
html使用Bootstrap
html使用Bootstrap需要引用jquery.js、bootstrap.min.js 和 bootstrap.min.css 文件，引用這幾個文件可以讓一個常規的 HTML 文件變為使用了 Bootstrap 的模板。
方式一：html與Bootstrap文件夾放在一起
我們前面已經下載了預編輯的Bootstrap解壓出來得到了Bootstrap文件夾，只要把html與Bootstrap文件夾放在一起，然后用相對路徑引用jquery.js、bootstrap.min.js 和 bootstrap.min.css 文件即可。
方式二：html引用CDN中的jquery.js、bootstrap.min.js 和 bootstrap.min.css
很多CDN服務已經上傳有這幾個文件了，直接調用就好。
例如:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>在線嘗試 Bootstrap 實例</title> <link rel="stylesheet" > <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script> <script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <h1>Hello, world!</h1> </body> </html>
此外，你還可以使用以下的 CDN 服務：
國內推薦使用：https://www.staticfile.org/
國際推薦使用：https://cdnjs.com/
java項目使用bootstrap
java項目使用bootstrap也是有兩種方式，一種是把解壓的bootstrap文件夾放入項目webapp文件夾中，jsp頁面引用即可，另一種方式則是jsp頁面引用遠程的cdn服務中的jquery.js、bootstrap.min.js 和 bootstrap.min.css 等文件。
下圖是把bootstrap文件夾放入java項目中在myeclipse中的樣子:
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
