BootStrap5快速入门

BootStrap5快速入门

本教程只记录部分常用的

官方文档请前往官网:[简介 · Bootstrap v5 中文文档 v5.1 | Bootstrap 中文网 (bootcss.com)](简介 · Bootstrap v5 中文文档 v5.1 | Bootstrap 中文网 (bootcss.com))

教程还可参考菜鸟教程:[Bootstrap5 教程 | 菜鸟教程 (runoob.com)](Bootstrap5 教程 | 菜鸟教程 (runoob.com))

引入

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" 
    rel="stylesheet" 
    integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" 
    crossorigin="anonymous">



<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" 
    integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" 
    crossorigin="anonymous">script>

1.容器

• .container 类用于固定宽度并支持响应式布局的容器。
• .container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器

2.网格系统

随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多 12 列

• .col- 针对所有设备。
• .col-sm- 平板 - 屏幕宽度等于或大于 576px。
• .col-md- 桌面显示器 - 屏幕宽度等于或大于 768px。
• .col-lg- 大桌面显示器 - 屏幕宽度等于或大于 992px。
• .col-xl- 特大桌面显示器 - 屏幕宽度等于或大于 1200px。
• .col-xxl- 超大桌面显示器 - 屏幕宽度等于或大于 1400px。

3.文字排版标签

• Display 标题类

  • .display-1
  • .display-2
  • .display-3
  • .display-4

• small

  • 用于字号更小的颜色更浅的文本

• mark

  • 定义 标签及 .mark 类为黄色背景及有一定的内边距

• abbr

  • 显示在文本底部的一条虚线边框

• blockquote

  • 对于引用的内容可以在

    上添加 .blockquote 类 :

• code

  • 可以将一些代码元素放到 code 元素里面

• kbd

  • 可以用于一些快捷键的显示,背景为黑色

更多排版

类名	描述
.lead	让段落更突出
.small	指定更小文本 (为父元素的 85% )
.text-start	左对齐
.text-center	居中
.text-end	右对齐
.text-justify	设定文本对齐,段落中超出屏幕部分文字自动换行
.text-nowrap	段落中超出屏幕部分不换行
.text-lowercase	设定文本小写
.text-uppercase	设定文本大写
.text-capitalize	设定单词首字母大写
.initialism	显示在 元素中的文本以小号字体展示，且可以将小写字母转换为大写字母
.list-unstyled	移除默认的列表样式，列表项中左对齐 ( 和 中)。 这个类仅适用于直接子列表项 (如果需要移除嵌套的列表项，你需要在嵌套的列表中使用该样式)
.list-inline	将所有列表项放置同一行

4.颜色

​ 代码展示:

<div class="container">
  <h2>代表指定意义的文本颜色h2>
  <p class="text-muted">柔和的文本。p>
  <p class="text-primary">重要的文本。p>
  <p class="text-success">执行成功的文本。p>
  <p class="text-info">代表一些提示信息的文本。p>
  <p class="text-warning">警告文本。p>
  <p class="text-danger">危险操作文本。p>
  <p class="text-secondary">副标题。p>
  <p class="text-dark">深灰色文字。p>
  <p class="text-body">默认颜色，为黑色。p>
  <p class="text-light">浅灰色文本（白色背景上看不清楚）。p>
  <p class="text-white">白色文本（白色背景上看不清楚）。p>
div>

• 设置文本透明度

使用 .text-black-50 或 .text-white-50 类:

• 还可以在链接中使用

• 背景颜色----代码展示

  <div class="container">
    <h2>背景颜色h2>
    <p class="bg-primary text-white">重要的背景颜色。p>
    <p class="bg-success text-white">执行成功背景颜色。p>
    <p class="bg-info text-white">信息提示背景颜色。p>
    <p class="bg-warning text-white">警告背景颜色p>
    <p class="bg-danger text-white">危险背景颜色。p>
    <p class="bg-secondary text-white">副标题背景颜色。p>
    <p class="bg-dark text-white">深灰背景颜色。p>
    <p class="bg-light text-dark">浅灰背景颜色。p>
  div>
  

5.表格

通过.table类设置基础表格样式…更多设置请参考官网…

6.形状

• 圆角图片:.rounded
• 椭圆图片:.rounded-circle
• 缩略图:.img-thumbnail(有边框)
• 对齐方式:
  • .float-start 左对齐
  • .float-end 右对齐
  • .mx-auto (margin:auto) 和 .d-block (display:block) 居中
