Bootstrap5 组件

徽章

.badge bg-secondary
.badge rounded-pill

进度条

.progress
.progress-bar
.progress-bar-striped 条纹
.progress-bar-animated 动画

  <div class="progress">
    <div class="progress-bar" style="width:70%"></div>
  </div>

<div class="progress">
    <div class="progress-bar bg-success" style="width:40%">
      安全线
    </div>
    <div class="progress-bar bg-warning" style="width:10%">
      警告线
    </div>
    <div class="progress-bar bg-danger" style="width:20%">
      危险线
    </div>
  </div>

Bootstrap5 加载效果

.spinner-border
.text-muted
.spinner-grow 闪烁
.spinnner-border-sm 加载效果大小

<button class="btn btn-primary" disabled>
    <span class="spinner-grow spinner-grow-sm"></span>
    Loading..
  </button>

Bootstrap5 分页⭐

ul .pagination
li .page-link

<div class="container mt-3">
  <h2>分页</h2>
  <p>要创建一个基本的分页可以在 ul 元素上添加 .pagination 类。然后在 li 元素上添加 .page-item 类：</p>                  
  <ul class="pagination">
    <li class="page-item"><a class="page-link" href="#">Previous</a></li>
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
    <li class="page-item"><a class="page-link" href="#">Next</a></li>
  </ul>
</div>

当前页页码状态

.active

分页的对齐方式

<ul class="pagination justify-content-center">

面包屑导航

.breadcrumb
.breadcrumb-item

Bootstrap5 列表组

.list-group
.list-group-item

.list-group-flush 移除列表边框
.list-group-horizontal 水平

.list-group-item-success 颜色

Bootstrap5 卡片

.card-body
.card-header body footer

图片卡片⭐

.card-img-top bottom

<div class="card" style="width:400px">
  <img class="card-img-top" src="img_avatar1.png" alt="Card image">
  <div class="card-body">
    <h4 class="card-title">John Doe</h4>
    <p class="card-text">Some example text.</p>
    <a href="#" class="btn btn-primary">See Profile</a>
  </div>
</div>

文字覆盖图片 .card-img-overlay

Bootstrap5 下拉菜单

.dropdown
.dropdown-menu item
.dropdown.divider 分割线
.dropdown-header 标题
dropdown dropend dropstart 左右对齐
.dropdown-menu-end 向右弹出的下拉菜单
.dropup 向上弹出的上拉菜单
.dropstart 指定向左边弹出的下拉菜单
.dropdown-item-text 下拉菜单设置文本

Bootstrap5 折叠

.date-bs-toggle=collapse
.data-bs-parent

Bootstrap5 导航⭐

.nav
.nav-item
.nav-link

nav justify-content-center -end 左右对齐

nav flex-column 垂直导航

nav.tabs 选项卡
nav-pills 胶囊导航
nav-justified 导航等宽

胶囊下拉菜单

nav nav-pills

<ul class="nav nav-pills">
  <li class="nav-item">
    <a class="nav-link active" href="#">Active</a>
  </li>
  <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#">Dropdown</a>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Link 1</a>
      <a class="dropdown-item" href="#">Link 2</a>
      <a class="dropdown-item" href="#">Link 3</a>
    </div>

选项卡下拉菜单

<div class="container mt-3">
  <h2>选项卡下拉菜单</h2>
  <ul class="nav nav-tabs">
    <li class="nav-item">
      <a class="nav-link active" href="#">Active</a>
    </li>
    <li class="nav-item dropdown">
      <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#">Dropdown</a>
      <div class="dropdown-menu">
        <a class="dropdown-item" href="#">Link 1</a>
        <a class="dropdown-item" href="#">Link 2</a>
        <a class="dropdown-item" href="#">Link 3</a></div>
    </li>

胶囊选项卡切换

<!-- Nav pills -->
 <ul class="nav nav-pills" role="tablist">
    <li class="nav-item">
      <a class="nav-link active" data-bs-toggle="pill" href="#home">Home</a>
    </li>
   <li class="nav-item">
    <a class="nav-link" data-bs-toggle="pill" href="#menu1">Menu 1</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-bs-toggle="pill" href="#menu2">Menu 2</a>
  </li>
</ul>



<!-- Tab panes -->
<div class="tab-content">
  <div class="tab-pane active container" id="home">...</div>
  <div class="tab-pane container" id="menu1">...</div>
  <div class="tab-pane container" id="menu2">...</div>
</div>

Bootstrap5 导航栏

.navbar navbar-expand-sm 水平 导航栏<nav
.navbar-nav <ul
.nav-item <li
.nav-link <a

Bootstrap5 导航栏

<nav class="navbar bg-light">

居中对齐的导航栏
.justify-content-center
navbar navbar-expand-sm bg-light justify-conter

不同颜色导航栏

.navbar-dark

.navbar-brand Logo

.navbar-brand 图片自适应

.form-inline type=“text” placeholder=“Search”
搜索框

.input-group-text 输入框前小标签
.navbar-text 非链接文本
.fixed-top -bottom 固定导航栏

Bootstrap5 轮播⭐

data-bs-ride=“carousel” 轮播定义

.carousel-indicators 指示符
data-bs-target =“#demo”
date-bs-slide-to=“1”

.carousel-inner 轮播图片
.carousel-control-prev 左右按钮

