BootstrapBootstrap的为主——栅格系统的动

    前  言

磨牙絮叨

style=”font-size: 14px; font-family: "Microsoft YaHei"”> Bootstrap
是基于 HTML、CSS、JAVASCRIPT 的,它简洁利落,使得 Web
开发尤其快捷。

style=”font-size: 14px; font-family: "Microsoft YaHei"”> 而栅格系统是Bootstrap中之为主,正是为栅格系统的存在,Bootstrap才会有如此强硬的响应式布局方案。

 

一、什么是栅格系统

合法文档中凡是这么说之:

Bootstrap
提供了相同仿响应式、移动装备优先的流式栅格系统,随着屏幕或视口(viewport)尺寸的充实,系统会自动分成最多12排。包含了用于简单的布局选项之预约义类,也蕴藏了用于转移更多语义布局之功能强大的混合类。

咱们来解一下即时等同段话,可以发现中间最重点的一些就是动装备优先,那么什么是挪装备优先为?

  Bootstrap的基础CSS代码默认从小屏幕设备(比如移动装备、平板电脑)开始,然后使用媒体询问扩展及异常屏幕设备(比如笔记本电脑、台式电脑)上之零部件和网格。

有着如下策略:

  • 内容:决定什么是极要的。
  • 布局:优先规划还小之宽度。
  • 逐步进增强:随着屏幕大小增加而上加元素。

 

二、 工作原理

 栅格系统用于通过同样名目繁多的行(row)与列(column)的成来创造页面布局,你的情就是可放入这些创造好之布局中。

做事规律如下:

  • “行(row)”必须包含在 .container (固定宽度)或 .container-fluid (100%
    宽度)中,以便为那个授予合适的排(aligment)和内补(padding)。

 

  • 由此“行(row)”在档次方向创建同组“列(column)”。但列数之同非克超过平分的终究列数(在跨时,多余部分会换行显示),默认12。(使用Less或者Sass可以开展由定义设置),如下:

 

  • 你的内容应该放置于“列(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-*免存在, 也影响颇屏幕设备。

 

2.1媒体询问

 在栅格系统面临,我们当 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) { ... }

 

2.2主导用法

 千言万语,不如直接上图:

Bootstrap 1

一如既往图胜千言,通过下表可以详细查看 Bootstrap
的栅格系统是哪些以余屏幕设备及干活之。使用方法本身怀念应该不要还多说了,下面我们看一些实例吧。

这个方法是最中心的用法:

<div class="container">
    <div class="row">
        <div class="col-md-6">.col-md-6</div>
        <div class="col-md-6">.col-md-6</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-2">.col-md-2</div>
        <div class="col-md-6">.col-md-6</div>
        <div class="col-md-4">.col-md-4</div>
    </div>
</div>

Bootstrap 2

Bootstrap作为一个响应式框架当然不见面仅仅出那么简单的效益,我们后续吧

 

2.3响应式列重置

 即便来受有之栅格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>

Bootstrap 3

 

2.4列偏移

 

每当好几情况下,我们无期待相邻之列紧靠在联合,如果你望不经过额外的margin或外的伎俩来落实的话,Bootstrap内置为咱提供了列偏移(offset),这无异密密麻麻的类来扶持我们兑现想要之功用。

只有需要为急需偏移的列元素上加加类名col-md-offset-*(星号代表要偏移的列组合数),那么具有这个类名的排就会朝着右侧偏移。
这些近似实际是透过应用 * 选择器为目前因素增加了左的边距(margin)。例如:在列元素中补充加.col-md-offset-6 类将 .col-md-6素于右侧偏移了6独列(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>

Bootstrap 4

 

2.5列嵌套

 Bootstrap框架的网格系统还支持排的嵌套。你可以于一个列中添加一个还是多独执行(.row)容器,然后在这个行容器中插列(像前介绍的同采用列)。但当列容器中的行容器(.row),宽度为100%经常,就是目前外部列的增幅。

 

<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>

Bootstrap 5

 

2.6列排序

 列排序其实就是是移列的来头(顺序),就是反左右扭转,并且安装浮动的离。在Bootstrap框架的网格系统面临凡通过抬高类名col-md-push-*col-md-pull-*

 

<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>

Bootstrap 6

 

 

哼啊,栅格系统即谈到马上哪!相信大家应还有了肯定好之敞亮,也会核心的利用了咔嚓!!!

 

相关文章