• 响应式
  • .img-fluid相当于设置了 max-width: 100%; 、 height: auto;

7.消息提示

提示框可以使用 .alert 类, 后面加上 .alert-success, .alert-info, .alert-warning, .alert-danger, .alert-primary, .alert-secondary, .alert-light 或 .alert-dark 类来实现

• 关闭提示框

成功! 指定操作成功提示信息。

  - 通过.alert-dismissible ,然后在关闭按钮添加class="btn-close" data-bs-dismiss="alert"

- 动画效果

  - 通过.fade和.show设置淡入淡出效果

8.按钮

代码演示:

<button type="button" class="btn">基本按钮button>
<button type="button" class="btn btn-primary">主要按钮button>
<button type="button" class="btn btn-secondary">次要按钮button>
<button type="button" class="btn btn-success">成功button>
<button type="button" class="btn btn-info">信息button>
<button type="button" class="btn btn-warning">警告button>
<button type="button" class="btn btn-danger">危险button>
<button type="button" class="btn btn-dark">黑色button>
<button type="button" class="btn btn-light">浅色button>
<button type="button" class="btn btn-link">链接button>

• 设置边框
  • 例如btn-primary----》btn-outline-primary,这样就有边框了
• 设置大小
  • .btn-lg大按钮 .btn-sm小按钮
• 块级按钮
  • 通过添加.btn-block设置,父元素需要设置class=“.d-grid”
• 激活和禁止
  • .active激活 disabled 禁止
• 加载
  • 例如:

 <button class="btn btn-primary">
   <span class="spinner-border spinner-border-sm">span>
   Loading..
 button>

9.徽章

徽章（Badges）主要用于突出显示新的或未读的项。如需使用徽章，只需要将 .badge 类加上带有指定意义的颜色类 (如 .bg-secondary) 添加到 元素上即可。 徽章可以根据父元素的大小的变化而变化:

• 颜色大全

  • <span class="badge bg-primary">主要span>
     <span class="badge bg-secondary">次要span>
     <span class="badge bg-success">成功span>
     <span class="badge bg-danger">危险span>
     <span class="badge bg-warning">警告span>
     <span class="badge bg-info">信息span>
     <span class="badge bg-light">浅色span>
     <span class="badge bg-dark">深色span>
    

- 设置成药丸形状

  - **.rounded-pill**类即可设置

10.进度条

• 步骤:

  • 添加一个带有 .progress 类的
    。
  • 接着，在上面的
    内，添加一个带有 class .progress-bar 的空的

    。
  • 添加一个带有百分比表示的宽度的 style 属性，例如 style=“width:70%” 表示进度条在 70% 的位置。

• 不同颜色

  • bg-success(蓝)
  • bg-info(绿)
  • bg-warning(黄)
  • bg-danger(红)

• 带条纹

  • 使用 .progress-bar-striped 类来设置条纹进度条

• 带动画

  • 使用 .progress-bar-animated 类可以为进度条添加动画

• 混合色彩

Free Space

Warning

Danger

11.加载

​ 要创建加载中效果可以使用 .spinner-border 类:

• 闪烁效果

  • 使用 .spinner-grow 类来设置闪烁的加载效果:

• 设置大小

  • 使用.spinner-border-sm 或 .spinner-grow-sm 类来创建加载效果的大小:

• 加载按钮

  • <button class="btn btn-primary">
     <span class="spinner-border spinner-border-sm">span>
     button>
    

12.分页

要创建一个基本的分页可以在

• 元素上添加 .pagination 类。然后在
• 元素上添加 .page-item 类，
• 元素的 标签上添加 .page-link 类:

举个例子:

<ul class="pagination">
<li class="page-item"><a class="page-link" href="#">上一页a>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="#">下一页a>li>
ul>

• 当前页码状态
  • 使用.active来设置成高亮显示
• 显示大小
  • .pagination-lg 类设置大字体的分页条
  • 目，.pagination-sm 类设置小字体的分页条目:
• 或者用于面包屑导航
  • breadcrumb 和 .breadcrumb-item 类用于设置面包屑导航
  • 举例:

 <ul class="breadcrumb">
   <li class="breadcrumb-item"><a href="#">首页a>li>
   <li class="breadcrumb-item"><a href="#">我的a>li>
   <li class="breadcrumb-item"><a href="#">文章a>li>
   <li class="breadcrumb-item active">Studyli>
 ul>

13.列表组

