【前端】响应式媒体询问

响应式媒体询问

传播媒介询问

  从 CSS 版本 2
始发,就能够透过媒体类型在 CSS
中收获媒体辅助。借使你已经选用过打字与印刷样式表,那么您或者曾经运用过媒体类型。清单
1 显示了三个演示。

清单 1. 使用媒体类型
<link rel="stylesheet" type="text/css" href="site.css" media="screen" />
<link rel="stylesheet" type="text/css" href="print.css" media="print" />

  在清单 1中,media 属性定义了应该用于钦点每一个媒体类型的样式表:

style=”font-family: "Microsoft YaHei"”>  screen 适用于电脑彩色荧屏。

style=”font-family: "Microsoft YaHei"”>  print 适用于打字与印刷预览方式下查看的内容依然打字与印刷机打字与印刷的剧情。

  

  作为 CSS 3
规范的一有的,能够扩展媒体类型函数,并同意在体制表中使用更纯粹的展现规则。媒体查询 是评估
True 或 False
的一种表达。如若为True,则继续应用样式表。尽管为False,则不能利用样式表。那种回顾逻辑通过表明式变得进一步强大,使您能够更灵活地对特定的铺排性场景使用自定义的显示规则。

 

  媒体询问包涵3个媒体类型,后跟1个或八个反省特定条件(如最小的显示屏宽度)的表明式。样式表中的传播媒介询问看起来如清单
2 中的示例所示。

清单 2. 媒体查询规则
@media all and (min-width: 800px) { ... }

  依照清单第22中学的标记,全体最小水平显示器宽度为
800 像素的显示器(荧屏和打字与印刷等)都应利用如下 CSS
规则。该规则在示范中省略号所在的地点。对于该媒体询问:

  @media
all 是传播媒介类型,也等于说,将此 CSS 应用于拥有媒体类型。

style=”font-family: "Microsoft YaHei"”>   (min-width:800px) 是含有媒体询问的表明式,假诺浏览器的非常小宽度为
800 像素则会报告浏览器只使用下列 CSS。

 

  请小心,在清单 第22中学,能够归纳关键词 all 和 and。在将某个媒体询问利用于全部媒体类型时,会省略 all。前边的 and 也是可选的。

 

  使用简写语法重新编写媒体询问,如清单
3 所示。

清单 3. 简写语法
@media (min-width:800px) { ... }

 

  媒体询问也得以分包复杂表明式。例如,如果您想要创制1个仅在十分的小宽度为
800 像素且最大开间为 1200 像素时应用的体制,则必要服从清单 4
中的规则来做。

清单 4. 复杂表达式
@media (min-width:800px) and (max-width:1200px) { ... }

 

  在您的表明式中,您能够依照本身的喜好利用任意数量的 and 条件。假使你想要增添其他标准化来检查一定的显示屏方向,只需添加另3个 and 关键词,后跟 orientation 媒体询问,如清单
5 所示。

清单 5. and 条件
@media (min-width:800px) and (max-width:1200px) and (orientation:portrait) { ... }

  清单 5中的媒体询问仅在宽窄为 800 到 1200
像素且方向是纵向时才能激活。(经常,方向仅对可以自由转换纵横方式的智能手提式有线话机和平板总括机上是有意义的。)要是内部2个规格为
False,则无从运用媒体询问规则。

 

  and 关键词的反义词是 or 关键词。和 and 一样,这一个规则构成在同步会组成复杂表明式。若是中间有1个尺度为
True,那么任何表达式或分开的五个标准都会为 True,如清单 6 所示。

清单 6. or 关键词
@media (min-width:800px) or (orientation:portrait) { ... }

  如若上涨幅度至少是 800
像素或动向是纵向的,则会选取该规则。

 

  另一个保留在词库中的媒体询问关键词是 not。位于媒体询问的初叶处,not 会忽略结果。换句话说,假设该查询本来在未曾 not 关键词的状态下为
true,那么未来它将为 false。清单 7 突显贰个演示。

清单 7. 使用 not
@media (not min-width:800px) { ... }

  仅从英文意思上了然,清单
