前端之Bootstrap框架
目录
- 前端框架简介
- bootstrap框架
- bootstrap版本
- 基本使用
- 导入的两种方法
- 文件组成
- 框架属性
- 布局容器
- 栅格系统
- 表格样式
- 表格样式
- 单元格颜色
- 表单样式
- 按钮与图片
- 按钮样式
- 按钮颜色
- 按钮尺寸
- 图标样式
前端框架简介
bootstrap框架
]内部提供了很多漂亮的标签样式和功能,前端工程师只需要拷贝使用即可
bootstrap版本
推荐使用v3版本
基本使用
必须先导入后使用
导入的两种方法
- 本地导入
- cdn导入
bootcdn
bootstrap需要使用jQuery来实现动态效果
文件组成
bootstrap需要导入两个文件
一个是css文件
一个是js文件
框架属性
布局容器
class = 'container' 两边有留白
class = 'container-fluid' 没有留白
001
002
003
栅格系统
栅格参数可以做到响应式布局xs sm md lg
class = 'row' 默认开设一行均分12份
class = 'col-md-n' 指定需要几份
如果一行十二份用不完可以调整位置
col-md-offset-3
Title
表格样式
表格样式
Title
姓名
年龄
trump
76
biden
79
单元格颜色
class="active"
class="success"
class="warning"
class="danger"
class="info"
表单样式
.pull-left 左浮
.pull-right 右浮
class='form-control'
注意：针对radio和checkbox不能加
按钮与图片
按钮样式
class = 'btn'
按钮颜色
按钮颜色
按钮颜色
按钮颜色
按钮颜色
按钮颜色
按钮尺寸
按钮尺寸
按钮尺寸
按钮尺寸
图标样式