Bootstrap

一、簡介

Bootstrap是美國Twitter公司的設(shè)計(jì)師Mark Otto和Jacob Thornton合作基于HTML、CSS、JavaScript 開發(fā)的簡潔、直觀、強(qiáng)悍的前端開發(fā)框架，使得 Web 開發(fā)更加快捷。

二、安裝

1、本地鏈接

官網(wǎng)下載

2、CDN

<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet"  integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- 可選的 Bootstrap 主題文件（一般不用引入） -->
<link rel="stylesheet"  integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

三、布局容器

• 固定寬度：.container
• 流式布局：.container-fluid

四、響應(yīng)式布局

• 超小屏幕：小于 768px
• 小屏幕：大于等于 768px
• 中等屏幕：大于等于 992px
• 大屏幕：大于等于 1200px

五、刪格系統(tǒng)

1、概念

將父級可用寬度(content)均分為12等份

2、列比

• 超小屏幕：.col-xs-*
• 小屏幕：.col-sm-*
• 中等屏幕：.col-md-*
• 大屏幕：.col-lg-*

v-hint：只設(shè)置小屏列比會影響大屏列比；只設(shè)置大屏列比小屏?xí)r會撐滿屏幕

3、行

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

4、列偏移

• 超小屏幕：.col-xs-offset-*
• 小屏幕：.col-sm-offset-*
• 中等屏幕：.col-md-offset-*
• 大屏幕：.col-lg-offset-*

六、輔助類

1、 情境背景色

<p class="bg-primary">...</p>
<p class="bg-success">...</p>
<p class="bg-info">...</p>
<p class="bg-warning">...</p>
<p class="bg-danger">...</p>

2、快速浮動

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

3、快速清浮動

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

4、顯隱

<div class="show">...</div>
<div class="hidden">...</div>

七、字體圖標(biāo)

<i class="glyphicon glyphicon-*"></i>

八、組件