<!-- 轮播 -->
<div id="demo" class="carousel slide" data-bs-ride="carousel">

   <!-- 指示符 -->
  <div class="carousel-indicators">
    <button type="button" data-bs-target="#demo" data-bs-slide-to="0" class="active"></button>
    <button type="button" data-bs-target="#demo" data-bs-slide-to="1"></button>
    <button type="button" data-bs-target="#demo" data-bs-slide-to="2"></button>
  </div>
  
  <!-- 轮播图片 -->
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="http://static.runoob.com/images/mix/img_fjords_wide.jpg" class="d-block" style="width:100%">
    </div>
    <div class="carousel-item">
      <img src="http://static.runoob.com/images/mix/img_nature_wide.jpg" class="d-block" style="width:100%">
    </div>
    <div class="carousel-item">
      <img src="http://static.runoob.com/images/mix/img_mountains_wide.jpg" class="d-block" style="width:100%">
    </div>
  </div>
  
  <!-- 左右切换按钮 -->
  <button class="carousel-control-prev" type="button" data-bs-target="#demo" data-bs-slide="prev">
    <span class="carousel-control-prev-icon"></span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#demo" data-bs-slide="next">
    <span class="carousel-control-next-icon"></span>
  </button>
</div>
	
</body>

轮播图片上添加描述

.carousel-item
.carousel-caption

<div class="carousel-item">
  <img src="https://static.runoob.com/images/mix/img_fjords_wide.jpg" class="d-block" style="width:100%">
  <div class="carousel-caption">
        <h3>第一张图片描述标题</h3>
        <p>第一张图片描述内容显示在这里！！！</p>
  </div>
</div>

模态框⭐

.modal
.model-dialog
.model-content

.model-header
.model-title

.modal-body

.modal-footer

<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#myModal">
  打开模态框
</button>
 
 
<!-- 模态框 -->
<div class="modal" id="myModal">
  <div class="modal-dialog">
    <div class="modal-content">
 
      <!-- 模态框头部 -->
      <div class="modal-header">
        <h4 class="modal-title">模态框标题</h4>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
 
      <!-- 模态框内容 -->
      <div class="modal-body">
        模态框内容..
      </div>
 
      <!-- 模态框底部 -->
      <div class="modal-footer">
        <button type="button" class="btn btn-danger" data-bs-dismiss="modal">关闭</button>
      </div>
 
    </div>
  </div>
</div>

.modal dade 动画效果
.modal-dialog modal-sm -lg -xl
modal-fullscreen 全屏幕显示

.modal-dialog-centered 居中显示
.modal-dialog-scrollable 滚动条

提示框

data-bs-toggle=“tooltip”

<script>
// 初始化提示框
var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
  return new bootstrap.Tooltip(tooltipTriggerEl)
})
</script>

.date-bs-placement 显示提示框方向

Bootstrap5 弹出框

 <button type="button" class="btn btn-primary" data-bs-toggle="popover" title="弹出框标题" data-bs-content="弹出框内容">
    多次点我
  </button>

<script>
var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
  return new bootstrap.Popover(popoverTriggerEl)
})
</script>

.data-bs-placement =“top” 弹出框位置

data-bs-trigger=“focus” 关闭弹出窗
data-bs-trigger=“hover” 移动显示效果

Bootstrap5 滚动监听(Scrollspy)

.data-bs-spy=“scroll” data-bs-target=“…navbar” date-bs-offset=“50”

<body data-bs-spy="scroll" data-bs-target=".navbar" data-bs-offset="50">

<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">
  <div class="container-fluid">
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" href="#section1">Section 1</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#section2">Section 2</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#section3">Section 3</a>
      </li>
    </ul>
  </div>
</nav>

<div id="section1" class="container-fluid bg-success text-white" style="padding:100px 20px;">
  <h1>Section 1</h1>
  <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
  <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
</div>

<div id="section2" class="container-fluid bg-warning" style="padding:100px 20px;">
  <h1>Section 2</h1>
  <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
  <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
</div>

<div id="section3" class="container-fluid bg-secondary text-white" style="padding:100px 20px;">
  <h1>Section 3</h1>
  <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
  <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
</div>

</body>

Bootstrap5 侧边栏导航(Offcanvas)

data-bs-toggle=“offcanvas” href=“#offcanvasExample”
role=“button” aria-controls=“offcanvasExample”

<a class="btn btn-primary" data-bs-toggle="offcanvas" href="#offcanvasExample" role="button" aria-controls="offcanvasExample">
  使用链接的 href 属性
</a>
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasExample" aria-controls="offcanvasExample">
  按钮中使用 data-bs-target
</button>
 
<div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasExample" aria-labelledby="offcanvasExampleLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="offcanvasExampleLabel">侧边栏</h5>
    <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    <div>
      Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.
    </div>
    <div class="dropdown mt-3">
      <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown">
        Dropdown button
      </button>
      <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
        <li><a class="dropdown-item" href="#">Action</a></li>
        <li><a class="dropdown-item" href="#">Another action</a></li>
        <li><a class="dropdown-item" href="#">Something else here</a></li>
      </ul>
    </div>
  </div>
</div>

方向

.offcanvas-start -end -top -bottom

背景及滚动

data-bs-scroll
data-bs-backdrop

Bootstrap5 小工具

.bg-primary text-white
.bg-gradient
border border-top-0

.border-1 边框宽度
.border-primary 边框颜色
rounded-top 圆角
.mx-auto

Bootstrap5 Flex（弹性）布局

d-flex bg-secondary text-white

bg-info -warning bg-primary

.flex-row 水平
.flex-row-reverse 右对齐

.justify-content- start 内容排列

flex-fill 等宽
.flex-grow-1 扩展剩余

d-flex bg-secondary
p-2 bg-info order-3
.ms-auto 外边框
.flex-nowrap 包裹

.align-items- start 子元素对齐