7 中代码的意味:当最小宽度不是 800 像素时,会利用下列 CSS
规则。那些示例只是将像素作为媒体询问中的衡量单位,可是度量单位并不只限于像素。您能够选拔其余有效的
CSS 度量单位,比如分米 (cm)、英寸 (in)、分米 (mm) 等。

 

 有用的媒体天性

  媒体过多特点,比如宽度、颜色和网格,您能够在媒体询问中使用它们。对各样大概的传播媒介特性开始展览描述不在本文探究范围内。要统筹响应式网站,只须要通晓一些传播媒介天性:方向、宽度和中度。作为2个简约媒体性子,方向的值能够是 portrait 或 landscape。这一个值适用于具有手提式有线话机或三星平板的用户,使您能够根据三个模样因一向优化内容。当高度超越长度时,则觉得荧屏是纵向方式,当宽度当先高度时,则认为显示屏是横向方式。

 

  清单 8
展现了二个采取 orientation 媒人体模型式查询的示范。

清单 8. orientation 媒体查询
@media (orientation:portrait) { ... }

 

  中度和增长幅度行为10分相似,都补助以 min- 和 max- 为前缀。清单
9 体现了一个可行的传播媒介询问。

清单 9. 高度和宽度媒体查询
@media (min-width:800px) and (min-height:400px) { ... }

 

  即使没有 min- 或 max- 前缀,您还足以应用 width 和 height 媒体性格,如清单
10 所示。

清单 10. 不带 min- 和 max- 前缀
@media (width:800px) and (height:400px) { ... }

  当荧屏正好是
800 像素宽、400 像素高时,能够使用清单 第10中学的媒体询问。现实中,像这样的媒体询问恐怕过于具体而不太有用。检查和测试标准维度是绝超越4/8网站访问者都不容许遇见的三个光景。平时状态下,响应式设计会动用范围来实施荧屏检查和测试。

  作为媒体询问大小范围的接续内容,下一节将研究一些广泛的传播媒介询问,在筹划二个响应式网站时,您恐怕会发觉它们非凡实惠。

 

广泛媒体询问

  因为 Apple
第1回向商场推出了用户智能手提式有线电话机和机械电脑产品,所以下列大多数媒体询问都以基于那一个型号的装置。

如果目标是横向模式智能手机,则使用: @media (min-width: 321px) { ... }
如果目标是纵向模式智能手机,则使用: @media (max-width: 320px) { ... }
如果目标是横向模式 Apple iPad,则使用: @media (orientation: landscape) { ... }
如果目标是纵向模式 iPad,则使用: @media (orientation: portrait) { ... }

 

SASS
中的媒体询问

  SASS
行为中的媒体询问与平常 CSS
中的完全相同,但有2个不一:它们得以嵌套在任何 CSS
规则中。当二个媒体询问嵌套在另多少个 CSS
规则中时,会将规则置于样式表的顶层,如清单 11 所示。

清单 11. 嵌套的媒体查询
#header {
  width: 400px;
  @media (min-width: 800px) {
    width: 100%;
  }
}

  

  清单 1第11中学的示例将编写翻译到清单 12 的代码中。

清单 12. 编译结果
#header {
  width: 400px;
}
@media (min-width: 800px) {
  #header {
    width: 100%;
  }
}

 

公司你的传播媒介询问

  今后,我们早已精通了什么编写媒体询问,是时候考虑选取以一种合乎逻辑的、有社团的办法将媒体询问安顿到您的
CSS
代码中了。鲜明什么协会媒体询问相当的大程度上是一种个人偏好。这一小节将研商三种首要格局的优点和缺点。

  第二个格局是为不相同荧屏大小钦赐完全不一样的样式表。优点是规则能够保留在独立样式表中,这使得彰显逻辑能够掌握地撩拨出来,更便利团队进行珍爱。另三个优势是源代码分支之间的联合变得愈加简单。但优点同时也是欠缺。假若要为各类媒体询问成立单独的样式表,则无从将多少个要素的全数样式表放在同样文件夹的同一职位。当改变1个CSS 中的二个因素时,须要创制四个职位实行查看,那使得网站 CSS
