Bootstrap：教程、簡介、環境安裝

本文轉載自查看原文 2018-02-13 10:11 2053 DS-BootStrap/ JS-前端框架

ylbtech-Bootstrap：教程、簡介、環境安裝

1. Bootstrap 教程返回頂部

1、

Bootstrap 教程

Bootstrap，來自 Twitter，是目前最受歡迎的前端框架。Bootstrap 是基於 HTML、CSS、JAVASCRIPT 的，它簡潔靈活，使得 Web 開發更加快捷。

本教程將向您講解 Bootstrap 框架的基礎，通過學習這些內容，您將可以輕松地創建 Web 項目。教程被分為 Bootstrap 基本結構、Bootstrap CSS、Bootstrap 布局組件和 Bootstrap 插件幾個部分。每個部分都包含了與該主題相關的簡單有用的實例。

現在開始學習 Bootstrap！

Bootstrap 可視化布局系統！

誰適合閱讀本教程？

只要您具備 HTML 和 CSS 的基礎知識，您就可以閱讀本教程，進而開發出自己的網站。在您學習完本教程后，您即可達到使用 Bootstrap 開發 Web 項目的中等水平。

閱讀本教程前，您需要了解的知識：

在您開始閱讀本教程之前，您必須具備 HTML 、 CSS 和 JavaScript 的基礎知識。如果您還不了解這些概念，那么建議您先閱讀我們的這些教程:

Bootstrap 有用的資源

Twitter Bootstrap - Bootstrap 的官方網站，可以在該站點上找到所有可用的文檔和下載。
Less - Less 快速入門。

2、

http://www.runoob.com/bootstrap/bootstrap-tutorial.html

3、

2. Bootstrap 簡介返回頂部

1、

Bootstrap 簡介

什么是 Bootstrap？

Bootstrap 是一個用於快速開發 Web 應用程序和網站的前端框架。Bootstrap 是基於 HTML、CSS、JAVASCRIPT 的。

歷史

Bootstrap 是由 Twitter 的 Mark Otto 和 Jacob Thornton 開發的。Bootstrap 是 2011 年八月在 GitHub 上發布的開源產品。

為什么使用 Bootstrap？

移動設備優先：自 Bootstrap 3 起，框架包含了貫穿於整個庫的移動設備優先的樣式。
瀏覽器支持：所有的主流瀏覽器都支持 Bootstrap。
容易上手：只要您具備 HTML 和 CSS 的基礎知識，您就可以開始學習 Bootstrap。
響應式設計：Bootstrap 的響應式 CSS 能夠自適應於台式機、平板電腦和手機。更多有關響應式設計的內容詳見 Bootstrap 響應式設計。
它為開發人員創建接口提供了一個簡潔統一的解決方案。
它包含了功能強大的內置組件，易於定制。
它還提供了基於 Web 的定制。
它是開源的。

Bootstrap 包的內容

基本結構：Bootstrap 提供了一個帶有網格系統、鏈接樣式、背景的基本結構。這將在 Bootstrap 基本結構 部分詳細講解。
CSS：Bootstrap 自帶以下特性：全局的 CSS 設置、定義基本的 HTML 元素樣式、可擴展的 class，以及一個先進的網格系統。這將在 Bootstrap CSS 部分詳細講解。
組件：Bootstrap 包含了十幾個可重用的組件，用於創建圖像、下拉菜單、導航、警告框、彈出框等等。這將在 布局組件部分詳細講解。
JavaScript 插件：Bootstrap 包含了十幾個自定義的 jQuery 插件。您可以直接包含所有的插件，也可以逐個包含這些插件。這將在 Bootstrap 插件 部分詳細講解。
定制：您可以定制 Bootstrap 的組件、LESS 變量和 jQuery 插件來得到您自己的版本。

在線實例

本站的 Bootstrap 教程包含了上百個實例。

你可以使用我們的在線編輯器在線編輯代碼，並點擊運行按鈕查看結果。

Bootstrap 實例

