- 引导布局
- Bootstrap - 断点
- Bootstrap - 容器
- Bootstrap - 网格系统
- Bootstrap - 列
- Bootstrap - 排水沟
- Bootstrap - 实用程序
- Bootstrap - Z 索引
- Bootstrap - CSS 网格
- 引导组件
- Bootstrap - 手风琴
- Bootstrap - 警报
- Bootstrap - 徽章
- Bootstrap - 面包屑导航
- Bootstrap - 按钮
- Bootstrap - 按钮组
- Bootstrap - 卡片
- Bootstrap - 轮播
- Bootstrap - 关闭按钮
- Bootstrap - 折叠
- Bootstrap - 下拉菜单
- Bootstrap - 列表组
- Bootstrap - 模态
- Bootstrap - 导航栏
- Bootstrap - 导航和选项卡
- Bootstrap - Offcanvas
- Bootstrap - 分页
- Bootstrap - 占位符
- Bootstrap - 弹出窗口
- Bootstrap - 进展
- Bootstrap-Scrollspy
- Bootstrap - 旋转器
- Bootstrap - 吐司
- Bootstrap - 工具提示
- 引导表单
- Bootstrap - 表单
- Bootstrap - 表单控制
- 引导程序 - 选择
- Bootstrap - 支票和收音机
- Bootstrap - 范围
- Bootstrap - 输入组
- Bootstrap - 浮动标签
- Bootstrap - 布局
- 引导程序 - 验证
- 引导助手
- Bootstrap-Clearfix
- Bootstrap - 颜色和背景
- Bootstrap - 彩色链接
- Bootstrap - 聚焦环
- Bootstrap - 图标链接
- Bootstrap - 位置
- Bootstrap - 比率
- Bootstrap - 堆栈
- Bootstrap - 拉伸链接
- Bootstrap - 文本截断
- Bootstrap - 垂直规则
- Bootstrap - 视觉隐藏
- 引导实用程序
- Bootstrap - 背景
- Bootstrap - 边框
- Bootstrap - 颜色
- Bootstrap - 显示
- Bootstrap-Flex
- Bootstrap - 浮动
- Bootstrap - 交互
- 引导程序 - 链接
- Bootstrap - 对象拟合
- Bootstrap - 不透明度
- Bootstrap - 溢出
- Bootstrap - 位置
- Bootstrap - 阴影
- Bootstrap - 尺寸调整
- Bootstrap - 间距
- Bootstrap - 文本
- Bootstrap - 垂直对齐
- Bootstrap - 可见性
- 引导演示
- Bootstrap - 网格演示
- Bootstrap - 按钮演示
- Bootstrap - 导航演示
- Bootstrap - 博客演示
- Bootstrap - 滑块演示
- Bootstrap - 轮播演示
- Bootstrap - 标头演示
- Bootstrap - 页脚演示
- Bootstrap - 英雄演示
- Bootstrap - 特色演示
- Bootstrap - 侧边栏演示
- Bootstrap - 下拉菜单演示
- Bootstrap - 列表组演示
- Bootstrap - 模态演示
- Bootstrap - 徽章演示
- Bootstrap - 面包屑演示
- Bootstrap - Jumbotrons 演示
- Bootstrap-粘性页脚演示
- Bootstrap-相册演示
- Bootstrap-登录演示
- Bootstrap 定价演示
- Bootstrap-Checkout 演示
- Bootstrap-产品演示
- Bootstrap-封面演示
- Bootstrap-仪表板演示
- Bootstrap-粘性页脚导航栏演示
- Bootstrap-Masonry 演示
- Bootstrap-Starter 模板演示
- Bootstrap-Album RTL 演示
- Bootstrap-Checkout RTL 演示
- Bootstrap-Carousel RTL 演示
- Bootstrap-博客 RTL 演示
- Bootstrap-仪表板 RTL 演示
- Bootstrap 有用资源
- Bootstrap - 问题与解答
- Bootstrap - 快速指南
- Bootstrap - 有用的资源
- Bootstrap - 讨论
Bootstrap - 网格系统
本章将讨论 Bootstrap 网格系统。在Bootstrap中,网格系统允许跨页面最多12列,并使用flexbox构建
基本示例
Bootstrap 的网格系统是一种响应式布局工具,它使用容器、行和列来对齐内容。
使用.container类作为响应式固定宽度容器。
例子
您可以使用编辑和运行选项编辑并尝试运行此代码。
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap - Grid</title> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script> </head> <body> <div class="container text-center"> <div class="row mt-2"> <div class="col p-2 bg-primary"> First Column </div> <div class="col p-2 bg-warning"> Second Column </div> <div class="col p-2 bg-info"> Third Column </div> </div> </div> </body> </html>
怎么运行的
Bootstrap网格支持六个响应断点。断点会影响其上方的所有大小(例如 sm、md、lg、xl、xxl),从而允许您控制每个断点处的容器和列的大小和Behave。
容器居中并水平填充您的内容。使用.container实现响应式像素宽度,或使用 .container-fluid实现所有视口和设备尺寸的全宽度。对于各种断点,使用响应容器类。
行是列的包装。每列都包含水平填充。然后将此填充应用于具有负边距的行。以这种方式,列中的所有内容都是左对齐的。
Rows 支持用于统一列大小调整的修改类和用于更改文本间距的装订线类。
列非常灵活。您可以使用每行可用的 12 个模板列之一创建具有任意数量列的各种元素组合。
列宽以百分比形式设置,以适应父元素的流动性和相对大小。
装订线具有响应性和可定制性。它们可用于所有视口,并且与margin 和 padding 的大小相同。您可以使用.gx-*(对于水平装订线)、. gy-*(对于垂直装订线)、. g-*(对于所有装订线)和.g-0来删除装订线来修改装订线。
要创建更多语义标记,您可以使用预定义网格的源 Sass mixins。
Bootstrap网格系统中有六个类:
超小 ( .col-xs )
小 ( .col-sm- )
中 ( .col-md- )
大 ( .col-lg- )
超大 ( .col-xl- )
特大号 ( .col-xxl- )
下表显示了网格在这些断点上的变化情况:
特小 <576px |
小 ≥576px |
中等 ≥768px |
大 ≥992px |
超大 ≥1200px |
XX 大 ≥1400px |
|
---|---|---|---|---|---|---|
容器最大宽度 | 无(自动) | 540像素 | 720像素 | 960像素 | 1140像素 | 1320像素 |
类前缀 | .col- | .col-sm- | .col-md- | .col-lg- | .col-xl- | .col-xxl- |
列数 | 12 | - | - | - | - | - |
天沟宽度 | 1.5rem(两侧边距为 0.75rem。) | - | - | - | - | - |
定制排水沟 | 是的 | - | - | - | - | - |
可嵌套 | 是的 | - | - | - | - | - |
列排序 | 是的 | - | - | - | - | - |
自动布局列
为了在没有显式编号类的情况下轻松调整列大小,请使用特定于断点的列类,例如.col-sm-6。
等宽
使用等宽网格系统创建大小相等的网格。
两种网格布局适用于从xs到xxl的任何设备尺寸。对于每个断点,您可以添加许多无单位类,并且每个列/行将具有相同的宽度。
例子
您可以使用编辑和运行选项编辑并尝试运行此代码。
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap - Grid</title> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script> </head> <body> <div class="container text-center"> <h5>Equal columns</h5> <div class="row mt-2"> <div class="col p-2 bg-primary"> First Column </div> <div class="col p-2 bg-info"> Second Column </div> </div> <h5>Equal rows</h5> <div class="col mt-2"> <div class="row p-2 bg-warning text-white"> First Row </div> <div class="row p-2 bg-secondary text-white"> Second Row </div> <div class="row p-2 bg-success text-white"> Third Row </div> </div> </div> </body> </html>
设置一列宽度
您可以选择一列宽度,其他列会围绕该宽度自动调整大小。
使用网格类、混合或内联宽度。无论中心列的宽度如何,您都可以调整其他列的大小。
例子
您可以使用编辑和运行选项编辑并尝试运行此代码。
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap - Grid</title> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script> </head> <body> <div class="container text-center"> <div class="row mt-2"> <div class="col-6 p-2 bg-primary text-white"> First Column (col-6) </div> <div class="col-3 p-2 bg-secondary text-white"> Second Column (col-3) </div> <div class="col p-2 bg-warning text-white"> Third Column (col) </div> </div> </div> </body> </html>
可变宽度内容
使用col-{breakpoint}-auto类根据内容的自然宽度调整列的大小。
例子
您可以使用编辑和运行选项编辑并尝试运行此代码。
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap - Grid</title> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script> </head> <body> <div class="container text-center"> <div class="row justify-content-md-center mt-2"> <div class="col col-lg-2 p-2 bg-primary "> First Column </div> <div class="col-md-auto p-2 bg-info "> Second column with variable width content. </div> <div class="col col-lg-2 p-2 bg-warning"> Third Column </div> </div> </div> </body> </html>
响应式课程
在 Bootstrap 中,网格有六层预定义类,用于创建复杂的响应式布局。您可以将列/行自定义为小型、中型、大型或超大型设备。
所有断点
使用.col和.col-*类来实现在所有尺寸的设备上保持一致的网格。如果您需要特定大小的列,请使用编号类。
例子
您可以使用编辑和运行选项编辑并尝试运行此代码。
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap - Grid</title> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script> </head> <body> <div class="container text-center"> <h5>Columns</h5> <div class="row mt-2"> <div class="col p-2 bg-primary">First Column</div> <div class="col p-2 bg-warning">Second Column</div> <div class="col p-2 bg-light">Third Column</div> </div> <h5>Rows</h5> <div class="col mt-2"> <div class="row-9 p-2 bg-info">First Row</div> <div class="row-3 p-2 bg-success">Second Row</div> </div> </div> </body> </html>
水平堆叠
使用.col-sm-*类构建一个简单的网格系统,该系统堆叠在超小型和小型设备上,并在较大的设备上变成水平的。
注意:调整浏览器大小以查看在各种设备上的效果。
例子
您可以使用编辑和运行选项编辑并尝试运行此代码。
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap - Grid</title> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script> </head> <body> <div class="container text-center"> <h5>Columns</h5> <div class="row mt-2"> <div class="col-sm-6 p-2 bg-primary text-white">First Column</div> <div class="col-sm-3 p-2 bg-success text-white">Second Column</div> <div class="col-sm-2 p-2 bg-dark text-white">Third Column</div> </div> <h5>Rows</h5> <div class="col mt-2"> <div class="row-sm p-2 bg-info">First row</div> <div class="row-sm p-2 bg-warning">Second row</div> </div> </div> </body> </html>
连连看
为每个层使用各种类的组合,以便根据您的需要轻松地将列堆叠在某些网格层中。
例子
您可以使用编辑和运行选项编辑并尝试运行此代码。
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap - Grid</title> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script> </head> <body> <div class="container text-center"> <div class="row mt-2"> <div class="col-sm-4 p-2 bg-primary text-white">First column of col-sm-4</div> <div class="col-3 p-2 bg-secondary text-white">Second column of col-3</div> </div> <div class="row mt-2"> <div class="col-4 col-md-2 p-2 bg-warning text-white">First column of col-4 col-md-2</div> <div class="col-4 col-md-2 p-2 bg-secondary text-white">Second column of col-4 col-md-2</div> <div class="col-4 col-md-2 p-2 bg-info text-white">Third column of col-4 col-md-2</div> </div> <div class="row mt-2"> <div class="col-sm-3 p-2 bg-dark text-white">First column of col-sm-3</div> <div class="col-md-6 p-2 bg-success text-white">Second column of col-md-6</div> </div> </div> </body> </html>
行列
Bootstrap网格提供行列类来创建简单的网格布局。
各个行包含在.row*类中。
各个列包含在.col*类中。
使用.row-cols-*类设置单行中的列数。
使用.row-cols-auto根据其内容调整列的大小。
使用.row-cols-2类创建两个不同的列。
例子
您可以使用编辑和运行选项编辑并尝试运行此代码。
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap - Grid</title> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script> </head> <body> <div class="container text-center"> <div class="row row-cols-2"> <div class="col bg-info p-2">First Row First Column</div> <div class="col bg-primary p-2">First Row Second Column</div> <div class="col bg-warning p-2">Second Row First Column</div> </div> </div> </body> </html>
使用.row-cols-3类创建三个不同的列。
例子
您可以使用编辑和运行选项编辑并尝试运行此代码。
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap - Grid</title> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script> </head> <body> <div class="container text-center mt-2"> <div class="row row-cols-3 mt-2"> <div class="col bg-info p-2">First Row First Column</div> <div class="col bg-light p-2">First Row Second Column</div> <div class="col bg-primary p-2">First Row Third Column</div> <div class="col bg-secondary p-2">Second Row First Column</div> <div class="col bg-success p-2">Second Row Second Column</div> <div class="col bg-warning p-2">Second Row Third Column</div> </div> </div> </body> </html>
使用row-cols-auto类创建行和列的网格。
例子
您可以使用编辑和运行选项编辑并尝试运行此代码。
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap - Grid</title> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script> </head> <body> <div class="container text-center"> <div class="row row-cols-auto"> <div class="col bg-primary p-2">First Row First Column</div> <div class="col bg-secondary p-2">First Row Second Column</div> <div class="col bg-warning p-2">First Row Third Column</div> <div class="col bg-info p-2">First Row Fourth Column</div> <div class="col bg-success p-2">First Row Fifth Column</div> <div class="col bg-light p-2">First Row sixth Column</div> <div class="col bg-danger p-2">Second Row First Column</div> </div> </div> </body> </html>
使用row-cols-4类创建四个不同的列。
例子
您可以使用编辑和运行选项编辑并尝试运行此代码。
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap - Grid</title> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script> </head> <body> <div class="container text-center"> <div class="row row-cols-4"> <div class="col bg-primary p-2">First Row First Column</div> <div class="col bg-secondary p-2">First Row Second Column</div> <div class="col bg-warning p-2">First Row Third Column</div> <div class="col bg-info p-2">First Row Fourth Column</div> <div class="col bg-light p-2">Second Row First Column</div> <div class="col bg-danger p-2">Second Row Second Column</div> </div> </div> </body> </html>
使用row-cols-1、row-cols-sm-3和row-cols-md-6类。
例子
您可以使用编辑和运行选项编辑并尝试运行此代码。
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap - Grid</title> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script> </head> <body> <div class="container text-center"> <div class="row row-cols-1 row-cols-sm-3 row-cols-md-6 mt-2"> <div class="col bg-primary p-2">First Row First Column</div> <div class="col bg-light p-2">First Row Second Column</div> <div class="col bg-warning p-2">First Row Third Column</div> <div class="col bg-info p-2">First Row Fourth Column</div> <div class="col bg-danger p-2">First Row Fifth Column</div> </div> </div> </body> </html>
使用row-cols() Sass mixin。
例子
您可以使用编辑和运行选项编辑并尝试运行此代码。
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap - Grid</title> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script> <style> .custom_grid{ @media row-cols(2); @media media-breakpoint-up(lg) { @media row-cols(6); } } </style> </head> <body> <div class="container custom_grid text-center"> <div class="row"> <div class="col bg-primary p-2">First Row First Column</div> <div class="col bg-light p-2">First Row Second Column</div> <div class="col bg-warning p-2">First Row Third Column</div> <div class="col bg-info p-2">First Row Fourth Column</div> <div class="col bg-danger p-2">First Row Fifth Column</div> </div> </div> </body> </html>
嵌套
嵌套网格系统在现有网格的单个单元格中添加网格的行和列。嵌套行应由一组列组成,其总数不超过 12 列(不必使用所有 12 列)。
例子
您可以使用编辑和运行选项编辑并尝试运行此代码。
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap - Grid</title> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script> </head> <body> <div class="container text-center"> <div class="row mt-2"> <div class="col-sm bg-primary p-2"> First Column </div> <div class="col-sm bg-info p-2"> <div class="container"> <div class="row"> <div class="col col-sm bg-light"> Second Column </div> <div class="col col-sm bg-light"> Second Column </div> </div> </div> </div> <div class="col-sm bg-primary p-2"> Third Column </div> </div> </div> </body> </html>