bootstrap的一些要点个人总结

响应式兼bootstrap教程

• 习惯预定义css：既预先定义class样式，之后在元素上直接添加class就可以实现给元素附加样式

• 习惯一个元素定义多个class：<div class="btn btn-lg"></div>

• 习惯用html5标签代表div+class

• col-12栅格布局：把一行化成12等分

• 适应不同屏幕：利用媒体查询@media{}，不同屏幕的分别使用-md-，-lg-，-sm-，-xs-来进行栅格布局

• 利用hidden-来隐藏在不同屏幕上不需要显示的部分

• 栅格布局的嵌套注意列之间的距离

• 兼容ie：

  • 利用html5v.js来识别html5标签
  • 使用另外一个js去兼容bootstrap控件

• 注意jQuery版本，高版本会出现bootstrap控件无效的情况

• 利用相对单位rem和%来代替绝对单位px

• 注意relative和absolute定位在手机端的表现

• 注意不要轻易设置图片的高度防止在手机端图片变形

• 使用ul时，注意li元素的高度必须保持一致，防止布局出现塌陷

• 适合响应式布局的网站类型：列表型网站：个人博客，新闻网站等

• 不适合响应式布局的网站类型：要求手机端和pc端表现方式基本一致；跨全屏展示网站（电子产品发布网站）等

• 难点

  • 导航:哪些是下拉菜单的必要html元素和控件属性
  • 习惯大量用于布局的嵌套标签
  • 轮播预先定义了class，所以后台循环调用会有一些问题
  • bootstrap提供了一套图标：GLYPHICONS；但是注意编码的问题，这是用svg制作的
  • 模态框：点击弹出一个遮罩，利用这个可以制作弹出视频及其他提示，但是注意，bootstrap的弹出层只是层级的变化，点击关闭后，实际的弹出层还是在的，在制作弹出视频播放时，关闭弹出层并不能关闭视频，需要手动写js关闭视频
  • 滚动监控器:侧边栏常用