Bootstrap是Twitter開源的基于HTML、CSS、JavaScript的前端框架。

Bootstrap下載

官方地址：https://getbootstrap.com

中文地址：http://www.bootcss.com/

Bootstrap環境搭建

bootstrap-3.3.7-dist/
├── css  // CSS文件
│   ├── bootstrap-theme.css  // Bootstrap主題樣式文件
│   ├── bootstrap-theme.css.map
│   ├── bootstrap-theme.min.css  // 主題相關樣式壓縮文件
│   ├── bootstrap-theme.min.css.map
│   ├── bootstrap.css
│   ├── bootstrap.css.map
│   ├── bootstrap.min.css  // 核心CSS樣式壓縮文件
│   └── bootstrap.min.css.map
├── fonts  // 字體文件
│   ├── glyphicons-halflings-regular.eot
│   ├── glyphicons-halflings-regular.svg
│   ├── glyphicons-halflings-regular.ttf
│   ├── glyphicons-halflings-regular.woff
│   └── glyphicons-halflings-regular.woff2
└── js  // JS文件
    ├── bootstrap.js
    ├── bootstrap.min.js  // 核心JS壓縮文件
    └── npm.js

由于Bootstrap的某些組件依賴于jQuery，所以請確保下載對應版本的jQuery文件，來保證Bootstrap相關組件運行正常。

概覽

設置全局CSS樣式；基本的HTML元素均可以通過class設置樣式并得到增強效果；還有先進的柵格系統。

移動設備優先

Bootstrap 是移動設備優先的
為了確保適當的繪制和觸屏縮放，需要在 之中添加 viewport 元數據標簽。

Normalize.css

為了增強跨瀏覽器表現的一致性，我們使用了 Normalize.css
不再需要手動指定margin: 0之類的
下載地址：https://www.bootcdn.cn/normalize/

布局容器

Bootstrap 需要為頁面內容和柵格系統包裹一個 .container 容器
.container 類用于固定寬度并支持響應式布局的容器。

  ...

柵格系統

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

簡介

柵格系統用于通過一系列的行（row）與列（column）的組合來創建頁面布局，你的內容就可以放入這些創建好的布局中。
如果多于12列，那么一行放不下，會放到第二行

圖例：

圖例代碼：

  
.col-md-1
  
.col-md-1
  
.col-md-1
  
.col-md-1
  
.col-md-1
  
.col-md-1
  
.col-md-1
  
.col-md-1
  
.col-md-1
  
.col-md-1
  
.col-md-1
  
.col-md-1


  
.col-md-8
  
.col-md-4


  
.col-md-4
  
.col-md-4
  
.col-md-4


  
.col-md-6
  
.col-md-6

柵格參數
中等屏幕 桌面顯示器 (≥992px)

.col-md-

列偏移

使用 .col-md-offset- 類可以將列向右側偏移。這些類實際是通過使用 選擇器為當前元素增加了左側的邊距（margin）。例如，.col-md-offset-4 類將 .col-md-4 元素向右側偏移了4個列（column）的寬度。
示例圖：

示例代碼：

  
.col-md-4
  
.col-md-4 .col-md-offset-4


  
.col-md-3 .col-md-offset-3
  
.col-md-3 .col-md-offset-3


  
.col-md-6 .col-md-offset-3

列排序

通過使用 .col-md-push- 和 .col-md-pull- 類就可以很容易的改變列（column）的順序。
示例圖：

示例代碼：

  
.col-md-9 .col-md-push-3
  
.col-md-3 .col-md-pull-9

使用備注

快速浮動

...
...

另外有需要云服務器可以了解下創新互聯cdcxhl.cn，海內外云服務器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務器、裸金屬服務器、高防服務器、香港服務器、美國服務器、虛擬主機、免備案服務器”等云主機租用服務以及企業上云的綜合解決方案，具有“安全穩定、簡單易用、服務可用性高、性價比高”等特點與優勢，專為企業上云打造定制，能夠滿足用戶豐富、多元化的應用場景需求。