Bootstrap【前端】响应式媒体询问

响应式媒体询问

传媒询问

  从 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,则免克使用样式表。这种简易逻辑通过表达式变得更加强劲,使您能够再次灵活地针对特定的计划性场景下自定义之亮规则。

 

  媒体询问包含一个媒体类型,后同一个还是多只反省一定法(如最小的屏幕宽度)的表达式。样式表中的传媒询问看起如清单
2 中之以身作则所示。

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

  根据清单2受的记号,所有最小程度屏幕宽度为
800 像从的屏幕(屏幕与打印等)都许诺使用如下 CSS
规则。该规则在示范中省略号所在的地方。对于拖欠媒体询问:

  @media
all 是传媒类型,也就是说,将以此 CSS 应用被有媒体类型。

style=”font-family: "Microsoft YaHei"”>   (min-width:800px) 是包含媒体询问的表达式,如果浏览器的太小增幅为
800 像素则会报告浏览器就使用下列 CSS。

 

  请留意,在清单 2
中,可以略关键词 all 和 and。在拿有媒体询问利用为具有媒体类型时,会省略 all。后面的 and 也是可选的。

 

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

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

 

  媒体询问也可以蕴涵复杂表达式。例如,如果您想如果开创一个只以最为小增幅为
800 像素且最酷幅面为 1200 像素时应用之体制,则用依照清单 4
中的规则来举行。

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

 

  在你的表达式中,您得依据自己之爱好下任意数量之 and 条件。如果你想使增加其它规格来检查一定的屏幕方向,只需要填补加其余一个 and 关键词,后和 orientation 媒体询问,如清单
5 所著。

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

  清单 5
中的媒体询问才在宽为 800 到 1200
像素且方向是纵向时才会激活。(通常,方向就对能够随意转换纵横模式的智能手机和平板电脑及是起义之。)如果中一个标准化也
False,则无从利用媒体询问规则。

 

  and 关键词的反义词是 or 关键词。和 and 一样,这些极组合在一起会组成复杂表达式。如果中间有一个法吧
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) 等。

 

 有用的传媒特性

  媒体众多特征,比如宽度、颜色跟网格,您得以传媒询问中采用它。对每个可能的媒体特性开展描述不以本文讨论范围外。要统筹响应式网站,只待了解一些传媒特性:方向、宽度和高度。作为一个简约媒体特性,方向的值好是 portrait 或 landscape。这些价值适用于具有手机或者平板计算机的用户,使您可因两只相因素来优化内容。当高度过长时,则当屏幕是纵向模式,当宽度超过高度时,则以为屏幕是横向模式。

 

  清单 8
显示了一个使用 orientation 媒体模式查询的以身作则。

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

 

  高度及幅度行为十分相似,都支持因 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
中的传媒询问。现实中,像这么的媒体询问可能过于具体要无绝来因此。检测标准维度是大多数网站访问者都无容许遇见的一个场面。通常状态下,响应式设计会使用限制来推行屏幕检测。

  作为媒体询问大小范围的继承内容,下同样节约用讨论一些普遍的传媒询问,在筹划一个响应式网站经常,您可能会见发觉它们非常管用。

 

周边媒体询问

  因为 Apple
首浅向市场推出了用户智能手机和平板电脑产品,所以下列大多数媒体询问都是因这些型号的装备。

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

 

SASS
中的媒体询问

  SASS
行为受之传媒询问与日常 CSS
中的完全相同,但生一个不同:它们可以嵌套在另外 CSS
规则受到。当一个媒体询问嵌套在另一个 CSS
规则遭遇时常,会拿规则置于样式表的顶层,如清单 11 所出示。

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

  

  清单 11
中之以身作则将编译到清单 12 的代码中。

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

 

团组织而的传媒询问

  现在,我们早就了解了怎么编写媒体询问,是上考虑以以平等栽合乎逻辑的、有集体的道以媒体询问部署到您的
CSS
代码中了。确定哪些组织媒体询问好非常程度达是平种植个人偏好。这无异不怎么节将探讨两栽要方式的助益和缺点。

  第一只道是吧不同屏幕尺寸指定了两样之样式表。优点是规则可保存在单独样式表中,这叫显示逻辑能够清楚地划分出,更有利团队拓展维护。另一个优势是源代码分支中的联合变得愈加好。但优点同时为是短。如果如吧每个媒体询问创建单独的样式表,则无法以一个因素的有样式表放在同等文件夹的同职位。当改变一个
CSS 中的一个素时,需要创造多单职位进行查看,这使得网站 CSS
的保障更换得更其艰难。

  第二只章程是当存活体制表中使用媒体询问,该样式表就以概念其余元素样式表的岗位的一侧。这种艺术的优势是可用富有因素样式保存在与一个职位。当当集体模式下办事时,这种做法可以创建更多来代码合并工作,但立刻是持有因团队的软件开发都好管理都大的一律有。

不曾所谓科学或错误方法。您才待选择最为契合你的色以及团伙的道即可。

 

浏览器支持

  到今寿终正寝,您或许就相信
CSS 媒体询问是一个强的工具,而且想掌握如何浏览器支持 CSS
媒体询问。以下是当下面的好信息及异常消息。

style=”font-family: "Microsoft YaHei"”>好消息是:大多数现代浏览器(包括智能手机上的浏览器)都支持
CSS 媒体询问。

style=”font-family: "Microsoft YaHei"”>坏消息是:最近,来自
Redmond 的 Windows® Internet Explorer® 8 浏览器不支持媒体询问。

  对于大部分业内 Web
开发人员来说,这象征你要提供一个化解方案,以便在 Internet Explorer
中支持媒体询问。下列解决方案是一个号称吧
respond.js 的 JavaScript polyfill。

 

带有 respond.js 的 Polyfill

  Respond.js
是一个极小的增强 Web 浏览器的 JavaScript 库,使得本来不支持 CSS
媒体询问的浏览器会支持其。该脚本循环遍历页面上的有所 CSS
引用,并以媒体询问分析 CSS
规则。然后,该脚本会监控浏览器宽度变化,添加或去与 CSS
中媒体询问匹配的体裁。最终能够在本来不支持之浏览器上运行媒体询问。

  由于这是一个基于
JavaScript 的解决方案,所以浏览器需要支持
JavaScript,以便运行脚本。该脚本只有支持创建响应式设计所用的不过小和太可怜width 媒体询问。这并无是适用于有或
CSS 媒体询问的一个替代。

  Respond.js
是公可以选取的群可用开源媒体询问 polyfills之一。如果您觉得 respond.js
无法满足你的需要,在进行一个小小的研究下,您就会见发现几乎单代表方案。

 

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

  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  

 

相同、最深开间Max
Width   

<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,比如说iPhone上的来得,这里的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和iPhone各版

判断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 (100%
    宽度)中,以便为那个给予合适的排列(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-* 栅格类,就可以创建一个主导的栅格系统,在大哥大以及机械设备上一致开始是堆叠在一块的(超小屏幕及多少屏幕就同一克),在桌面(中等)屏幕设备及成为水平排列。所有“列(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,就足以用一定宽度的栅格布局转换为
100% 宽度之布局。

<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)大于12独,包含多余列(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 元素向右侧偏移了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>

 

相关文章