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- ...
随机推荐
- 【Jhipster】升级/修改 数据库结构
前提 1.jhipster环境,jdk1.8,yeoman,node.js安装环境参考官方wiki,环境问题参考我的博客,如果出现注册中心空白页,请参考博客 2.首先需要启动jhipster基础服务, ...
- jQuery获取浏览器参数
当我们需要获取浏览器参数是,我们可以使用jQuery进行获取,具体方法如下: 例如获取参数的地址:http://www.test.com?a="111"&b="2 ...
- Spring之事务管理
事务管理对于企业应用至关重要.它保证了用户的每一次操作都是可靠的,即便出现了异常的访问情况,也不至于破坏后台数据的完整性. 就像银行的自助取款机,通常都能正常为客户服务,但是也难免遇到 ...
- 创建第一个Django项目
第一个Django项目 命令行下使用如下命令创建一个名为"mysite"的Django项目: django-admin startproject mysite 这将会在当前位置创建 ...
- 学习React系列(九)——高阶函数
定义:高阶组件就是一个函数,且该函数接收一个组件作为参数,并返回一个新的组件. (上一篇已经说过了高阶组件可以用来解决交叉问题) 一.不要改变原始组件,使用组合 class A extends Rea ...
- amd屏幕亮度无法调整,无法调节亮度
1:CMD+R键打开"运行",输入"regedit"进入注册表 2:搜索"KMD_EnableBrightnessInterface2",找 ...
- Go/Python/Erlang编程语言对比分析及示例
本文主要是介绍Go,从语言对比分析的角度切入.之所以选择与Python.Erlang对比,是因为做为高级语言,它们语言特性上有较大的相似性,不过最主要的原因是这几个我比较熟悉. Go的很多语言特性借鉴 ...
- ubuntu14.4 分辨率偏低
最近出了 14.04 LTS,就想安装上玩一玩.还是用 easybcd 从 windows硬盘安装.装完之后,显示效果不好于是做了如下处理: 1. 按下windows键,搜索 "附加驱动&q ...
- [LeetCode] Partition to K Equal Sum Subsets 分割K个等和的子集
Given an array of integers nums and a positive integer k, find whether it's possible to divide this ...
- es6-promise源代码重点难点分析
摘要 vue和axios都可以使用es6-promise来实现f1().then(f2).then(f3)这样的连写形式,es6-promise其实现代浏览器已经支持,无需加载外部文件.由于promi ...