Bootstrap笔记(二) 认识网格系统

认识网格系统

介绍
网格选项
- 断点(Breakpoint)
- 容器(Container)

介绍

Bootstrap网格系统是透过横向的row(列)和直向的column(行)来设计网页版面，他将网页宽度平均分割为12等份，称为12个column。

範例:

使用两个div元素制作宽度为1:1的两栏式版面，那么这两个div元素是位于相同的row，并分别占用6个column。

使用三个div元素制作宽度为1:3:2的三栏式版面，那么这三个div元素是位于相同的row，并分别占用2、6、4个column。

网格选项

Bootstrap针对不同的荧幕尺寸提供多种网格选项

类别前置词后面接的是1~12，表示占用几个column

範例: 制作宽度为1:3:2的三栏式版面

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><!-- Bootstrap CDN --><!-- CSS only --><link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous"><!-- JavaScript Bundle with Popper --><script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-U1DAWAznBHeqEIlVSCgzq+c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj" crossorigin="anonymous"></script><title>Bootstrap網格系統-三欄式版面</title><style>/*设定区块的背景色彩与框线，有助于看清楚区块位置*/div[class^="col"] {background-color: #EBDEF0;border: 0.5px solid purple;}</style>
</head>
<body><div class="container"><!-- 这三个<div>元素是位于相同的row，并分别占用2、6、4个column --><div class="row"><div class="col-sm-2">區塊1</div><div class="col-sm-6">區塊2</div><div class="col-sm-4">區塊3</div></div></div>
</body>
</html>

当浏览器宽度够大时(>=576px)三栏会排成一列

当浏览器宽度不够时(<576px)三栏会各自一列

断点(Breakpoint)

我们可以透过断点让网页根据装置大小调整版面配置，而且Bootstrap是使用媒体查询根据断点来建构CSS，Bootstrap提供以下6个预设的断点。

容器(Container)

容器是Bootstrap最基本的版面配置元素，可以让网格系统的row与column保持适当的边界和留白。

Bootstrap提供下列三种不同的容器:

.container: 根据不同的响应式断点变更最大容器宽度。
.container-fluid: 容器宽度是浏览器的100%宽度，两侧没有留白。
.container-{breakpoint}: 容器宽度是浏览器的100%宽度，直到超过指定的断点，两侧才会有留白。

比較:

範例: 各类型容器下的两栏式版面

第一个容器使用.container类别
第二个容器使用.container-md类别
第三个容器使用.container-fluid类别

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><!-- Bootstrap CDN --><!-- CSS only --><link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous"><!-- JavaScript Bundle with Popper --><script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-U1DAWAznBHeqEIlVSCgzq+c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj" crossorigin="anonymous"></script><title>Bootstrap網格系統-各類容器比較</title><style>/*设定区块的背景色彩与框线，有助于看清楚区块位置*/div[class^="col"] {background-color: #EBDEF0;border: 0.5px solid purple;}</style>
</head>
<body><!-- 容器1 --><div class="container"><div class="row"><div class="col-8">區塊1</div><div class="col-4">區塊2</div></div></div><!-- 容器2 --><div class="container-md"><div class="row"><div class="col-8">區塊3</div><div class="col-4">區塊4</div></div></div><!-- 容器3 --><div class="container-fluid"><div class="row"><div class="col-8">區塊5</div><div class="col-4">區塊6</div></div></div>
</body>
</html>

容器1 (.container) 会根据不同的响应式断点变更最大容器宽度，超过576px时两侧才会有留白。

容器2 (.container-md) 的宽度是浏览器的100%宽度，直到超过指定断点(768px)，两侧才会有留白。

容器3 (.container-fluid) 在任何时候容器宽度都是浏览器的100%宽度，两侧没有留白。

在Iphone 8下效果:
荧幕宽度600px下效果:
在ipad下效果: