bootstrap响应式设计简单实践。
首先需要熟悉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响应式设计简单实践。的更多相关文章
- Bootstrap 响应式设计
本教程讲解如何在网页布局中应用响应式设计.在课程中,您将学到响应式 Web 设计.随着移动设备的普及,如何让用户通过移动设备浏览您的网站获得良好的视觉效果,已经是一个不可避免的问题了.响应式 Web ...
- bootstrap响应式布局简单实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...
- HTML5实践 -- 使用CSS3 Media Queries实现响应式设计
CSS3 Media用法介绍:http://www.w3cplus.com/content/css3-media-queries 转载请注明原创地址:http://www.cnblogs.com/so ...
- paip.自适应网页设计 跟 响应式 设计的区别跟原理and实践总结
paip.自适应网页设计 跟 响应式 设计的区别跟原理and实践总结 响应式Web设计(Responsive Web design)的理念是: 1 #-----------自适应布局VS响应式布局 2 ...
- bootstrap响应式网页设计的9条基本原则!
bootstrap响应式网页设计是针对多屏幕问题的一个很好的解决方案,但从印刷的视角来看有点困难.没有固定的页面尺寸,没有毫米或英寸,没有任何的物理限制,无从下手. 为了desktop和mobile单 ...
- Windows10 UWP开发 - 响应式设计
Windows10 UWP开发 - 响应式设计 本篇随笔与大家简单讨论一下在开发适配不同分辨率.宽高比的Windows10 Universal App布局时的可行方式与小技巧.经验均从实践中总结, ...
- CSS 响应式设计
响应式设计是指在不同分辨率的设备中,网页布局可以自适应的调整.这种弹性化的布局使网站在不同设备中的布局都比较合理,可以为不同终端的用户提供更加舒适的界面和更好的用户体验,其根本理念是使原本 PC 上的 ...
- CSS3知识点整理(五)----响应式设计及其他属性
介绍Media Queries与Responsive设计以及外轮廓属性.resize属性.CSS3生成内容等 学会如何使用CSS3中的Media Queries模块来让一个页面适应不同的终端(或屏幕尺 ...
- css响应式设计
响应式设计是指在不同分辨率的设备中,网页布局可以自适应的调整.这种弹性化的布局使网站在不同设备中的布局都比较合理,可以为不同终端的用户提供更加舒适的界面和更好的用户体验,其根本理念是使原本 PC 上的 ...
随机推荐
- 【leetcode73】经典算法-Guess Number Higher or Lower
题目描述: 从1-n中,随便的拿出一个数字,你来猜测. 提示 提供一个guess(int num)的api,针对猜测的数字,返回三个数值.0,-1,1 0;猜中返回num -1:比猜测的数值小 1:比 ...
- python检测变量是否有定义(即使用前检查是否定义好)
http://www.cnblogs.com/starspace/archive/2008/12/03/1347007.html 第一种方法: 'var' in locals().keys() 第二种 ...
- 小强的HTML5移动开发之路(3)——HTML5与HTML4比较
来自:http://blog.csdn.net/dawanganban/article/details/17652873 在前面介绍了HTML5的新特性,新标签的使用,智能表单设计,引入多媒体对象,C ...
- Activity堆栈管理
task就好像是能包含很多activity的栈. 默认情况下,一个activity启动另外一个activity时,两个activity是放在同一个task栈中的,第二个activity压入第一个 ac ...
- hadoop 部署和调优
一.集群安装 1.在所有的机器上建立相同的用户名,如:hadoop. $adduser hadoop $passwd hadoop 2.在/etc/hosts中添加机器名和IP hadoop@hado ...
- STL常用遍历算法for_each和transform的比较
for_each()和transform()算法比较 1)STL 算法 – 修改性算法 for_each() copy() copy_backward() transform() merge ...
- Unity3D学习笔记(一)GUI控件的调用
GUI控件:1.在Start中初始化,在OnGUI中调整.2.公有变量才会出现在Inspector面板.3.GUI控件的初始化和处理在OnGUI内完成.4.JavaScript的中文为UTF-8编码可 ...
- 开源,免费和跨平台 - MVP ComCamp 2015 KEYNOTE
2015年1月31日,作为KEYNOTE演讲嘉宾,我和来自全国各地的开发人员分享了作为一名MVP的一些体会. Keynote – Open Source, Free Tools and Cross P ...
- Makefile的obj-y 和 obj-m
目标定义是Kbuild Makefile的主要部分,也是核心部分.主要是定义了要编 译的文件,所有的选项,以及到哪些子目录去执行递归操作. 最简单的Kbuild makefile 只包含一行: 例子: ...
- 虚拟机linux挂载光盘显示:mount: you must specify the filesystem type
虚拟机内 linux 挂载光盘显示:mount: you must specify the filesystem type 今天在虚拟机上挂载镜像文件时提示: 初步断定原因有2: 1.在卸载光盘时使用 ...