BootStarp

時間 2019-11-17

標籤 bootstarp 简体版

原文原文鏈接

Bootstrap 簡介

什麼是 Bootstrap？

Bootstrap是最受歡迎的HTML，CSS和JS框架，用於開發響應式佈局，移動設備優先的WEB項目。javascript

歷史

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

爲何使用 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 插件來獲得您本身的版本。

實例:html

View Code

Bootstrap 環境安裝

Bootstrap 安裝是很是容易的。本章將講解如何下載並安裝 Bootstrap，討論 Bootstrap 文件結構，並經過一個實例演示它的用法。java

下載 Bootstrap

您能夠從 http://getbootstrap.com/ 上下載 Bootstrap 的最新版本。當您點擊這個連接時，您將看到以下所示的網頁：python

您會看到兩個按鈕：jquery

Download Bootstrap：下載 Bootstrap。點擊該按鈕，您能夠下載 Bootstrap CSS、JavaScript 和字體的預編譯的壓縮版本。不包含文檔和最初的源代碼文件。
Download Source：下載源代碼。點擊該按鈕，您能夠直接從 from 上獲得最新的 Bootstrap LESS 和 JavaScript 源代碼。

若是您使用的是未編譯的源代碼，您須要編譯 LESS 文件來生成可重用的 CSS 文件。對於編譯 LESS 文件，Bootstrap 官方只支持 Recess，這是 Twitter 的基於 less.js 的 CSS 提示。git

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

因爲文件是被編譯過和壓縮過的，在獨立的功能開發中，您沒必要每次都包含這些獨立的文件。web

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

文件結構

預編譯的 Bootstrap

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

這是最基本的Bootstrap組織形式：未壓縮版的文件能夠在任意web項目中直接使用。咱們提供了壓縮(bootstrap.min.*)與未壓縮 (bootstrap.*)的CSS和JS文件。字體圖標文件來自於Glyphicons。

Bootstrap 源代碼

若是您下載了 Bootstrap 源代碼，那麼文件結構將以下所示：

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

引入Bootstrap相關的css、js

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

Bootstrap依賴jQuery
請注意，全部 JavaScript 插件都依賴 jQuery，所以jQuery必須在Bootstrap以前引入，jQuery版本需大於或等於1.9.0。點擊此能夠查看Bootstrap所對應的jQuery版本。

Bootstrap CSS 概覽

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

HTML 5 文檔類型（Doctype）

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

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

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

移動設備優先

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

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

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

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

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

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

width 屬性控制設備的寬度。假設您的網站將被帶有不一樣屏幕分辨率的設備瀏覽，那麼將它設置爲 device-width 能夠確保它能正確呈如今不一樣設備上。

initial-scale=1.0 確保網頁加載時，以 1:1 的比例呈現，不會有任何的縮放。

在移動設備瀏覽器上，經過爲 viewport meta 標籤添加 user-scalable=no 能夠禁用其縮放（zooming）功能。

一般狀況下，maximum-scale=1.0 與 user-scalable=no 一塊兒使用。這樣禁用縮放功能後，用戶只能滾動屏幕，就能讓您的網站看上去更像原生應用的感受。

注意，這種方式咱們並不推薦全部網站使用，仍是要看您本身的狀況而定！

<meta name="viewport" content="width=device-width, 
                                     initial-scale=1.0, 
                                     maximum-scale=1.0, 
                                     user-scalable=no">

響應式圖像

<img src="..." class="img-responsive" alt="響應式圖像">

經過添加 img-responsive class 可讓 Bootstrap 3 中的圖像對響應式佈局的支持更友好。

接下來讓咱們看下這個 class 包含了哪些 css 屬性。

在下面的代碼中，能夠看到img-responsive class 爲圖像賦予了 max-width: 100%; 和 height: auto; 屬性，可讓圖像按比例縮放，不超過其父元素的尺寸。

.img-responsive {
  display: inline-block;
  height: auto;
  max-width: 100%;
}

這代表相關的圖像呈現爲 inline-block。當您把元素的 display 屬性設置爲 inline-block，元素相對於它周圍的內容之內聯形式呈現，但與內聯不一樣的是，這種狀況下咱們能夠設置寬度和高度。

