响应式兼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关闭视频
- 滚动监控器:侧边栏常用
网友评论