BootStrap簡介

時間 2019-11-18

原文原文鏈接

簡介

在您開始閱讀本教程以前，您必須具有 HTML 、 CSS 和 JavaScript 的基礎知識。若是您還不瞭解這些概念，那麼建議您先閱讀咱們的這些教程:css

Bootstrap 包的內容

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

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 的模板。html5

Bootstrap CSS 概覽

在這一章中，咱們將講解 Bootstrap 底層結構的關鍵部分，包括咱們讓 web 開發變得更好、更快、更強壯的最佳實踐。jquery

HTML 5 文檔類型（Doctype）

Bootstrap 使用了一些 HTML5 元素和 CSS 屬性。爲了讓這些正常工做，您須要使用 HTML5 文檔類型（Doctype）。所以，請在使用 Bootstrap 項目的開頭包含下面的代碼段。web

<!DOCTYPE html>
<html>
....
</html>

若是在 Bootstrap 建立的網頁開頭不使用 HTML5 的文檔類型（Doctype），您可能會面臨一些瀏覽器顯示不一致的問題，甚至可能面臨一些特定情境下的不一致，以至於您的代碼不能經過 W3C 標準的驗證。bootstrap

移動設備優先

移動設備優先是 Bootstrap 3 的最顯著的變化。api

在以前的 Bootstrap 版本中（直到 2.x），您須要手動引用另外一個 CSS，才能讓整個項目友好的支持移動設備。瀏覽器

如今不同了，Bootstrap 3 默認的 CSS 自己就對移動設備友好支持。工具

Bootstrap 3 的設計目標是移動設備優先，而後纔是桌面設備。這其實是一個很是及時的轉變，由於如今愈來愈多的用戶使用移動設備。佈局

爲了讓 Bootstrap 開發的網站對移動設備友好，確保適當的繪製和觸屏縮放，須要在網頁的 head 之中添加 viewport meta 標籤，以下所示：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

容器（Container）

<div class="container">
  ...
</div>

對齊類

<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>

強調類

這些用去強調的工具類經過顏色來表示強調。

<p class="muted">Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.</p>
<p class="text-warning">Etiam porta sem malesuada magna mollis euismod.</p>
<p class="text-error">Donec ullamcorper nulla non metus auctor fringilla.</p>
<p class="text-info">Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis.</p>
<p class="text-success">Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>