codecamp

Bootstrap5 小工具

Bootstrap 5 提供了很多有用的类来帮组我们快速实现效果，不需要重复写一些 CSS 代码。

背景颜色

设置不同元素的背景颜色时，需要通过 .text-* 类来设置匹配的文本颜色：


<!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>

.bg-gradient 类可以设置背景颜色渐变的效果：

<!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>

边框

我们可以使用 border 相关类根据需要显示边框：


<!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>

.border-1 到 .border-5 类用于设置边框线条的宽度：

<!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>

以下设置了边框的不同颜色：

<!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>

rounded 相关类用于设置圆角：


<!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>

rounded-0 到 rounded-3 类用于设置圆角的大小：

<!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>

浮动与清除浮动

元素向右浮动使用 .float-end 类，向左浮动使用 .float-start 类， .clearfix 类用于清除浮动:

<!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>

也可以根据屏幕尺寸来设置浮动效果(.float-*-left|right - * 表示 sm (>=576px), md (>=768px), lg (>=992px), xl (>=1200px) or xxl (>=1400px)):

<!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 (&gt;=576px), md (&gt;=768px), lg (&gt;=992px), xl (&gt;=1200px) or xxl (&gt;=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>

居中对齐

使用 .mx-auto 类来设置元素居中对齐 (添加 margin-left 和 margin-right 为 auto):

<!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>

宽度与高度

宽度使用 w-* (.w-25, .w-50, .w-75, .w-100, .mw-auto, .mw-100) 类来设置。

<!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>

高度使用 h-* (.h-25, .h-50, .h-75, .h-100, .mh-auto, .mh-100) 类来设置。

<!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>

间距

间距设置语法如下:

{property}{sides}-{size}  // 适用 xs(<=576px)
{property}{sides}-{breakpoint}-{size} // 适用 sm (>=576px), md (>=768px), lg (>=992px), xl (>=1200px) 或 xxl (>=1400px)
breakpoints 指的是屏幕宽度: xs (<=576px), sm (>=576px), md (>=768px), lg (>=992px), xl (>=1200px) 或 xxl (>=1400px)。

property 代表属性，包含：

  • m - 用来设置 margin
  • p - 用来设置 padding

sides 主要指方向：

  • t - 用来设置 margin-top 或 padding-top
  • b - 用来设置 margin-bottom 或 padding-bottom
  • s - 用来设置 margin-left 或 padding-left
  • e - 用来设置 margin-right 或 padding-right
  • x - 用来设置 *-left 和 *-right
  • y - 用来设置 *-top 和 *-bottom
  • blank - 用来设置元素在四个方向的 margin 或 padding

size 指的是边距的大小：

  • 0 - 设置 margin 或 padding 为 0
  • 1 - 设置 margin 或 padding 为 $spacer * .25
  • 2 - 设置 margin 或 padding 为 $spacer * .5
  • 3 - 设置 margin 或 padding 为 $spacer
  • 4 - 设置margin 或 padding 为 $spacer * 1.5
  • 5 - 设置 margin 或 padding 为 $spacer * 3
  • auto - 设置 margin 为 auto

看下部分边距的源码设置：

.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;
}
<!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" 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>


Bootstrap5 侧边栏导航(Offcanvas)
Bootstrap5 Flex（弹性）布局
温馨提示
下载编程狮App，免费阅读超1000+编程语言教程
取消
确定
目录
Bootstrap5 安装使用
Bootstrap5 容器
Bootstrap5 网格系统
Bootstrap5 文字排版
Bootstrap5 颜色
Bootstrap5 表格
Bootstrap5 图像形状
Bootstrap5 Jumbotron(超大屏幕)
Bootstrap5 信息提示框
Bootstrap5 按钮
Bootstrap5 按钮组
Bootstrap5 徽章（Badges）
Bootstrap5 进度条
Bootstrap5 加载效果
Bootstrap5 分页
Bootstrap5 列表组
Bootstrap5 卡片
Bootstrap5 下拉菜单
Bootstrap5 导航
Bootstrap5 导航栏
Bootstrap5 轮播
Bootstrap5 模态框
Bootstrap5 提示框
Bootstrap5 弹出框
Bootstrap5 滚动监听(Scrollspy)
Bootstrap5 侧边栏导航(Offcanvas)
Bootstrap5 小工具
Bootstrap5 Flex（弹性）布局
Bootstrap5 表单
Bootstrap5 下拉菜单
Bootstrap5 复选框与单选框
Bootstrap5 选择区间
Bootstrap5 输入框组
Bootstrap5 表单浮动标签
Bootstrap5 表单验证

关闭

 MIP.setData({ 'pageTheme' : getCookie('pageTheme') || {'day':true, 'night':false}, 'pageFontSize' : getCookie('pageFontSize') || 20 }); MIP.watch('pageTheme', function(newValue){ setCookie('pageTheme', JSON.stringify(newValue)) }); MIP.watch('pageFontSize', function(newValue){ setCookie('pageFontSize', newValue) }); function setCookie(name, value){ var days = 1; var exp = new Date(); exp.setTime(exp.getTime() + days*24*60*60*1000); document.cookie = name + '=' + value + ';expires=' + exp.toUTCString(); } function getCookie(name){ var reg = new RegExp('(^| )' + name + '=([^;]*)(;|$)'); return document.cookie.match(reg) ? JSON.parse(document.cookie.match(reg)[2]) : null; }