標籤：下載 bootstrap 使用
下載BootstrapBootstrap提供了幾種可以幫你快速上手的方式，每種方式針對具有不同技能等級的開發人員和不同的使用情境。繼續閱讀下面的內容，看看哪種方式適合你的需求吧。
編譯後的CSS、JS和字型檔擷取Bootstrap最快速的方式就是下載經過編譯和壓縮的CSS、JavaScript檔案，另外還包含字型檔。但是不包含文檔和源碼檔案。
額外的下載渠道下載源碼從GitHub可以直接下載到Bootstrap最新版本的LESS和JavaScript源碼。
Clone or fork via GitHub訪問我們的Github源碼庫，你可以複製整個項目，或者fork整個項目到你自己的帳號。
通過Bower工具安裝通過Bower可以安裝並管理Bootstrap的樣式、JavaScript檔案和文檔。
bash$ bower install bootstrap
Bootstrap中文網為Bootstrap構建了自己的CDN加速服務，並且採用國內雲廠商的CDN服務，訪問速度更快、加速效果更明顯、沒有速度和頻寬節流設定、永久免費。Bootstrap中文網還對大量的開源工具庫提供了CDN服務，請進入Open CDN 首頁查看更多可用的工具庫。
<!-- 最新 Bootstrap 核心 CSS 檔案 --><link rel="stylesheet" href="http://cdn.bootcss.com/twitter-bootstrap/3.0.3/css/bootstrap.min.css"><!-- 可選的Bootstrap主題檔案（一般不用引入） --><link rel="stylesheet" href="http://cdn.bootcss.com/twitter-bootstrap/3.0.3/css/bootstrap-theme.min.css"><!-- jQuery檔案。務必在bootstrap.min.js 之前引入 --><script src="http://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script><!-- 最新的 Bootstrap 核心 JavaScript 檔案 --><script src="http://cdn.bootcss.com/twitter-bootstrap/3.0.3/js/bootstrap.min.js"></script>使用國外的CDN加速服務
MaxCDN為Bootstrap免費提供了CDN加速服務。使用Bootstrap CDN提供的連結即可引入Bootstrap檔案。
<!-- 最新 Bootstrap 核心 CSS 檔案 --><link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css"><!-- 可選的Bootstrap主題檔案（一般不用引入） --><link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap-theme.min.css"><!-- 最新的 Bootstrap 核心 JavaScript 檔案 --><script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>編譯Bootstrap的LESS源碼檔案
如果你下載的是源碼檔案，那就需要將Bootstrap的LESS源碼編譯為可以使用的CSS代碼，目前，Bootstrap官方僅支援Recess編譯工具，這是Twitter提供的基於less.js構建的編譯、代碼偵查工具。
包含了哪些檔案Bootstrap提供了兩種形式的壓縮包，在下載下來的壓縮包內可以看到以下目錄和檔案，這些檔案按照類別放到了不同的目錄內，並且提供了壓縮與未壓縮兩種版本。
Bootstrap依賴jQuery請注意，所有 JavaScript 外掛程式都依賴 jQuery，因此jQuery必須在Bootstrap之前引入， 就像在 基礎模版中所展示的一樣。在 bower.json檔案 中列出了Bootstrap所支援的jQuery版本。
下載壓縮包之後，將其解壓縮到任意目錄即可看到以下目錄結構：
bootstrap/├── css/│ ├── bootstrap.css│ ├── bootstrap.min.css│ ├── bootstrap-theme.css│ └── bootstrap-theme.min.css├── js/│ ├── bootstrap.js│ └── bootstrap.min.js└── fonts/ ├── glyphicons-halflings-regular.eot ├── glyphicons-halflings-regular.svg ├── glyphicons-halflings-regular.ttf └── glyphicons-halflings-regular.woff
這是最基本的Bootstrap組織形式：未壓縮版的檔案可以在任意web項目中直接使用。我們提供了壓縮(bootstrap.min.*)與未壓縮 (bootstrap.*)的CSS和JS檔案。字型表徵圖檔案來自於Glyphicons。
Bootstrap源碼包含了預先編譯的CSS、JavaScript和表徵圖字型檔，並且還有LESS、JavaScript和文檔的源碼。具體來說，主要檔案組織圖如下：
bootstrap/├── less/├── js/├── fonts/├── dist/│ ├── css/│ ├── js/│ └── fonts/├── docs-assets/├── examples/└── *.html
less/、js/ 和 fonts/ 分別包含了CSS、JS和字型表徵圖的源碼。dist/ 目錄包含了上面所說的先行編譯Bootstrap包內的所有檔案。docs-assets/、examples/ 和所有 *.html 檔案是文檔的源碼檔案。除了前面提到的這些檔案，還包含package定義檔案、許可證檔案等。
使用以下給出的這份超級簡單的HTML模版，或者修改這些案例。我們強烈建議你對這些案例按照自己的需求進行修改，而不要簡單的複製、粘貼。
拷貝並粘貼下面給出的HTML代碼，這就是一個最簡單的Bootstrap頁面了。
<!DOCTYPE html><html> <head> <title>Bootstrap 101 Template</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Bootstrap --> <link rel="stylesheet" href="http://cdn.bootcss.com/twitter-bootstrap/3.0.3/css/bootstrap.min.css"> <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries --> <!-- WARNING: Respond.js doesn‘t work if you view the page via file:// --> <!--[if lt IE 9]> <script src="http://cdn.bootcss.com/html5shiv/3.7.0/html5shiv.min.js"></script> <script src="http://cdn.bootcss.com/respond.js/1.3.0/respond.min.js"></script> <![endif]--> </head> <body> <h1>Hello, world!</h1> <!-- jQuery (necessary for Bootstrap‘s JavaScript plugins) --> <script src="http://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script> <!-- Include all compiled plugins (below), or include individual files as needed --> <script src="http://cdn.bootcss.com/twitter-bootstrap/3.0.3/js/bootstrap.min.js"></script> </body></html>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
