首先需要熟悉Boostrap提供的响应式设施:http://getbootstrap.com/css/#responsive-utilities,BootStrap的响应式设施主要是利用媒体查询对元素的可见性和inline or block显示做变换处理。在mobile屏下面主要做以下几个处理:

1、原先row内行布局的div变成列布局,我一般喜欢以sm(750px)作为基准,所以这一点的实现很简单,在使用col-xx-number的xx一般使用sm即可。

2、在mobile界面下某些影响手机页面显示的琐碎内容直接隐藏掉,如果以sm的750px作为基准,那这些元素的class直接加上hidden-xs 即可

3、某些只需要在mobileWeb下显示的东西需要显示出来,这个需要使用visible-xs-*这个class标签

4、以前纵向布局的需要横向布局,最明显的莫如左侧导航栏,这个东西可以借鉴bootstrap媒体查询的写法写个xs-inline的标签,也可以visible-xs-*的多个标签组合来达到这个目的。

bootstrap响应式设计简单实践。的更多相关文章

  1. Bootstrap 响应式设计

    本教程讲解如何在网页布局中应用响应式设计.在课程中,您将学到响应式 Web 设计.随着移动设备的普及,如何让用户通过移动设备浏览您的网站获得良好的视觉效果,已经是一个不可避免的问题了.响应式 Web ...

  2. bootstrap响应式布局简单实例

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...

  3. HTML5实践 -- 使用CSS3 Media Queries实现响应式设计

    CSS3 Media用法介绍:http://www.w3cplus.com/content/css3-media-queries 转载请注明原创地址:http://www.cnblogs.com/so ...

  4. paip.自适应网页设计 跟 响应式 设计的区别跟原理and实践总结

    paip.自适应网页设计 跟 响应式 设计的区别跟原理and实践总结 响应式Web设计(Responsive Web design)的理念是: 1 #-----------自适应布局VS响应式布局 2 ...

  5. bootstrap响应式网页设计的9条基本原则!

    bootstrap响应式网页设计是针对多屏幕问题的一个很好的解决方案,但从印刷的视角来看有点困难.没有固定的页面尺寸,没有毫米或英寸,没有任何的物理限制,无从下手. 为了desktop和mobile单 ...

  6. Windows10 UWP开发 - 响应式设计

      Windows10 UWP开发 - 响应式设计 本篇随笔与大家简单讨论一下在开发适配不同分辨率.宽高比的Windows10 Universal App布局时的可行方式与小技巧.经验均从实践中总结, ...

  7. CSS 响应式设计

    响应式设计是指在不同分辨率的设备中,网页布局可以自适应的调整.这种弹性化的布局使网站在不同设备中的布局都比较合理,可以为不同终端的用户提供更加舒适的界面和更好的用户体验,其根本理念是使原本 PC 上的 ...

  8. CSS3知识点整理(五)----响应式设计及其他属性

    介绍Media Queries与Responsive设计以及外轮廓属性.resize属性.CSS3生成内容等 学会如何使用CSS3中的Media Queries模块来让一个页面适应不同的终端(或屏幕尺 ...

  9. css响应式设计

    响应式设计是指在不同分辨率的设备中,网页布局可以自适应的调整.这种弹性化的布局使网站在不同设备中的布局都比较合理,可以为不同终端的用户提供更加舒适的界面和更好的用户体验,其根本理念是使原本 PC 上的 ...

随机推荐

  1. Git版本控制:Git高级教程

    http://blog.csdn.net/pipisorry/article/details/50669350 Git有很多命令行参数,使用起来非常方便.可以运行 man git log ,来看一下这 ...

  2. 从JDK源码角度看java并发的原子性如何保证

    JDK源码中,在研究AQS框架时,会发现很多地方都使用了CAS操作,在并发实现中CAS操作必须具备原子性,而且是硬件级别的原子性,java被隔离在硬件之上,明显力不从心,这时为了能直接操作操作系统层面 ...

  3. 【一天一道LeetCode】#88. Merge Sorted Array

    一天一道LeetCode 本系列文章已全部上传至我的github,地址:ZeeCoder's Github 欢迎大家关注我的新浪微博,我的新浪微博 欢迎转载,转载请注明出处 (一)题目 Given t ...

  4. Linux Debugging(二): 熟悉AT&T汇编语言

    没想到<Linux Debugging:使用反汇编理解C++程序函数调用栈>发表了收到了大家的欢迎.但是有网友留言说不熟悉汇编,因此本书列了汇编的基础语法.这些对于我们平时的调试应该是够用 ...

  5. Touch Handling in Cocos2D 3.x(二)

    接受触摸 在Cocos2d 3.0中每一个CCNode和每一个CCNode的子类都可以接收触摸.你只需要开启一个选项.让我们在定制的初始化器里完成它.替换MainScene.m中init方法的代码: ...

  6. Spring AOP 初探

    本文可作为北京尚学堂spring课程的学习笔记 首先谈谈什么是AOP 它能干什么 AOP Aspect Oriented Programming(面向切面的编程) 什么叫面向切面? 就是我们可以动态的 ...

  7. android studio中使用lambda

    环境准备 如果还没有安装Java 8,那么你应该先安装才能使用lambda和stream(译者建议在虚拟机中安装,测试使用). 像NetBeans 和IntelliJ IDEA 一类的工具和IDE就支 ...

  8. Leetcode_112_Path Sum

    本文是在学习中的总结,欢迎转载但请注明出处:http://blog.csdn.net/pistolove/article/details/41910495 Given a binary tree an ...

  9. python调用数据库并查询

    http://blog.csdn.net/pipisorry/article/details/48024795 python调用数据库命令 conn = sqlite3.connect(". ...

  10. MySQL学习笔记_10_MySQL高级操作(下)

    MySQL高级操作(下) 五.MySQL预处理语句 1.设置预处理stmt,传递一个数据作为where的判断条件 prepare stmt from "select * from table ...