Bootstrap3 栅格系统-媒体查询
在栅格系统中,我们在 Less 文件中使用以下媒体查询(media query)来创建关键的分界点阈值。
/* 超小屏幕(手机,小于 768px) */
/* 没有任何媒体查询相关的代码,因为这在 Bootstrap 中是默认的( Bootstrap 是移动设备优先) */
/* 小屏幕(平板,大于等于 768px) */
@media (min-width: @screen-sm-min) { ... }
/* 中等屏幕(桌面显示器,大于等于 992px) */
@media (min-width: @screen-md-min) { ... }
/* 大屏幕(大桌面显示器,大于等于 1200px) */
@media (min-width: @screen-lg-min) { ... }
我们偶尔也会在媒体查询代码中包含 max-width 从而将 CSS 的影响限制在更小范围的屏幕大小之内。
@media (max-width: @screen-xs-max) { ... }
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... }
@media (min-width: @screen-lg-min) { ... }
—–下面有个“顶”字,你懂得O(∩_∩)O哈哈~
—–乐于分享,共同进步!
—–更多文章请看:http://blog.csdn.net/duruiqi_fx
Bootstrap3 栅格系统-媒体查询的更多相关文章
- Bootstrap栅格系统&媒体查询
bootstrap中几乎所有元素的盒子模型为IE下的盒模型,通俗点说就是box-sizing设置成了:border-box. 栅格系统 媒体查询 媒体查询是非常别致的"有条件的 CSS ...
- Bootstrap3 栅格系统-Less mixin 和变量
除了用于快速布局的预定义栅格类,Bootstrap 还包含了一组 Less 变量和 mixin 用于帮你生成简单.语义化的布局. 变量 通过变量来定义列数.槽(gutter)宽.媒体查询阈值(用于确定 ...
- BootStrap3栅格系统与布局
栅格系统与布局 Use our powerful mobile-first flexbox grid to build layouts of all shapes and sizes thanks t ...
- Bootstrap3 栅格系统-嵌套列
为了使用内置的栅格系统将内容再次嵌套,可以通过添加一个新的 .row 元素和一系列 .col-sm-* 元素到已经存在的 .col-sm-* 元素内.被嵌套的行(row)所包含的列(column)的个 ...
- Bootstrap3 栅格系统-实例:从堆叠到水平排列
使用单一的一组 .col-md-* 栅格类,就可以创建一个基本的栅格系统,在手机和平板设备上一开始是堆叠在一起的(超小屏幕到小屏幕这一范围),在桌面(中等)屏幕设备上变为水平排列.所有"列( ...
- Bootstrap3 栅格系统-栅格参数
通过下表可以详细查看 Bootstrap 的栅格系统是如何在多种屏幕设备上工作的. -–下面有个"顶"字,你懂得O(∩_∩)O哈哈~ -–乐于分享,共同进步! -–更多文章请看:h ...
- Bootstrap3 栅格系统-简介
Bootstrap 提供了一套响应式.移动设备优先的流式栅格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列.它包含了易于使用的预定义类,还有强大的mixin 用于生成更具 ...
- Bootstrap3 栅格系统-列排序
通过使用 .col-md-push-* 和 .col-md-pull-* 类就可以很容易的改变列(column)的顺序. <div class="row"> <d ...
- Bootstrap3 栅格系统-列偏移
使用 .col-md-offset-* 类可以将列向右侧偏移.这些类实际是通过使用 * 选择器为当前元素增加了左侧的边距(margin).例如,.col-md-offset-4 类将 .col-md- ...
随机推荐
- [转]scrapy中的logging
logging模块是Python提供的自己的程序日志记录模块. 在大型软件使用过程中,出现的错误有时候很难进行重现,因此需要通过分析日志来确认错误位置,这也是写程序时要使用日志的最重要的原因. scr ...
- github的简单使用
查了好多入门教程(图文并茂可以了解一些基本步骤),感觉逻辑欠缺,(很多东西跟着教程了解会用了,不了解逻辑,只是会了这一个,其他的还是很蒙),来一起理一理把 1.第一步下载并注册(这个自己解决) 2.用 ...
- Java中对象比较的方法
class Person{ private String name; private int age; public Person(String name,int age){ this.name = ...
- 从零开始搭建支持http2的web服务
前段时间开始,公司各项业务开始陆续接入http2,关于http2的优点与所适用的场景网上有很多的文档可以查阅,这里我主要是总结分享一下如何从0到1搭建http2服务. 这里先说明一下,要完成http2 ...
- [USACO 08JAN]Haybale Guessing
Description The cows, who always have an inferiority complex about their intelligence, have a new gu ...
- [HNOI2008]玩具装箱TOY
题目描述 P教授要去看奥运,但是他舍不下他的玩具,于是他决定把所有的玩具运到北京.他使用自己的压缩器进行压缩,其可以将任意物品变成一堆,再放到一种特殊的一维容器中.P教授有编号为1...N的N件玩具, ...
- [USACO17JAN]Promotion Counting晋升者计数
题目描述 奶牛们又一次试图创建一家创业公司,还是没有从过去的经验中吸取教训--牛是可怕的管理者! 为了方便,把奶牛从 1 \cdots N(1 \leq N \leq 100, 000)1⋯N(1≤N ...
- *hdu 5536(字典树的运用)
Input The first line of input contains an integer T indicating the total number of test cases. The f ...
- [BZOJ]1069 最大土地面积(SCOI2007)
计算几何经典题,贴板子. Description 在某块平面土地上有N个点,你可以选择其中的任意四个点,将这片土地围起来,当然,你希望这四个点围成的多边形面积最大. Input 第1行一个正整数N,接 ...
- 2017ACM/ICPC广西邀请赛-重现赛 1004.Covering
Problem Description Bob's school has a big playground, boys and girls always play games here after s ...