BootstrapBootstrap栅格系统

前方的话

  Bootstrap
提供了一套响应式、移动装备优先的流式栅格系统,随着显示器或视口(viewport)尺寸的增多,系统会自动分成最多12列。栅格系统并未法定的定义,但听别人讲网上的各个描述,能够如此定义,以规则的网格阵列来指点和正规网页中的版面布局以及新闻分布。本文将详细介绍Bootstrap栅格系统

 

贯彻原理

  网格系统的贯彻原理分外简单,仅仅是因此定义容器大小,平分12份(也有平分成24份或32份,但12份是最广泛的),再调整前前边距,最终结合媒体询问,就制作出了精锐的响应式网格系统。Bootstrap框架中的网格系统正是将容器平分成12份

  栅格系统用于通过一名目繁多的行(row)与列(column)的整合来创建页面布局,内容可以放入那个成立好的布局中。下边就介绍一下
Bootstrap 栅格系统的做事原理:

  壹 、“行(row)”必须包罗在 .container (固定宽度)或 .container-fluid
(百分百 宽度)中,以便为其予以合适的排列(aligment)和内边距(padding)

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

  贰 、通过“行(row)”在档次方向成立一组“列(column)”

  三 、内容应该放置于“列(column)”内,并且,唯有“列(column)”可以当做行(row)”的一向子元素

  四 、类似 .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>

  ⑤ 、通过为“列(column)”设置 padding
属性,从而创建列与列之间的区间(gutter)。通过为 .row 成分设置负值
margin 从而抵消掉为 .container 成分设置的
padding,也就直接为“行(row)”所蕴藏的“列(column)”抵消掉了padding

  陆 、栅格系统中的列是通过点名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>

  ⑦ 、如若一“行(row)”中含有了的“列(column)”大于
12,多余的“列(column)”所在的成分将被看作2个完好另起一行排列

  捌 、栅格类适用于与显示器宽度大于或等于分界点大小的装备 ,
并且针对小荧屏设备覆盖栅格类。 因而,在要素上选拔任何 .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,表示特小的。与时装尺寸也是对应的

Bootstrap 1

 

主干用法

  网格系统用来布局,其实就是列的重组

  列组合简单明了正是改变数字来合并列(原则:列总和数无法超12),有点类似于表格的colspan属性

  达成列组合格局10分简单,只关乎三个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-fluidBootstrap,,就能够将定位宽度的栅格布局转换为
百分之百 宽度的布局

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

 

列偏移

  使用列偏移卓殊简单,只必要在列成分上添加类名“col-md-offset-*”(在那之中星号代表要偏移的列组合数),那么具有这么些类名的列就会向右偏移。例如,在列成分上助长“col-md-offset-4”,表示该列向右移动两个列的上涨幅度

  完结原理卓殊简单,利用10分一(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>

Bootstrap 2 

显示隐藏

  为了加紧对活动装备友好的页面开发工作,利用媒体询问功用并行使下边那一个工具类能够一本万利的针对性区别装备显示或躲藏页面内容

Bootstrap 3

  形如.visible-*-*的类针对各种显示器大小都有二种变体,每种针对 CSS
中不一致的display品质,如下所示 

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

Bootstrap 5

 

相关文章