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 上的 ...
随机推荐
- android 中List转换String,String转换List 改进版本
原来博客地址http://blog.csdn.net/qq7342272/article/details/6830907 使用原作者贴的代码不是很好用,不能正常运行,所以我稍微改进了一下,特来分享给大 ...
- LINUX0.11 内核阅读笔记
一.源码目录 图1 二.系统总体流程: 系统从boot开始动作,把内核从启动盘装到正确的位置,进行一些基本的初始化,如检测内存,保护模式相关,建立页目录和内存页表,GDT表,IDT表.然后进入main ...
- Cocos2D:塔防游戏制作之旅(十四)
塔之战:炮塔的攻击 炮塔就位了?检查.敌人前进中?再次检查 - 它们看起来就是如此!看起来到了击溃这些家伙的时候了!这里我们将智能置入炮塔的代码中去. 每一个炮塔检查是否有敌人在其攻击范围.(炮塔一次 ...
- Visual Studio2010 安装pthreads2.9.1
本人最近要利用多线程进行编程,前面一篇博文讲解的是利用VC自带的一些函数库,这里重点探讨一下如何配置pthreads2.9.1的Visual Studio2010的环境.本文分为两个部分,第一部分给出 ...
- 四大组件之ContentProvider小结
总结提高,与君共勉 1.什么是Content Provider 内容提供器( Content Provider)主要用于在不同的应用程序之间实现数据共享的功能,提供了一套完整的机制,允许一个程序访问另 ...
- 使用js控制表单重复提交(1加锁,2事件方式,3 EasyUI中解决表单重复提交)
方法一. var flag = true; $(function() { $("#interested").click(function() { beInterested(); } ...
- ANDROID 中设计模式的采用--创建型模式
所谓模式就是在某一情景下解决某个问题的固定解决方案. 所有的创建型模式都是用作对象的创建或实例化的解决方案. 1 简单工厂模式 创建对象的最简单方法是使用new来创建一个对象,如果只创建一种固定 ...
- Android 的媒体路由功能应用与框架解析
一.功能描述 Android 的媒体路由API被设计用来允许多种媒体(视频.音乐.图片)在与ANDROID设备连接(无线或有线)的辅助设备(如电视.立体声.家庭戏院系统.音乐播放机)上显示和播放,使用 ...
- /etc/fstab文件分析(第二版)
/etc/fstab文件分析 前面说新建的分区在系统重启之后就会失效,要想永久生效,需要将其写入/etc/fstab文件 一./etc/fstab文件格式:6个组成部分 物理分区名/卷标 挂载点 文件 ...
- D-BUS详细分析
转:http://blog.csdn.net/yclzh0522/article/details/7090599 一.概述 官方网站:http://www.freedesktop.org/wiki/S ...