設置 height:auto，相關元素的高度取決於瀏覽器。

設置 max-width 爲 100% 會重寫任何經過 width 屬性指定的寬度。這讓圖片對響應式佈局的支持更友好。

全局顯示、排版和連接

基本的全局顯示

Bootstrap 3 使用 body {margin: 0;} 來移除 body 的邊距。

請看下面有關 body 的設置：

body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.428571429;
  color: #333333;
  background-color: #ffffff;
}

第一條規則設置 body 的默認字體樣式爲 "Helvetica Neue", Helvetica, Arial, sans-serif。

第二條規則設置文本的默認字體大小爲 14 像素。

第三條規則設置默認的行高度爲 1.428571429。

第四條規則設置默認的文本顏色爲 #333333。

最後一條規則設置默認的背景顏色爲白色。

排版

使用 @font-family-base、 @font-size-base 和 @line-height-base 屬性做爲排版樣式。

連接樣式

經過屬性 @link-color 設置全局連接的顏色。

對於連接的默認樣式，以下設置：

a:hover,
a:focus {
  color: #2a6496;
  text-decoration: underline;
}

a:focus {
  outline: thin dotted #333;
  outline: 5px auto -webkit-focus-ring-color;
  outline-offset: -2px;
}

因此，當鼠標懸停在連接上，或者點擊過的連接，顏色會被設置爲 #2a6496。同時，會呈現一條下劃線。

除此以外，點擊過的連接，會呈現一個顏色碼爲 #333 的細的虛線輪廓。另外一條規則是設置輪廓爲 5 像素寬，且對於基於 webkit 瀏覽器有一個 -webkit-focus-ring-color 的瀏覽器擴展。輪廓偏移設置爲 -2 像素。

以上全部這些樣式均可以在 scaffolding.less 中找到。

避免跨瀏覽器的不一致

Bootstrap 使用 Normalize 來創建跨瀏覽器的一致性。

Normalize.css 是一個很小的 CSS 文件，在 HTML 元素的默認樣式中提供了更好的跨瀏覽器一致性。

容器（Container）

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

Bootstrap 3 的 container class 用於包裹頁面上的內容。讓咱們一塊兒來看看 bootstrap.css 文件中的這個 .container class。

.container {
   padding-right: 15px;
   padding-left: 15px;
   margin-right: auto;
   margin-left: auto;
}

經過上面的代碼，把 container 的左右外邊距（margin-right、margin-left）交由瀏覽器決定。

請注意，因爲內邊距（padding）是固定寬度，默認狀況下容器是不可嵌套的。

.container:before,
.container:after {
  display: table;
  content: " ";
}

這會產生僞元素。設置 display 爲 table，會建立一個匿名的 table-cell 和一個新的塊格式化上下文。:before 僞元素防止上邊距崩塌，:after 僞元素清除浮動。

若是 conteneditable 屬性出如今 HTML 中，因爲一些 Opera bug，圍繞上述元素建立一個空格。這能夠經過使用 content: " " 來修復。

.container:after {
  clear: both;
}

它建立了一個僞元素，並確保了全部的容器包含全部的浮動元素。

Bootstrap 3 CSS 有一個申請響應的媒體查詢，在不一樣的媒體查詢閾值範圍內都爲 container 設置了max-width，用以匹配網格系統。

