BootStrap5快速入门

BootStrap5快速入门BootStrap5快速入门引入1.容器2.网格系统3.文字排版标签Display 标题类smallmarkabbrblockquotecodekbd4.颜色5.表格6.形状7.消息提示8.按钮9.徽章10.进度条11.加载12.分页13.列表组14.卡片15.下拉菜单16.手风琴17.导航18.轮播19.模态框(信息交互)20.提示框21.回到顶部----------

碰磕

3010人浏览 · 2022-04-07 16:18:07

碰磕 · 2022-04-07 16:18:07 发布

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/bootstrap@5.0.2/dist/css/bootstrap.min.css" 
    rel="stylesheet" 
    integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" 
    crossorigin="anonymous">


<!--在</body>前边引入-->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/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> 标签及 .mark 类为黄色背景及有一定的内边距

abbr

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

blockquote

对于引用的内容可以在 <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 显示在 <abbr> 元素中的文本以小号字体展示，且可以将小写字母转换为大写字母
.list-unstyled 移除默认的列表样式，列表项中左对齐 ( <ul> 和 <ol> 中)。这个类仅适用于直接子列表项 (如果需要移除嵌套的列表项，你需要在嵌套的列表中使用该样式)
.list-inline 将所有列表项放置同一行

类名	描述
.lead	让段落更突出
.small	指定更小文本 (为父元素的 85% )
.text-start	左对齐
.text-center	居中
.text-end	右对齐
.text-justify	设定文本对齐,段落中超出屏幕部分文字自动换行
.text-nowrap	段落中超出屏幕部分不换行
.text-lowercase	设定文本小写
.text-uppercase	设定文本大写
.text-capitalize	设定单词首字母大写
.initialism	显示在 `<abbr>` 元素中的文本以小号字体展示，且可以将小写字母转换为大写字母
.list-unstyled	移除默认的列表样式，列表项中左对齐 ( `<ul>` 和 `<ol>` 中)。这个类仅适用于直接子列表项 (如果需要移除嵌套的列表项，你需要在嵌套的列表中使用该样式)
.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”
<div class="alert alert-success alert-dismissible">
<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
<strong>成功!</strong> 指定操作成功提示信息。
</div>
动画效果
 通过.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> 元素上即可。徽章可以根据父元素的大小的变化而变化:
颜色大全
<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 类的 div。
接着，在上面的 div 内，添加一个带有 class .progress-bar 的空的 div。
添加一个带有百分比表示的宽度的 style 属性，例如 style=“width:70%” 表示进度条在 70% 的位置。

不同颜色

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

带条纹

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

带动画

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

混合色彩

<div class="progress">
   <div class="progress-bar bg-success" style="width:40%">
      Free Space
    </div>
    <div class="progress-bar bg-warning" style="width:10%">
      Warning
    </div>
   <div class="progress-bar bg-danger" style="width:20%">
     Danger
    </div>
 </div>

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.分页

要创建一个基本的分页可以在 <ul> 元素上添加 .pagination 类。然后在 <li> 元素上添加 .page-item 类，<li> 元素的 <a> 标签上添加 .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="#">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="#">下一页</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">Study</li>
 </ul>

13.列表组

创建:
可以在 <ul>元素上添加 .list-group 类, 在 <li> 元素上添加 .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

图片卡片

我们可以给 <img> 添加 .card-img-top（图片在文字上方）或 .card-img-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">pengke</h4>
        <p class="card-text">Some text.</p>
        <a href="#" class="btn btn-primary">确认</a>
      </div>
    </div>

如果要设为背景图用:.card-img-overlay 类:

 <div class="card" style="width:500px">
   <img class="card-img-top" src="img_avatar1.png" alt="Card image">
   <div class="card-img-overlay">
     <h4 class="card-title">用户名</h4>
     <p class="card-text">一些内容.</p>
     <a href="#" class="btn btn-primary">确认</a>
   </div>
 </div>

15.下拉菜单

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

我们可以使用一个按钮或链接来打开下拉菜单，按钮或链接需要添加 .dropdown-toggle 和 data-toggle=“dropdown” 属性<div> 元素上添加 .dropdown-menu 类来设置实际下拉菜单，然后在下拉菜单的选项中添加 .dropdown-item 类