的维护变得尤其劳累。

  第一个办法是在存活体制表中使用媒体询问,该样式表就在概念其他成分样式表的职位的两旁。那种措施的优势是足以将持有因素样式保存在同三个岗位。当在团队方式下工作时,那种做法得以创造更加多源代码合并工作,但那是拥有基于团队的软件开发都能够管理且普遍的一局部。

从未所谓科学或错误方法。您只需选拔最符合您的品种和团伙的章程即可。

 

浏览器协助

  到现行反革命得了,您可能早已相信
CSS 媒体询问是三个精锐的工具,而且想知道如何浏览器协助 CSS
媒体询问。以下是那方面包车型大巴好音讯和坏新闻。

style=”font-family: "Microsoft YaHei"”>好信息是:大部分现代浏览器(蕴涵智能手提式有线话机上的浏览器)都支持CSS 媒体询问。

style=”font-family: "Microsoft YaHei"”>坏新闻是:近来,来自
Redmond 的 Windows® Internet Explorer® 8 浏览器不援救媒体询问。

  对于绝大部分行业内部 Web
开发职员来说,那代表你必要提供贰个消除方案,以便在 Internet Explorer
中帮衬媒体询问。下列化解方案是2个名为
respond.js 的 JavaScript polyfill。

 

带有 respond.js 的 Polyfill

  Respond.js
是三个极小的狠抓 Web 浏览器的 JavaScript 库,使得原本不帮忙 CSS
媒体询问的浏览器能够帮衬它们。该脚本循环遍历页面上的具有 CSS
引用,并采纳媒体询问分析 CSS
规则。然后,该脚本会监察和控制浏览器宽度变化,添加或删除与 CSS
中媒体询问匹配的体裁。最终能够在原先不协理的浏览器上运转媒体询问。

  由于那是一个基于
JavaScript 的解决方案,所以浏览器需求支持JavaScript,以便运营脚本。该脚本只支持创建响应式设计所需的细微和最大width 媒体询问。那并不是适用于具有恐怕CSS 媒体询问的1个代表。

  Respond.js
是你能够采用的层见迭出可用开源媒体询问 polyfills之一。尽管你认为 respond.js
无法满意你的须求,在进展二个细小商讨以往,您就会意识几个代表方案。

 

@media媒体询问判断ipad和华为各版本

  Media
Queries这功用是格外强劲的,他得以让您定制不一致的分辨率和配备,并在不改变内容的情事下,让您创设的web页面在不相同的分辨率和设施下都能展现平常,并且不会因而而丢失样式。

/* 判断ipad */  
@media only screen  
and (min-device-width : 768px)  
and (max-device-width : 1024px){  
/* style */  
}  

/* ipad横屏 */  
@media only screen  
and (min-device-width : 768px)  
and (max-device-width : 1024px)  
and (orientation : landscape){  
 /* style */  
 }  

 /* ipad竖屏 */  
@media only screen  
and (min-device-width : 768px)  
and (max-device-width : 1024px)  
and (orientation : portrait){  
 /* style */  
}  

/* 判断iphone5 *//* 横屏竖屏判断方法与ipad一样 */  
@media only screen  
and (min-device-width : 320px)  
and (max-device-width : 568px){  
 /* style */  
}  

/* 判断iphone4-iphone4s *//* 横屏竖屏判断方法与ipad一样 */  

@media only screen  
and (min-device-width : 320px)  
and (max-device-width : 480px){  
/* style */  
 }  

/* iphone5分辨率 */  
screen Width = 320px (css像素)  
screen Height = 568px (css像素)  
screen Width = 640px (实际像素)  
screen Height = 1136px (实际像素)  
Device-pixel-ratio:2  

/* iphone4-iphone4s分辨率 */  
screen Width = 320px (css像素)  
screen Height = 480px (css像素)  
screen Width = 640px (实际像素)  
screen Height = 960px (实际像素)  
Device-pixel-ratio:2  

 

① 、最小幅面MaxWidth   

<link rel="stylesheet" media="screen and (min-width:900px)" href="big.css" type="text/css" />   

  代表:当显示屏大于或等于900px时,将动用big.css样式来渲染Web页面。 

 

二、多个Media Queries使用 

