Bootstrap的优势
- 流媒体网格布局
- 响应式设计
- 自定义表单元素
- 页面排版
- JavaScript交互性
- 跨浏览器兼容性
先来看一下官方给出的一个基础模板
1 | <!DOCTYPE html> |
下面列出其中几个关键点
关于IE
1 | <meta http-equiv="X-UA-Compatible" content="IE=edge"> |
- 此属性为文档兼容模式声明,表示如果在IE浏览器下则使用最新的标准渲染当前文档
视口(viewport)
1 | <meta name="viewport" content="width=device-width, initial-scale=1"> |
- 视口的作用:在移动浏览器中,当页面宽度超出设备,浏览器内部虚拟的一个页面容器,将页面容器缩放到设备这么大,然后展示
- 目前大多数手机浏览器的视口(承载页面的容器)宽度都是980;
- 视口的宽度可以通过meta标签设置
- 此属性为移动端页面视口设置,当前值表示在移动端页面的宽度为设备的宽度,并且不缩放(缩放级别为1)
- width:视口的宽度
- initial-scale:初始化缩放
- user-scalable:是否允许用户自行缩放(值:yes/no; 1/0)
- minimum-scale:最小缩放,一般设置了用户不允许缩放,就没必要设置最小和最大缩放
- maximum-scale:最大缩放
条件注释
1 | <!--[if lt IE 9]> |
- 条件注释的作用就是当判断条件满足时,就会执行注释中的HTML代码,不满足时会当做注释忽略掉
第三方依赖
-
Bootstrap框架中的所有JS组件都依赖于jQuery实现
-
让低版本浏览器可以识别HTML5的新标签,如header、footer、section等
-
让低版本浏览器可以支持CSS媒体查询功能
mediaquery
1 | @media (判断条件(针对于当前窗口的判断)){ |
- 当使用min-width作为判断条件一定要从小到大,其原因是CSS从上往下执行
基础CSS样式
- 概要
- 预置排版样式
- 统一预制标签样式
- 按钮样式
- 表格样式
- 表单样式
- 图片样式
- 辅助工具类
- 代码样式
- 栅格系统
- xs : 超小屏幕 手机 (<768px)
- sm : 小屏幕 平板 (≥768px)
- md : 中等屏幕 桌面显示器 (≥992px)
- lg : 大屏幕 大桌面显示器 (≥1200px)
- 响应式工具类
- hidden-xx : 在某种屏幕下隐藏
- visible-xx : 在某种屏幕尺寸下显示
预置界面组件
JavaScript插件
JavaScript插件的依赖情况
如何使用Javascript插件
内置组件
- 模态对话框
- 下拉菜单
- 滚动监听
- 标签页
- 工具提示
- 弹出框
- 警告框
- 按钮
- 折叠面板
- 轮播图
- 吸顶效果
- data-spy=”affix”
- data-offset-top=”什么位置出现”
- data-offset-bottom=”什么位置消失”