• 创建:
  • 可以在
    • 元素上添加 .list-group 类, 在
    • 元素上添加 .list-group-item 类
  • 激活状态
    • 添加.active设置已激活
  • 禁用
    • 添加disabled设置禁用
  • 移除边框
    • 使用**.list-group-flush** 类来删除列表的边框和圆角
  • 水平显示
    • 将 .list-group-horizontal 类添加到 .list-group 类后面来创建水平列表组

14.卡片

• .card-header类用于创建卡片的头部样式

• .card-body 类用于创建卡片的内容样式：

• .card-footer 类用于创建卡片的底部样式：

• 颜色大全:

  • .bg-primary, .bg-success, .bg-info, .bg-warning, .bg-danger, .bg-secondary, .bg-dark .bg-light
  • 

• 图片卡片

  • 我们可以给 添加 .card-img-top（图片在文字上方） 或 .card-img-bottom（图片在文字下方 来设置图片卡片：

  pengke

  Some text.

  确认

   
  
  - 如果要设为背景图用:**.card-img-overlay** 类:
  
    - ```html
   
  
     
     
  
       
  用户名
       
  一些内容.
       确认
     
   
  
  

15.下拉菜单

.dropdown 类用来指定一个下拉菜单。

我们可以使用一个按钮或链接来打开下拉菜单， 按钮或链接需要添加 .dropdown-toggle 和 data-toggle=“dropdown” 属性

元素上添加 .dropdown-menu 类来设置实际下拉菜单，然后在下拉菜单的选项中添加 .dropdown-item 类

• 实例

下拉菜单按钮

链接 1 链接 2 链接 3

- 添加分割线

  - 使用**.dropdown-divider** 类

 ```html
 

• 设置标题
  • 使用**.dropdown-header** 类
• 弹出方向
  • dropup类(向上)
  • dropstart 类(向左)
  • .dropdown-menu-end类(右下)
• 设置文本
  • 使用**.dropdown-item-text** 类

16.手风琴

设置父标签类为accordion

设置子标签类为accordion-item

代码示例:

<div class="accordion" id="accordionExample">
             <div class="accordion-item">
               <h2 class="accordion-header" id="headingOne">
                 <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                   Accordion Item #1
                 button>
               h2>
               <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
                 <div class="accordion-body">
                   <strong>This is the first item's accordion body.strong> It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-bodycode>, though the transition does limit overflow.
                 div>
               div>
             div>
             <div class="accordion-item">
               <h2 class="accordion-header" id="headingTwo">
                 <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                   Accordion Item #2
                 button>
               h2>
               <div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
                 <div class="accordion-body">
                   <strong>This is the second item's accordion body.strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-bodycode>, though the transition does limit overflow.
                 div>
               div>
             div>
             <div class="accordion-item">
               <h2 class="accordion-header" id="headingThree">
                 <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
                   Accordion Item #3
                 button>
               h2>
               <div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#accordionExample">
                 <div class="accordion-body">
                   <strong>This is the third item's accordion body.strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-bodycode>, though the transition does limit overflow.
                 div>
               div>
             div>
           div>

17.导航

默认为水平导航

关键词:nav

使用:可以在

• 元素上添加 .nav类，在每个
• 选项上添加 .nav-item 类，在每个链接上添加 .nav-link 类

示例:

<ul class="nav">
<li class="nav-item">
 <a class="nav-link" href="#">Linka>
li>
<li class="nav-item">
 <a class="nav-link" href="#">Linka>
li>
<li class="nav-item">
 <a class="nav-link" href="#">Linka>
li>
<li class="nav-item">
 <a class="nav-link disabled" href="#">Disableda>
li>
ul>

• 对齐方式
  • .justify-content-center居中
  • .justify-content-end右对齐
• 水平(默认)改为垂直
  • .flex-column 类用于创建垂直导航
• 选项卡
  • 使用 .nav-tabs 类可以将导航转化为选项卡。然后对于选中的选项使用 .active 类来标记
• 改为胶囊形状
  • .nav-pills可以设置成该形状
• 导航等宽
  • .nav-justified 类可以设置导航项齐行等宽显示。
• 动态选项卡
  • 如果你要设置选项卡是动态可切换的，可以在每个链接上添加 data-bs-toggle=“tab” 属性。 然后在每个选项对应的内容的上添加 .tab-pane 类，对应选项卡的内容的
    标签使用 .tab-content 类