<link rel="stylesheet" media="screen and (min-width:600px) and (max-width:900px)" href="style.css" type="text/css" />   

  代表:当显示屏在600px-900px之间时利用style.css样式来渲染web页面。 

 

③ 、设备显示屏的输出宽度Device Width 

<link rel="stylesheet" media="screen and (max-device-width: 480px)" href="iphone.css" type="text/css" />   

  代表:iphone.css样式适用于最大设备宽度为480px,比如说索爱上的显得,那里的max-device-width所指的是设备的骨子里分辨率,也正是指可视面积分辨率 

 

四、not关键字 

<link rel="stylesheet" media="not print and (max-width: 1200px)" href="print.css" type="text/css" />   

  表示:not关键字是用来祛除某种制定的传播媒介类型,换句话来说正是用来破除符合表明式的设备。

 

五、only关键字

<link rel="stylesheet" media="only screen and (max-device-width:240px)" href="android240.css" type="text/css" />   
<link rel="stylesheet" media="(min-width: 701px) and (max-width: 900px)" href="medium.css" type="text/css" />   

 

六、其他

<link rel="stylesheet" type="text/css" href="style.css" media="handheld and (max-width:480px), screen and (min-width:960px)" />   

  表示:其它还有使用逗号(,)被用来代表并列只怕表示或,style.css样式被用在增加率小于或等于480px的手持设备上,或许被用来显示器宽度大于或等于960px的装备上。 

 


 

传媒询问判断ipad和索爱各版本

判断ipad 

@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px){
/* style */
}

  

ipad横屏 

@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape){
/* style */
}

  

ipad竖屏 

@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait){
/* style */
}

  

 判断iphone5 *//*
横屏竖屏判断方式与ipad一样

@media only screen

 and (min-device-width : 320px)

 and (max-device-width : 568px){

/* style */

 }

  

 判断iphone4-iphone4s
*//* 横屏竖屏判断方式与ipad一样 

@media only screen

and (min-device-width : 320px)

and (max-device-width : 480px){

/* style */

 }

  

iphone5分辨率 

screen Width = 320px (css像素)

screen Height = 568px (css像素)

screen Width = 640px (实际像素)

screen Height = 1136px (实际像素)

Device-pixel-ratio:2

  

 iphone4-iphone4s分辨率 

screen Width = 320px (css像素)

screen Height = 480px (css像素)

screen Width = 640px (实际像素)

screen Height = 960px (实际像素)

Device-pixel-ratio:2

  


 

Bootstrap
CSS3传播媒介询问断点

  Bootstrap响应式设计,便是三个优秀的传播媒介询问CSS框架,它设定了一些媒体询问节点,根据分化装备宽度,写区其他断点位置来做响应式查询。

Bootstrap推荐的媒体询问样式如下:

/*==================================================
=            Bootstrap 3 Media Queries             =
==================================================*/ 
/*==========  Mobile First Method  ==========*/
/* Custom, iPhone Retina */ 
@media only screen and (min-width : 320px) {  
}

/* Extra Small Devices, Phones */ 
@media only screen and (min-width : 480px) { 
}

/* Small Devices, Tablets */
@media only screen and (min-width : 768px) {
}

/* Medium Devices, Desktops */
@media only screen and (min-width : 992px) {
}

/* Large Devices, Wide Screens */
@media only screen and (min-width : 1200px) {
}

/*==========  Non-Mobile First Method  ==========*/
/* Large Devices, Wide Screens */
@media only screen and (max-width : 1200px) {
}

/* Medium Devices, Desktops */
@media only screen and (max-width : 992px) {
}

/* Small Devices, Tablets */
@media only screen and (max-width : 768px) {
}

/* Extra Small Devices, Phones */ 
@media only screen and (max-width : 480px) {
}

/* Custom, iPhone Retina */ 
@media only screen and (max-width : 320px) {  
}

  

  Bootstrap
提供了一套响应式、移动设备优先的流式栅格系统,随着荧屏或视口(viewport)尺寸的扩充,系统会活动分成最多12列。它涵盖了简单使用的约定义类,还有强大的mixin
用于转移更具语义的布局。上边是Bootstrap媒体询问的一部分文书档案,希望对您有所帮忙。

 

