BootStrap
1. BootStrap的简介
概念:web前端的框架
功能:
- 定义了很多css样式和js插件,使编码简洁
- 响应式布局,同一套页面可以基于不同的分辨率设备显示不同布局
使用步骤
- 下载好BootStrap文件
- 将
css
,font
,js
文件夹复制粘贴到项目 - 创建html页面,引入必要的资源文件
bootstrap-3.3.7-dist文件夹
,jquery-3.2.1.min.js
响应式布局
-
同一套页面可以兼容不同分辨率的设备
-
实现:依赖栅格系统:将一行平均分为12个格子,可以指定元素占几个格子
-
实现步骤:
- 定义容器:
container
:两边留白container-fluid
:每一种设备都是占页面宽度的100%
- 定义行:
row
- 定义元素:指定该元素在不同设备上,所占的格子数目。class样式:
col-设备代号-格子数目
- 设备代号:
- xs:超小屏幕 手机(<768px)
- sm:小屏幕 平板(>=768px)
- md:中等屏幕 桌面显示器(>=992px)
- lg:大屏幕 大桌面显示器(>=1200px)
- 注意:
- 一行中如果格子数目超过12,则超过部分自动换行
- 栅格类属性可以向上兼容。栅格类适用于与屏幕宽度大于或等于分界点大小的设备
- 如果真实设备宽度小于了设置栅格类属性的设备代码的最小值,会一个元素占满一
- 设备代号:
2.CSS样式和JS插件
全局CSS样式:
- 按钮:
class="btn btn-default"
- 图片:
class="img-responsive"
:图片在任意尺寸都在100%
- 表格
- 表单
组件:
- 导航条
- 分页条
插件:
- 轮播图
- 定义容器: