前端基礎06 Bootstrap框架

時間 2019-11-05

原文原文鏈接

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

Bootstrap下載

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

Bootstrap環境搭建linux

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相關組件運行正常。npm

概覽

設置全局CSS樣式；基本的HTML元素都可以經過class設置樣式並獲得加強效果；還有先進的柵格系統。bootstrap

移動設備優先

Bootstrap 是移動設備優先的
爲了確保適當的繪製和觸屏縮放，須要在 <head> 之中添加 viewport 元數據標籤。瀏覽器

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

Normalize.css

爲了加強跨瀏覽器表現的一致性，咱們使用了 Normalize.css
再也不須要手動指定margin: 0之類的
下載地址：https://www.bootcdn.cn/normalize/前端框架

佈局容器

Bootstrap 須要爲頁面內容和柵格系統包裹一個 .container 容器
.container 類用於固定寬度並支持響應式佈局的容器。框架

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

柵格系統

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

簡介

柵格系統用於經過一系列的行（row）與列（column）的組合來建立頁面佈局，你的內容就能夠放入這些建立好的佈局中。
若是多於12列，那麼一行放不下，會放到第二行

圖例：

圖例代碼：

<div class="row">
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
</div>
<div class="row">
  <div class="col-md-8">.col-md-8</div>
  <div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
  <div class="col-md-6">.col-md-6</div>
  <div class="col-md-6">.col-md-6</div>
</div>

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

.col-md-

列偏移

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

示例代碼：

<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
</div>
<div class="row">
  <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
  <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
</div>
<div class="row">
  <div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
</div>

列排序

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

示例代碼：

<div class="row">
  <div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div>
  <div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div>
</div>

使用備註

快速浮動

<div class="pull-left">...</div>
<div class="pull-right">...</div>

相關標籤/搜索

每日一句

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