@media (min-width: 768px) {
   .container {
      width: 750px;
}

Bootstrap 網格系統（柵格系統）

本章節咱們將講解 Bootstrap 的網格系統（Grid System）。

Bootstrap 提供了一套響應式、移動設備優先的流式網格系統，隨着屏幕或視口（viewport）尺寸的增長，系統會自動分爲最多12列。

什麼是網格（Grid）？

在平面設計中，網格是一種由一系列用於組織內容的相交的直線（垂直的、水平的）組成的結構（一般是二維的）。它普遍應用於打印設計中的設計佈局和內容結構。在網頁設計中，它是一種用於快速建立一致的佈局和有效地使用 HTML 和 CSS 的方法。簡單地說，網頁設計中的網格用於組織內容，讓網站易於瀏覽，並下降用戶端的負載。

什麼是 Bootstrap 網格系統（Grid System）？

Bootstrap 官方文檔中有關網格系統的描述：

Bootstrap 包含了一個響應式的、移動設備優先的、不固定的網格系統，能夠隨着設備或視口大小的增長而適當地擴展到 12 列。它包含了用於簡單的佈局選項的預約義類，也包含了用於生成更多語義佈局的功能強大的混合類。

讓咱們來理解一下上面的語句。Bootstrap 3 是移動設備優先的，在這個意義上，Bootstrap 代碼從小屏幕設備（好比移動設備、平板電腦）開始，而後擴展到大屏幕設備（好比筆記本電腦、臺式電腦）上的組件和網格。

移動設備優先策略

內容
- 決定什麼是最重要的。
佈局
- 優先設計更小的寬度。
- 基礎的 CSS 是移動設備優先，媒體查詢是針對於平板電腦、臺式電腦。
漸進增強
- 隨着屏幕大小的增長而添加元素。

響應式網格系統隨着屏幕或視口（viewport）尺寸的增長，系統會自動分爲最多12列。

Bootstrap 網格系統（Grid System）的工做原理

網格系統經過一系列包含內容的行和列來建立頁面佈局。下面列出了 Bootstrap 網格系統是如何工做的：

行必須放置在 .container class 內，以便得到適當的對齊（alignment）和內邊距（padding）。
使用行來建立列的水平組。
內容應該放置在列內，且惟有列能夠是行的直接子元素。
預約義的網格類，好比 .row 和 .col-xs-4，可用於快速建立網格佈局。LESS 混合類可用於更多語義佈局。
列經過內邊距（padding）來建立列內容之間的間隙。該內邊距是經過 .rows 上的外邊距（margin）取負，表示第一列和最後一列的行偏移。
網格系統是經過指定您想要橫跨的十二個可用的列來建立的。例如，要建立三個相等的列，則使用三個 .col-xs-4。

媒體查詢

媒體查詢是很是別緻的"有條件的 CSS 規則"。它只適用於一些基於某些規定條件的 CSS。若是知足那些條件，則應用相應的樣式。

Bootstrap 中的媒體查詢容許您基於視口大小移動、顯示並隱藏內容。下面的媒體查詢在 LESS 文件中使用，用來建立 Bootstrap 網格系統中的關鍵的分界點閾值。

/* 超小設備（手機，小於 768px） */
/* Bootstrap 中默認狀況下沒有媒體查詢 */

/* 小型設備（平板電腦，768px 起） */
@media (min-width: @screen-sm-min) { ... }

/* 中型設備（臺式電腦，992px 起） */
@media (min-width: @screen-md-min) { ... }

/* 大型設備（大臺式電腦，1200px 起） */
@media (min-width: @screen-lg-min) { ... }

咱們有時候也會在媒體查詢代碼中包含 max-width，從而將 CSS 的影響限制在更小範圍的屏幕大小以內。

@media (max-width: @screen-xs-max) { ... }
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... }
@media (min-width: @screen-lg-min) { ... }

媒體查詢有兩個部分，先是一個設備規範，而後是一個大小規則。在上面的案例中，設置了下列的規則：

讓咱們來看下面這行代碼：

@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }

對於全部帶有 min-width: @screen-sm-min 的設備，若是屏幕的寬度小於 @screen-sm-max，則會進行一些處理。

網格選項

下表總結了 Bootstrap 網格系統如何跨多個設備工做：

網格選項

下表總結了 Bootstrap 網格系統如何跨多個設備工做：

超小設備手機（<768px）	小型設備平板電腦（≥768px）	中型設備臺式電腦（≥992px）	大型設備臺式電腦（≥1200px）
網格行爲	一直是水平的	以摺疊開始，斷點以上是水平的	以摺疊開始，斷點以上是水平的	以摺疊開始，斷點以上是水平的
最大容器寬度	None (auto)	750px	970px	1170px
Class 前綴	.col-xs-	.col-sm-	.col-md-	.col-lg-
列 #	12	12	12	12
最大列寬	Auto	60px	78px	95px
間隙寬度	30px （一個列的每邊分別 15px）	30px （一個列的每邊分別 15px）	30px （一個列的每邊分別 15px）	30px （一個列的每邊分別 15px）
可嵌套	Yes	Yes	Yes	Yes
偏移量	Yes	Yes	Yes	Yes