简介

  栅格系统用于通过一种类的行(row)与列(column)的组成来创建页面布局,你的剧情就足以放入这一个创立好的布局中。上边就介绍一下
Bootstrap 栅格系统的办事原理:

  • “行(row)”必须包涵在 .container (固定宽度)或 .container-fluid (百分之百宽度)中,以便为其予以合适的排列(aligment)和内补(padding)。
  • 透过“行(row)”在档次方向创立一组“列(column)”。
  • 你的内容应当放置于“列(column)”内,并且,只有“列(column)”能够当做行(row)”的平素子成分。
  • 类似 .row 和 .col-xs-4 那种预订义的类,能够用来急速创造栅格布局。Bootstrap
    源码中定义的 mixin 也得以用来创立语义化的布局。
  • 通过为“列(column)”设置 padding 属性,从而开创列与列之间的间隔(gutter)。通过为 .row 成分设置负值margin 从而抵消掉为 .container 成分设置的 padding,也就直接为“行(row)”所涵盖的“列(column)”抵消掉了padding
  • 负值的
    margin就是上面的示范为啥是向外优异的原因。在栅格列中的内容排成一行。
  • 栅格系统中的列是通过点名1到12的值来表示其跨越的限制。例如,多个等宽的列能够采纳四个 .col-xs-4 来创建。
  • 倘使一“行(row)”中涵盖了的“列(column)”大于
    12,多余的“列(column)”所在的成分将被作为三个完完全全另起一行排列。
  • 栅格类适用于与显示器宽度当先或等于分界点大小的装备
    , 并且针对小显示器设备覆盖栅格类。
    由此,在要素上应用任何 .col-md-* 栅格类适用于与荧屏宽度抢先或等于分界点大小的设施
    , 并且针对小荧屏设备覆盖栅格类。
    因而,在要素上使用任何 .col-lg-* 不设有,
    也潜移默化大荧屏设备。

 

传媒询问

  在栅格系统中,大家在
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) { ... }

  

栅格参数

 

超小荧屏 手提式有线话机
(<768px)

小屏幕 平板
(≥768px)

高级中学级荧屏 桌面显示屏
(≥992px)

大显示器 大桌面显示器
(≥1200px)

栅格系统作为

连日水平排列

开班是堆叠在同步的,当不止那个阈值时将改成水平排列C

.container 最小幅面

None
(自动)

750px

970px

1170px

类前缀

.col-xs-

.col-sm-

.col-md-

.col-lg-

列(column)数

12

最大列(column)宽

自动

~62px

~81px

~97px

槽(gutter)宽

30px
(每列左右均有 15px)

可嵌套

偏移(Offsets)

列排序

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

通过下表能够详细查看
Bootstrap 的栅格系统是什么在几种显示屏设备上中国人民解放军海军工程学院业作的。

 

实例:从堆叠到水平排列

  使用单一的一组 .col-md-* 栅格类,就足以创设3个基本的栅格系统,在手提式有线电话机和平板设备上一伊始是堆叠在同步的(超小显示器到小荧屏这一限制),在桌面(中等)屏幕设备上改为水平排列。全体“列(column)必须放在
” .row 内。

<div class="row">
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
</div>
<div class="row">
  <div class="col-md-8">.col-md-8</div>
  <div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
  <div class="col-md-6">.col-md-6</div>
  <div class="col-md-6">.col-md-6</div>
</div>

  

实例:流式布局容器

  将最外侧的布局成分 .container 修改为 .container-fluid,就足以将稳定宽度的栅格布局转换为
百分百 宽度的布局。

<div class="container-fluid">
  <div class="row">
    ...
  </div>
</div>

  

实例:移动装备和桌面显示屏

  是或不是不愿意在小显示屏设备上装有列都堆叠在一块儿?那就采用针对超小显示屏和中等荧屏设备所定义的类吧,即 .col-xs-*和 .col-md-*。请看上面的实例,讨论一下那么些是何许做事的。

<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<div class="row">
  <div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>

<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
<div class="row">
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>

