1. BootStrap概念
- 一个前端开发的框架,基于HTML、CSS、JavaScript。
- 定义了很多的CSS样式和js插件
- 响应式布局:Bootstrap 的响应式 CSS 能够自适应于台式机、平板电脑和手机。
2.快速入门
- 下载:https://v3.bootcss.com/getting-started/#download
- 在项目中导入bootstrap文件
- 创建HTML页面,引入资源文件
3.响应式布局
实现:依赖于栅格系统,每一行平均分成12个各自,可以指定元素占几个
步骤
定义容器
容器分类:
- container
- container-fluid:100%宽度
定义行。样式:row
定义元素。样式:col-设备代号-格子数目
超小屏幕 手机 (<768px) 小屏幕 平板 (≥768px) 中等屏幕 桌面显示器 (≥992px) 大屏幕 大桌面显示器 (≥1200px) .col-xs-
.col-sm-
.col-md-
.col-lg-
注意点
- 一行中如果格子数目超过12,则超出部分自动换行、
- 栅格类属性可以向上兼容。栅格类适用与屏幕宽度大于或等于分界点大小的设备
- 如果真实设备宽度小于设备栅格类属性的设备代码的最小值,会一个元素占满一整行
1 |
|
4.css样式和js插件
css样式
- 按钮:class=”btn btn-default”
- 图片:class=”img-responsive” 在任意设备中图片宽度都是100%
- 表格
- 表单
组件
导航条
插件