如果你希望有淡入效果可以在 .tab-pane 后添加 .fade类:

• 示例:

选项卡切换

• Home
• Menu 1
• Menu 2

​

HOME

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Menu 1

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Menu 2

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.

18.轮播

类	描述
.carousel	创建一个轮播
.carousel-indicators	为轮播添加一个指示符，就是轮播图底下的一个个小点，轮播的过程可以显示目前是第几张图。
.carousel-inner	添加要切换的图片
.carousel-item	指定每个图片的内容
.carousel-control-prev	添加左侧的按钮，点击会返回上一张。
.carousel-control-next	添加右侧按钮，点击会切换到下一张。
.carousel-control-prev-icon	与 .carousel-control-prev 一起使用，设置左侧的按钮
.carousel-control-next-icon	与 .carousel-control-next 一起使用，设置右侧的按钮
.slide	切换图片的过渡和动画效果，如果你不需要这样的效果，可以删除这个类。

• 实现一个简单的轮播

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

• 添加文字描述

  • 在每个
    内添加

    来设置轮播图片的描述文本

19.模态框(信息交互)

模态框是覆盖在父窗体上的子窗体

• 简单使用:

模态框实例

点击按钮打开模态框

打开模态框

 
 

   
模态框标题
   
 

 
 

   模态框内容..
 

 
 

   关闭
 

