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>
1
2
3

<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>
1
2
3
4
5
6
7
8
9
10
11

在这里插入图片描述

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>
1
2
3
4

在这里插入图片描述

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="#">Previousa>li>
    <li class="page-item"><a class="page-link" href="#">1a>li>
    <li class="page-item"><a class="page-link" href="#">2a>li>
    <li class="page-item"><a class="page-link" href="#">3a>li>
    <li class="page-item"><a class="page-link" href="#">Nexta>li>
  ul>
div>
1
2
3
4
5
6
7
8
9
10
11

在这里插入图片描述

当前页页码状态

.active

分页的对齐方式

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

面包屑导航

.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 Doeh4>
    <p class="card-text">Some example text.p>
    <a href="#" class="btn btn-primary">See Profilea>
  div>
div>
1
2
3
4
5
6
7
8

在这里插入图片描述
文字覆盖图片 .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="#">Activea>
  li>
  <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#">Dropdowna>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Link 1a>
      <a class="dropdown-item" href="#">Link 2a>
      <a class="dropdown-item" href="#">Link 3a>
    div>
1
2
3
4
5
6
7
8
9
10
11

在这里插入图片描述

选项卡下拉菜单

<div class="container mt-3">
  <h2>选项卡下拉菜单h2>
  <ul class="nav nav-tabs">
    <li class="nav-item">
      <a class="nav-link active" href="#">Activea>
    li>
    <li class="nav-item dropdown">
      <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#">Dropdowna>
      <div class="dropdown-menu">
        <a class="dropdown-item" href="#">Link 1a>
        <a class="dropdown-item" href="#">Link 2a>
        <a class="dropdown-item" href="#">Link 3a>div>
    li>
1
2
3
4
5
6
7
8
9
10
11
12
13

在这里插入图片描述

胶囊选项卡切换


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




<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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

在这里插入图片描述

Bootstrap5 导航栏

.navbar navbar-expand-sm 水平导航栏 .navbar-nav .nav-item .nav-link

Bootstrap5 导航栏

<nav class="navbar bg-light">
1

居中对齐的导航栏
.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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

轮播图片上添加描述

.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>
1
2
3
4
5
6
7

在这里插入图片描述

模态框⭐

.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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

.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>
1
2
3
4
5
6
7

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

Bootstrap5 弹出框

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

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

在这里插入图片描述

.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 1a>
      li>
      <li class="nav-item">
        <a class="nav-link" href="#section2">Section 2a>
      li>
      <li class="nav-item">
        <a class="nav-link" href="#section3">Section 3a>
      li>
    ul>
  div>
nav>

<div id="section1" class="container-fluid bg-success text-white" style="padding:100px 20px;">
  <h1>Section 1h1>
  <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 2h1>
  <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 3h1>
  <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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

在这里插入图片描述

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="#">Actiona>li>
        <li><a class="dropdown-item" href="#">Another actiona>li>
        <li><a class="dropdown-item" href="#">Something else herea>li>
      ul>
    div>
  div>
div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

在这里插入图片描述

方向

.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 子元素对齐

相关阅读:
【自动驾驶】自动驾驶感知系统与关键技术介绍
 Android TabLayout的使用与总结
 亚马逊秋季促销指南——如何更好的利用促销？
用pytorch实现神经网络
 未来智能汽车数字化转型之路必不可少强大的高级排产软件
 Java高级工程师面试总结
 内网渗透之内网信息收集（二）
数学建模--K-means聚类的Python实现
 用 OpenCV 实现图像中水平线检测与校正
 英语单词记忆（词缀 / 前缀）
原文地址：https://blog.csdn.net/qq_44174346/article/details/126056554