美文网首页我爱编程
bootstrap的一些要点个人总结

bootstrap的一些要点个人总结

作者: null_su | 来源:发表于2017-07-16 00:02 被阅读0次

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

    相关文章

      网友评论

        本文标题:bootstrap的一些要点个人总结

        本文链接:https://www.haomeiwen.com/subject/kdzzhxtx.html