首先需要熟悉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. 【leetcode76】Intersection of Two Arrays II

    题目描述: 给定两个数组求他们的公共部分,输出形式是数组,相同的元素累计计数 例如: nums1 = [1, 2, 2, 1], nums2 = [2, 2], return [2]. 原文描述: G ...

  2. 用 boost::multi_index 管理玩家

    用 boost::multi_index 管理玩家(金庆的专栏)网游服务器上的玩家集合需要多种索引:如用ID查找,角色名查找, 用登录时分配的会话ID查找.用boost::multi_index进行玩 ...

  3. VS2010中NET4项目中使用LOG4NET办法

    两年以前项目中是用的log4net.dll是net2.0环境下面的,最近在官网http://logging.apache.org/log4net/download_log4net.cgi找到了net4 ...

  4. XML 处理利器 : XStream

    XStream 概述      XStream 是一套简洁易用的开发类库,用于将Java对象序列化为XML或者将XML反序列化为JAVA对象,是JAVA对象和XML之间一个双向转换器. 举例     ...

  5. android驱动例子(LED灯控制)

    本例子,讲述在android2.1上完全自已开发一个驱动去控制硬件口并写应用测试该驱动,通过这样一个例子,解析android下的驱动开发流程的应用调用流程,可以说是很好的入门引导 要达到的效果:通过a ...

  6. 使用Ext JS,不要使用页面做组件重用,尽量不要做页面跳转

    今天,有人请教我处理办法,问题是: 一个Grid,选择某条记录后,单击编辑后,弹出编辑窗口(带编辑表单),编辑完成后单击保存按钮保存表单,并关闭窗口,刷新Grid. 这,本来是很简单的,但囿于开发人员 ...

  7. kettle文件自动化部署(shell脚本执行):命令行参数传入

    shell脚本中调用kitchen 和 pan去执行,job和transformation文件.分 windows和 dos系统两种. 举个简单的小例子 shell脚本: export JAVA_HO ...

  8. 主流列式数据库评测:InfiniDB

    ).本文测试的InfiniDB版本是2010年12月20日发布的2.02版,下载文件名分别为InfiniDB64-2.0.2-2.exe 和InfiniDB64-ent-2.0.2-2.exe.安装文 ...

  9. vim多行增加缩进

    http://blog.163.com/clevertanglei900@126/blog/static/11135225920116891750734/ 在Normal Mode下,命令>&g ...

  10. 网站开发进阶(十五)JS基础知识充电站

    JS基础知识充电站 1.javascript alert弹出对话框时确定和取消两个按钮返回值? 用的不是alert对话框,是confirm confirm(str); 参数str:你要说的话或问题: ...