Bootstrap栅格系统

前面的说话

  Bootstrap
提供了同等拟响应式、移动装备优先的流式栅格系统,随着屏幕或视口(viewport)尺寸的加,系统会活动分成最多12列。栅格系统绝非合法的定义,但据悉网上的各种描述,可以这么定义,以规则的网格阵列来指点和专业网页遭到之版面布局和消息分布。本文将详细介绍Bootstrap栅格系统

 

心想事成原理

  网格系统的贯彻原理非常简单,仅仅是透过定义容器大小,平分12份(也产生平分成24客或32份,但12卖是无比常见的),再调整前后边距,最后结合媒体询问,就打有了强压的响应式网格系统。Bootstrap框架中之网格系统就是拿容器平分成12客

  栅格系统用于通过同样多元之行(row)与列(column)的三结合来创造页面布局,内容好放入这些创造好的布局中。下面就是介绍一下
Bootstrap 栅格系统的工作规律:

  1、“行(row)”必须含有在 .container (固定宽度)或 .container-fluid
(100% 宽度)中,以便为其给合适的排(aligment)和内边距(padding)

<div class="container">
    <div class="row"></div>
</div>

  2、通过“行(row)”在档次方向创建同组“列(column)”

  3、内容应该放置于“列(column)”内,并且,只有“列(column)”可以作为履行(row)”的直接子元素

  4、类似 .row 和 .col-xs-4
这种预定义的接近,可以就此来很快创建栅格布局。Bootstrap 源码中定义之 mixin
也得以就此来创造语义化的布局

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

  5、通过为“列(column)”设置 padding
属性,从而开创列与列次的间距(gutter)。通过也 .row 元素设置负值
margin 从而抵消掉啊 .container 元素设置的
padding,也即间接为“行(row)”所涵盖的“列(column)”抵消掉了padding

  6、栅格系统受之列是通过点名1交12的价值来表示其超的限定。例如,三只顶丰厚的排列好采用三个
.col-xs-4 来创造

<div class="container">
  <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>

  7、如果相同“行(row)”中寓了底“列(column)”大于
12,多余的“列(column)”所当的素用给当做一个整体另起一行排列

  8、栅格类适用于跟屏幕宽度超过或等于分界点大小的设备 ,
并且针对小屏幕设备覆盖栅格类。 因此,在要素上运任何 .col-md-*
栅格类适用于与屏幕宽度大于或等于分界点大小的配备 ,
并且针对小屏幕设备覆盖栅格类。 因此,在要素上行使任何 .col-lg-*
不有, 也影响大屏幕设备

 

媒体询问

  于栅格系统被,我们当 Less或Sass 文件被动用以下媒体询问(media
query)来创造主要的分界点阈值。

