前端基礎(chǔ)06Bootstrap框架

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

創(chuàng)新互聯(lián)10多年成都定制網(wǎng)站服務;為您提供網(wǎng)站建設,網(wǎng)站制作,網(wǎng)頁設計及高端網(wǎng)站定制服務,成都定制網(wǎng)站及推廣,對成都石涼亭等多個方面擁有豐富的網(wǎng)站制作經(jīng)驗的網(wǎng)站建設公司。

Bootstrap下載

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

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

Bootstrap環(huán)境搭建

bootstrap-3.3.7-dist/
├── css  // CSS文件
│   ├── bootstrap-theme.css  // Bootstrap主題樣式文件
│   ├── bootstrap-theme.css.map
│   ├── bootstrap-theme.min.css  // 主題相關(guān)樣式壓縮文件
│   ├── 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相關(guān)組件運行正常。

概覽

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

移動設備優(yōu)先

Bootstrap 是移動設備優(yōu)先的
為了確保適當?shù)睦L制和觸屏縮放，需要在 <head> 之中添加 viewport 元數(shù)據(jù)標簽。

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

Normalize.css

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

布局容器

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

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

柵格系統(tǒng)

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

簡介

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

圖例：
前端基礎(chǔ)06 Bootstrap框架

圖例代碼：

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

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

.col-md-

列偏移

使用 .col-md-offset- 類可以將列向右側(cè)偏移。這些類實際是通過使用 選擇器為當前元素增加了左側(cè)的邊距（margin）。例如，.col-md-offset-4 類將 .col-md-4 元素向右側(cè)偏移了4個列（column）的寬度。
示例圖：
前端基礎(chǔ)06 Bootstrap框架
示例代碼：

<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）的順序。
示例圖：
前端基礎(chǔ)06 Bootstrap框架
示例代碼：

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

網(wǎng)站欄目：前端基礎(chǔ)06Bootstrap框架
新聞來源：http://bm7419.com/article40/jjsieo.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站建設、網(wǎng)站維護、App設計、營銷型網(wǎng)站建設、網(wǎng)頁設計公司、外貿(mào)建站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)

網(wǎng)站建設網(wǎng)站維護公司