一、Bootstrap框架介紹

1、什么是 Bootstrap帮掉？

Bootstrap 是一個用于快速開發(fā) Web 應(yīng)用程序和網(wǎng)站的前端框架。Bootstrap 是基于 HTML窒典、CSS蟆炊、JAVASCRIPT 的

2、Bootstrap歷史

Bootstrap 是由 Twitter 的 Mark Otto 和 Jacob Thornton 開發(fā)的瀑志。Bootstrap 是 2011 年八月在 GitHub 上發(fā)布的開源產(chǎn)品涩搓。

3、為什么使用 Bootstrap劈猪？

? 移動設(shè)備優(yōu)先：自 Bootstrap 3 起昧甘，框架包含了貫穿于整個庫的移動設(shè)備優(yōu)先的樣式。
? 瀏覽器支持：所有的主流瀏覽器都支持 Bootstrap战得。
? 容易上手：只要您具備 HTML 和 CSS 的基礎(chǔ)知識充边，您就可以開始學(xué)習(xí) Bootstrap。
? 響應(yīng)式設(shè)計：Bootstrap 的響應(yīng)式 CSS 能夠自適應(yīng)于臺式機常侦、平板電腦和手機浇冰。
? 它為開發(fā)人員創(chuàng)建接口提供了一個簡潔統(tǒng)一的解決方案。
? 它包含了功能強大的內(nèi)置組件聋亡，易于定制肘习。
? 它還提供了基于 Web 的定制。
? 它是開源的坡倔。

4漂佩、Bootstrap 包的內(nèi)容

? 基本結(jié)構(gòu)：Bootstrap 提供了一個帶有網(wǎng)格系統(tǒng)、鏈接樣式罪塔、背景的基本結(jié)構(gòu)投蝉。
? CSS：Bootstrap 自帶以下特性：全局的 CSS 設(shè)置、定義基本的 HTML 元素樣式征堪、可擴展的 class墓拜，以及一個先進的網(wǎng)格系統(tǒng)。
? 組件：Bootstrap 包含了十幾個可重用的組件请契，用于創(chuàng)建圖像咳榜、下拉菜單、導(dǎo)航爽锥、警告框涌韩、彈出框等等。
? JavaScript 插件：Bootstrap 包含了十幾個自定義的 jQuery 插件氯夷。您可以直接包含所有的插件臣樱，也可以逐個包含這些插件。
? 定制：您可以定制 Bootstrap 的組件、LESS 變量和 jQuery 插件來得到您自己的版本雇毫。

5玄捕、Bootstrap環(huán)境安裝

從 http://getbootstrap.com/ 上下載 Bootstrap 的最新版本。（備注：Download Bootstrap：表示下載預(yù)編譯的Bootstrap棚放；Download Source：下載Bootstrap的未編譯的源代碼枚粘，需要編譯 LESS 文件來生成可重用的 CSS 文件。）
把已下載的Bootstrap庫拷貝到項目文件夾下飘蚯，并在代碼中引用馍迄。
六、Bootstrap框架的文件結(jié)構(gòu)
預(yù)編譯的 Bootstrap
當(dāng)您下載了 Bootstrap 的已編譯的版本局骤，解壓縮 ZIP 文件攀圈，您將看到下面的文件/目錄結(jié)構(gòu)：

bootstrap架構(gòu)

如上圖所示，可以看到已編譯的 CSS 和 JS（bootstrap.）峦甩，以及已編譯壓縮的 CSS 和 JS（bootstrap.min.）赘来。同時也包含了 Glyphicons 的字體，這是一個可選的 Bootstrap 主題凯傲。

6撕捍、Bootstrap 源代碼結(jié)構(gòu)

如果您下載了 Bootstrap 源代碼，那么文件結(jié)構(gòu)將如下所示：

Bootstrap源代碼結(jié)構(gòu)

? less/泣洞、js/ 和 fonts/ 下的文件分別是 Bootstrap CSS忧风、JS 和圖標(biāo)字體的源代碼。
? dist/ 文件夾包含了上面預(yù)編譯下載部分中所列的文件和文件夾球凰。
? docs-assets/狮腿、examples/ 和所有的 *.html 文件是 Bootstrap 文檔。

7呕诉、引入調(diào)用Bootstrap框架的HTML模板

<!DOCTYPE html>
<html>
<head>
    <title>Bootstrap Demo</title>
    <!--1.定義頁面的編碼格式-->
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
    <!--2.設(shè)置頁面以默認(rèn)比例展示（即不縮放）:初始化移動瀏覽顯示缘厢，用于適配移動瀏覽器-->
    <meta name="viewport" content="width=device-width,initial-scale=1.0" >
    
    <!--3.載入Bootstrap框架的css文件-->
    <link rel="stylesheet" type="text/css" href="bootstrap-3.3.7/css/bootstrap.min.css">
    <!--或載入遠(yuǎn)程的Bootstrap文件 -->
    <!--<link  rel="stylesheet">-->

    <!--4.引入低于IE9的兼容性設(shè)置 -->
    <!--[if lt IE 9]>
         <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
         <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
      <![endif]-->
    <!-- HTML5 Shim 和 Respond.js 用于讓 IE8 支持 HTML5元素和媒體查詢 -->
    <!-- 注意： 如果通過 file://  引入 Respond.js 文件，則該文件無法起效果 -->

    <!--5.引入本頁面的自定義CSS文件 -->
    <link rel="stylesheet" type="text/css" href="link.css">
</head>
<body>
    Bootstrap實現(xiàn)響應(yīng)式布局Demos

    <!-- 6.引入jQuery (Bootstrap 的 JavaScript 插件需要引入 jQuery) -->
<!-- 包括所有已編譯的插件 -->
      <script src="https://code.jquery.com/jquery.js"></script>
      <script src="js/bootstrap.min.js"></script>
    <!—另外甩挫，也可引入遠(yuǎn)程在線的CSS文件-->
    <!--規(guī)范提醒：css的載入放到head中贴硫，js的載入放到body中。-->
</body>
</html>

8伊者、擴展：Bootstrap CDN 推薦

本站實例采用的是自建的靜態(tài)資源庫上的Bootstrap資源英遭。

<!-- 新 Bootstrap 核心 CSS 文件 -->
<link    rel="stylesheet">
<!-- 可選的Bootstrap主題文件（一般不使用） -->
<script  src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap-theme.min.css"></script>
 <!-- jQuery文件。務(wù)必在bootstrap.min.js 之前引入 -->
<script  src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
 <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script  src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>

此外亦渗，你還可以使用以下的 CDN 服務(wù)：
· 國內(nèi)推薦使用 : https://www.staticfile.org/
· 國際推薦使用：https://cdnjs.com/

前端開發(fā)1：引入Bootstrap框架