<!-- Columns are always 50% wide, on mobile and desktop -->
<div class="row">
  <div class="col-xs-6">.col-xs-6</div>
  <div class="col-xs-6">.col-xs-6</div>
</div>

  

实例:手机、平板、桌面

  在上边案例的功底上,通过接纳针对平板设备的 .col-sm-* 类,我们来创建特别动态和强硬的布局吧。

<div class="row">
  <div class="col-xs-12 col-sm-6 col-md-8">.col-xs-12 .col-sm-6 .col-md-8</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<div class="row">
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
  <!-- Optional: clear the XS cols if their content doesn't match in height -->
  <div class="clearfix visible-xs-block"></div>
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
</div>

  

实例:多余的列(column)将另起一行排列

  假使在三个 .row 内包罗的列(column)大于13个,包括多余列(column)的要素将用作贰个整机单元被另起一行排列。

<div class="row">
  <div class="col-xs-9">.col-xs-9</div>
  <div class="col-xs-4">.col-xs-4<br>Since 9 + 4 = 13 > 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.</div>
  <div class="col-xs-6">.col-xs-6<br>Subsequent columns continue along the new line.</div>
</div>

  

响应式列重置

  即便有上面给出的四组栅格class,你也难免会遇上一些题材,例如,在某个阈值时,某个列恐怕会并发比其余列高的气象。为了征服这一难题,提议联合使用 .clearfix 和
响应式工具类。

<div class="row">
  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>

  <!-- Add the extra clearfix for only the required viewport -->
  <div class="clearfix visible-xs-block"></div>

  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
</div>

  

  除了列在分界点清除响应,
您只怕必要 重置偏移, 后推或前拉有个别列。请看此栅格实例。

<div class="row">
  <div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>
  <div class="col-sm-5 col-sm-offset-2 col-md-6 col-md-offset-0">.col-sm-5 .col-sm-offset-2 .col-md-6 .col-md-offset-0</div>
</div>
<div class="row">
  <div class="col-sm-6 col-md-5 col-lg-6">.col-sm-6 .col-md-5 .col-lg-6</div>
  <div class="col-sm-6 col-md-5 col-md-offset-2 col-lg-6 col-lg-offset-0">.col-sm-6 .col-md-5 .col-md-offset-2 .col-lg-6 .col-lg-offset-0</div>
</div>

  

列偏移

  使用 .col-md-offset-* 类能够将列向右边偏移。这个类实际是由此采取 * 接纳器为眼下因素扩展了左手的边距(margin)。例如,.col-md-offset-4 类将 .col-md-4 成分向右边偏移了四个列(column)的增长幅度。

<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
</div>
<div class="row">
  <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
  <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
</div>
<div class="row">
  <div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
</div>

  

嵌套列

  为了利用内置的栅格系统将内容再一次嵌套,能够经过添加三个新的 .row 成分和一名目繁多 .col-sm-* 成分到曾经存在的.col-sm-* 成分内。被嵌套的行(row)所含有的列(column)的个数不能够跨越12(其实,没有需要你不能不占满12列)。

<div class="row">
  <div class="col-sm-9">
    Level 1: .col-sm-9
    <div class="row">
      <div class="col-xs-8 col-sm-6">
        Level 2: .col-xs-8 .col-sm-6
      </div>
      <div class="col-xs-4 col-sm-6">
        Level 2: .col-xs-4 .col-sm-6
      </div>
    </div>
  </div>
</div>

  

列排序

<div class="row">
  <div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div>
  <div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div>
</div>

  

Less
mixin
和变量

  除了用于急速布局的约定义栅格类,Bootstrap
还包蕴了一组 Less 变量和 mixin 用于帮你生成不难、语义化的布局。

 

变量

  通过变量来定义列数、槽(gutter)宽、媒体询问阈值(用于分明适合让列浮动)。大家选择那一个变量生成预订义的栅格类,如上所示,还有如下所示的定制
mixin。

@grid-columns:              12;
@grid-gutter-width:         30px;
@grid-float-breakpoint:     768px;

 

mixin

  mixin
用来和栅格变量一同使用,为各样列(column)生成语义化的 CSS 代码。

