小白教程
所有教程
关于
Search
172.70.130.132
172.70.130.132
参数设置
贡献
退出
操作
编辑
移动
保护
信息
历史
删除
查看“Bootstrap5 小工具”的源代码
本页内容
上一节:
Bootstrap5_侧边栏导航(Offcanvas)
下一节:
Bootstrap5_Flex(弹性)布局
因为以下原因,您没有权限编辑本页:
您请求的操作仅限属于该用户组的用户执行:
用户
您可以查看和复制此页面的源代码。
{{DISPLAYTITLE:Bootstrap5 小工具}}[[Category:Bootstrap 5 教程|29]] = Bootstrap5 小工具 = Bootstrap 5 提供了很多有用的类来帮组我们快速实现效果,不需要重复写一些 CSS 代码。 == 背景颜色 == 设置不同元素的背景颜色时,需要通过 .text-* 类来设置匹配的文本颜色: <sample title="" desc="" lang="html" hererun="1"> <div class="p-3 mb-2 bg-primary text-white">.bg-primary</div> <div class="p-3 mb-2 bg-secondary text-white">.bg-secondary</div> <div class="p-3 mb-2 bg-success text-white">.bg-success</div> <div class="p-3 mb-2 bg-danger text-white">.bg-danger</div> <div class="p-3 mb-2 bg-warning text-dark">.bg-warning</div> <div class="p-3 mb-2 bg-info text-dark">.bg-info</div> <div class="p-3 mb-2 bg-light text-dark">.bg-light</div> <div class="p-3 mb-2 bg-dark text-white">.bg-dark</div> <div class="p-3 mb-2 bg-body text-dark">.bg-body</div> <div class="p-3 mb-2 bg-white text-dark">.bg-white</div> <div class="p-3 mb-2 bg-transparent text-dark">.bg-transparent</div> </sample> <run name=""> <!DOCTYPE html> <html> <head> <title>Bootstrap5 实例</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js"></script> </head> <body> <div class="container mt-3"> <div class="p-3 mb-2 bg-primary text-white">.bg-primary</div> <div class="p-3 mb-2 bg-secondary text-white">.bg-secondary</div> <div class="p-3 mb-2 bg-success text-white">.bg-success</div> <div class="p-3 mb-2 bg-danger text-white">.bg-danger</div> <div class="p-3 mb-2 bg-warning text-dark">.bg-warning</div> <div class="p-3 mb-2 bg-info text-dark">.bg-info</div> <div class="p-3 mb-2 bg-light text-dark">.bg-light</div> <div class="p-3 mb-2 bg-dark text-white">.bg-dark</div> <div class="p-3 mb-2 bg-body text-dark">.bg-body</div> <div class="p-3 mb-2 bg-white text-dark">.bg-white</div> <div class="p-3 mb-2 bg-transparent text-dark">.bg-transparent</div> </div> </body> </html> </run> .bg-gradient 类可以设置背景颜色渐变的效果: <sample title="" desc="" lang="html" hererun="1"> <div class="p-3 mb-2 bg-primary bg-gradient text-white">.bg-primary</div> <div class="p-3 mb-2 bg-secondary bg-gradient text-white">.bg-secondary</div> <div class="p-3 mb-2 bg-success bg-gradient text-white">.bg-success</div> <div class="p-3 mb-2 bg-danger bg-gradient text-white">.bg-danger</div> <div class="p-3 mb-2 bg-warning bg-gradient text-dark">.bg-warning</div> <div class="p-3 mb-2 bg-info bg-gradient text-dark">.bg-info</div> <div class="p-3 mb-2 bg-light bg-gradient text-dark">.bg-light</div> <div class="p-3 mb-2 bg-dark bg-gradient text-white">.bg-dark</div> <div class="p-3 mb-2 bg-body bg-gradient text-dark">.bg-body</div> <div class="p-3 mb-2 bg-white bg-gradient text-dark">.bg-white</div> <div class="p-3 mb-2 bg-transparent bg-gradient text-dark">.bg-transparent</div> </sample> <run name=""> <!DOCTYPE html> <html> <head> <title>Bootstrap5 实例</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js"></script> </head> <body> <div class="container mt-3"> <div class="p-3 mb-2 bg-primary bg-gradient text-white">.bg-primary</div> <div class="p-3 mb-2 bg-secondary bg-gradient text-white">.bg-secondary</div> <div class="p-3 mb-2 bg-success bg-gradient text-white">.bg-success</div> <div class="p-3 mb-2 bg-danger bg-gradient text-white">.bg-danger</div> <div class="p-3 mb-2 bg-warning bg-gradient text-dark">.bg-warning</div> <div class="p-3 mb-2 bg-info bg-gradient text-dark">.bg-info</div> <div class="p-3 mb-2 bg-light bg-gradient text-dark">.bg-light</div> <div class="p-3 mb-2 bg-dark bg-gradient text-white">.bg-dark</div> <div class="p-3 mb-2 bg-body bg-gradient text-dark">.bg-body</div> <div class="p-3 mb-2 bg-white bg-gradient text-dark">.bg-white</div> <div class="p-3 mb-2 bg-transparent bg-gradient text-dark">.bg-transparent</div> </div> </body> </html> </run> == 边框 == 我们可以使用 border 相关类根据需要显示边框: <sample title="" desc="" lang="html" hererun="1"> <span class="border"></span> <span class="border border-0"></span> <span class="border border-top-0"></span> <span class="border border-right-0"></span> <span class="border border-bottom-0"></span> <span class="border border-left-0"></span> <br> <span class="border-top"></span> <span class="border-end"></span> <span class="border-bottom"></span> <span class="border-start"></span> </sample> <run name=""> <!DOCTYPE html> <html> <head> <title>Bootstrap5 实例</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js"></script> <style> span { display: inline-block; width: 75px; height: 75px; margin: 6px; background-color: #f9f9f9; } </style> </head> <body> <div class="container mt-3"> <span class="border"></span> <span class="border border-0"></span> <span class="border border-top-0"></span> <span class="border border-right-0"></span> <span class="border border-bottom-0"></span> <span class="border border-left-0"></span> <br> <span class="border-top"></span> <span class="border-end"></span> <span class="border-bottom"></span> <span class="border-start"></span> </div> </body> </html> </run> .border-1 到 .border-5 类用于设置边框线条的宽度: <sample title="" desc="" lang="html" hererun="1"> <span class="border border-1"></span> <span class="border border-2"></span> <span class="border border-3"></span> <span class="border border-4"></span> <span class="border border-5"></span> </sample> <run name=""> <!DOCTYPE html> <html> <head> <title>Bootstrap5 实例</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js"></script> <style> span { display: inline-block; width: 75px; height: 75px; margin: 6px; background-color: #f9f9f9; } </style> </head> <body> <div class="container mt-3"> <span class="border border-1"></span> <span class="border border-2"></span> <span class="border border-3"></span> <span class="border border-4"></span> <span class="border border-5"></span> </div> </body> </html> </run> 以下设置了边框的不同颜色: <sample title="" desc="" lang="html" hererun="1"> <span class="border border-primary"></span> <span class="border border-secondary"></span> <span class="border border-success"></span> <span class="border border-danger"></span> <span class="border border-warning"></span> <span class="border border-info"></span> <span class="border border-light"></span> <span class="border border-dark"></span> <span class="border border-white"></span> </sample> <run name=""> <!DOCTYPE html> <html> <head> <title>Bootstrap5 实例</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js"></script> <style> span { display: inline-block; width: 75px; height: 75px; margin: 6px; background-color: #f9f9f9; } </style> </head> <body> <div class="container mt-3"> <span class="border border-primary"></span> <span class="border border-secondary"></span> <span class="border border-success"></span> <span class="border border-danger"></span> <span class="border border-warning"></span> <span class="border border-info"></span> <span class="border border-light"></span> <span class="border border-dark"></span> <span class="border border-white"></span> </div> </body> </html> </run> '''rounded''' 相关类用于设置圆角: <sample title="" desc="" lang="html" hererun="1"> <img src="..." class="rounded" alt="..."> <img src="..." class="rounded-top" alt="..."> <img src="..." class="rounded-end" alt="..."> <img src="..." class="rounded-bottom" alt="..."> <img src="..." class="rounded-start" alt="..."> <img src="..." class="rounded-circle" alt="..."> <img src="..." class="rounded-pill" alt="..."> </sample> <run name=""> <!DOCTYPE html> <html> <head> <title>Bootstrap5 实例</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js"></script> <style> .bd-placeholder-img { font-size: 1.125rem; text-anchor: middle; -webkit-user-select: none; -moz-user-select: none; user-select: none; } .rounded { border-radius: .25rem!important; } </style> </head> <body> <div class="container mt-3"> <svg class="bd-placeholder-img rounded" width="75" height="75" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Example rounded image: 75x75" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Example rounded image</title><rect width="100%" height="100%" fill="#868e96"></rect><text x="50%" y="50%" fill="#dee2e6" dy=".3em">75x75</text></svg> <svg class="bd-placeholder-img rounded-top" width="75" height="75" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Example top rounded image: 75x75" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Example top rounded image</title><rect width="100%" height="100%" fill="#868e96"></rect><text x="50%" y="50%" fill="#dee2e6" dy=".3em">75x75</text></svg> <svg class="bd-placeholder-img rounded-end" width="75" height="75" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Example right rounded image: 75x75" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Example right rounded image</title><rect width="100%" height="100%" fill="#868e96"></rect><text x="50%" y="50%" fill="#dee2e6" dy=".3em">75x75</text></svg> <svg class="bd-placeholder-img rounded-bottom" width="75" height="75" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Example bottom rounded image: 75x75" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Example bottom rounded image</title><rect width="100%" height="100%" fill="#868e96"></rect><text x="50%" y="50%" fill="#dee2e6" dy=".3em">75x75</text></svg> <svg class="bd-placeholder-img rounded-start" width="75" height="75" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Example left rounded image: 75x75" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Example left rounded image</title><rect width="100%" height="100%" fill="#868e96"></rect><text x="50%" y="50%" fill="#dee2e6" dy=".3em">75x75</text></svg> <svg class="bd-placeholder-img rounded-circle" width="75" height="75" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Completely round image: 75x75" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Completely round image</title><rect width="100%" height="100%" fill="#868e96"></rect><text x="50%" y="50%" fill="#dee2e6" dy=".3em">75x75</text></svg> <svg class="bd-placeholder-img rounded-pill" width="150" height="75" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Rounded pill image: 150x75" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Rounded pill image</title><rect width="100%" height="100%" fill="#868e96"></rect><text x="50%" y="50%" fill="#dee2e6" dy=".3em">150x75</text></svg> </div> </body> </html> </run> rounded-0 到 rounded-3 类用于设置圆角的大小: <sample title="" desc="" lang="html" hererun="1"> <img src="..." class="rounded-0" alt="..."> <img src="..." class="rounded-1" alt="..."> <img src="..." class="rounded-2" alt="..."> <img src="..." class="rounded-3" alt="..."> </sample> <run name=""> <!DOCTYPE html> <html> <head> <title>Bootstrap5 实例</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js"></script> <style> .bd-placeholder-img { font-size: 1.125rem; text-anchor: middle; -webkit-user-select: none; -moz-user-select: none; user-select: none; } </style> </head> <body> <div class="container mt-3"> <svg class="bd-placeholder-img rounded-0" width="75" height="75" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Example non-rounded image: 75x75" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Example non-rounded image</title><rect width="100%" height="100%" fill="#868e96"></rect><text x="50%" y="50%" fill="#dee2e6" dy=".3em">75x75</text></svg> <svg class="bd-placeholder-img rounded-1" width="75" height="75" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Example small rounded image: 75x75" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Example small rounded image</title><rect width="100%" height="100%" fill="#868e96"></rect><text x="50%" y="50%" fill="#dee2e6" dy=".3em">75x75</text></svg> <svg class="bd-placeholder-img rounded-2" width="75" height="75" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Example default rounded image: 75x75" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Example default rounded image</title><rect width="100%" height="100%" fill="#868e96"></rect><text x="50%" y="50%" fill="#dee2e6" dy=".3em">75x75</text></svg> <svg class="bd-placeholder-img rounded-3" width="75" height="75" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Example large rounded image: 75x75" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Example large rounded image</title><rect width="100%" height="100%" fill="#868e96"></rect><text x="50%" y="50%" fill="#dee2e6" dy=".3em">75x75</text></svg> </div> </body> </html> </run> == 浮动与清除浮动 == 元素向右浮动使用 .float-end 类,向左浮动使用 .float-start 类, .clearfix 类用于清除浮动: <sample title="" desc="" lang="html" hererun="1"> <div class="clearfix"> <span class="float-start">Float left</span> <span class="float-end">Float right</span> </div> </sample> <run name=""> <!DOCTYPE html> <html> <head> <title>Bootstrap5 实例</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js"></script> </head> <body> <div class="container mt-3"> <h2>浮动</h2> <p>元素向右浮动使用 .float-end 类,向左浮动使用 .float-start 类, .clearfix 类用于清除浮动:</p> <div class="clearfix"> <span class="float-start">Float left</span> <span class="float-end">Float right</span> </div> </div> </body> </html> </run> 也可以根据屏幕尺寸来设置浮动效果(.float-*-left|right - * 表示 sm (>=576px), md (>=768px), lg (>=992px), xl (>=1200px) or xxl (>=1400px)): <sample title="" desc="" lang="html" hererun="1"> <div class="float-sm-end">小屏幕向右浮动</div><br> <div class="float-md-end">中等屏幕向右浮动</div><br> <div class="float-lg-end">大屏幕向右浮动</div><br> <div class="float-xl-end">超大屏幕向右浮动</div><br> <div class="float-xxl-end">特大屏幕向右浮动</div><br> <div class="float-none">没有浮动</div> </sample> <run name=""> <!DOCTYPE html> <html> <head> <title>Bootstrap5 实例</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js"></script> </head> <body> <div class="container mt-3"> <h2>响应式浮动</h2> <p>可以根据屏幕尺寸来设置浮动效果(.float-*-left|right - * 表示 sm (>=576px), md (>=768px), lg (>=992px), xl (>=1200px) or xxl (>=1400px)):</p> <p>重置浏览器查看效果</p> <div class="clearfix"> <div class="float-sm-end">小屏幕向右浮动</div><br> <div class="float-md-end">中等屏幕向右浮动</div><br> <div class="float-lg-end">大屏幕向右浮动</div><br> <div class="float-xl-end">超大屏幕向右浮动</div><br> <div class="float-xxl-end">特大屏幕向右浮动</div><br> <div class="float-none">没有浮动</div> </div> </div> </body> </html> </run> == 居中对齐 == 使用 .mx-auto 类来设置元素居中对齐 (添加 margin-left 和 margin-right 为 auto): <sample title="" desc="" lang="html" hererun="1"> <div class="mx-auto bg-warning" style="width:150px">居中对齐</div> </sample> <run name=""> <!DOCTYPE html> <html> <head> <title>Bootstrap5 实例</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js"></script> </head> <body> <div class="container mt-3"> <div class="mx-auto bg-warning" style="width:150px">居中对齐</div> </div> </body> </html> </run> == 宽度与高度 == 宽度使用 w-* (.w-25, .w-50, .w-75, .w-100, .mw-auto, .mw-100) 类来设置。 <sample title="" desc="" lang="html" hererun="1"> <div class="w-25 bg-warning">宽度为 25%</div> <div class="w-50 bg-warning">宽度为 50%</div> <div class="w-75 bg-warning">宽度为 75%</div> <div class="w-100 bg-warning">宽度为 100%</div> <div class="w-auto bg-warning">自动设置宽度</div> <div class="mw-100 bg-warning">最大宽度为 100%</div> </sample> <run name=""> <!DOCTYPE html> <html> <head> <title>Bootstrap5 实例</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js"></script> </head> <body> <div class="container mt-3"> <div class="w-25 bg-warning">宽度为 25%</div> <div class="w-50 bg-warning">宽度为 50%</div> <div class="w-75 bg-warning">宽度为 75%</div> <div class="w-100 bg-warning">宽度为 100%</div> <div class="w-auto bg-warning">自动设置宽度</div> <div class="mw-100 bg-warning">最大宽度为 100%</div> </div> </body> </html> </run> 高度使用 h-* (.h-25, .h-50, .h-75, .h-100, .mh-auto, .mh-100) 类来设置。 <sample title="" desc="" lang="html" hererun="1"> <div style="height:200px;background-color:#ddd"> <div class="h-25 d-inline-block p-2 bg-warning">高度为 25%</div> <div class="h-50 d-inline-block p-2 bg-warning">高度为 50%</div> <div class="h-75 d-inline-block p-2 bg-warning">高度为 75%</div> <div class="h-100 d-inline-block p-2 bg-warning">高度为 100%</div> <div class="h-auto d-inline-block p-2 bg-warning">自动设置高度</div> <div class="mh-100 d-inline-block p-2 bg-warning" style="height:500px">最大高度为 100%</div> </div> </sample> <run name=""> <!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.bundle.min.js"></script> </head> <body> <div class="container mt-3"> <div style="height:200px;background-color:#ddd"> <div class="h-25 d-inline-block p-2 bg-warning">高度为 25%</div> <div class="h-50 d-inline-block p-2 bg-warning">高度为 50%</div> <div class="h-75 d-inline-block p-2 bg-warning">高度为 75%</div> <div class="h-100 d-inline-block p-2 bg-warning">高度为 100%</div> <div class="h-auto d-inline-block p-2 bg-warning">自动设置高度</div> <div class="mh-100 d-inline-block p-2 bg-warning" style="height:500px">最大高度为 100%</div> </div> </div> </body> </html> </run> == 间距 == 间距设置语法如下: <pre>{property}{sides}-{size} </pre> property 代表属性,包含: * <code>m</code> - 用来设置 <code>margin</code> * <code>p</code> - 用来设置 <code>padding</code> sides 主要指方向: * <code>t</code> - 用来设置 <code>margin-top</code> 或 <code>padding-top</code> * <code>b</code> - 用来设置 <code>margin-bottom</code> 或 <code>padding-bottom</code> * <code>l</code> - 用来设置 <code>margin-left</code> 或 <code>padding-left</code> * <code>r</code> - 用来设置 <code>margin-right</code> 或 <code>padding-right</code> * <code>x</code> - 用来设置 <code>*-left</code> 和 <code>*-right</code> * <code>y</code> - 用来设置 <code>*-top</code> 和 <code>*-bottom</code> * blank - 用来设置元素在四个方向的 <code>margin</code> 或 <code>padding</code> size 指的是边距的大小: * <code>0</code> - 设置 <code>margin</code> 或 <code>padding</code> 为 <code>0</code> * <code>1</code> - 设置 <code>margin</code> 或 <code>padding</code> 为 <code>$spacer * .25</code> * <code>2</code> - 设置 <code>margin</code> 或 <code>padding</code> 为 <code>$spacer * .5</code> * <code>3</code> - 设置 <code>margin</code> 或 <code>padding</code> 为 <code>$spacer</code> * <code>4</code> - 设置<code>margin</code> 或 <code>padding</code> 为 <code>$spacer * 1.5</code> * <code>5</code> - 设置 <code>margin</code> 或 <code>padding</code> 为 <code>$spacer * 3</code> * <code>auto</code> - 设置 <code>margin</code> 为 auto 看下部分边距的源码设置: <pre>.mt-0 { margin-top: 0 !important; } .ml-1 { margin-left: ($spacer * .25) !important; } .px-2 { padding-left: ($spacer * .5) !important; padding-right: ($spacer * .5) !important; } .p-3 { padding: $spacer !important; }</pre> <sample title="" desc="" lang="html" hererun="1"> <div class="mx-auto" style="width: 200px;"> 元素设置居中 </div> <form > <div class="form-row"> <div class="form-group"> <label for="text" class="mt-2">设置 margin-top:</label> <input type="text" class="form-control" id="text" placeholder="email"> <label for="color" class="mt-2">颜色:</label> <input type="color" id="color" class="form-control" style="width: 60px;padding: 4px;" autocomplete="off" value="#656565"> </div> </div> </form> </sample> <run name=""> <!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.bundle.min.js"></script> </head> <body> <div class="container mt-3"> <div class="mx-auto" style="width: 200px;"> 元素设置居中 </div> <form> <div class="form-row"> <div class="form-group"> <label for="text" class="mt-2">设置 margin-top:</label> <input type="text" class="form-control" id="text" placeholder="email"> <label for="color" class="mt-2">颜色:</label> <input type="color" id="color" class="form-control" style="width: 60px;padding: 4px;" autocomplete="off" value="#656565"> </div> </div> </form> </div> </body> </html> </run>
返回至“
Bootstrap5 小工具
”。
上一节:
Bootstrap5_侧边栏导航(Offcanvas)
下一节:
Bootstrap5_Flex(弹性)布局