- 添加动画

  - 在父标签添加.fade

  - ```html
 
 

  
 
 

• 全屏显示
  • 使用 .modal-fullscreen 类
• 尺寸
• 放在**.modal-dialog** 类后
  • .modal-sm小
  • .modal-lg 大
  • modal-xl 超大

20.提示框

• 通过向元素添加 data-bs-toggle=“tooltip” 来来创建提示框。
• title 属性的内容为提示框显示的内容
• 指定位置
  • 可以使用 data-bs-placement 属性来设定提示框显示的方向: top, bottom, left 或 right:
  • 例如:

 <a href="#" data-bs-toggle="tooltip" data-bs-placement="top" title="上!">鼠标移动到我这a>

21.回到顶部

只需要设定锚点跳转为top即可

<a href="#top">回到顶部i>a>

----------------总结

做一个首页总结一下…

• fixed-top类可固定上方导航栏

练习实战

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>BootStrap5title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" 
    rel="stylesheet" 
    integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" 
    crossorigin="anonymous">
head>
<body>
    
    <nav class="navbar navbar-expand-lg bg-dark navbar-dark fixed-top">
        <div class="container">
        <a href="#" class="navbar-brand">碰磕Studya>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navmenu">
            <span class="navbar-toggler-icon">span>
        button>
        <div class="collapse navbar-collapse" id="navmenu">
            <ul class="navbar-nav ms-auto"> 
                <li class="nav-item"><div class="nav-link">今日学习div>li>
                <li class="nav-item"><div class="nav-link">明日计划div>li>
                <li class="nav-item"><div class="nav-link">碰磕学习圈div>li>
            ul>
        div>
        div>
    nav>

    <section class="p-5 bg-dark text-light text-center text-sm-start">
        <div class="container">
            <div class="d-flex">    
                <div>
                <h1>坚持努力<span class="text-warning">学习编程span>h1>
                <p class="my-4">    
                    内容内容内容内容内容内容内容内容内容内容内容v内容内容内容内容内容内容内容内容内容内容内容内容
                    内容内容内容内容内容内容内容内容内容内容内容v内容内容内容内容内容内容内容内容内容内容内容内容
                    内容内容内容内容内容内容内容内容内容内容内容v内容内容内容内容内容内容内容内容内容内容内容内容
                    内容内容内容内容内容内容内容内容内容内容内容v内容内容内容内容内容内容内容内容内容内容内容内容
                p>
                <button class="btn btn-primary btn-lg">开始学习button>
                div>
                <img src="../C1901Test/img/1.jpg" class="w-50 d-none d-md-block" />
            div>
        div>
    section>
    
    <section class="p-5 bg-primary text-light">
        <div class="container">
        <div class="d-md-flex justify-content-between align-items-center">
            <h3>现在开始一起学习吧h3>
            <div class="input-group">
                <input type="text" class="form-control" />
                <button class="btn btn-dark btn-lg">注册button>
            div>
        div>
        div>
    section>
    
    <section class="p-5">
        <div class="container">
            <div class="row g-4">
                <div class="col-md">
                    <div class="card bg-dark text-light">
                        <div class="card-body text-center">
                          <h5 class="card-title text-center">前端开发h5>
                          <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.p>
                          <a href="#" class="btn btn-primary mt-2">学习a>
                        div>
                    div>
                div>
                <div class="col-md">
                    <div class="card bg-dark text-light">
                        <div class="card-body text-center">
                          <h5 class="card-title text-center">小程序开发h5>
                          <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.p>
                          <a href="#" class="btn btn-success mt-2">学习a>
                        div>
                    div>
                div>
                <div class="col-md">
                    <div class="card bg-secondary text-light">
                        <div class="card-body text-center">
                          <h5 class="card-title text-center">后端开发h5>
                          <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.p>
                          <a href="#" class="btn btn-dark mt-2">学习a>
                        div>
                    div>
                div>
            div>
        div>
    section>
    
    <section class="p-5">
        <div class="container">
            <h2 class="text-center">常见问题h2>
            <div class="accordion" id="accordionExample">
                <div class="accordion-item">
                  <h2 class="accordion-header" id="headingOne">
                    <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                      Accordion Item #1
                    button>
                  h2>
                  <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
                    <div class="accordion-body">
                      <strong>This is the first item's accordion body.strong> It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-bodycode>, though the transition does limit overflow.
                    div>
                  div>
                div>
                <div class="accordion-item">
                  <h2 class="accordion-header" id="headingTwo">
                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                      Accordion Item #2
                    button>
                  h2>
                  <div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
                    <div class="accordion-body">
                      <strong>This is the second item's accordion body.strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-bodycode>, though the transition does limit overflow.
                    div>
                  div>
                div>
                <div class="accordion-item">
                  <h2 class="accordion-header" id="headingThree">
                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
                      Accordion Item #3
                    button>
                  h2>
                  <div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#accordionExample">
                    <div class="accordion-body">
                      <strong>This is the third item's accordion body.strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-bodycode>, though the transition does limit overflow.
                    div>
                  div>
                div>
              div>
        div>
    section>
    
    <section class="p-5 bg-primary">
        <div class="container">
            <h2 class="text-center text-light">学习动力h2>
            <p class="lead text-center text-white mb-5">
                Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dolorem nesciunt tenetur aut voluptatum libero laborum quisquam iure, necessitatibus earum maiores laudantium facere culpa commodi corporis alias, nostrum accusamus eos nobis.
            p>
            <div class="row g-4">
                <div class="col-md-6 col-lg-3">
                    <div class="card bg-light">
                        <div class="card-body text-center">
                            <img src="../C1901Test/img/11.jpg" class="mb-3 rounded-circle" />
                            <h3 class="card-title">风景h3>
                            <p class="card-text">赚钱旅游p>
                        div>
                    div>
                div>

                <div class="col-md-6 col-lg-3">
                    <div class="card bg-light">
                        <div class="card-body text-center">
                            <img src="../C1901Test/img/11.jpg" class="mb-3 rounded-circle" />
                            <h3 class="card-title">风景h3>
                            <p class="card-text">赚钱旅游p>
                        div>
                    div>
                div>

                <div class="col-md-6 col-lg-3">
                    <div class="card bg-light">
                        <div class="card-body text-center">
                            <img src="../C1901Test/img/11.jpg" class="mb-3 rounded-circle" />
                            <h3 class="card-title">风景h3>
                            <p class="card-text">赚钱旅游p>
                        div>
                    div>
                div>

                <div class="col-md-6 col-lg-3">
                    <div class="card bg-light">
                        <div class="card-body text-center">
                            <img src="../C1901Test/img/11.jpg" class="mb-3 rounded-circle" />
                            <h3 class="card-title">风景h3>
                            <p class="card-text">赚钱旅游p>
                        div>
                    div>
                div>

            div>
        div>
    section>

    <section class="p-5">
        <div class="container">
            <h2 class="text-center mb-4">联系我们h2>
            <ul class="list-group list-group-flush">
                <li class="list-group-item">电话:131-3123-3333li>
                <li class="list-group-item">邮箱:[email protected]li>
                <li class="list-group-item">地址:湖南长沙xxxli>
            ul>
        div>
    section>
    <a href="#top">回到顶部i>a>
    
    <footer class="p-5 bg-dark text-white text-center">
        <div class="container">
            <p class="lead">Copyright © 2022 我在这里等你学习p>
        div>
    footer>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" 
    integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" 
    crossorigin="anonymous">script>
body>
html>

效果图