// Creates a wrapper for a series of columns
.make-row(@gutter: @grid-gutter-width) {
  // Then clear the floated columns
  .clearfix();

  @media (min-width: @screen-sm-min) {
    margin-left:  (@gutter / -2);
    margin-right: (@gutter / -2);
  }

  // Negative margin nested rows out to align the content of columns
  .row {
    margin-left:  (@gutter / -2);
    margin-right: (@gutter / -2);
  }
}

// Generate the extra small columns
.make-xs-column(@columns; @gutter: @grid-gutter-width) {
  position: relative;
  // Prevent columns from collapsing when empty
  min-height: 1px;
  // Inner gutter via padding
  padding-left:  (@gutter / 2);
  padding-right: (@gutter / 2);

  // Calculate width based on number of columns available
  @media (min-width: @grid-float-breakpoint) {
    float: left;
    width: percentage((@columns / @grid-columns));
  }
}

// Generate the small columns
.make-sm-column(@columns; @gutter: @grid-gutter-width) {
  position: relative;
  // Prevent columns from collapsing when empty
  min-height: 1px;
  // Inner gutter via padding
  padding-left:  (@gutter / 2);
  padding-right: (@gutter / 2);

  // Calculate width based on number of columns available
  @media (min-width: @screen-sm-min) {
    float: left;
    width: percentage((@columns / @grid-columns));
  }
}

// Generate the small column offsets
.make-sm-column-offset(@columns) {
  @media (min-width: @screen-sm-min) {
    margin-left: percentage((@columns / @grid-columns));
  }
}
.make-sm-column-push(@columns) {
  @media (min-width: @screen-sm-min) {
    left: percentage((@columns / @grid-columns));
  }
}
.make-sm-column-pull(@columns) {
  @media (min-width: @screen-sm-min) {
    right: percentage((@columns / @grid-columns));
  }
}

// Generate the medium columns
.make-md-column(@columns; @gutter: @grid-gutter-width) {
  position: relative;
  // Prevent columns from collapsing when empty
  min-height: 1px;
  // Inner gutter via padding
  padding-left:  (@gutter / 2);
  padding-right: (@gutter / 2);

  // Calculate width based on number of columns available
  @media (min-width: @screen-md-min) {
    float: left;
    width: percentage((@columns / @grid-columns));
  }
}

// Generate the medium column offsets
.make-md-column-offset(@columns) {
  @media (min-width: @screen-md-min) {
    margin-left: percentage((@columns / @grid-columns));
  }
}
.make-md-column-push(@columns) {
  @media (min-width: @screen-md-min) {
    left: percentage((@columns / @grid-columns));
  }
}
.make-md-column-pull(@columns) {
  @media (min-width: @screen-md-min) {
    right: percentage((@columns / @grid-columns));
  }
}

// Generate the large columns
.make-lg-column(@columns; @gutter: @grid-gutter-width) {
  position: relative;
  // Prevent columns from collapsing when empty
  min-height: 1px;
  // Inner gutter via padding
  padding-left:  (@gutter / 2);
  padding-right: (@gutter / 2);

  // Calculate width based on number of columns available
  @media (min-width: @screen-lg-min) {
    float: left;
    width: percentage((@columns / @grid-columns));
  }
}

// Generate the large column offsets
.make-lg-column-offset(@columns) {
  @media (min-width: @screen-lg-min) {
    margin-left: percentage((@columns / @grid-columns));
  }
}
.make-lg-column-push(@columns) {
  @media (min-width: @screen-lg-min) {
    left: percentage((@columns / @grid-columns));
  }
}
.make-lg-column-pull(@columns) {
  @media (min-width: @screen-lg-min) {
    right: percentage((@columns / @grid-columns));
  }
}

  

实例显示

  你能够重复修改那些变量的值,或许用暗许值调用那些mixin。上边正是三个采纳暗许设置生成两列布局(列之间有距离)的案例。

.wrapper {
  .make-row();
}
.content-main {
  .make-lg-column(8);
}
.content-secondary {
  .make-lg-column(3);
  .make-lg-column-offset(1);
}
<div class="wrapper">
  <div class="content-main">...</div>
  <div class="content-secondary">...</div>
</div>

 

相关文章