基本的網格結構

下面是 Bootstrap 網格的基本結構：

<div class="container">
   <div class="row">
      <div class="col-*-*"></div>
      <div class="col-*-*"></div>      
   </div>
   <div class="row">...</div>
</div>
<div class="container">....

讓咱們來看幾個簡單的網格實例：

實例：堆疊的水平
實例：中型和大型設備
實例：手機、平板電腦、臺式電腦

響應式的列重置

如下實例包含了4個網格，可是咱們在小設備瀏覽時沒法肯定網格顯示的位置。

爲了解決這個問題，可使用 .clearfix class和響應式實用工具來解決，以下面實例所示：

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 實例 - 響應式的列重置</title>
   <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">
   <script src="/scripts/jquery.min.js"></script>
   <script src="/bootstrap/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
   <div class="row" >
      <div class="col-xs-6 col-sm-3" 
         style="background-color: #dedef8;
         box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
      </div>
      <div class="col-xs-6 col-sm-3" 
         style="background-color: #dedef8;box-shadow: 
         inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do 
            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut 
            enim ad minim veniam, quis nostrud exercitation ullamco laboris 
            nisi ut aliquip ex ea commodo consequat.
         </p>
         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do 
            eiusmod tempor incididunt ut. 
         </p>
      </div>

      <div class="clearfix visible-xs"></div>

      <div class="col-xs-6 col-sm-3" 
         style="background-color: #dedef8;
         box-shadow:inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco 
            laboris nisi ut aliquip ex ea commodo consequat. 
         </p>
      </div>
      <div class="col-xs-6 col-sm-3" 
         style="background-color: #dedef8;box-shadow: 
         inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do 
            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut 
            enim ad minim 
         </p>
      </div>
   </div>
</div>

</body>
</html>

View Code

偏移列

偏移是一個用於更專業的佈局的有用功能。它們可用來給列騰出更多的空間。例如，.col-xs=* 類不支持偏移，可是它們能夠簡單地經過使用一個空的單元格來實現該效果。

爲了在大屏幕顯示器上使用偏移，請使用 .col-md-offset-* 類。這些類會把一個列的左外邊距（margin）增長 * 列，其中 * 範圍是從 1 到 11。

在下面的實例中，咱們有 <div class="col-md-6">..</div>，咱們將使用 .col-md-offset-3 class 來居中這個 div。

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 實例 - 偏移列</title>
   <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">
   <script src="/scripts/jquery.min.js"></script>
   <script src="/bootstrap/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">

   <h1>Hello, world!</h1>

   <div class="row" >
      <div class="col-xs-6 col-md-offset-3" 
         style="background-color: #dedef8;box-shadow: 
         inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         <p>Lorem ipsum dolor sit amet, consectetur adipisicing 
            elit.
         </p>
      </div>

   </div>
</div>

</body>
</html>

View Code

結果以下所示：

嵌套列

爲了在內容中嵌套默認的網格，請添加一個新的 .row，並在一個已有的 .col-md-* 列內添加一組 .col-md-* 列。被嵌套的行應包含一組列，這組列個數不能超過12（其實，沒有要求你必須佔滿12列）。

在下面的實例中，佈局有兩個列，第二列被分爲兩行四個盒子。

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 實例 - 嵌套列</title>
   <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">
   <script src="/scripts/jquery.min.js"></script>
   <script src="/bootstrap/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">

   <h1>Hello, world!</h1>

   <div class="row">

      <div class="col-md-3" style="background-color: #dedef8;box-shadow: 
         inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         <h4>第一列</h4>
         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
      </div>

      <div class="col-md-9" style="background-color: #dedef8;box-shadow: 
         inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         <h4>第二列 - 分爲四個盒子</h4>
         <div class="row">
            <div class="col-md-6" style="background-color: #B18904;
               box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
               <p>Consectetur art party Tonx culpa semiotics. Pinterest 
                  assumenda minim organic quis.
               </p>
            </div>
            <div class="col-md-6" style="background-color: #B18904;
               box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
               <p> sed do eiusmod tempor incididunt ut labore et dolore magna 
                  aliqua. Ut enim ad minim veniam, quis nostrud exercitation 
                  ullamco laboris nisi ut aliquip ex ea commodo consequat.
               </p>
            </div>
         </div>

         <div class="row">
            <div class="col-md-6" style="background-color: #B18904;
               box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
               <p>quis nostrud exercitation ullamco laboris nisi ut 
                  aliquip ex ea commodo consequat.
               </p>
            </div>   
            <div class="col-md-6" style="background-color: #B18904;
               box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
               <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
                  sed do eiusmod tempor incididunt ut labore et dolore magna 
                  aliqua. Ut enim ad minim.</p>
            </div>
         </div>

      </div>

   </div>

