Bootstrap 是一個(gè)用于快速開發(fā) Web 應(yīng)用程序和網(wǎng)站的前端框架。Bootstrap 是基于 HTML铸史、CSS授滓、JAVASCRIPT 的。
所有的主流瀏覽器都支持 Bootstrap这吻。
Bootstrap 提供了一套響應(yīng)式吊档、移動設(shè)備優(yōu)先的流式網(wǎng)格系統(tǒng)，隨著屏幕或視口（viewport）尺寸的增加唾糯，系統(tǒng)會自動分為最多12列怠硼。
bootstrap
利用柵格系統(tǒng)（網(wǎng)格系統(tǒng)）來進(jìn)行布局
（1）柵格系統(tǒng) 一般都是寫在 .container 內(nèi)
（2） 行必須放置在 .container class 內(nèi)，以便獲得適當(dāng)?shù)膶R（alignment）和內(nèi)邊距
（padding）
（3）內(nèi)容應(yīng)該放置在列內(nèi)移怯，且唯有列可以是行的直接子元素香璃。
container-fluid 滿屏寬
container 規(guī)定了在不同屏幕分辨率下的最佳內(nèi)容區(qū)域
<div class="container">
<div class="row">
<div class="col-md-3">
<table></table>
</div>
</div>
</div>
網(wǎng)格選項(xiàng)：
| 超小設(shè)備手機(jī)（<768px） | 小型設(shè)備平板電腦（≥768px） | 中型設(shè)備臺式電腦（≥992px） | 大型設(shè)備臺式電腦（≥1200px） |
|---|---|---|---|
| .col-xs- | .col-sm- | .col-md- | .col-lg- |
網(wǎng)格系統(tǒng)四種基本用法：
1.列組合
列組合簡單理解就是更改數(shù)字來合并列 (原則：列總和數(shù)不能超過12)
<div class="container">
<h1>1.列組合</h1>
<div class="row">
<div class="col-md-3">3</div>
<div class="col-md-1">1</div>
<div class="col-md-8">8</div>
</div>
<div class="row">
<div class="col-md-4">4</div>
<div class="col-md-4">4</div>
<div class="col-md-4">4</div>
</div>
<div class="row">
<div class="col-md-6">6</div>
<div class="col-md-6">6</div>
</div>
</div>
2.列偏移
設(shè)置列偏移，讓中間保持空隙舟误，通過 col-md-offset- 來實(shí)現(xiàn)
<div class="container">
<h1>2.列偏移</h1>
<div class="row">
<div class="col-md-4">4</div>
<div class="col-md-2 col-md-offset-4">列向右移動4列的間距</div>
<div class="col-md-2">2</div>
</div>
<div class="row">
<div class="col-md-8">8</div>
<div class="col-md-3 col-md-offset-1">列向右移動1列的間距</div>
</div>
</div>
3.排序
可以把兩個(gè)列交換位置葡秒，push向右移動，pull向左移動
<div class="container">
<h1>3.排序</h1>
<div class="row">
<div class="col-md-3">3</div>
<div class="col-md-3">3</div>
<div class="col-md-4 col-md-push-2">4</div>
</div>
<div class="row">
<div class="col-md-3">3</div>
<div class="col-md-9">9</div>
</div>
<div class="row">
<div class="col-md-3 col-md-push-9">3</div>
<div class="col-md-9 col-md-pull-3">9</div>
</div>
</div>
4.列嵌套
可以嵌套 嵌滿也是12列
<div class="container">
<h1>4.列嵌套</h1>
<div class="row">
<div class="col-md-9">
<div class="col-md-8">1-8</div>
<div class="col-md-4">9-12</div>
</div>
<div class="col-md-3">3</div>
</div>
</div>
