Bootstrap的主干——栅格系统的使用

    前  言

自闭症絮叨

style=”font-size: 14px; font-family: "Microsoft YaHei"”> Bootstrap
是基于 HTML、CSS、JAVASC宝马7系IPT 的,它简洁利落,使得 Web
开发更加急忙。

style=”font-size: 14px; font-family: "Microsoft YaHei"”> 而栅格系统是Bootstrap中的核心,正是因为栅格系统的留存,Bootstrap才能有所那样强硬的响应式布局方案。

 

一、什么是栅格系统

官方文档中是这样说的:

Bootstrap
提供了一套响应式、移动设备优先的流式栅格系统,随着屏幕或视口(viewport)尺寸的充实,系统会活动分成最多12列。包括了用来简单的布局选项的预订义类,也包蕴了用于转移越来越多语义布局的功效强大的混合类。

咱俩来了解一下这一段话,可以发现中间最要紧的有个别就是举手投足设备优先,那么哪些是移动设备优先呢?

  Bootstrap的基础CSS代码默许从小显示屏设备(比如移动设备、三星平板)开首,然后拔取传媒询问增加到大屏幕设备(比如台式机电脑、台式电脑)上的机件和网格。

怀有如下策略:

  • 内容:决定哪些是最要紧的。
  • 布局:优先规划更小的宽窄。
  • 渐进增强:随着屏幕大小增添而添美金素。

 

二、 工作原理

 栅格系统用于通过一密密麻麻的行(row)与列(column)的组合来创立页面布局,你的始末就能够放入那几个成立好的布局中。

做事规律如下:

  • “行(row)”必须含有在 .container (固定宽度)或 .container-fluid (百分之百宽度)中,以便为其予以合适的排列(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基本用法

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

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

图片 2

Bootstrap作为2个响应式框架当然不会唯有那么粗略的作用,大家三番五次吧

 

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>

图片 3

 

2.4列偏移

 

在有个别意况下,大家不愿意相邻的列紧靠在一块儿,假诺您期望不通过额外的margin或任何的手法来贯彻的话,Bootstrap内置为大家提供了列偏移(offset),这一多元的类来协助大家贯彻想要的法力。

只需求给急需偏移的列成分上添加类名col-md-offset-*(星号代表要偏移的列组合数),那么富有那几个类名的列就会向右偏移。
那些类实际是经过应用 * 选拔器为当下因素增添了左手的边距(margin)。例如:在列成分中添加.col-md-offset-6 类将 .col-md-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>

图片 4

 

2.5列嵌套

 Bootstrap框架的网格系统还匡助列的嵌套。你可以在三个列中添加二个依然八个行(.row)容器,然后在那些行容器中插入列(像前面介绍的一模一样使用列)。但在列容器中的行容器(.row),宽度为百分之百时,就是时下外部列的宽窄。

 

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

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

图片 6

 

 

好啊,栅格系统就讲到那啦!相信我们应该都有了迟早要好的领悟,也会主旨的选用了啊!!!

 

相关文章