Bootstrap采用响应式12列的网格进行布局,非常简单易用。可以零基础几分钟搭建响应式的网格布局。这种布局包括以下几个要点：
一.网格布局构成
1.容器说明
- container
- container-fluid
- 15px padding
- 断点:<576px 576px 768px 992px 1200px
2.行列说明
- 12列
- 像excel表格一样,可以合并列
- 指定列样式col(-BP)(-COL)
- 可在行中指定no-gutter去除列和列中间的间隙
二.列样式详解
col(-BP)(-COL)
BP代表断点(breakpoint),包括:
- sm>576px
- md>768px
- lg>992px
- xl>1200px
COL可以是1-12,代表该列占12列中的几列.
示例:
col 表示一列,如果总共有两列那么该列占6格,如果总共有三列,那么该列占4格
col-6表示不管在什么在什么情况下都占一半
col-sm 表示该列会占满直到宽度大于576px
col-sm-6 表示在小设备(像素大于576px)时该列占6格
col-xl-3 表示在超大像素(>1200px)的时候该列占3格
示例:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<title>Bootstrap</title>
</head>
<style>
img{
display: block;
}
</style>
<body>
<div class="container">
<h3>Bootstrap 网格示例</h3><br>
<div class="row">
<figure class="text-center figure col-sm-6 col-lg-4 col-xl">
<img class="img-fluid figure-img rounded mx-auto" src="bootstrap/pankaj-patel-626156-unsplash.jpg">
<figcaption class="figure-caption">
简单的图片说明
</figcaption>
</figure>
<figure class="text-center figure col-sm-6 col-lg-4 col-xl">
<img class="img-fluid figure-img rounded mx-auto" src="bootstrap/frano-duvnjak-468807-unsplash.jpg">
<figcaption class="figure-caption">
冬季雪景
</figcaption>
</figure>
<figure class="text-center figure col-sm-6 col-lg-4 col-xl">
<img class="img-fluid figure-img rounded mx-auto" src="bootstrap/hans-peter-gauster-252751-unsplash.jpg">
<figcaption class="figure-caption">
五彩缤纷
</figcaption>
</figure>
<figure class="text-center figure col-sm-6 col-lg-4 col-xl">
<img class="img-fluid figure-img rounded mx-auto" src="bootstrap/nick-karvounis-381259-unsplash.jpg">
<figcaption class="figure-caption">
CSS样式表
</figcaption>
</figure>
</div>
</div>
</body>
</html>
三.网格偏移
可以使用 offset-BP-COL定义某列的偏移量
例如:offset-lg-4 表示在大于992px的时候往右偏移4格
将上一步示例的代码中,最后一个figure修改为
<figure class="text-center figure col-sm-6 col-lg-4 col-xl offset-lg-4">
效果如下图所示
四.网格嵌套
可以在网格中嵌套网格
示例:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<title>Bootstrap</title>
</head>
<style>
img{
width: 100%;
height: 200px;
max-height: 200px;
}
</style>
<body>
<div class="container">
<div class="row">
<section class="col-sm-8">
<img src="bootstrap/image.png">
<h4>嵌套网格示例</h4>
<p>第一列占8格,第二列嵌套新的12格网格</p>
</section>
<section class="col-sm-4">
<div class="row no-gutters">
<div class="col-2 col-sm-4"><img class="img-thumbnail" src="bootstrap/image.png"></div>
<div class="col-2 col-sm-4"><img class="img-thumbnail" src="bootstrap/image.png"></div>
<div class="col-2 col-sm-4"><img class="img-thumbnail" src="bootstrap/image.png"></div>
<div class="col-2 col-sm-4"><img class="img-thumbnail" src="bootstrap/image.png"></div>
<div class="col-2 col-sm-4"><img class="img-thumbnail" src="bootstrap/image.png"></div>
<div class="col-2 col-sm-4"><img class="img-thumbnail" src="bootstrap/image.png"></div>
</div>
</section>
</div>
</div>
</body>
</html>
其中no-gutters表示去掉网格间的间隙
img-thumbnail让图片显示缩略图效果,即在图片外面添加一个边框
总结,以上便是Bootstrap网格布局的基本用法,其它内容还包括对齐,排序等等不一一赘述.