前端之Bootstrap

前端框架Bootstrap

版本选择建议使用v3版本：<https://v3.bootcss.com/>

在使用Bootstrap的时候所有的页面样式都只需要你通过class来调节即可

### 注意

**bootstrap的js代码是依赖于jQuery的，也就意味着你在使用Bootstrap动态效果的时候，一定要导入jQuery**

### 布局容器

<div class="container">
       左右两侧有留白
</div>
<div class="container-fluid">
         左右两侧没有留白
</div>
# 后续在使用bootstrap做页面的时候 上来先写一个div class="container",之后在div内部书写页面

### 栅格系统

<div class="row"></div>
写一个row就是将所在的区域划分成12份
<div class="col-md-6 ">  获取你所要的份数
# 在使用bootstrap的时候 脑子里面一定要做12的加减法

### 栅格参数

.col-xs-   .col-sm-   .col-md-   .col-lg-
# 针对不同的显示器 bootstrap会自动选择对应的参数
# 如果你想要兼容所有的显示器 你就全部加上即可
# 在一行如何移动位置
<div class="col-md-8 c1 col-md-offset-2"></div>

### 表格

<table class="table table-hover table-striped table-bordered">
<tr class="success">
            <td>1</td>
            <td>jason</td>
            <td>123</td>
            <td>study</td>
</tr>
<tr class="active">...</tr>  灰色
<tr class="success">...</tr> 绿色
<tr class="warning">...</tr> 黄色
<tr class="danger">...</tr>  红色
<tr class="info">...</tr>    蓝色

### 表单

# 针对表单标签 加样式就用form-control
   class="form-control"

<input type="checkbox">222
<input type="radio">333
checkbox和radio我们一般不会给它加form-control，直接使用原生的即可

# 针对报错信息 可以加has-error（input的父标签加） input框变红色
<p class="has-error">
   username:
  <input type="text" class="form-control">
</p>

### 按钮

<a href="" class="btn btn-primary">点我</a> 蓝色
<button class="btn btn-danger">按我</button> 红色
<button class="btn btn-default">按我</button> 白色
<button class="btn btn-success">按我</button> 绿色
<button class="btn btn-info">按我</button> 浅蓝色
<button class="btn btn-warning">按我</button> 黄色
<button class="btn btn-warning btn-lg">按我</button>  大
<button class="btn btn-warning btn-sm">按我</button>  中
<button class="btn btn-warning btn-xs">按我</button>  小
<input type="submit" class="btn btn-primary btn-block">  
通过给按钮添加 .btn-block 类可以将其拉伸至父元素100%的宽度，而且按钮也变为了块级（block）元素。

### 导航条

<nav class="navbar navbar-inverse"> 黑色的
<nav class="navbar navbar-default"> 白色的

### 弹框

推荐使用：https://lipis.github.io/bootstrap-sweetalert/

swal('你还好吗?')
undefined
swal('你还好吗?')
undefined
swal('你还好吗?','我不好，想你了!')
undefined
swal('你还好吗?','我不好，想你了!','success') 对勾样式
undefined
swal('你还好吗?','我不好，想你了!','warning')  感叹号
undefined
swal('你还好吗?','我不好，想你了!','error') 叉号
undefined
swal('你还好吗?','我不好，想你了!','info')  蓝色感叹号
undefined