/* 小屏幕(平板,大于等于 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) { ... }

  通过下表可以详细查看 Bootstrap
的栅格系统是安当多种屏幕设备及干活之

  lg英文是large,表示十分的;md英文是middle,表示中的;sm英文是small,表示有点的;xs英文是extra
small,表示特小的。与服装尺寸也是呼应的

图片 1

 

骨干用法

  网格系统就此来布局,其实就是是排的结

  列组合简单明了就是是转数字来合并列(原则:列总和多次不克跨越12),有硌类似于表格的colspan属性

  实现列成措施非常简单,只干个别单CSS两只性状:浮动和幅度百分比

.col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 {
    float: left;
 }

  .col-md-12 {
    width: 100%;
  }
  .col-md-11 {
    width: 91.66666667%;
  }
  .col-md-10 {
    width: 83.33333333%;
  }
  .col-md-9 {
    width: 75%;
  }
  .col-md-8 {
    width: 66.66666667%;
  }
  .col-md-7 {
    width: 58.33333333%;
  }
  .col-md-6 {
    width: 50%;
  }
  .col-md-5 {
    width: 41.66666667%;
  }
  .col-md-4 {
    width: 33.33333333%;
  }
  .col-md-3 {
    width: 25%;
  }
  .col-md-2 {
    width: 16.66666667%;
  }
  .col-md-1 {
    width: 8.33333333%;
  }

<div class="container">
  <div class="row">
    <div class="col-xs-4">.col-xs-4</div>
    <div class="col-xs-8">.col-xs-8</div>
  </div>
  <div class="row">
    <div class="col-xs-4">.col-xs-4</div>
    <div class="col-xs-4">.col-xs-4</div>
    <div class="col-xs-4">.col-xs-4</div>
  </div>
  <div class="row">
    <div class="col-xs-3">.col-xs-3</div>
    <div class="col-xs-6">.col-xs-6</div>
    <div class="col-xs-3">.col-xs-3</div>
 </div>
</div>

【流式布局容器】 

  将尽外侧的布局元素 .container 修改为 .container-fluid,就得用定点宽度的栅格布局转换为
100% 宽度的布局

.container-fluid {
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}

 

列偏移

  使用列偏移非常简单,只待以列元素上补偿加类名“col-md-offset-*”(其中星号代表要偏移的列组合数),那么富有这个类名的排列就见面为右侧偏移。例如,在列元素上丰富“col-md-offset-4”,表示该列向右侧走4独列的小幅

  实现原理非常简单,利用十二分之一(1/12)的margin-left。有些许个offset,就来多少个margin-left

 .col-md-offset-12 {
   margin-left: 100%;
  }
  .col-md-offset-11 {
    margin-left: 91.66666667%;
  }
  .col-md-offset-10 {
    margin-left: 83.33333333%;
  }
  .col-md-offset-9 {
    margin-left: 75%;
  }
  .col-md-offset-8 {
    margin-left: 66.66666667%;
  }
  .col-md-offset-7 {
    margin-left: 58.33333333%;
  }
  .col-md-offset-6 {
    margin-left: 50%;
  }
  .col-md-offset-5 {
    margin-left: 41.66666667%;
  }
  .col-md-offset-4 {
    margin-left: 33.33333333%;
  }
  .col-md-offset-3 {
    margin-left: 25%;
  }
  .col-md-offset-2 {
    margin-left: 16.66666667%;
  }
  .col-md-offset-1 {
    margin-left: 8.33333333%;
  }
  .col-md-offset-0 {
    margin-left: 0;
  }

  不过出一个细节要注意,使用”col-md-offset-*”对列进行向右侧偏移时,要力保列与偏移列的总和不超过12,不然会致列断行显示

<div class="container">
  <div class="row">
    <div class="col-xs-4">.col-xs-4</div>
    <div class="col-xs-4 col-xs-offset-4">.col-xs-4 .col-xs-offset-4</div>
  </div>
  <div class="row">
    <div class="col-xs-2">.col-xs-2</div>
    <div class="col-xs-4 col-xs-offset-4">.col-xs-4 .col-xs-offset-4</div>
    <div class="col-xs-4">.col-xs-4</div>
  </div>
</div>

 

列排序

  列排序其实就是是改列的倾向,就是改变左右浮动,并且安装浮动的偏离。在Bootstrap框架的网格系统受凡透过丰富类名“col-md-push-*”和“col-md-pull-*”
(其中星号代表走的列组合数)。

  Bootstrap仅经过安装left和right来实现稳功能

.col-md-pull-12 {
    right: 100%;
  }
  .col-md-pull-11 {
    right: 91.66666667%;
  }
  .col-md-pull-10 {
    right: 83.33333333%;
  }
  .col-md-pull-9 {
    right: 75%;
  }
  .col-md-pull-8 {
    right: 66.66666667%;
  }
  .col-md-pull-7 {
    right: 58.33333333%;
  }
  .col-md-pull-6 {
    right: 50%;
  }
  .col-md-pull-5 {
    right: 41.66666667%;
  }
  .col-md-pull-4 {
    right: 33.33333333%;
  }
  .col-md-pull-3 {
    right: 25%;
  }
  .col-md-pull-2 {
    right: 16.66666667%;
  }
  .col-md-pull-1 {
    right: 8.33333333%;
  }
  .col-md-pull-0 {
    right: 0;
  }

  .col-md-push-12 {
    left: 100%;
  }
  .col-md-push-11 {
    left: 91.66666667%;
  }
  .col-md-push-10 {
    left: 83.33333333%;
  }
  .col-md-push-9 {
    left: 75%;
  }
  .col-md-push-8 {
    left: 66.66666667%;
  }
  .col-md-push-7 {
    left: 58.33333333%;
  }
  .col-md-push-6 {
    left: 50%;
  }
  .col-md-push-5 {
    left: 41.66666667%;
  }
  .col-md-push-4 {
    left: 33.33333333%;
  }
  .col-md-push-3 {
    left: 25%;
  }
  .col-md-push-2 {
    left: 16.66666667%;
  }
  .col-md-push-1 {
    left: 8.33333333%;
  }
  .col-md-push-0 {
    left: 0;
  }

<div class="container">
    <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>
</div>

 

列嵌套

  为了以内置的栅格系统以内容更嵌套,可以通过丰富一个初的 .row 元素和一致名目繁多 .col-sm-* 元素到曾经存在的 .col-sm-* 元素内。被嵌套的行(row)所富含的排(column)的个数不能够超越12

<div class="container">
    <div class="row">
        <div class="col-xs-8">
        我的里面嵌套了一个网格
            <div class="row">
            <div class="col-xs-6">col-xs-6</div>
            <div class="col-xs-6">col-xs-6</div>
          </div>
        </div>
    <div class="col-xs-4">col-xs-4</div>
    </div>
    <div class="row">
        <div class="col-xs-4">.col-xs-4</div>
        <div class="col-xs-8">
        我的里面嵌套了一个网格
            <div class="row">
              <div class="col-xs-4">col-xs-4</div>
              <div class="col-xs-4">col-xs-4</div>
              <div class="col-xs-4">col-xs-4</div>
            </div>
        </div>
    </div>
</div>

 

复杂应用

  在bootstrap中,.col-xs-应用于(<768px)的情况,.col-sm-应用于(≥768px
and <992px)的情况,.col-md-应用于(≥992px and
<1200px)的情况,.col-lg-应用于(≥1200px)的情况

  而.col-xs-、.col-sm-、.col-md-、.col-lg-是可为此混合使用的

  比如,要促成≥992px的时段分四排一革除,(≥768px and
<992px)的时节少排列一排除,(<768px)的当儿同列一消

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet">
<style>
.row div{border:1px solid black;}    
</style>
</head>
<body>
<div class="container-fluid">
    <div class="row">
      <div class="col-md-3 col-sm-6">aaa</div>
      <div class="col-md-3 col-sm-6">bbb</div>
      <div class="col-md-3 col-sm-6">ccc</div>
      <div class="col-md-3 col-sm-6">ddd</div>
    </div>
</div>
</body>
</html>

图片 2 

显隐藏

  为了加速对运动设备好的页面开发工作,利用媒体询问功能并动用下这些工具类可以方便的针对性不同装备展示或藏页面内容

图片 3

  形如.visible-*-*的近乎针对每种屏幕大小都发出三栽变体,每个针对 CSS
中不同之display属性,如下所示 

图片 4

  因此,以跨越小屏幕(xs)为例,可用的 .visible-*-* 类是:.visible-xs-block.visible-xs-inline 和 .visible-xs-inline-block

  比如,要兑现≥992px时在三列,(≥768px and
<992px)的时刻是两列,(<768px)的早晚才存在一列 

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet">
<style>
.row div{border:1px solid black;}    
</style>
</head>
<body>
<div class="container-fluid">
    <div class="row">
      <div class="col-md-4 col-sm-6">aaa</div>
      <div class="col-md-4 col-sm-6 hidden-xs">bbb</div>
      <div class="col-md-4 hidden-sm hidden-xs">ccc</div>
    </div>
</div>
</body>
</html>

图片 5

 

相关文章