实例

<div class="dropdown">
  <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">
    下拉菜单按钮
  </button>
  <div class="dropdown-menu">
    <a class="dropdown-item" href="#">链接 1</a>
    <a class="dropdown-item" href="#">链接 2</a>
    <a class="dropdown-item" href="#">链接 3</a>
  </div>
 </div>

添加分割线
使用 .dropdown-divider 类
<li><hr class="dropdown-divider"></hr></li>
设置标题
使用 .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-body</code>, 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-body</code>, 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-body</code>, though the transition does limit overflow.
                 </div>
               </div>
             </div>
           </div>

17.导航

默认为水平导航

关键词:nav

使用:可以在 <ul> 元素上添加 .nav类，在每个 <li> 选项上添加 .nav-item 类，在每个链接上添加 .nav-link 类

示例:
<ul class="nav">
<li class="nav-item">
 <a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
 <a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
 <a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
 <a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
对齐方式
.justify-content-center居中
.justify-content-end右对齐

水平(默认)改为垂直
.flex-column 类用于创建垂直导航

选项卡
使用 .nav-tabs 类可以将导航转化为选项卡。然后对于选中的选项使用 .active 类来标记

改为胶囊形状
.nav-pills可以设置成该形状

导航等宽
.nav-justified 类可以设置导航项齐行等宽显示。

动态选项卡
如果你要设置选项卡是动态可切换的，可以在每个链接上添加 data-bs-toggle=“tab” 属性。然后在每个选项对应的内容的上添加 .tab-pane 类，对应选项卡的内容的 <div> 标签使用 .tab-content 类

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

示例:

<div class="container mt-3">
    <h2>选项卡切换</h2>
    <br>
    <!-- Nav tabs -->
   <ul class="nav nav-tabs" role="tablist">
     <li class="nav-item">
        <a class="nav-link active" data-bs-toggle="tab" href="#home">Home</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" data-bs-toggle="tab" href="#menu1">Menu 1</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" data-bs-toggle="tab" href="#menu2">Menu 2</a>
      </li>
    </ul>
  
    <!-- Tab panes -->
    <div class="tab-content">
      <div id="home" class="container tab-pane active"><br>
        <h3>HOME</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
      </div>
      <div id="menu1" class="container tab-pane fade"><br>
        <h3>Menu 1</h3>
        <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
      </div>
      <div id="menu2" class="container tab-pane fade"><br>
        <h3>Menu 2</h3>
        <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
      </div>
    </div>
  </div>

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>

添加文字描述
- 在每个 <div class="carousel-item"> 内添加 <div class="carousel-caption"> 来设置轮播图片的描述文本

19.模态框(信息交互)

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

简单使用:

<div class="container mt-3">
  <h3>模态框实例</h3>
  <p>点击按钮打开模态框</p>
  <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#myModal">
    打开模态框
  </button>
 </div>
 <!-- 模态框 -->
 <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>

添加动画
在父标签添加.fade

<!-- 添加动画效果 -->
 <div class="modal fade"></div>   
  <!-- 不使用动画效果 -->
  <div class="modal"></div>

全屏显示
使用 .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>BootStrap5</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/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">碰磕Study</a>
        <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"> <!--margin start = margin left-->
                <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"><!--padding 5 bg-dark背景黑色  text-light字体白色-->
        <div class="container">
            <div class="d-flex">    <!--display flex-->
                <div>
                <h1>坚持努力<span class="text-warning">学习编程</span></h1><!--warning警告色-->
                <p class="my-4">    <!--margin 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"><!--gap-->
                <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-body</code>, 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-body</code>, 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-body</code>, 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>
<!-- List group -->
    <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-3333</li>
                <li class="list-group-item">邮箱:3038324746@qq.com</li>
                <li class="list-group-item">地址:湖南长沙xxx</li>
            </ul>
        </div>
    </section>
    <a href="#top">回到顶部👆</i></a><!--跳转#top即可回到顶部-->
    <!-- 底部 -->
    <footer class="p-5 bg-dark text-white text-center">
        <div class="container">
            <p class="lead">Copyright &copy; 2022 我在这里等你学习</p>
        </div>
    </footer>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" 
    integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" 
    crossorigin="anonymous"></script>
</body>
</html>