<div class="container">
  <div class="jumbotron">
    <h1>我的第一個 Bootstrap 頁面</h1>
    <p>重置窗口大小，查看響應式效果！</p> 
  </div>
  <div class="row">
    <div class="col-sm-4">
      <h3>Column 1</h3>
      <p>學的不僅是技術，更是夢想！</p>
      <p>再牛逼的夢想,也抵不住你傻逼似的堅持！</p>
    </div>
    <div class="col-sm-4">
      <h3>Column 2</h3>
      <p>學的不僅是技術，更是夢想！</p>
      <p>再牛逼的夢想,也抵不住你傻逼似的堅持！</p>
    </div>
    <div class="col-sm-4">
      <h3>Column 3</h3> 
      <p>學的不僅是技術，更是夢想！</p>
      <p>再牛逼的夢想,也抵不住你傻逼似的堅持！</p>
    </div>
  </div>
</div>

嘗試一下 »

Bootstrap 實例2

<div class="table-responsive">          
 <table class="table table-striped table-bordered">
   <thead>
     <tr>
       <th>#</th>
       <th>Name</th>
       <th>Street</th>
     </tr>
   </thead>
   <tbody>
     <tr>
       <td>1</td>
       <td>Anna Awesome</td>
       <td>Broome Street</td>
     </tr>
     <tr>
       <td>2</td>
       <td>Debbie Dallas</td>
       <td>Houston Street</td>
     </tr>
     <tr>
       <td>3</td>
       <td>John Doe</td>
       <td>Madison Street</td>
     </tr>
   </tbody>
 </table>
</div>

嘗試一下 »

點擊 "嘗試一下" 按鈕查看它是如何工作的。

2、

http://www.runoob.com/bootstrap/bootstrap-intro.html

3、

3. Bootstrap 環境安裝返回頂部

1、

Bootstrap 環境安裝

Bootstrap 安裝是非常容易的。本章將講解如何下載並安裝 Bootstrap，討論 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 提示。

為了更好的了解和更方便的使用，我們將在本教程中使用 Bootstrap 的預編譯版本。

由於文件是被編譯過和壓縮過的，在獨立的功能開發中，您不必每次都包含這些獨立的文件。

本教程編寫時，使用的是最新版（Bootstrap 3）。

文件結構

預編譯的 Bootstrap

當您下載了 Bootstrap 的已編譯的版本，解壓縮 ZIP 文件，您將看到下面的文件/目錄結構：

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

Bootstrap 源代碼

如果您下載了 Bootstrap 源代碼，那么文件結構將如下所示：

less/、js/ 和 fonts/ 下的文件分別是 Bootstrap CSS、JS 和圖標字體的源代碼。
dist/ 文件夾包含了上面預編譯下載部分中所列的文件和文件夾。
docs-assets/、examples/ 和所有的 *.html 文件是 Bootstrap 文檔。

HTML 模板

一個使用了 Bootstrap 的基本的 HTML 模板如下所示：

實例

<!DOCTYPE html>
<html>
   <head>
      <title>Bootstrap 模板</title>
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <!-- 引入 Bootstrap -->
      <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
 
      <!-- HTML5 Shiv 和 Respond.js 用於讓 IE8 支持 HTML5元素和媒體查詢 -->
      <!-- 注意： 如果通過 file://  引入 Respond.js 文件，則該文件無法起效果 -->
      <!--[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]-->
   </head>
   <body>
      <h1>Hello, world!</h1>
 
      <!-- jQuery (Bootstrap 的 JavaScript 插件需要引入 jQuery) -->
      <script src="https://code.jquery.com/jquery.js"></script>
      <!-- 包括所有已編譯的插件 -->
      <script src="js/bootstrap.min.js"></script>
   </body>
</html>

在這里，您可以看到包含了 jquery.js、bootstrap.min.js 和 bootstrap.min.css 文件，用於讓一個常規的 HTML 文件變為使用了 Bootstrap 的模板。

有關上面代碼段中每個元素的細節將在 Bootstrap CSS 概覽章節詳細講解。

實例

現在讓我們嘗試使用Bootstrap輸出"Hello, world!"：

實例

<h1>Hello, world!</h1>

嘗試一下 »

Bootstrap CDN 推薦

國內推薦使用 BootCDN 上的庫：

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