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- ...
随机推荐
- Entry
Entry(单行输入框)用于获取用户输入的文本. Entry组件仅允许输入一行文本,如果输入过长,那么内容将被滚动,意味着字符串不能被全部看到. from tkinter import * maste ...
- [LeetCode] Subarray Product Less Than K 子数组乘积小于K
Your are given an array of positive integers nums. Count and print the number of (contiguous) subarr ...
- [LeetCode] Minimum Index Sum of Two Lists 两个表单的最小坐标和
Suppose Andy and Doris want to choose a restaurant for dinner, and they both have a list of favorite ...
- Who do you want to be bad? (谁会是坏人?)人工智能机器小爱的问话
人工智能的语言理解一直是一个千古谜团. 正如人工智能机器小爱(A.L.I.C.E)的问话:“Who do you want to be bad ?(谁会是坏人?)” 纵观世界上的140多种语言,汉语是 ...
- [HNOI 2011]数矩形
Description 题库链接 给出平面上 \(n\) 个点,选出四个点作为矩形顶点.求出矩形最大面积. \(1\leq n\leq 1500\) Solution 转载自 Z-Y-Y-S dark ...
- [ZJOI 2014]力
Description 给出n个数qi,给出Fj的定义如下: $$F_j = \sum_{i<j}\frac{q_i q_j}{(i-j)^2 }-\sum_{i>j}\frac{q_i ...
- ●BZOJ 3529 [Sdoi2014]数表
题链: http://www.lydsy.com/JudgeOnline/problem.php?id=3529 题解: 莫比乌斯反演. 按题目的意思,令$f(i)$表示i的所有约数的和,就是要求: ...
- [BZOJ]4200: [Noi2015]小园丁与老司机
Time Limit: 20 Sec Memory Limit: 512 MBSec Special Judge Description 小园丁 Mr. S 负责看管一片田野,田野可以看作一个二维 ...
- 2015 多校联赛 ——HDU5319(模拟)
Painter Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/65536 K (Java/Others) Total Su ...
- [BZOJ]1095 Hide捉迷藏(ZJOI2007)
一道神题,两种神做法. Description 捉迷藏 Jiajia和Wind是一对恩爱的夫妻,并且他们有很多孩子.某天,Jiajia.Wind和孩子们决定在家里玩捉迷藏游戏.他们的家很大且构造很奇特 ...