Bootstrap笔记(三) 网格系统 - row与column的对齐方式

网格系统 - row与column的对齐方式

row的垂直对齐方式
column的水平对齐方式

row的垂直对齐方式

我们可以使用 .align-items-* 类别设定row的垂直对齐方式。

.align-items-start
垂直向上对齐
.align-items-center
垂直置中对齐
.align-items-end
垂直向下对齐

範例:

<!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網格系統-row的垂直對齊方式</title><style>/* 设定区块的背景颜色与框线，有助于看清楚区块的位置 */div[class^="col"] {background-color: #EBDEF0;border: 0.5px solid purple;}/* 设定row的背景颜色与框线，有助于看清楚区块在row中的垂直位置 */div[class^="row"] {background-color: #EEEEEE;border: 0.5px solid gray;height: 75px;}</style>
</head>
<body><div class="container"><div class="row align-items-start"><div class="col">區塊1</div><div class="col">區塊2</div></div><div class="row align-items-center"><div class="col">區塊3</div><div class="col">區塊4</div></div><div class="row align-items-end"><div class="col">區塊5</div><div class="col">區塊6</div></div></div>
</body>
</html>

column的水平对齐方式

我们可以使用 .justify-content-* 类别设定column的水平对齐方式。

.justify-content-start*
水平向前(容器开头)对齐
.justify-content-end*
水平向后(容器末端)对齐
.justify-content-center*
水平置中对齐
.justify-content-around*
让区块等间距放置(左右有间距，但大小不相等)
.justify-content-evenly*
让区块等间距放置(左右有间距，且大小相等)
.justify-content-between*
让区块之间等间距放置(左右没有间距)

範例:

<!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網格系統-column的水平對齊方式</title><style>/* 设定容器背景颜色，有助于看清楚间隔 */.container {background-color: #aaa;}/* 设定区块的背景颜色与框线，有助于看清楚区块的位置 */div[class^="col"] {background-color: #EBDEF0;border: 0.5px solid purple;}</style>
</head>
<body><div class="container"><div class="row justify-content-start"><div class="col-4">區塊1</div><div class="col-4">區塊2</div></div><div class="row justify-content-center"><div class="col-4">區塊3</div><div class="col-4">區塊4</div></div><div class="row justify-content-end"><div class="col-4">區塊5</div><div class="col-4">區塊6</div></div><div class="row justify-content-around"><div class="col-4">區塊7</div><div class="col-4">區塊8</div></div><div class="row justify-content-between"><div class="col-4">區塊9</div><div class="col-4">區塊10</div></div><div class="row justify-content-evenly"><div class="col-4">區塊11</div><div class="col-4">區塊12</div></div></div>
</body>
</html>

Bootstrap笔记(三) 网格系统 - row与column的对齐方式相关推荐

Bootstrap笔记(四) 网格系统 - column的宽度、位移、换行与顺序
网格系统 - column的宽度.位移.换行与顺序 column的宽度 column的位移将column换到新行 column的顺序 column的宽度我们可以使用Bootstrap提供的 .co ...
Bootstrap学习笔记(三) 网格系统
4-1实现原理网格系统的实现原理非常简单,仅仅是通过定义容器大小,平分12份(也有平分成24份或32份,但12份是最常见的),再调整内外边距,最后结合媒体查询,就制作出了强大的响应式网格系统.Boo ...
Bootstrap笔记(二) 认识网格系统
认识网格系统介绍网格选项断点(Breakpoint) 容器(Container) 介绍 Bootstrap网格系统是透过横向的row(列)和直向的column(行)来设计网页版面,他将网页宽度平 ...
Bootstrap(三) 网格系统
本文转自:http://www.imooc.com/learn/141 实现原理网格系统的实现原理非常简单,仅仅是通过定义容器大小,平分12份(也有平分成24份或32份,但12份是最常见的),再调整 ...
BootStrap笔记参考（全）-优极限
目录 BootStrap 1.主要内容 2.BootStrap的安装和使用 2.1BootStrap介绍 2.2BootStrap特点 2.3下载与使用 3.布局容器和栅格网格系统 3.1布局容器 3 ...
Bootstrap中的网格系统
实现原理网格系统的实现原理非常简单,仅仅是通过定义容器大小,平分12份(也有平分成24份或32份,但12份是最常见的),再调整内外边距,最后结合媒体查询,就制作出了强大的响应式网格系统.Bootst ...
Bootstrap基础二网格系统
原文:Bootstrap<基础二> 网格系统 Bootstrap 提供了一套响应式.移动设备优先的流式网格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列. 什 ...
Bootstrap 笔记
基本的HTML模板 <!DOCTYPE html> <html lang="en"><head><meta charset="u ...
【Flutter】Flutter 布局组件 ( 布局组件简介 | Row 组件 | Column 组件 | SizedBox 组件 | ClipOval 组件 )
文章目录一.Flutter 布局相关的组件简介二.Row 和 Column 组件三.SizedBox 组件四.ClipOval 组件五. 完整代码示例六. 相关资源一.Flutter 布 ...

Bootstrap笔记(三) 网格系统 - row与column的对齐方式

网格系统 - row与column的对齐方式

row的垂直对齐方式

column的水平对齐方式

Bootstrap笔记(三) 网格系统 - row与column的对齐方式相关推荐

最新文章

热门文章