簡(jiǎn)要介紹Bootstrap，以及如何下載、使用

發(fā)布時(shí)間：2020-06-29 01:45:09 來(lái)源：網(wǎng)絡(luò) 閱讀：4400 作者：紫色星系欄目：web開(kāi)發(fā)

下載Bootstrap

Bootstrap提供了幾種可以幫你快速上手的方式，每種方式針對(duì)具有不同技能等級(jí)的開(kāi)發(fā)者和不同的使用場(chǎng)景。繼續(xù)閱讀下面的內(nèi)容，看看哪種方式適合你的需求吧。

編譯后的CSS、JS和字體文件

獲取Bootstrap最快速的方式就是下載經(jīng)過(guò)編譯和壓縮的CSS、JavaScript文件，另外還包含字體文件。但是不包含文檔和源碼文件。

額外的下載渠道

下載源碼

從GitHub可以直接下載到Bootstrap最新版本的LESS和JavaScript源碼。

Clone or fork via GitHub

訪問(wèn)我們的Github源碼庫(kù)，你可以克隆整個(gè)項(xiàng)目，或者fork整個(gè)項(xiàng)目到你自己的賬號(hào)。

通過(guò)Bower工具安裝

通過(guò)Bower可以安裝并管理Bootstrap的樣式、JavaScript文件和文檔。

bash$ bower install bootstrap

cdn">使用Bootstrap中文網(wǎng)提供的CDN加速服務(wù)

Bootstrap中文網(wǎng)為Bootstrap構(gòu)建了自己的CDN加速服務(wù)，并且采用國(guó)內(nèi)云廠商的CDN服務(wù)，訪問(wèn)速度更快、加速效果更明顯、沒(méi)有速度和帶寬限制、永久免費(fèi)。Bootstrap中文網(wǎng)還對(duì)大量的開(kāi)源工具庫(kù)提供了CDN服務(wù)，請(qǐng)進(jìn)入Open CDN 主頁(yè)查看更多可用的工具庫(kù)。

<!-- 最新 Bootstrap 核心 CSS 文件 --><link rel="stylesheet" ></script>

使用國(guó)外的CDN加速服務(wù)

MaxCDN為Bootstrap免費(fèi)提供了CDN加速服務(wù)。使用Bootstrap CDN提供的鏈接即可引入Bootstrap文件。

<!-- 最新 Bootstrap 核心 CSS 文件 --><link rel="stylesheet" ></script>

編譯Bootstrap的LESS源碼文件

如果你下載的是源碼文件，那就需要將Bootstrap的LESS源碼編譯為可以使用的CSS代碼，目前，Bootstrap官方僅支持Recess編譯工具，這是Twitter提供的基于less.js構(gòu)建的編譯、代碼檢測(cè)工具。

包含了哪些文件

Bootstrap提供了兩種形式的壓縮包，在下載下來(lái)的壓縮包內(nèi)可以看到以下目錄和文件，這些文件按照類別放到了不同的目錄內(nèi)，并且提供了壓縮與未壓縮兩種版本。

Bootstrap依賴jQuery

請(qǐng)注意，所有 JavaScript 插件都依賴 jQuery，因此jQuery必須在Bootstrap之前引入，就像在基礎(chǔ)模版中所展示的一樣。在 bower.json文件中列出了Bootstrap所支持的jQuery版本。

預(yù)編譯Bootstrap版本

下載壓縮包之后，將其解壓縮到任意目錄即可看到以下目錄結(jié)構(gòu)：

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項(xiàng)目中直接使用。我們提供了壓縮(bootstrap.min.*)與未壓縮 (bootstrap.*)的CSS和JS文件。字體圖標(biāo)文件來(lái)自于Glyphicons。

Bootstrap 源碼

Bootstrap源碼包含了預(yù)先編譯的CSS、JavaScript和圖標(biāo)字體文件，并且還有LESS、JavaScript和文檔的源碼。具體來(lái)說(shuō)，主要文件組織結(jié)構(gòu)如下：

bootstrap/
├── less/
├── js/
├── fonts/
├── dist/
│   ├── css/
│   ├── js/
│   └── fonts/
├── docs-assets/
├── examples/
└── *.html

less/、js/ 和 fonts/ 分別包含了CSS、JS和字體圖標(biāo)的源碼。dist/ 目錄包含了上面所說(shuō)的預(yù)編譯Bootstrap包內(nèi)的所有文件。docs-assets/、examples/ 和所有 *.html 文件是文檔的源碼文件。除了前面提到的這些文件，還包含package定義文件、許可證文件等。

基本模版

使用以下給出的這份超級(jí)簡(jiǎn)單的HTML模版，或者修改這些案例。我們強(qiáng)烈建議你對(duì)這些案例按照自己的需求進(jìn)行修改，而不要簡(jiǎn)單的復(fù)制、粘貼。

拷貝并粘貼下面給出的HTML代碼，這就是一個(gè)最簡(jiǎn)單的Bootstrap頁(yè)面了。

<!DOCTYPE html><html>
  <head>
    <title>Bootstrap 101 Template</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Bootstrap -->
    <link rel="stylesheet" >

    <!-- 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>
    <h2>Hello, world!</h2>

    <!-- 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>

向AI問(wèn)一下細(xì)節(jié)

簡(jiǎn)要介紹Bootstrap，以及如何下載、使用