</div>

</body>
</html>

View Code

結果以下所示：

列排序

Bootstrap 網格系統另外一個完美的特性，就是您能夠很容易地以一種順序編寫列，而後以另外一種順序顯示列。

您能夠很輕易地改變帶有 .col-md-push-* 和 .col-md-pull-* 類的內置網格列的順序，其中 * 範圍是從 1 到 11。

在下面的實例中，咱們有兩列布局，左列很窄，做爲側邊欄。咱們將使用 .col-md-push-* 和 .col-md-pull-* 類來互換這兩列的順序。

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 實例 - 列排序</title>
   <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">
   <script src="/scripts/jquery.min.js"></script>
   <script src="/bootstrap/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">

   <h1>Hello, world!</h1>

   <div class="row">
      <p>排序前</p>
      <div class="col-md-4" style="background-color: #dedef8;
         box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         我在左邊
      </div>
      <div class="col-md-8" style="background-color: #dedef8;
         box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         我在右邊
      </div>
   </div><br>
   <div class="row">
      <p>排序後</p>
      <div class="col-md-4 col-md-push-8" 
         style="background-color: #dedef8;
         box-shadow: inset 1px -1px 1px #444, 
         inset -1px 1px 1px #444;">
         我在左邊
      </div>
      <div class="col-md-8 col-md-pull-4" 
         style="background-color: #dedef8;
         box-shadow: inset 1px -1px 1px #444, 
         inset -1px 1px 1px #444;">
         我在右邊
      </div>
   </div>

</div>

</body>
</html>

View Code

結果以下所示：

 1 <!DOCTYPE html>
  2 <html>
  3 <head>
  4     <title></title>
  5     <script src="../js/jquery.min.js" type="text/javascript"></script>
  6     <link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css">
  7     <script src="../js/bootstrap.min.js" type="text/javascript"></script>
  8     <style type="text/css">
  9         #bjys{
 10             background-color: #abcdef;
 11 } 12     </style>
 13 </head>
 14 <body>
 15 <div class="container">
 16 <!--按鈕示例-->
 17 <button class="btn btn-default">button</button>
 18 <button class="btn btn-primary">提交按鈕</button>
 19 <button class="btn btn-success">成功按鈕</button>
 20 <button class="btn btn-info">信息按鈕</button>
 21 <button class="btn btn-warning">警告按鈕</button>
 22 <button class="btn btn-danger">危險按鈕</button>
 23 <button class="btn btn-link">表現連接按鈕</button>
 24 <button class="btn btn-lg">大一點按鈕</button>
 25 <button class="btn btn-sm">小一點按鈕</button>
 26 <button class="btn btn-xs">最小按鈕</button>
 27 <button class="btn active">激活狀態按鈕</button>
 28 <button class="btn disabled">無效按鈕</button>
 29 <button class="btn disabled btn-danger">多種按鈕樣式混用</button>
 30 <br />
 31 
 32 
 33 <!-- 表格示例 -->
 34 <table class="table table-striped">
 35     <h3>斑馬線表格</h3>
 36     <th>ID</th>
 37     <th>Name</th>
 38     <th>PWd</th>
 39     <tr>
 40         <td>001</td>
 41         <td>number1</td>
 42         <td>123456</td>
 43     </tr>
 44     <tr>
 45         <td>002</td>
 46         <td>number2</td>
 47         <td>123456</td>
 48     </tr>
 49 </table>
 50 
 51 <table class="table table-bordered">
 52     <h3>帶邊框表格</h3>
 53     <th>ID</th>
 54     <th>Name</th>
 55     <th>PWd</th>
 56     <tr>
 57         <td>001</td>
 58         <td>number1</td>
 59         <td>123456</td>
 60     </tr>
 61     <tr>
 62         <td>002</td>
 63         <td>number2</td>
 64         <td>123456</td>
 65     </tr>
 66 </table>
 67 
 68 <table class="table table-hover">
 69     <h3>帶鼠標懸停效果表格</h3>
 70     <th>ID</th>
 71     <th>Name</th>
 72     <th>PWd</th>
 73     <tr>
 74         <td>001</td>
 75         <td>number1</td>
 76         <td>123456</td>
 77     </tr>
 78     <tr>
 79         <td>002</td>
 80         <td>number2</td>
 81         <td>123456</td>
 82     </tr>
 83 </table>
 84 
 85 <table class="table table-condensed">
 86     <h3>上下間隔緊湊效果表格</h3>
 87     <th>ID</th>
 88     <th>Name</th>
 89     <th>PWd</th>
 90     <tr>
 91         <td>001</td>
 92         <td>number1</td>
 93         <td>123456</td>
 94     </tr>
 95     <tr>
 96         <td>002</td>
 97         <td>number2</td>
 98         <td>123456</td>
 99     </tr>
