前端框架Bootstrap

bootstrap框架

    内部提供了很多漂亮的标签样式和功能 我们只需要CV使用即可

 bootstrap版本

   推荐使用v3版本

 Bootstrap v3 中文文档 · Bootstrap 是最受欢迎的 HTML、CSS 和 JavaScript 框架，用于开发响应式布局、移动设备优先的 WEB 项目。 | Bootstrap 中文网

 

基本使用

    必须先导入后使用
      1.本地导入
    2.cdn导入
        bootcdn
     bootstrap需要使用jQuery来实现动态效果

文件组成

bootstrap需要导入两个文件
      一个是css文件
      一个是js文件

使用前端框架 几乎不需要自己写css 只需要写class即可

布局容器

class = 'container'                      两边有留白
class = 'container-fluid'              没有留白

栅格系统

class = 'row'  默认开设一行均分12份
class = 'col-md-n'  指定需要几份(电脑屏幕)
    # 栅格参数可以做到响应式布局xs sm md lg...

如果一行十二份用不完 可以调整位置
    col-md-offset-3

表格样式

参考官网即可 有样式有源码 拷贝使用即可
# 表格样式
class="table table-hover table-striped table-bordered"

# 单元格颜色
class="active"
class="success"
class="warning"
class="danger"
class="info"

表单样式

.pull-left               左浮
.pull-right            右浮

class='form-control'
针对radio和checkbox不能加!!!

按钮与图片

按钮样式

class = 'btn'

按钮颜色

<a href="" class="btn btn-info">言多必失</a>
<a href="" class="btn btn-danger">言多必失</a>
<a href="" class="btn btn-warning">言多必失</a>
<a href="" class="btn btn-primary">言多必失</a>
<a href="" class="btn btn-success">言多必失</a>

按钮尺寸

<a href="" class="btn btn-success btn-sm">言多必失</a>
<a href="" class="btn btn-success btn-lg">言多必失</a>
<a href="" class="btn btn-success btn-block">言多必失</a>

图标样式

<span class="glyphicon glyphicon-user"></span>

更多图标 >>>  http://www.fontawesome.com.cn/

尤其是前端框架  几乎都是直接看官网拷贝样式即可