bootstrap css-网格系统

时间:2023-03-09 16:32:37
bootstrap css-网格系统

前言:第一次记录点东西,只能勉强算是笔记吧。博主自学前端,深知自己水水的,但还是向把自己学到的东西记录下来,这不刚学习了bootstrap的css部分,现在整理出笔记。

1,Bootstrap网格系统的基本网格结构

bootstrap网格的基本结构如下:

         <div class="container">
<div class="row">
<div class="col-*-*"></div>
<div class="col-*-*"></div>
</div>
<div class="row">...</div>
</div>
<div class="container">....

  其中,Bootstrap中的container class用于包裹页面上的内容。它所代表的样式如下

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

从bootstrap的基本网格结构,不难看出,bootstrap是使用行来创建列的水平组的。为了获得适当的内边距和对齐,行必须放在 .container class内。通过向行内添加带有 .col-*-* class 的<div>元素,可以快速创建网格布局。因为网格系统是通过横跨十二个可用的列来创建的,因此每一行中横跨的列数和始终是不大于十二。所以要创建三个宽度相等的列,则需要使用三个 .col-*-4 class。

2,网格选项

Bootstrap网格系统可以跨多个设备工作:

bootstrap css-网格系统

 在超小设备上对行进行分列时,使用 .col-xs-*  class ;  在小型设备上对行进行分列时,使用 .col-sm-*  class ;

  在中型设备上对行进行分列时,使用 .col-md-*  class ;  在大型设备上对行进行分列时,使用 .col-lg-*  class ;每一行的列数量和要确保是12列!

3,偏移

 Bootstrap中偏移使用 .col-*-offset-* 类,该类通过增加列的左外边距来进行偏移,第一个*表示设备大小:xs,sm,md,lg.一般情况下是在大屏幕显示器上使用偏移,即 .col-md-offset-*。第二个*表示偏移量,范围是1~11.

例如:

 <div class="container">
<h4>偏移前</h4>
<div class="row" >
<div class="col-md-6"
style="background-color: #dedef8;box-shadow:
inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
<p>bootstrap 网格系统1</p>
</div> </div>
<h4>偏移后</h4>
<div class="row" >
<div class="col-md-6 col-md-offset-3"
style="background-color: #dedef8;box-shadow:
inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
<p>bootstrap 网格系统2</p>
</div> </div>
</div>

网页表现为:bootstrap css-网格系统

4,嵌套

在一个已有的 .col-md-*列内新添加一个.row,并对其进行分列。被嵌套的行应包含一组列,同样这组列的个数不能超过12(没有必要12列全部占满)

例如下面(一行两列中的第二列被嵌套两行两列):

        <div class="container">
<h3>列嵌套</h3>
<div class="row">
<div class="col-md-6" style="background-color: #dedef8; box-shadow:
inset 1px -1px 1px #444, inset -1px 1px 1px #444;" >
<p>网格系统的第一列</p>
<p>在每一列中都可以添加一些内容</p>
</div>
<div class="col-md-6" style="background-color: #dedef8; box-shadow:
inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
<div class="row">
<div class="col-md-6" style="background-color: #dedef8; box-shadow:
inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
<p>嵌套列中的第一行第一列</p>
</div>
<div class="col-md-6" style="background-color: #dedef8; box-shadow:
inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
<p>嵌套列中的第一行第二列</p>
</div>
</div>
<div class="row">
<div class="col-md-5" style="background-color: #dedef8; box-shadow:
inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
<p>第二行第一列</p>
</div>
<div class="col-md-7" style="background-color: #dedef8; box-shadow:
inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
<p>第二行第二列</p>
</div>
</div>
</div>
</div>
</div>

网页表现为:bootstrap css-网格系统

5,排序

利用 .col-md-push-* 和 .col-md-pull-*类可以实现内置网格列的顺序,其中*的范围是1~11。

例如,在上面例子的基础上,交换第二列中,第二行中的两列:

        <div class="container">
<h3>列嵌套</h3>
<div class="row">
<div class="col-md-6" style="background-color: #dedef8; box-shadow:
inset 1px -1px 1px #444, inset -1px 1px 1px #444;" >
<p>网格系统的第一列</p>
<p>在每一列中都可以添加一些内容</p>
</div>
<div class="col-md-6" style="background-color: #dedef8; box-shadow:
inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
<div class="row">
<div class="col-md-6" style="background-color: #dedef8; box-shadow:
inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
<p>嵌套列中的第一行第一列</p>
</div>
<div class="col-md-6" style="background-color: #dedef8; box-shadow:
inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
<p>嵌套列中的第一行第二列</p>
</div>
</div>
<div class="row">
<div class="col-md-5 col-md-push-7" style="background-color: #dedef8; box-shadow:
inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
<p>第二行第一列</p>
</div>
<div class="col-md-7 col-md-pull-5" style="background-color: #dedef8; box-shadow:
inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
<p>第二行第二列</p>
</div>
</div>
</div>
</div>
</div>

表现为:bootstrap css-网格系统

6,总结

使用类有:

  容器:   .container       行:  .row     列:  .col-*-*    偏移:.col-*-offset-*     排序:  .col-*-push-*     .col-*-pull-*。