100 </table>
101 
102 <table class="table table-striped table-bordered table-hover table-condensed">
103     <h3>帶多種混合效果表格</h3>
104     <th>ID</th>
105     <th>Name</th>
106     <th>PWd</th>
107     <tr>
108         <td>001</td>
109         <td>number1</td>
110         <td>123456</td>
111     </tr>
112     <tr>
113         <td>002</td>
114         <td>number2</td>
115         <td>123456</td>
116     </tr>
117 </table>
118 
119 <table class="table">
120     <h3>被激活,成功，信息，危險，警告狀態表格</h3>
121     <th>ID</th>
122     <th>Name</th>
123     <th>PWd</th>
124     <tr class="active">
125         <td>001</td>
126         <td>number1</td>
127         <td>123456</td>
128     </tr>
129     <tr class="success">
130         <td>002</td>
131         <td>number2</td>
132         <td>123456</td>
133     </tr>
134     <tr class="info">
135         <td>003</td>
136         <td>number3</td>
137         <td>123456</td>
138     </tr>
139     <tr class="danger">
140         <td>004</td>
141         <td>number4</td>
142         <td>123456</td>
143     </tr>
144     <tr class="warning">
145         <td>005</td>
146         <td>number5</td>
147         <td>123456</td>
148     </tr>
149 </table>
150 
151 <!-- 圖片示例 -->
152 <h3>圓角圖片</h3>
153 <img class="img img-rounded" src="../images/img3.jpg" width="200px" height="200px">
154 <h3>圓形圖片</h3>
155 <img class="img img-circle" src="../images/img1.jpg">
156 <h3>縮略圖圖片</h3>
157 <img class="img img-thumbnail" src="../images/img4.jpg" width="200px" height="200px">
158 
159 <!-- 表單示例 -->
160 <form class="form-control">
161     <input class="form-control" type="text" name="name" placeholder="name" width="300px">
162     <input class="form-control" type="password" name="pwd" placeholder="password" width="300px">
163     <textarea name="textarea" class="form-control" cols="10">
164 文本域... 165     </textarea>
166     <select name="selt" class="form-control">
167         <option>選項一</option>
168         <option>選項二</option>
169         <option>選項三</option>
170         <option>選項四</option>
171     </select>
172     <input type="radio" name="out" class="">
173     <input type="radio" name="int" class="">
174     <input type="checkbox" name="list">
175     <input type="checkbox" name="list">
176     <button class="btn btn-primary">提交</button>
177 </form>
178 
179 <!-- 文本 -->
180 <span class="text-muted">Never try ,never know 淺灰色文本</span>
181 <span class="text-primary">Never try ,never know 強調文本</span>
182 <span class="text-info">Never try ,never know  提示信息文本</span>
183 <span class="text-success">Never try ,never know 操做成功文本</span>
184 <span class="text-warning">Never try ,never know 警告文本</span>
185 <span class="text-danger">Never try ,never know 危險提示文本</span>
186 
187 <!-- 基本樣式 背景 -->
188 <p class="bg-primary">強調</p>
189 <p class="bg-success">操做成功</p>
190 <p class="bg-info">提示文字</p>
191 <p class="bg-warning">警告語</p>
192 <p class="bg-danger">危險語</p>
193 
194 <!-- 其它樣式 -->
195 <!-- <button class="close" aria-hidden="true"></button>
196 <button class="caret"></button> -->
197 <div class="pull-left">文字靠左邊</div>
198 <div class="pull-right">文字靠右邊</div>
199 <!-- <div class="show">show</div>
200 <div class="hidden">hidden</div>
201 <div class="invisible">invisible</div> -->
202 <br />
203 
204 <!-- 柵格佈局 -->
205 <div class="row">
206     <div id="bjys" class="col-xs-6">66分</div>
207     <div id="bjys" class="col-xs-6">66分</div>    
208 </div>
209 <div class="row">
210     <div id="bjys" class="col-xs-3">33分</div>
211     <div id="bjys" class="col-xs-4">44分</div>    
212     <div id="bjys" class="col-xs-6">55分</div>
213 </div>
214 
215 </div>
216 <!-- 下拉菜單 -->
217 <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
218   <li><a tabindex="-1" href="#">功能一</a></li>
219   <li><a tabindex="-1" href="#">功能二</a></li>
220   <li><a tabindex="-1" href="#">功能三</a></li>
221   <li class="divider"></li>
222   <li><a tabindex="-1" href="#">功能四</a></li>
223 </ul>
224 
225 <!-- 導航 -->
226 <div class="navbar">
227   <div class="navbar-inner">
228     <a class="brand" href="#">Title</a>
229     <ul class="nav">
230       <li class="active"><a href="#">首頁</a></li>
231       <li><a href="#">功能一</a></li>
232       <li><a href="#">功能二</a></li>
233     </ul>
234   </div>
235 
236 
237 <!-- 按鈕組 -->
238 <h3>單一按鈕組</h3>
239 <div class="btn-group">
240   <button class="btn">Left</button>
241   <button class="btn">Middle</button>
242   <button class="btn">Right</button>
243 </div>
244 
245 <!-- 多維按鈕 -->
246 <h3>多維按鈕</h3>
247 <div class="btn-toolbar">
248     <div class="btn-group">
249         <button class="btn">按鈕一</button>
250         <button class="btn">按鈕一</button>
251         <button class="btn">按鈕一</button>
252     </div>
253     <div class="btn-group">
254         <button class="btn">按鈕四</button>
255         <button class="btn">按鈕五</button>    
256     </div>
257     <button class="btn">按鈕六</button>
258 </div>
259 
260 <h3>垂直按鈕組</h3>
261 <div class="btn-group btn-group-vertical">
262         <button class="btn">按鈕一</button>
263         <button class="btn">按鈕一</button>
264         <button class="btn">按鈕一</button>
265 </div>
266 
267 <!-- 按鈕式下拉菜單 -->
268 <h3>按鈕式下拉菜單</h3>
269 <div class="btn-group">
270   <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
271 Action 272     <span class="caret"></span>
273   </a>
274   <ul class="dropdown-menu">
275     <!-- dropdown menu links -->
276   </ul>
277 </div>
278 
279 <h3>分列式下拉菜單</h3>
280 <div class="btn-group">
281   <button class="btn">Action</button>
282   <button class="btn dropdown-toggle" data-toggle="dropdown">
283     <span class="caret"></span>
284   </button>
285   <ul class="dropdown-menu">
286     <!-- dropdown menu links -->
287   </ul>
288 </div>
289 
290 <h3>向上彈出式菜單</h3>
291 <div class="btn-group dropup">
292   <button class="btn">Dropup</button>
293   <button class="btn dropdown-toggle" data-toggle="dropdown">
294     <span class="caret"></span>
295   </button>
296   <ul class="dropdown-menu">
297     <!-- dropdown menu links -->
298   </ul>
299 </div>
300 
301 <!-- 導航 -->
302 <h3>標籤頁導航</h3>
303 <ul class="nav nav-tabs">
304     <li class="active">
305         <a href="#">首頁</a>
306       </li>
307       <li><a href="#">功能一</a></li>
308       <li><a href="#">功能二</a></li>
309 </ul>
310 
311 <div class="tabbable"> <!-- Only required for left/right tabs -->
312   <ul class="nav nav-tabs">
313     <li class="active"><a href="#tab1" data-toggle="tab">Section 1</a></li>
314     <li><a href="#tab2" data-toggle="tab">Section 2</a></li>
315   </ul>
316   <div class="tab-content">
317     <div class="tab-pane fade active" id="tab1">
318       <p>I'm in Section 1.</p>
319     </div>
320     <div class="tab-pane fade" id="tab2">
321       <p>Howdy, I'm in Section 2.</p>
322     </div>
323   </div>
324 </div>
325 
326 <h3>基本pills導航</h3>
327 <ul class="nav nav-pills">
328     <li class="active">
329         <a href="#">首頁</a>
330       </li>
331       <li><a href="#">功能一</a></li>
332       <li><a href="#">功能二</a></li>
333       <li class="disabled"><a href="#">禁用狀態功能</a></li>
334 </ul>
335 
336 <br />
337 <!-- 表單 -->
338 <h3>表單</h3>
339 <form class="navbar-form">
340   <input type="text" class="span2">
341   <button type="submit" class="btn">Submit</button>
342 </form>
343 
344 <h3>搜索表單</h3>
345 <form class="navbar-search pull-left">
346   <input type="text" class="search-query" placeholder="Search">
347 </form>
348 <hr>
349 <h3>響應式導航條</h3>
350 <div class="navbar">
351   <div class="navbar-inner">
352     <div class="container">
353  
354       <!-- .btn-navbar is used as the toggle for collapsed navbar content -->
355       <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
356         <span class="icon-bar"></span>
357         <span class="icon-bar"></span>
358         <span class="icon-bar"></span>
359       </a>
360  
361       <!-- Be sure to leave the brand out there if you want it shown -->
362       <a class="brand" href="#">Project name</a>
363  
364       <!-- Everything you want hidden at 940px or less, place within here -->
365       <div class="nav-collapse collapse">
366         <!-- .nav, .navbar-search, .navbar-form, etc -->
367       </div>
368  
369     </div>
370   </div>
371 </div>
372 </div>
373 </body>
374 </html>

