//各类设备的分辨率
/*超小设备(手机,小于768px)*/
/* Bootstrap 中默认情况下没有媒体查询 */
/*超小型设备(小于768px)*/
@media (min-width:@screen-xs-min){...}
/*小型设备(平板电脑,768px起)*/
@media (min-width:@screen-sm-min){...} /*中型设备(台式电脑,992px起)*/
@media (min-width:@screen-md-min){...} /*大型设备(大台式电脑,1200px起)*/
@media (min-width:@screen-lg-min){...}
@media only screen and (max-width:768px){ //意思是在屏幕宽度小于768px时
//这里写想要在小屏幕里实现的样式
}

使用bootsrap时,在想要使用的块元素上添加类如 :

在大型设备显示1/6列、中型设备显示1/3列、小型设备(ipad)显示1/2列、超小型设备显示1列,添加

<div class="col-lg-2 col-md-4 col-sm-6 col-xs-12"></div>

偏移列

大屏幕上使用偏移:.col-md-offset-*类,左外边距增加*列(其中*范围是1-11)

列排序

.col-md-push-* 和 .col-md-pull-* 类,互换两列的顺序

bootstrap 媒体查询的更多相关文章

  1. bootstrap媒体查询

    Bootstrap 中的媒体查询允许您基于视口大小移动.显示并隐藏内容.下面的媒体查询在 LESS 文件中使用,用来创建 Bootstrap 网格系统中的关键的分界点阈值. /* 超小设备(手机,小于 ...

  2. bootstrap媒体查询常用写法

    @media (max-width: 768px) { /*超小屏幕设备 手机*/ } @media (min-width: 768px) and (max-width: 992px) { /*小屏幕 ...

  3. bootstrap 的媒体查询

    有时候需要对bootstap的样式自定义,比如说某个元素的“height”值,要放在与bootstrap媒体查询同步的样式里,才会兼容响应式布局. .container类是bootstrap的官方参考 ...

  4. 前端笔记之移动端&响应式(上)媒体查询&Bootstrap&动画库&zepto&velocity

    一.媒体(介)查询 1.1 基本语法 媒体查询由媒体类型和一个或多个检测媒体特性的条件表达式组成.媒体查询中可用于检测的媒体特性有:width.height和color(等).使用媒体查询可以在不改变 ...

  5. python全栈开发day51-jquery插件、@media媒体查询、移动端单位、Bootstrap框架

    一.昨日内容回顾 技术行业 (1)ajax技术 XMLHttpRequest() <1>创建XMLHttpRequest()对象 <2>检测状态(通过readyState的改变 ...

  6. 前端项目微金所1 - bootstrap模板,Compatible(兼容),Viewport(视口),条件注释,第三方依赖,MediaQuery媒体查询

    前端项目微金所笔记1 基础的bootstrap模板 <!DOCTYPE html> <html lang="en"> <head> <me ...

  7. Bootstrap 3 媒体查询

    可以参考 Bootstrap  的媒体查询,写网站. html: <div class="bootstrap-3-media"> <p>Mobile-Fir ...

  8. Bootstrap 网格系统(Grid System)的工作原理 - 媒体查询

    媒体查询 媒体查询是非常别致的"有条件的 CSS 规则".它只适用于一些基于某些规定条件的 CSS.如果满足那些条件,则应用相应的样式. Bootstrap 中的媒体查询允许您基于 ...

  9. bootstrap在ie8下,兼容媒体查询

    最近使用bootstrap做网站的时候发现,在ie8下的媒体查询一直失效: 后来解决了,做如下记录: 1.必须运行在服务器下 2.hack 条件语法,如下: <!--[if lte ie 9]& ...

随机推荐

  1. 【SpringMVC学习01】宏观上把握SpringMVC框架

    springmvc是一个基于mvc的web框架,是spring框架的一个模块,所以springmvc和spring无需通过中间整合层进行整合.我们先来看下spring的一个架构模型,看springmv ...

  2. C# DateTime的11种构造函数 [Abp 源码分析]十五、自动审计记录 .Net 登陆的时候添加验证码 使用Topshelf开发Windows服务、记录日志 日常杂记——C#验证码 c#_生成图片式验证码 C# 利用SharpZipLib生成压缩包 Sql2012如何将远程服务器数据库及表、表结构、表数据导入本地数据库

    C# DateTime的11种构造函数   别的也不多说没直接贴代码 using System; using System.Collections.Generic; using System.Glob ...

  3. 工作总结 .ToString("000000")

    ; ");//000123 指定格式 Console.WriteLine(ssp); ; ");//123456789 超过了返回原值 Console.WriteLine(ss);

  4. Sql學習資源

    http://blog.csdn.net/wltica/article/category/1324738/1 SQL Server 整体方案系列: 1. SQL Server 数据归档方案 2. SQ ...

  5. 如何解决MySQL连接超时关闭

    最近做网站有一个站要用到WEB网页采集器功能,当一个PHP脚本在请求URL的时候,可能这个被请求的网页非常慢慢,超过了mysql的 wait-timeout时间,然后当网页内容被抓回来后,准备插入到M ...

  6. hbase能否代替mysql

    代志远早年就职网易研究院从事MapReduce与DFS系统的自主研发,后增加支付宝数据平台负责Hadoop与HBase体系的架构设计与二次研发,支付宝流计算与分布式搜索系统的设计和研发,后成为支付宝海 ...

  7. 213. String Compression【easy】

    Implement a method to perform basic string compression using the counts of repeated characters. For ...

  8. WEB前端面试题 分别使用2个、3个、5个DIV画出一个大的红十字

    <!DOCTYPE html> <!--两个DIV--> <html> <body> <div style="width:100%;he ...

  9. 在Django中使用F()函数

    F()允许Django在未实际链接数据的情况下具有对数据库字段的值的引用.通常情况下我们在更新数据时需要先从数据库里将原数据取出后方在内存里,然后编辑某些属性,最后提交.例如这样 # Tintin f ...

  10. spring mvc RedirectAttributes

    org.springframework.web.servlet.mvc.support.RedirectAttributes org.springframework.web.servlet.mvc.s ...