簡要介紹Bootstrap,以及如何下載、使用

下載Bootstrap

Bootstrap提供了幾種可以幫你快速上手的方式,每種方式針對具有不同技能等級的開發者和不同的使用場景。繼續閱讀下面的內容,看看哪種方式適合你的需求吧。

編譯後的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中文網提供的CDN加速服務

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版本

下載壓縮包之後,將其解壓縮到任意目錄即可看到以下目錄結構:

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 源碼

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>


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章