BootStarp基本標籤使用

1. Vue中引入jquery bootstarp bootstarp-table (vue 2.0)
2. Bootstarp總結
3. Bootstarp-table入門
4. 初探bootstarp
5. bootstarp-select 級聯
6. BootStarp模版
7. bootstarp後臺皮膚
8. Bootstarp柵格佈局
9. bootstarp modal 寬度設置
10. BootStarp製作導航條demo
更多相關文章...

相關標籤/搜索

bootstarp

jquery+bootstarp+bootstarptable

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。

BootStarp

Bootstrap 簡介

什麼是 Bootstrap？

歷史

爲何使用 Bootstrap？

Bootstrap 包的內容

Bootstrap 環境安裝

下載 Bootstrap

文件結構

預編譯的 Bootstrap

Bootstrap 源代碼

Bootstrap依賴jQuery請注意，全部 JavaScript 插件都依賴 jQuery，所以jQuery必須在Bootstrap以前引入，jQuery版本需大於或等於1.9.0。點擊此能夠查看Bootstrap所對應的jQuery版本。

Bootstrap CSS 概覽

HTML 5 文檔類型（Doctype）

移動設備優先

響應式圖像

全局顯示、排版和連接

基本的全局顯示

排版

連接樣式

避免跨瀏覽器的不一致

容器（Container）

Bootstrap 網格系統（柵格系統）

什麼是網格（Grid）？

什麼是 Bootstrap 網格系統（Grid System）？

移動設備優先策略

Bootstrap 網格系統（Grid System）的工做原理

媒體查詢

網格選項

網格選項

基本的網格結構

響應式的列重置

偏移列

嵌套列

結果以下所示：

列排序

Bootstrap依賴jQuery
請注意，全部 JavaScript 插件都依賴 jQuery，所以jQuery必須在Bootstrap以前引入，jQuery版本需大於或等於1.9.0。點擊此能夠查看Bootstrap所對應的jQuery版本。