bootstrap应用（bootstrap application）

bootstrap

官网：https://getbootstrap.com/

中文官网：https://www.bootcss.com/

github地址：https://github.com/twbs/bootstrap

npm下载： npm install bootstrap@3;

下载地址：node_modules\bootstrap\dist\css

npm引用：

import 'bootstrap/dist/css/bootstrap.min.css'

import 'bootstrap/dist/js/bootstrap.min.js'

注：js的引用依赖于jquery，需要先引用jquery。

网格系统：

bootstrap共将页面分成12份，每一列也可用col 1-12来表示这一列占多少份。

使用方式：

container/container-fluid > row > col-type-number。

注：1.row的直接子元素必须是col

2.lg: >1200

md: >992

sm: >768

xs: >0

实例1：

6个div一排，每个div宽度相等。

<div class="container">

<div class="row">

<div class="col-xs-2">1</div>

<div class="col-xs-2">2</div>

<div class="col-xs-2">3</div>

<div class="col-xs-2">4</div>

<div class="col-xs-2">5</div>

<div class="col-xs-2">6</div>

</div>

</div>

bootstrap共将页面分成12份，6个一排，每个占2份。由于所有尺寸都占2分，用最小的col-xs

例2：

12个div,大于1200时4个一排，992-1200时3个一排，768到992两个一排，小于768一个一排。

.col-lg-3.col-md-4.col-sm-6

列偏移

.col-type-offset-number

如：向左偏移1格 <div class="col-lg-offset-1">1</div>

注：改变的是margin-left,会影响后面的元素

列推拉

.col-type-push-number // 向右推

.col-type-pull-number // 向左拉

注：改变relative的left和right,不影响后面元素。

显示隐藏

visible-type

hidden-type

如：visivle-md

hidden-lg