我可以将你更新哟

Bootstrap5的html模板、Bootstrap5 CDN、Bootstrap5（、表格、图像、按钮、加载、进度条、Flex字体图标）、条纹的进度条、边框类

一、Bootstrap 简介

什么是 Bootstrap？

Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。 Bootstrap是前端开发中比较受欢迎的框架，简洁且灵活。它基于HTML、CSS和JavaScript，HTML定义页面元素，CSS定义页面布局，而JavaScript负责页面元素的响应。Bootstrap将HTML、CSS和JavaScript封装成一个个功能组件，用起来简洁灵活，使得 Web 开发更加快捷。

Bootstrap5 目前是 Bootstrap 的最新版本，利用提供的 Sass 变量和大量 mixin、响应式栅格系统、可扩展的预制组件、基于 jQuery 的强大的插件系统，能够快速为你的想法开发出原型或者构建整个 app 。

浏览器兼容性：Bootstrap5 兼容所有主流浏览器（Chrome、Firefox、Edge、Safari 和 Opera）。 如果您需要支持 IE11 及以下版本，请使用 Bootstrap4 或 Bootstrap3。

二、Bootstrap安装

官网下载 Bootstrap5 资源库
下载下来的文件是压缩包，解压之后可以看到文件的结构。下载的文件包括：
编译并压缩过的 CSS 集成包
编译并压缩过的 JavaScript 插件
下载并解压后，将看到文件夹中包含如下文件： 
    bootstrap/
    ├── css/
    │   ├── bootstrap-grid.css
    │   ├── bootstrap-grid.css.map
    │   ├── bootstrap-grid.min.css
    │   ├── bootstrap-grid.min.css.map
    │   ├── bootstrap-grid.rtl.css
    │   ├── bootstrap-grid.rtl.css.map
    │   ├── bootstrap-grid.rtl.min.css
    │   ├── bootstrap-grid.rtl.min.css.map
    │   ├── bootstrap-reboot.css
    │   ├── bootstrap-reboot.css.map
    │   ├── bootstrap-reboot.min.css
    │   ├── bootstrap-reboot.min.css.map
    │   ├── bootstrap-reboot.rtl.css
    │   ├── bootstrap-reboot.rtl.css.map
    │   ├── bootstrap-reboot.rtl.min.css
    │   ├── bootstrap-reboot.rtl.min.css.map
    │   ├── bootstrap-utilities.css
    │   ├── bootstrap-utilities.css.map
    │   ├── bootstrap-utilities.min.css
    │   ├── bootstrap-utilities.min.css.map
    │   ├── bootstrap-utilities.rtl.css
    │   ├── bootstrap-utilities.rtl.css.map
    │   ├── bootstrap-utilities.rtl.min.css
    │   ├── bootstrap-utilities.rtl.min.css.map
    │   ├── bootstrap.css
    │   ├── bootstrap.css.map
    │   ├── bootstrap.min.css
    │   ├── bootstrap.min.css.map
    │   ├── bootstrap.rtl.css
    │   ├── bootstrap.rtl.css.map
    │   ├── bootstrap.rtl.min.css
    │   └── bootstrap.rtl.min.css.map
    └── js/
        ├── bootstrap.bundle.js
        ├── bootstrap.bundle.js.map
        ├── bootstrap.bundle.min.js
        ├── bootstrap.bundle.min.js.map
        ├── bootstrap.esm.js
        ├── bootstrap.esm.js.map
        ├── bootstrap.esm.min.js
        ├── bootstrap.esm.min.js.map
        ├── bootstrap.js
        ├── bootstrap.js.map
        ├── bootstrap.min.js
        └── bootstrap.min.js.map

下载了预编辑的Bootstrap解压出来得到了Bootstrap文件夹，只要把html与Bootstrap文件夹放在一起，然后用相对路径引用bootstrap.bundle.min.js和 bootstrap.min.css 文件即可。 
1、下载已编译版js和css文件，解压缩后将目录改名称为bootstrap5，放在你的网站目录。
2、在网页<head> head>之间，添加 <link href="/static/bootstrap5/css/bootstrap.min.css" > 
3、在网页 body>之前，添加 <script src="/static/bootstrap5/js/bootstrap.bundle.min.js" >script>
 Bootstrap 自带的大部分组件都需要依赖 JavaScript 才能起作用。将 <script> 标签 粘贴到页面底部，并且是在 body> 标签之前，就能起作用了。 
注意：要确保bootstrap.min.css和bootstrap.bundle.min.js确实在这个路径。

三、Bootstrap5的html模板

 DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="keywords" content="">
        <meta name="description" content="">
          
        <link href="./css/bootstrap.min.css" rel="stylesheet">
        <title>title>
      head>
      <body>
     
        
        <script src="./js/bootstrap.bundle.min.js" >script>
      body>
    html>

四、响应式布局相关的标签

Bootstrap 采用的是 移动设备优先（mobile first） 的开发策略，因此，我们首先为移动设备优化代码，然后根据需要并利用 CSS 媒体查询功能来缩放组件。为了确保所有设备都能支持正确的渲染和触屏缩放，请务必在 `` 标签中 添加让 viewport（视口）支持响应式布局的 标签。

    <meta name="viewport" content="width=device-width, initial-scale=1">

五、Bootstrap5 CDN

   
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/css/bootstrap.min.css">
     
    
    <script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js">script>

六、Bootstrap5 容器

容器是Bootstrap一个基本的构建块, 它包含、填充和对齐给定设备或视口中的内容。 

Bootstrap 需要一个容器元素来包裹网站的内容 

我们可以使用以下两个容器类：

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

1.固定宽度

2.100% 宽度

.container-fluid 类用于创建一个全屏幕尺寸的容器，容器始终跨越整个屏幕宽度（width 始终为 100%）：

二者之间的共同点为，两者都可以将高度设置成auto，即自动模式。最大的不同就是宽度的设定上。

container根据屏幕宽度利用媒体查询，已经设定了固定的宽度，作用为阶段性的改变宽度，所以在改变浏览器的大小时，页面是一个阶段一个阶段变化的。

container-fluid则是将宽度设定为auto，所以当缩放浏览器时，它会保持全屏大小，始终保持100%的宽度。

3.响应式容器

可以使用 .container-sm|md|lg|xl 类来创建响应式容器。

容器的 max-width 属性值会根据屏幕的大小来改变。

    	<div class="container-sm">.container-smdiv>
        <div class="container-md">.container-mddiv>
        <div class="container-lg">.container-lgdiv>
        <div class="container-xl">.container-xldiv>
        <div class="container-xxl">.container-xxldiv>

七、Bootstrap5 表格

1.创建一个简单的表格

Bootstrap5 通过 .table 类来设置基础表格的样式，

    <div class="container">
        <table class="table">
            <thead>
                <tr>
                    <th>编号th>
                    <th>姓名th>
                    <th>年龄th>
                    <th>手机号th>
                tr>
            thead>
            <tbody>
                <tr>
                    <td>1td>
                    <td>张三td>
                    <td>22td>
                    <td>13333445566td>
                tr>
                <tr>
                    <td>2td>
                    <td>李四td>
                    <td>21td>
                    <td>13211223344td>
                <tr>
                    <td>3td>
                    <td>王五td>
                    <td>22td>
                    <td>13555667788td>
                tr>                   
            tbody>
         table>
    div>

2.表格颜色

通过指定意义的颜色类名可以为表格的行或者单元格设置颜色。表格颜色类的说明:
  类名              	描述               
  .table-primary  	蓝色: 指定这是一个重要的操作  
  .table-success  	绿色: 指定这是一个允许执行的操作
  .table-danger   	红色: 指定这是可以危险的操作  
  .table-info     	浅蓝色: 表示内容已变更     
  .table-warning  	橘色: 表示需要注意的操作    
  .table-active   	灰色: 用于鼠标悬停效果     
  .table-secondary	灰色: 表示内容不怎么重要    
  .table-light    	浅灰色，可以是表格行的背景    
  .table-dark     	深灰色，可以是表格行的背景    

    <table class="table">
        <thead>
            <tr>
                <th>编号th>
                <th>姓名th>
                <th>年龄th>
                <th>手机号th>
            tr>
        thead>
        <tbody>
            <tr class="table-primary">
                <td>1td>
                <td>张三td>
                <td>22td>
                <td>13333445566td>
            tr>
            <tr class="table-secondary">
                <td>2td>
                <td>李四td>
                <td>21td>
                <td>13211223344td>
            <tr class="table-success">
                <td>3td>
                <td>王五td>
                <td>22td>
                <td>13555667788td>
            tr>                   
        tbody>
    table>

3.创建带条纹行的表格

通过添加 .table-striped 类，可在 <tbody> 内的行上看到条纹，即在基础表格的代码上为标签<table> 添加 .table-striped 类

    <table class="table table-striped">
        <thead>
            <tr>
                <th>编号th>
                <th>姓名th>
                <th>年龄th>
                <th>手机号th>
            tr>
        thead>
        <tbody>
            <tr>
                <td>1td>
                <td>张三td>
                <td>22td>
                <td>13333445566td>
            tr>
            <tr>
                <td>2td>
                <td>李四td>
                <td>21td>
                <td>13211223344td>
            <tr>
                <td>3td>
                <td>王五td>
                <td>22td>
                <td>13555667788td>
            tr>                   
        tbody>
    table>

4.带边框表格

通过将类 .table-bordered添加到 .table类创建的表格上，就可以在表格和单元格的所有边上添加边框

    <table class="table table-bordered">
        <thead>
            <tr>
                <th>编号th>
                <th>姓名th>
                <th>年龄th>
                <th>手机号th>
            tr>
        thead>
        <tbody>
            <tr>
                <td>1td>
                <td>张三td>
                <td>22td>
                <td>13333445566td>
            tr>
            <tr>
                <td>2td>
                <td>李四td>
                <td>21td>
                <td>13211223344td>
            <tr>
                <td>3td>
                <td>王五td>
                <td>22td>
                <td>13555667788td>
            tr>                   
        tbody>
    table>

5.无边框表格

通过添加 .table-borderless 类可以取消‎表格和单元格所有边的边框‎

    <table class="table table-borderless">
        <thead>
            <tr>
                <th>编号th>
                <th>姓名th>
                <th>年龄th>
                <th>手机号th>
            tr>
        thead>
        <tbody>
            <tr>
                <td>1td>
                <td>张三td>
                <td>22td>
                <td>13333445566td>
            tr>
            <tr>
                <td>2td>
                <td>李四td>
                <td>21td>
                <td>13211223344td>
            <tr>
                <td>3td>
                <td>王五td>
                <td>22td>
                <td>13555667788td>
            tr>                   
        tbody>
    table>

6.鼠标悬停状态表格

.table-hover 类可以为表格的每一行添加鼠标悬停效果（灰色背景）：

    <table class="table table-hover">
        <thead>
            <tr>
                <th>编号th>
                <th>姓名th>
                <th>年龄th>
                <th>手机号th>
            tr>
        thead>
        <tbody>
            <tr>
                <td>1td>
                <td>张三td>
                <td>22td>
                <td>13333445566td>
            tr>
            <tr>
                <td>2td>
                <td>李四td>
                <td>21td>
                <td>13211223344td>
            <tr>
                <td>3td>
                <td>王五td>
                <td>22td>
                <td>13555667788td>
            tr>                   
        tbody>
    table>

7.创建较小的表格

.table-sm 类用于通过减少内边距来设置较小的表格，使表格更紧凑并节省空间

    <table class="table table-sm">
        <thead>
            <tr>
                <th>编号th>
                <th>姓名th>
                <th>年龄th>
                <th>手机号th>
            tr>
        thead>
        <tbody>
            <tr>
                <td>1td>
                <td>张三td>
                <td>22td>
                <td>13333445566td>
            tr>
            <tr>
                <td>2td>
                <td>李四td>
                <td>21td>
                <td>13211223344td>
            <tr>
                <td>3td>
                <td>王五td>
                <td>22td>
                <td>13555667788td>
            tr>                   
        tbody>
    table>

8.响应式表格

要使任何表格具有响应性，只需将 .table 元素包裹在 .table-responsive 元素内，即可创建响应式表格。 还可以使用类 .table-responsive{-sm|-md|-lg|-xl} 根据视口宽度指定表格何时应具有滚动条。

注意.table-responsive类是在div外包裹一个div实现

    <div class="table-responsive">
         <table class="table">
         .......
         table>
    div>

可以通过以下类设定在指定屏幕宽度下显示滚动条：

  类名                   	屏幕宽度    
  .table-responsive-sm 	< 576px 
  .table-responsive-md 	< 768px 
  .table-responsive-lg 	< 992px 
  .table-responsive-xl 	< 1200px
  .table-responsive-xxl	< 1400px

9.总结

类名                   	作用                  
  .table               	普通表格                
  .table-sm            	小表格                 
  .table-bordered      	表格边框                
  .table-borderless    	无边框                 
  .table-striped       	条纹型表格               
  .table-hover         	光标悬浮时，行样式变化         
  .table-primary       	背景色为主色调的表格          
  .table-secondary     	背景色为次要色调的表格         
  .table-success       	边框颜色为success颜色的表格   
  .table-info          	背景色为info颜色的表格       
  .table-warning       	背景色为警告颜色的表格         
  .table-danger        	背景色为危险颜色的表格         
  .table-light         	背景色为亮色的表格           
  .table-dark          	背景色为深色的表格           
  .table-active        	背景色为活跃的颜色的表格        
  .thead-dark          	深色的表头               
  .thead-light         	亮色的表头               
  .table-responsive[-*]	*可选 sm、md、lg 、xl或xxl

八、Bootstrap5 图像

1.圆角图片

.rounded类为图像添加圆角：
    <img src="1.png" class="rounded">

2.圆形

.rounded-circle类可以设置椭圆形图片：

    <img src="1.png" class="rounded-circle">

3.缩略图

.img-thumbnail类用于设置图片缩略图(图片有边框)

    <img src="1.png" class="img-thumbnail">

4.对齐图像

使用 .float-start类将图像向左浮动，或使用 .float-end向右浮动：

    <img src="1.png" class="float-start">
    <img src="2.png" class="float-end">

5.图片居中

使用 .mx-auto (margin:auto) 和 .d-block (display:block) 类来设置图片居中对齐：注意，是两个一起使用

    <img src="1.png" class="mx-auto d-block">

6.响应式图片

图像有各种各样的尺寸，我们需要根据屏幕的大小自动适应。

我们可以通过在 <img> 标签中添加 .img-fluid 类来设置响应式图片。

此类主要将样式 max-width: 100%;和 height: auto;应用于图像，以便它很好地缩放以适合包含元素。

    <img src="1.png" class="float-start">

九、Bootstrap5 按钮

1.Bootstrap 按钮样式

Bootstrap 内置了几种预定义的按钮样式，每种样式都有自己的语义目的，并添加了一些额外的按钮。

任何带有 class .btn 的元素都会继承圆角按钮的默认外观

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

按钮类可用于 <a>、<button> 或 <input> 元素：

    <a href="#" class="btn btn-success">链接按钮a>
    <button type="button" class="btn btn-success">按钮button>
    <input type="button" class="btn btn-success" value="输入按钮">
    <input type="submit" class="btn btn-success" value="提交按钮">
    <input type="reset" class="btn btn-success" value="重置按钮">

2.按钮设置边框

Bootstrap 5 还提供了八个轮廓/边框按钮。鼠标移动到按钮上添加突出到效果：
    <button type="button" class="btn btn-outline-primary">主要button>
    <button type="button" class="btn btn-outline-secondary">次要button>
    <button type="button" class="btn btn-outline-success">成功button>
    <button type="button" class="btn btn-outline-info">信息button>
    <button type="button" class="btn btn-outline-warning">警告button>
    <button type="button" class="btn btn-outline-danger">危险button>
    <button type="button" class="btn btn-outline-dark">深色button>
    <button type="button" class="btn btn-outline-light text-dark">浅色button>

3.按钮尺寸

Bootstrap 5 可以设置按钮的大小，使用 .btn-lg 类设置大按钮，使用 .btn-sm 类设置小按钮：

    <button type="button" class="btn btn-primary btn-lg >大号按钮

4.块级按钮

如需创建跨越父元素整个宽度的块级按钮，通过添加 .btn-block 类可以设置块级按钮，.d-grid 类设置在父级元素中：

    <div class="d-grid">
       <button type="button" class="btn btn-primary btn-block">100% 宽度的按钮button>
    div>

  Class     	描述                    
  .btn-lg   	这会让按钮看起来比较大。          
  .btn-sm   	这会让按钮看起来比较小。          
  .btn-block	这会创建块级的按钮，会横跨父元素的全部宽度。

5.活动/禁用按钮

按钮可设置为激活或者禁止点击的状态。

.active 类可以设置按钮是可用的， disabled 属性可以设置按钮是不可点击的。 注意 <a> 元素不支持 disabled 属性，你可以通过添加 .disabled 类来禁止链接的点击。

    <button type="button" class="btn btn-primary active">点击后的按钮button>
    <button type="button" class="btn btn-primary" disabled>禁止点击的按钮button>
    <a href="#" class="btn btn-primary disabled">禁止点击的链接a>

 .disabled类只会使链接在视觉上看起来像已禁用，但是除非从中删除 href属性，否则该链接将保持可点击状态。

十、Bootstrap5 按钮组

要创建一个按钮组，只需将一系列具有 .btn类的按钮包装在<div>元素中，然后在其上应用 .btn-group类。 还可以在单个按钮上应用 .active类以指示活动状态。

1.基本的按钮组

<div class="btn-group">
      <button type="button" class="btn btn-success active">按钮一button>
      <button type="button" class="btn btn-warning">按钮二button>
      <button type="button" class="btn btn-danger">按钮三button>
  div>

2.按钮组的大小

以使用 .btn-group-lg|sm|xs 类来设置按钮组的大小，可应用到整个按钮组的大小调整，而不需要对每个按钮进行大小调整。

    <div class="btn-group btn-group-lg">
      <button type="button" class="btn btn-success">按钮一button>
      <button type="button" class="btn btn-warning">按钮二button>
      <button type="button" class="btn btn-danger">按钮三button>
    div>

3.垂直按钮组

可以使按钮组显示为垂直堆叠而不是水平堆叠。 为此，只需将类 .btn-group替换为类 .btn-group-vertical，

    <div class="btn-group-vertical">
            <button type="button" class="btn btn-primary">标题一button>
            <button type="button" class="btn btn-primary">标题二button>
            <button type="button" class="btn btn-primary">标题二button>
    div>

十一、Bootstrap5 加载器

1.可以使用文本颜色类设置不同的颜色：

使用Bootstrap读取图标以表示元件加载状态，这些读取图标完全使用HTML，CSS。要创建 spinner/加载器，可以使用 .spinner-border 类：

    <div class="spinner-border">div>

    <div class="spinner-border text-muted">div>
    <div class="spinner-border text-primary">div>
    <div class="spinner-border text-success">div>
    <div class="spinner-border text-info">div>
    <div class="spinner-border text-warning">div>
    <div class="spinner-border text-danger">div>
    <div class="spinner-border text-secondary">div>
    <div class="spinner-border text-dark">div>
    <div class="spinner-border text-light">div>

2.闪烁的加载效果

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

    <div class="spinner-grow text-muted">div>
    <div class="spinner-grow text-primary">div>
    <div class="spinner-grow text-success">div>
    <div class="spinner-grow text-info">div>
    <div class="spinner-grow text-warning">div>
    <div class="spinner-grow text-danger">div>
    <div class="spinner-grow text-secondary">div>
    <div class="spinner-grow text-dark">div>
    <div class="spinner-grow text-light">div>

3.设置加载效果大小

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

    <div class="spinner-border spinner-border-sm">div>
    <div class="spinner-grow spinner-grow-sm">div>

4.加载按钮

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

    <button class="btn btn-primary" disabled>
      <span class="spinner-border spinner-border-sm">span>
      禁用..
    button>

十二、Bootstrap5 进度条

进度条可用于向用户显示任务或操作的进度。
进度条（progress bar）支持堆叠、动画背景和文本标签。

1.工作原理:

- 我们使用 .progress作为最外层元素，用于指示进度条（progress bar）的最大值。
- 我们在内部使用 .progress-bar来指示到目前为止的进度。
- .progress-bar 需要通过内联样式、工具类或自定义 CSS 属性来设置其宽度。

下面的示例将展示如何创建一个带有垂直渐变的简单进度条。

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

2.进度条的高度

进度条的高度默认为 1rem（通常为 16px)，但我们也可以根据需要通过在 .progress 元素上设置 CSS height 属性来设置其高度

注意，必须为进度容器和进度条设置相同的高度：

    
    <div class="progress" style="height: 2px;">
        <div class="progress-bar" style="width: 50%;">div>
    div>
    
    <div class="progress" style="height: 20px;">
        <div class="progress-bar" style="width: 50%;">div>
    div>

3.进度条标签

通过在 .progress-bar元素内添加文本，就可以为进度条（progress bar）添加标签，以显示可见的百分比。

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

4.进度条颜色

可以使用背景颜色实用程序类来创建各种颜色的进度条，以便通过不同颜色传达不同的含义。默认情况下，进度条为蓝色（主要）。

    <div class="progress">
        <div class="progress-bar bg-info" style="width: 20%">div>
    div>
    <div class="progress">
        <div class="progress-bar bg-success" style="width: 40%">div>
    div>
    <div class="progress">
        <div class="progress-bar bg-warning" style="width: 80%">div>
    div>
    <div class="progress">
        <div class="progress-bar bg-danger" style="width: 90%">div>
    div>

十三、条纹的进度条

1.添加额外的类

要创建条纹的进度条，只需向 .progress-bar元素添加一个额外的类 .progress-bar-striped

条纹是通过进度条背景颜色上的 CSS 渐变生成的。与纯色类似，还可以使用相同的背景色实用程序类创建不同颜色的带条纹的进度条

    <div class="progress">
       <div class="progress-bar progress-bar-striped" style="width: 40%;">div>
    div>
    
    <div class="progress">
       <div class="progress-bar bg-warning progress-bar-striped" style="width: 50%;">div>
    div>
    
    <div class="progress">
        <div class="progress-bar bg-danger progress-bar-striped" style="width:60%">div>
    div>

2.进度条动画

 将类 .progress-bar-animated添加到带有类 .progress-bar的元素上可以为条纹的进度条设置动画，它将通过 CSS3 动画从右到左为条纹设置动画。

    <div class="progress">
        <div class="progress-bar progress-bar-striped progress-bar-animated" style="width: 60%">div>
    div>

3.混合色彩进度条

可以在一个进度组件中放置多个进度条来使它们并排在一起，进度条也可以堆叠

<div class="progress">
   <div class="progress-bar bg-success" style="width: 40%">
       空闲空间  (40%)
   div>
   <div class="progress-bar bg-warning" style="width: 25%">
       警告 (25%)
   div>
   <div class="progress-bar bg-danger" style="width: 15%">
       危险 (15%)
   div>
div>

十四、Bootstrap5 小工具

Bootstrap 5 提供了很多有用的类来帮助我们快速实现效果，不需要重复写一些 CSS 代码，可以在不使用任何 CSS 代码的情况下快速设置元素样式。

十五、边框类

1.使用边框类为元素添加或删除边框：

  <div class="border bg-light border-primary">div>  边框颜色
    <div class="border border-3">div>           边框宽度
    <div class="border border-top-0">div>       顶部无边框
    <div class="border border-right-0">div>     右侧无边框
    <div class="border border-bottom-0">div>    底部无边框 
    <div class="border border-left-0">div>      左侧无边框
    
    <div class="border-top">div>        顶部边框
    <div class="border-end">div>        右侧边框
    <div class="border-bottom">div>     底部边框
    <div class="border-start">div>      左侧边框

2.边框圆角

使用 rounded类为元素添加圆角：
    <div class="rounded bg-dark">div>
    <div class="rounded-top bg-dark">div>
    <div class="rounded-end bg-dark">div>
    <div class="rounded-bottom bg-dark">div>
    <div class="rounded-start bg-dark">div>
    <div class="rounded-circle bg-dark">div>
    <div class="rounded-pill bg-dark" style="width:130px">div>
    <div class="rounded-0 bg-dark">div>
    <div class="rounded-1 bg-dark">div>
    <div class="rounded-2 bg-dark">div>
    <div class="rounded-3 bg-dark">div>
    
  类名               	作用                  
  .border          	在元素的所有边添加边框         
  .border-top      	顶部边框                
  .border-end      	右侧边框                
  .border-bottom   	底部边框                
  .border-start    	左侧边框                
  .border-*        	*取值为0~5             
  .border-top-0    	顶部无边框               
  .border-right-0  	右侧无边框               
  .border-bottom-0 	底部无边框               
  .border-left-0   	左侧无边框               
  .border-primary  	主色调边框 蓝色            
  .border-secondary	次要色调边框 灰色           
  .border-success  	成功边框 绿色             
  .border-info     	信息边框 蓝绿色            
  .border-warning  	警告边框 黄色             
  .border-danger   	危险边框 红色             
  .border-light    	浅色边框  浅灰色           
  .border-dark     	深灰色边框               
  .border-white    	白色边框                
  .rounded         	边框圆角                
  .rounded-top     	圆形元素的左上角和右上角。       
  .rounded-end     	圆形元素的右上角和右下角。       
  .rounded-bottom  	圆形元素的左下角和右下角。       
  .rounded-start   	圆形元素的左上角和左下角。       
  .rounded-circle  	椭圆形边框               
  .rounded-pill    	胶囊型边框               
  .rounded-0       	从元素中删除圆角。           
  .rounded-1       	将元素的边界半径设置为 0.2rem。 
  .rounded-2       	将元素的边界半径设置为 0.25rem。
  .rounded-3       	将元素的边界半径设置为 0.3rem。

十六、浮动与清除浮动

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

    <div class="clearfix">
            <span class="float-start">向左浮动span>
            <span class="float-end">向右浮动span>
    div>

1.响应式浮动

可以根据屏幕尺寸来设置浮动效果.float-*-left|right - * 表示

- sm(> = 576px)
- md (> = 768px)
- lg(> = 992px)
- xl (> = 1200px)
- xxl (> = 1400px)

    <div class="float-sm-end">在小型屏幕或更宽的屏幕上向右浮动div>
    <div class="float-md-end">在中型屏幕或更宽的屏幕上向右浮动div>
    <div class="float-lg-end">在大型屏幕或更宽的屏幕上向右浮动div>
    <div class="float-xl-end">在超大型屏幕或更宽的屏幕上向右浮动div>
    <div class="float-xxl-end">在特大型屏幕或更宽的屏幕上向右浮动div>

2.居中对齐

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

    <div class="mx-auto bg-primary" style="width:150px">居中对齐div>

6.文本对齐类

  Class                        	描述                    
  .text-start                  	文本左对齐。                
  .text-center                 	文本居中对齐。               
  .text-end                    	文本右对齐。                
  .text-wrap                   	隐藏溢出的文本               
  .text-nowrap                 	防止文本换行                
  .text-truncate               	使用省略号截断文本。            
  .text-break                  	将长文本截断，防止溢出。          
  .text-lowercase              	将文本转换为小写              
  .text-uppercase              	将文本转换为大写              
  .text-capitalize             	将每个单词的第一个字母转换成大写。     
  .fw-bold                     	将元素的字体设置为粗体           
  .fw-bolder                   	将元素的字体粗细设置为更粗（相对于父元素）。
  .fw-normal                   	将元素的字体设置为正常。          
  .fw-light                    	将元素的字体设置为细体。          
  .fw-lighter                  	将元素的字体粗细设置为更细（相对于父元素）。
  .fst-italic                  	将元素的字体样式设置为斜体。        
  .fst-normal                  	将元素的字体样式设置为正常。        
  .text-decoration-none        	从文本中删除文本修饰，例如下划线。     
  .text-decoration-underline   	给文本添加下划线。             
  .text-decoration-line-through	在文本中间添加一行。

7.宽度

使用 w-* 类（.w-25、.w-50、.w-75、.w-100、.mw-auto、.mw-100）设置元素的宽度

    <div class="w-25 bg-primary">宽度为 25%div>
    <div class="w-50 bg-primary">宽度为 50%div>
    <div class="w-75 bg-primary">宽度为 75%div>
    <div class="w-100 bg-primary">宽度为 100%div>
    <div class="w-auto bg-primary">自动设置宽度div>
    <div class="mw-100 bg-primary">最大宽度为 100%div>

8.高度

使用 h-* 类（.h-25、.h-50、.h-75、.h-100、.mh-auto、.mh-100）设置元素的高度

    <div class="bg-light" style="height:300px">
         <div class="h-25 bg-warning">高度为 25%div>
         <div class="h-50 bg-warning">高度 50%div>
         <div class="h-75 bg-warning">高度 75%div>
         <div class="h-100 bg-warning">高度 100%div>
         <div class="h-auto bg-warning">自动高度div>
    div>
    

  类名         	作用       
  .w-25      	宽度25%    
  .w-50      	宽度50%    
  .w-75      	宽度75%    
  .w-100     	宽度100%   
  .w-auto    	宽度自动     
  .mw-100    	最大宽度100% 
  .min-vw    	最小宽度100vw
  .vw-100    	宽度100vw  
  .h-25      	高度25%    
  .h-50      	高度50%    
  .h-75      	高度75%    
  .h-100     	高度100%   
  .h-auto    	高度自动     
  .mh-100    	最大高度100% 
  .min-vh-100	最小高度100vh
  .vh-100    	高度100vh

十七、间距

在元素中涉及使用内间距或者外间距时，p-内间距，这个Class属性会设定 padding值，m-外间距，这个Class属性会设定 margin值

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

1.间距的方向

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

2.间距的距离

0 - 把 margin 或 padding 设置为 0
1 - 把 margin 或 padding 设置为 .25rem
2 - 把 margin 或 padding 设置为 .5rem
3 - 把 margin 或 padding 设置为 1rem
4 - 把 margin 或 padding 设置为 1.5rem
5 - 把 margin 或 padding 设置为 3rem

3.auto - 把 margin 设置为 auto

  <div class="pt-4 bg-warning">我只有上内边距 (1.5rem)div>
    <div class="p-5 bg-success">我在所有边都有内边距 (3rem)div>
    <div class="m-5 pb-5 bg-info">我在所有边都有外边距 (3rem) 和下内边距 (3rem)div>
    

  .m-*    	*可取值为0~5，外边距取值分别为为 0, 0.25rem, 0.5rem, 1rem, 1.5rem, 3rem
  .mt-*   	*可取值为0~5，顶部外边距取值分别为为 0, 0.25rem, 0.5rem, 1rem, 1.5rem, 3rem
  .me-*   	*可取值为0~5，右侧外边距取值分别为为 0, 0.25rem, 0.5rem, 1rem, 1.5rem, 3rem
  .mb-*   	*可取值为0~5，底部外边距取值分别为为 0, 0.25rem, 0.5rem, 1rem, 1.5rem, 3rem
  .ms-*   	*可取值为0~5，左侧外边距取值分别为为 0, 0.25rem, 0.5rem, 1rem, 1.5rem, 3rem
  .mx-*   	*可取值为0~5，左右外边距取值分别为为 0, 0.25rem, 0.5rem, 1rem, 1.5rem, 3rem
  .mx-auto	居中对齐                                    
  .my-*   	*可取值为0~5，上下外边距取值分别为为 0, 0.25rem, 0.5rem, 1rem, 1.5rem, 3rem
  .p-*    	*可取值为0~5，内边距取值分别为为 0, 0.25rem, 0.5rem, 1rem, 1.5rem, 3rem
  .pt-*   	*可取值为0~5，顶部内边距取值分别为为 0, 0.25rem, 0.5rem, 1rem, 1.5rem, 3rem
  .pb-*   	*可取值为0~5，右侧内边距取值分别为为 0, 0.25rem, 0.5rem, 1rem, 1.5rem, 3rem
  .ps-*   	*可取值为0~5，底部内边距取值分别为为 0, 0.25rem, 0.5rem, 1rem, 1.5rem, 3rem
  .pe-*   	*可取值为0~5，左侧内边距取值分别为为 0, 0.25rem, 0.5rem, 1rem, 1.5rem, 3rem
  .px-*   	*可取值为0~5，左右内边距取值分别为为 0, 0.25rem, 0.5rem, 1rem, 1.5rem, 3rem
  .py-*   	*可取值为0~5，上下内边距取值分别为为 0, 0.25rem, 0.5rem, 1rem, 1.5rem, 3rem

响应式 margin x 实用工具，调整浏览器窗口大小以查看效果：

    <div class="mx-sm-5 bg-primary">在 SM 屏幕上的 Margin x 5div>
    <div class="mx-md-5 bg-primary">在 MD 屏幕上的 Margin x 5div>
    <div class="mx-lg-5 bg-primary">在 LG 屏幕上的 Margin x 5div>
    <div class="mx-xl-5 bg-primary">在 XL 屏幕上的 Margin x 5div>

4.阴影

可以使用 shadow-类为元素添加阴影

  类           	说明         
  .shadow     	为元素添加阴影。   
  .shadow-sm  	为元素添加一个小阴影。
  .shadow-lg  	为元素添加更大的阴影。
  .shadow-none	从元素中移除阴影。  

    <div class="shadow p-4 mt-4">没有阴影div>

十八、Bootstrap 5 Flex

1.创建一个弹性盒子容器

弹性盒子是 CSS3 的一种新的布局模式，更适合响应式的设计。

使用 d-flex类，创建 flexbox 容器并将直接子项转换为 flex 项

    <div class="d-flex p-3 bg-info text-white">
        <div class="p-2 bg-secondary">弹性项目 1div>
        <div class="p-2 bg-secondary">弹性项目 2div>
        <div class="p-2 bg-secondary">弹性项目 3div>
    div>

2.使用d-inline-flex类创建行内 flexbox 容器，

 <div class="d-inline-flex p-3 bg-info text-white">
        <div class="p-2 bg-secondary">弹性项目 1div>
        <div class="p-2 bg-secondary">弹性项目 2div>
        <div class="p-2 bg-secondary">弹性项目 3div>
    div>

3.水平方向

.flex-row 可以设置弹性子元素水平显示，这是默认的。

使用 .flex-row-reverse 类用于设置右对齐显示，即与 .flex-row 方向相反。

    <div class="d-flex p-3 bg-info text-white flex-row-reverse">
        <div class="p-2 bg-secondary">弹性项目 1div>
        <div class="p-2 bg-secondary">弹性项目 2div>
        <div class="p-2 bg-secondary">弹性项目 3div>
    div>

4.垂直方向

使用 .flex-column垂直显示 flex 项目（彼此堆叠），或使用 .flex-column-reverse反转垂直方向

    <div class="d-flex flex-column">
         <div class="p-2 bg-danger">弹性项目 1div>
         <div class="p-2 bg-warning">弹性项目 2div>
         <div class="p-2 bg-primary">弹性项目 3div>
    div>
    
    <div class="d-flex mt-3 flex-column-reverse">
          <div class="p-2 bg-danger">弹性项目 1div>
          <div class="p-2 bg-warning">弹性项目 2div>
          <div class="p-2 bg-primary">弹性项目 3div>
    div>

5.换行

默认情况下，项目都排在一条线（又称”轴线”）上。flex-wrap属性定义，如果一条轴线排不下，如何换行。

flex-nowrap（默认）：不换行。

flex-wrap：换行，第一行在上方。

flex-wrap-reverse：换行，第一行在下方。

    <div class="d-flex mt-3 flex-wrap bg-info">
      <div class="p-2 bg-danger">弹性项目 1div>
      <div class="p-2 bg-warning">弹性项目 2div>
      <div class="p-2 bg-primary">弹性项目 3div>
      <div class="p-2 bg-danger">弹性项目 1div>
      <div class="p-2 bg-warning">弹性项目 2div>
      <div class="p-2 bg-primary">弹性项目 3div>
    div>

6.对齐内容

使用 .justify-content-* 类可改变弹性项目的对齐方式。* 号允许的值有

- start（默认）
- end
- center
- between
- around

    <div class="d-flex mt-3 justify-content-center">
      <div class="p-2 bg-danger">弹性项目 1div>
      <div class="p-2 bg-warning">弹性项目 2div>
      <div class="p-2 bg-primary">弹性项目 3div>
    div>
    

使用 .align-items-* 类控制单行弹性项目的垂直对齐方式，* 号允许的值有

- start
- end
- center
- baseline
- stretch（默认值）

    <div class="d-flex mt-3 align-items-center bg-info" style="height: 300px">
      <div class="p-2 bg-danger">弹性项目 1div>
      <div class="p-2 bg-warning">弹性项目 2div>
      <div class="p-2 bg-primary">弹性项目 3div>
    div>
    

使用 .align-content-* 用于控制多行项目的对齐方式，* 号允许的值有

- start
- end
- center
- between
- around
- stretch（默认值）

    <div class="d-flex mt-3 flex-wrap bg-info align-content-between" style="height:300px; width:500px">
      <div class="p-2 bg-danger">弹性项目 1div>
      <div class="p-2 bg-warning">弹性项目 2div>
      <div class="p-2 bg-primary">弹性项目 3div>
      <div class="p-2 bg-danger">弹性项目 1div>
      <div class="p-2 bg-warning">弹性项目 2div>
      <div class="p-2 bg-primary">弹性项目 3div>
      <div class="p-2 bg-danger">弹性项目 1div>
      <div class="p-2 bg-warning">弹性项目 2div>
      <div class="p-2 bg-primary">弹性项目 3div>
    div>

7.顺序

使用 .order类可更改特定 flex 项的视觉顺序，其中最低的数字具有最高的优先级（order-1 显示在 order-2 之前，以此类推）默认为0。

    <div class="d-flex">
      <div class="p-2 bg-secondary">弹性项目 1div>
      <div class="p-2 bg-warning order-3">弹性项目 2div>
      <div class="p-2 bg-primary order-1">弹性项目 3div>
    div>

8.等宽

在 flex 项目上使用 .flex-fill可强制它们等宽

    <div class="d-flex">
      <div class="p-2 bg-secondary flex-fill">弹性项目 1div>
      <div class="p-2 bg-warning flex-fill">弹性项目 2div>
      <div class="p-2 bg-primary flex-fill">弹性项目 3div>
    div>

9.伸展

在 flex 项目上使用 .flex-grow-1可占用多余的空间，

    <div class="d-flex bg-info" style="height:300px; width:500px">
      <div class="p-2 bg-secondary">弹性项目 1div>
      <div class="p-2 bg-warning">弹性项目 2div>
      <div class="p-2 bg-primary flex-grow-1">弹性项目 3div>
    div>

10.指定子元素对齐

要设置指定子元素对齐对齐可以使用 .align-self-* 类来控制，align-self-*属性允许单个项目有与其他项目不一样的对齐方式

- start
- end
- center
- baseline
- stretch（默认值）

    <div class="box d-flex bg-info" style="height:300px; width:500px">
      <div class="p-2 bg-secondary">弹性项目 1div>
      <div class="p-2 bg-warning align-self-center">弹性项目 2div>
      <div class="p-2 bg-primary">弹性项目 3div>
    div>

11.响应式 flex 类

可以根据不同的设备设置 flex 类，从而实现页面响应式布局， * 号可以的值有：sm, md, lg 或 xl, 对应的是小型设备、中型设备，大型设备，超大型设备。

  类                         	实例                          
  弹性容器                      	                            
  .d-*-flex                 	根据不同的屏幕设备创建弹性盒子容器           
  .d-*-inline-flex          	根据不同的屏幕设备创建行内弹性盒子容器         
  方向                        	                            
  .flex-*-row               	根据不同的屏幕设备在水平方向显示弹性子元素       
  .flex-*-row-reverse       	根据不同的屏幕设备在水平方向显示弹性子元素，且右对齐  
  .flex-*-column            	根据不同的屏幕设备在垂直方向显示弹性子元素       
  .flex-*-column-reverse    	根据不同的屏幕设备在垂直方向显示弹性子元素，且方向相反 
  内容对齐                      	                            
  .justify-content-*-start  	根据不同屏幕设备在开始位置显示弹性子元素 (左对齐)  
  .justify-content-*-end    	根据不同屏幕设备在尾部显示弹性子元素 (右对齐)    
  .justify-content-*-center 	根据不同屏幕设备在 flex 容器中居中显示子元素   
  .justify-content-*-between	根据不同屏幕设备使用 "between" 显示弹性子元素
  .justify-content-*-around 	根据不同屏幕设备使用 "around" 显示弹性子元素 
  等宽                        	                            
  .flex-*-fill              	根据不同的屏幕设备强制等宽               
  扩展                        	                            
  .flex-*-grow-0            	不同的屏幕设备不设置扩展                
  .flex-*-grow-1            	不同的屏幕设备设置扩展                 
  包裹                        	                            
  .flex-*-nowrap            	不同的屏幕设备不设置包裹元素              
  .flex-*-wrap              	不同的屏幕设备设置包裹元素               
  .flex-*-wrap-reverse      	不同的屏幕设备反转包裹元素               
  内容排列                      	                            
  .align-content-*-start    	根据不同屏幕设备在起始位置堆叠元素           
  .align-content-*-end      	根据不同屏幕设备在结束位置堆叠元素           
  .align-content-*-center   	根据不同屏幕设备在中间位置堆叠元素           
  .align-content-*-around   	根据不同屏幕设备，使用 "around" 堆叠元素   
  .align-content-*-stretch  	根据不同屏幕设备，通过伸展元素来堆叠          
  排序                        	                            
  .order-*-*0-12*           	在小屏幕尺寸上修改排序                 
  元素对齐                      	                            
  .align-items-*-start      	根据不同屏幕设备，让元素在头部显示在同一行。      
  .align-items-*-end        	根据不同屏幕设备，让元素在尾部显示在同一行。      
  .align-items-*-center     	根据不同屏幕设备，让元素在中间位置显示在同一行。    
  .align-items-*-baseline   	根据不同屏幕设备，让元素在基线上显示在同一行。     
  .align-items-*-stretch    	根据不同屏幕设备，让元素延展高度并显示在同一行。    
  单独一个子元素的对齐方式              	                            
  .align-self-*-start       	据不同屏幕设备，让单独一个子元素显示在头部。      
  .align-self-*-end         	据不同屏幕设备，让单独一个子元素显示在尾部       
  .align-self-*-center      	据不同屏幕设备，让单独一个子元素显示在居中位置     
  .align-self-*-baseline    	据不同屏幕设备，让单独一个子元素显示在基线位置     
  .align-self-*-stretch     	据不同屏幕设备，延展一个单独子元素

12.Bootstrap5

字体图标是在 Web 项目中使用的图标字体。

使用字体图标的好处是，可以通过应用 CSS color 属性来创建任何颜色的图标。 此外，要更改图标的大小，只需使用 CSS font-size 属性即可。

获取字体图标

在网页中包含 Bootstrap5 图标的最简单方法是使用 CDN 链接。 此 CDN 链接基本上指向一个远程 CSS 文件，其中包含生成字体图标所需的所有类。

我们可以在 Bootstrap 模板以及简单的网页中包含 Bootstrap5 图标，而无需使用 Bootstrap 框架。利用提供的公共 CDN 服务并将图标字体的样式表添加到网站的 <head> 标签内

步骤 一: 在HTML文档的<head>部分包含下面的 Bootstrap CDN 链接。

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
    

步骤 二: 要将图标放置到网页中，使用语法 <i class="bi-*">i> 其中 * 代表特定图标的类名。 

    <i class="bi-archive-fill">i>

你可能感兴趣的:(前端,bootstrap,html,前端,javascript,开发语言,windows,vscode)

Long类型前后端数据不一致 igotyback 前端
响应给前端的数据浏览器控制台中response中看到的Long类型的数据是正常的到前端数据不一致前后端数据类型不匹配是一个常见问题，尤其是当后端使用Java的Long类型（64位）与前端JavaScript的Number类型（最大安全整数为2^53-1，即16位）进行数据交互时，很容易出现精度丢失的问题。这是因为JavaScript中的Number类型无法安全地表示超过16位的整数。为了解决这个问
swagger访问路径 igotyback swagger
Swagger2.x版本访问地址：http://{ip}:{port}/{context-path}/swagger-ui.html{ip}是你的服务器IP地址。{port}是你的应用服务端口，通常为8080。{context-path}是你的应用上下文路径，如果应用部署在根路径下，则为空。Swagger3.x版本对于Swagger3.x版本（也称为OpenAPI3）访问地址：http://{ip
html 中如何使用 uniapp 的部分方法某公司摸鱼前端 html uni-app 前端
示例代码：Documentconsole.log(window);效果展示：好了，现在就可以uni.使用相关的方法了
linux sdl windows.h,Windows下的SDL安装奔跑吧linux内核 linux sdl windows.h
首先你要下载并安装SDL开发包。如果装在C盘下，路径为C:\SDL1.2.5如果在WINDOWS下。你可以按以下步骤：1.打开VC++，点击"Tools",Options2,点击directories选项3.选择"Includefiles"增加一个新的路径。"C:\SDL1.2.5\include"4，现在选择"Libaryfiles“增加"C:\SDL1.2.5\lib"现在你可以开始编写你的第
将cmd中命令输出保存为txt文本文件落难Coder Windows cmd window
最近深度学习本地的训练中我们常常要在命令行中运行自己的代码，无可厚非，我们有必要保存我们的炼丹结果，但是复制命令行输出到txt是非常麻烦的，其实Windows下的命令行为我们提供了相应的操作。其基本的调用格式就是：运行指令>输出到的文件名称或者具体保存路径测试下，我打开cmd并且ping一下百度：pingwww.baidu.com>./data.txt看下相同目录下data.txt的输出：如果你再
PHP环境搭建详细教程好看资源平台前端 php
PHP是一个流行的服务器端脚本语言，广泛用于Web开发。为了使PHP能够在本地或服务器上运行，我们需要搭建一个合适的PHP环境。本教程将结合最新资料，介绍在不同操作系统上搭建PHP开发环境的多种方法，包括Windows、macOS和Linux系统的安装步骤，以及本地和Docker环境的配置。1.PHP环境搭建概述PHP环境的搭建主要分为以下几类：集成开发环境：例如XAMPP、WAMP、MAMP，这
四章-32-点要素的聚合彩云飘过
本文基于腾讯课堂老胡的课《跟我学Openlayers--基础实例详解》做的学习笔记，使用的openlayers5.3.xapi。源码见1032.html，对应的官网示例https://openlayers.org/en/latest/examples/cluster.htmlhttps://openlayers.org/en/latest/examples/earthquake-clusters.
DIV+CSS+JavaScript技术制作网页（旅游主题网页设计与制作）云南大理 STU学生网页设计网页设计期末网页作业 html静态网页 html5期末大作业网页设计 web大作业
️精彩专栏推荐作者主页:【进入主页—获取更多源码】web前端期末大作业：【HTML5网页期末作业(1000套)】程序员有趣的告白方式：【HTML七夕情人节表白网页制作(110套)】文章目录二、网站介绍三、网站效果▶️1.视频演示2.图片演示四、网站代码HTML结构代码CSS样式代码五、更多源码二、网站介绍网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。网站程
【加密社】Solidity 中的事件机制及其应用加密社闲侃区块链智能合约区块链
加密社引言在Solidity合约开发过程中，事件（Events）是一种非常重要的机制。它们不仅能够让开发者记录智能合约的重要状态变更，还能够让外部系统（如前端应用）监听这些状态的变化。本文将详细介绍Solidity中的事件机制以及如何利用不同的手段来触发、监听和获取这些事件。事件存储的地方当我们在Solidity合约中使用emit关键字触发事件时，该事件会被记录在区块链的交易收据中。具体而言，事件
关于城市旅游的HTML网页设计——(旅游风景云南 5页)HTML+CSS+JavaScript 二挡起步 web前端期末大作业 javascript html css 旅游风景
⛵源码获取文末联系✈Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业|游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作|HTML期末大学生网页设计作业，Web大学生网页HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScrip
HTML网页设计制作大作业（div+css）云南我的家乡旅游景点带文字滚动二挡起步 web前端期末大作业 web设计网页规划与设计 html css javascript dreamweaver 前端
Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作HTML期末大学生网页设计作业HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为文章目录前端学习路线
node.js学习小猿L node.js node.js 学习 vim
node.js学习实操及笔记温故node.js，node.js学习实操过程及笔记~node.js学习视频node.js官网node.js中文网实操笔记githubcsdn笔记为什么学node.js可以让别人访问我们编写的网页为后续的框架学习打下基础，三大框架vuereactangular离不开node.jsnode.js是什么官网：node.js是一个开源的、跨平台的运行JavaScript的运行
Python 实现图片裁剪（附代码） | Python工具剑客阿良_ALiang
前言本文提供将图片按照自定义尺寸进行裁剪的工具方法，一如既往的实用主义。环境依赖ffmpeg环境安装，可以参考我的另一篇文章：windowsffmpeg安装部署_阿良的博客-CSDN博客本文主要使用到的不是ffmpeg，而是ffprobe也在上面这篇文章中的zip包中。ffmpy安装：pipinstallffmpy-ihttps://pypi.douban.com/simple代码不废话了，上代码
「豆包Marscode体验官」 | 云端 IDE 启动 & Rust 体验张风捷特烈 ide rust 开发语言后端
theme:cyanosis我正在参加「豆包MarsCode初体验」征文活动MarsCode可以看作一个运行在服务端的远程VSCode开发环境。对于我这种想要学习体验某些语言，但不想在电脑里装环境的人来说非常友好。本文就来介绍一下在MarsCode里，我的体验rust开发体验。一、MarsCode是什么它的本质是:提供代码助手和云端IDE服务的web网站，可通过下面的链接访问https://www
springboot+vue项目实战一-创建SpringBoot简单项目苹果酱0567 面试题汇总与解析 spring boot 后端 java 中间件开发语言
这段时间抽空给女朋友搭建一个个人博客，想着记录一下建站的过程，就当做笔记吧。虽然复制zjblog只要一个小时就可以搞定一个网站，或者用cms系统，三四个小时就可以做出一个前后台都有的网站，而且想做成啥样也都行。但是就是要从新做，自己做的意义不一样，更何况，俺就是专门干这个的，嘿嘿嘿要做一个网站，而且从零开始，首先呢就是技术选型了，经过一番思量决定选择-SpringBoot做后端，前端使用Vue做一
JavaScript 中，深拷贝（Deep Copy）和浅拷贝（Shallow Copy）跳房子的前端前端面试 javascript 开发语言 ecmascript
在JavaScript中，深拷贝（DeepCopy）和浅拷贝（ShallowCopy）是用于复制对象或数组的两种不同方法。了解它们的区别和应用场景对于避免潜在的bugs和高效地处理数据非常重要。以下是对深拷贝和浅拷贝的详细解释，包括它们的概念、用途、优缺点以及实现方式。1.浅拷贝（ShallowCopy）概念定义：浅拷贝是指创建一个新的对象或数组，其中包含了原对象或数组的基本数据类型的值和对引用数
ESP32-C3入门教程网络篇⑩——基于esp_https_ota和MQTT实现开机主动升级和被动触发升级的OTA功能小康师兄 ESP32-C3入门教程 https 服务器 esp32 OTA MQTT
文章目录一、前言二、软件流程三、部分源码四、运行演示一、前言本文基于VSCodeIDE进行编程、编译、下载、运行等操作基础入门章节请查阅：ESP32-C3入门教程基础篇①——基于VSCode构建HelloWorld教程目录大纲请查阅：ESP32-C3入门教程——导读ESP32-C3入门教程网络篇⑨——基于esp_https_ota实现史上最简单的ESP32OTA远程固件升级功能二、软件流程
2023最详细的Python安装教程（Windows版本）程序员林哥 Python python windows 开发语言
python安装是学习pyhon第一步，很多刚入门小白不清楚如何安装python，今天我来带大家完成python安装与配置，跟着我一步步来，很简单，你肯定能完成。第一部分：python安装（一）准备工作1、下载和安装python(认准官方网站)当然你不想去下载的话也可以分享给你，还有入门学习教程，点击下方卡片跳转进群领取（二）开始安装对于Windows操作系统，可以下载“executableins
博客网站制作教程 2401_85194651 java maven
首先就是技术框架：后端：Java+SpringBoot数据库：MySQL前端：Vue.js数据库连接：JPA(JavaPersistenceAPI)1.项目结构blog-app/├──backend/│├──src/main/java/com/example/blogapp/││├──BlogApplication.java││├──config/│││└──DatabaseConfig.java
00. 这里整理了最全的爬虫框架（Java + Python）有一只柴犬爬虫系列爬虫 java python
目录1、前言2、什么是网络爬虫3、常见的爬虫框架3.1、java框架3.1.1、WebMagic3.1.2、Jsoup3.1.3、HttpClient3.1.4、Crawler4j3.1.5、HtmlUnit3.1.6、Selenium3.2、Python框架3.2.1、Scrapy3.2.2、BeautifulSoup+Requests3.2.3、Selenium3.2.4、PyQuery3.2
详解：如何设计出健壮的秒杀系统？夜空_2cd3
作者：Yrion博客园：cnblogs.com/wyq178/p/11261711.html前言：秒杀系统相信很多人见过，比如京东或者淘宝的秒杀，小米手机的秒杀。那么秒杀系统的后台是如何实现的呢？我们如何设计一个秒杀系统呢？对于秒杀系统应该考虑哪些问题？如何设计出健壮的秒杀系统？本期我们就来探讨一下这个问题：image目录一：****秒杀系统应该考虑的问题二：****秒杀系统的设计和技术方案三：*
JavaScript `Map` 和 `WeakMap`详细解释跳房子的前端 JavaScript 原生方法 javascript 前端开发语言
在JavaScript中，Map和WeakMap都是用于存储键值对的数据结构，但它们有一些关键的不同之处。MapMap是一种可以存储任意类型的键值对的集合。它保持了键值对的插入顺序，并且可以通过键快速查找对应的值。Map提供了一些非常有用的方法和属性来操作这些数据对：set(key,value):将一个键值对添加到Map中。如果键已经存在，则更新其对应的值。get(key):获取指定键的值。如果键
计算机毕业设计PHP仓储综合管理系统（源码+程序+VUE+lw+部署） java毕设程序源码王哥 php 课程设计 vue.js
该项目含有源码、文档、程序、数据库、配套开发软件、软件安装教程。欢迎交流项目运行环境配置：phpStudy+Vscode+Mysql5.7+HBuilderX+Navicat11+Vue+Express。项目技术：原生PHP++Vue等等组成，B/S模式+Vscode管理+前后端分离等等。环境需要1.运行环境：最好是小皮phpstudy最新版，我们在这个版本上开发的。其他版本理论上也可以。2.开发
最简单将静态网页挂载到服务器上(不用nginx) 全能全知者服务器 nginx 运维前端 html 笔记
最简单将静态网页挂载到服务器上(不用nginx)如果随便弄个静态网页挂在服务器都要用nignx就太麻烦了，所以直接使用Apache来搭建一些简单前端静态网页会相对方便很多检查Web服务器服务状态：sudosystemctlstatushttpd#ApacheWeb服务器如果发现没有安装web服务器：安装Apache：sudoyuminstallhttpd启动Apache：sudosystemctl
补充元象二面 Redstone Monstrosity 前端面试
1.请尽可能详细地说明，防抖和节流的区别，应用场景？你的回答中不要写出示例代码。防抖（Debounce）和节流（Throttle）是两种常用的前端性能优化技术，它们的主要区别在于如何处理高频事件的触发。以下是防抖和节流的区别和应用场景的详细说明：防抖和节流的定义防抖：在一段时间内，多次执行变为只执行最后一次。防抖的原理是，当事件被触发后，设置一个延迟定时器。如果在这个延迟时间内事件再次被触发，则重
windows下python opencv ffmpeg读取摄像头实现rtsp推流拉流图像处理大大大大大牛啊 opencv实战代码讲解视觉图像项目 windows python opencv
windows下pythonopencvffmpeg读取摄像头实现rtsp推流拉流整体流程1.下载所需文件1.1下载rtsp推流服务器1.2下载ffmpeg2.开启RTSP服务器3.opencv读取摄像头并调用ffmpeg进行推流4.opencv进行拉流5.opencv异步拉流整体流程1.下载所需文件1.1下载rtsp推流服务器下载RTSP服务器下载页面https://github.com/blu
微信小程序开发注意事项 jun778895 微信小程序小程序
微信小程序开发是一个融合了前端开发、用户体验设计、后端服务（可选）以及微信小程序平台特性的综合性项目。这里，我将详细介绍一个典型的小程序开发项目的全过程，包括项目规划、设计、开发、测试及部署上线等各个环节，并尽量使内容达到或超过2000字的要求。一、项目规划1.1项目背景与目标假设我们要开发一个名为“智慧校园助手”的微信小程序，旨在为学生提供一站式校园生活服务，包括课程表查询、图书馆座位预约、食堂
切换淘宝最新npm镜像源是 hai40587 npm 前端 node.js
切换淘宝最新npm镜像源是一个相对简单的过程，但首先需要明确当前淘宝npm镜像源的状态和最新的镜像地址。由于网络环境和服务更新，镜像源的具体地址可能会发生变化，因此，我将基于当前可获取的信息，提供一个通用的切换步骤，并附上最新的镜像地址（截至回答时）。一、了解npm镜像源npm（NodePackageManager）是JavaScript的包管理器，用于安装、更新和管理项目依赖。由于npm官方仓库
[实验室服务器使用]使用VSCode、PyCharm、MobaXterm和CMD连接远程服务器 YuanDaima2048 工具使用服务器 vscode pycharm cmd 代理模式机器学习实验
文章总览：YuanDaiMa2048博客文章总览实验室服务器使用：使用VSCode、PyCharm、MobaXterm和CMD连接远程服务器在进行实验室工作时，远程连接服务器是常见的需求之一。本篇文章根据个人的一些使用介绍使用不同工具连接服务器的方法，并提供优化功能，使服务器能够使用本机代理的说明。准备服务器账号信息Host（主机）:10.XXX.XX.XXXPort（端口）:[SSHPort]U
字节二面 Redstone Monstrosity 前端面试
1.假设你是正在面试前端开发工程师的候选人，面试官让你详细说出你上一段实习过程的收获和感悟。在上一段实习过程中，我获得了宝贵的实践经验和深刻的行业洞察，以下是我的主要收获和感悟：一、专业技能提升框架应用熟练度：通过实际项目，我深入掌握了React、Vue等前端框架的使用，不仅提升了编码效率，还学会了如何根据项目需求选择合适的框架。问题解决能力：在实习期间，我遇到了许多预料之外的技术难题。通过查阅文
redis学习笔记——不仅仅是存取数据 Everyday都不同 returnSource expire/del incr/lpush 数据库分区 redis
最近项目中用到比较多redis，感觉之前对它一直局限于get/set数据的层面。其实作为一个强大的NoSql数据库产品，如果好好利用它，会带来很多意想不到的效果。（因为我搞java，所以就从jedis的角度来补充一点东西吧。PS：不一定全，只是个人理解，不喜勿喷） 1、关于JedisPool.returnSource(Jedis jeids) 这个方法是从red
SQL性能优化-持续更新中。。。。。。 atongyeye oracle sql
1 通过ROWID访问表--索引你可以采用基于ROWID的访问方式情况,提高访问表的效率, , ROWID包含了表中记录的物理位置信息..ORACLE采用索引(INDEX)实现了数据和存放数据的物理位置(ROWID)之间的联系. 通常索引提供了快速访问ROWID的方法,因此那些基于索引列的查询就可以得到性能上的提高. 2 共享SQL语句--相同的sql放入缓存 3 选择最有效率的表
[JAVA语言]JAVA虚拟机对底层硬件的操控还不完善 comsci JAVA虚拟机
如果我们用汇编语言编写一个直接读写CPU寄存器的代码段，然后利用这个代码段去控制被操作系统屏蔽的硬件资源，这对于JVM虚拟机显然是不合法的，对操作系统来讲，这样也是不合法的，但是如果是一个工程项目的确需要这样做，合同已经签了，我们又不能够这样做，怎么办呢？那么一个精通汇编语言的那种X客，是否在这个时候就会发生某种至关重要的作用呢？ &n
lvs- real 男人50 LVS
#!/bin/bash # # Script to start LVS DR real server. # description: LVS DR real server # #. /etc/rc.d/init.d/functions VIP=10.10.6.252 host='/bin/hostname' case "$1" in sta
生成公钥和私钥 oloz DSA 安全加密
package com.msserver.core.util; import java.security.KeyPair; import java.security.PrivateKey; import java.security.PublicKey; import java.security.SecureRandom; public class SecurityUtil {
UIView 中加入的cocos2d，背景透明 374016526 cocos2d glClearColor
要点是首先pixelFormat:kEAGLColorFormatRGBA8，必须有alpha层才能透明。然后view设置为透明glView.opaque = NO;[director setOpenGLView:glView];[self.viewController.view setBackgroundColor:[UIColor clearColor]];[self.viewControll
mysql常用命令香水浓 mysql
连接数据库 mysql -u troy -ptroy 备份表 mysqldump -u troy -ptroy mm_database mm_user_tbl > user.sql 恢复表（与恢复数据库命令相同） mysql -u troy -ptroy mm_database < user.sql 备份数据库 mysqldump -u troy -ptroy
我的架构经验系列文章 - 后端架构 - 系统层面 agevs JavaScript jquery css html5
系统层面：高可用性所谓高可用性也就是通过避免单独故障加上快速故障转移实现一旦某台物理服务器出现故障能实现故障快速恢复。一般来说，可以采用两种方式，如果可以做业务可以做负载均衡则通过负载均衡实现集群，然后针对每一台服务器进行监控，一旦发生故障则从集群中移除；如果业务只能有单点入口那么可以通过实现Standby机加上虚拟IP机制，实现Active机在出现故障之后虚拟IP转移到Standby的快速
利用ant进行远程tomcat部署 aijuans tomcat
在javaEE项目中，需要将工程部署到远程服务器上，如果部署的频率比较高，手动部署的方式就比较麻烦，可以利用Ant工具实现快捷的部署。这篇博文详细介绍了ant配置的步骤（http://www.cnblogs.com/GloriousOnion/archive/2012/12/18/2822817.html），但是在tomcat7以上不适用，需要修改配置，具体如下： 1.配置tomcat的用户角色
获取复利总收入 baalwolf 获取
public static void main(String args[]){ int money=200; int year=1; double rate=0.1; &
eclipse.ini解释 BigBird2012 eclipse
大多数java开发者使用的都是eclipse，今天感兴趣去eclipse官网搜了一下eclipse.ini的配置，供大家参考，我会把关键的部分给大家用中文解释一下。还是推荐有问题不会直接搜谷歌，看官方文档，这样我们会知道问题的真面目是什么，对问题也有一个全面清晰的认识。 Overview 1、Eclipse.ini的作用 Eclipse startup is controlled by th
AngularJS实现分页功能 bijian1013 JavaScript AngularJS 分页
对于大多数web应用来说显示项目列表是一种很常见的任务。通常情况下，我们的数据会比较多，无法很好地显示在单个页面中。在这种情况下，我们需要把数据以页的方式来展示，同时带有转到上一页和下一页的功能。既然在整个应用中这是一种很常见的需求，那么把这一功能抽象成一个通用的、可复用的分页（Paginator）服务是很有意义的。 &nbs
[Maven学习笔记三]Maven archetype bit1129 ArcheType
archetype的英文意思是原型，Maven archetype表示创建Maven模块的模版，比如创建web项目，创建Spring项目等等. mvn archetype提供了一种命令行交互式创建Maven项目或者模块的方式， mvn archetype 1.在LearnMaven-ch03目录下，执行命令mvn archetype:gener
【Java命令三】jps bit1129 Java命令
jps很简单，用于显示当前运行的Java进程，也可以连接到远程服务器去查看 [hadoop@hadoop bin]$ jps -help usage: jps [-help] jps [-q] [-mlvV] [<hostid>] Definitions: <hostid>: <hostname>[:
ZABBIX2.2 2.4 等各版本之间的兼容性 ronin47
zabbix更新很快，从2009年到现在已经更新多个版本，为了使用更多zabbix的新特性，随之而来的便是升级版本，zabbix版本兼容性是必须优先考虑的一点客户端AGENT兼容 zabbix1.x到zabbix2.x的所有agent都兼容zabbix server2.4：如果你升级zabbix server，客户端是可以不做任何改变，除非你想使用agent的一些新特性。 Zabbix代理（p
unity 3d还是cocos2dx哪个适合游戏？ brotherlamp unity自学 unity教程 unity视频 unity资料 unity
unity 3d还是cocos2dx哪个适合游戏？问：unity 3d还是cocos2dx哪个适合游戏？答：首先目前来看unity视频教程因为是3d引擎，目前对2d支持并不完善，unity 3d 目前做2d普遍两种思路，一种是正交相机，3d画面2d视角，另一种是通过一些插件，动态创建mesh来绘制图形单元目前用的较多的是2d toolkit，ex2d，smooth moves，sm2，
百度笔试题：一个已经排序好的很大的数组，现在给它划分成m段，每段长度不定，段长最长为k，然后段内打乱顺序，请设计一个算法对其进行重新排序 bylijinnan java 算法面试百度招聘
import java.util.Arrays; /** * 最早是在陈利人老师的微博看到这道题： * #面试题#An array with n elements which is K most sorted，就是每个element的初始位置和它最终的排序后的位置的距离不超过常数K * 设计一个排序算法。It should be faster than O(n*lgn)。
获取checkbox复选框的值 chiangfai checkbox
<title>CheckBox</title> <script type = "text/javascript"> doGetVal: function doGetVal() { //var fruitName = document.getElementById("apple").value;//根据
MySQLdb用户指南 chenchao051 mysqldb
原网页被墙，放这里备用。 MySQLdb User's Guide Contents Introduction Installation _mysql MySQL C API translation MySQL C API function mapping Some _mysql examples MySQLdb
HIVE 窗口及分析函数 daizj hive 窗口函数分析函数
窗口函数应用场景：（1）用于分区排序（2）动态Group By （3）Top N （4）累计计算（5）层次查询一、分析函数用于等级、百分点、n分片等。函数说明 RANK() &nbs
PHP ZipArchive 实现压缩解压Zip文件 dcj3sjt126com PHP zip
PHP ZipArchive 是PHP自带的扩展类，可以轻松实现ZIP文件的压缩和解压，使用前首先要确保PHP ZIP 扩展已经开启，具体开启方法就不说了，不同的平台开启PHP扩增的方法网上都有，如有疑问欢迎交流。这里整理一下常用的示例供参考。一、解压缩zip文件 01 02 03 04 05 06 07 08 09 10 11
精彩英语贺词 dcj3sjt126com 英语
I'm always here 我会一直在这里支持你 &nb
基于Java注解的Spring的IoC功能 e200702084 java spring bean IOC Office
java模拟post请求 geeksun java
一般API接收客户端（比如网页、APP或其他应用服务）的请求，但在测试时需要模拟来自外界的请求，经探索，使用HttpComponentshttpClient可模拟Post提交请求。此处用HttpComponents的httpclient来完成使命。 import org.apache.http.HttpEntity ; import org.apache.http.HttpRespon
Swift语法之 ---- ?和!区别 hongtoushizi ?swift !
转载自： http://blog.sina.com.cn/s/blog_71715bf80102ux3v.html Swift语言使用var定义变量，但和别的语言不同，Swift里不会自动给变量赋初始值，也就是说变量不会有默认值，所以要求使用变量之前必须要对其初始化。如果在使用变量之前不进行初始化就会报错： var stringValue : String //
centos7安装jdk1.7 jisonami jdk centos
安装JDK1.7 步骤1、解压tar包在当前目录 [root@localhost usr]#tar -xzvf jdk-7u75-linux-x64.tar.gz 步骤2：配置环境变量在etc/profile文件下添加 export JAVA_HOME=/usr/java/jdk1.7.0_75 export CLASSPATH=/usr/java/jdk1.7.0_75/lib
数据源架构模式之数据映射器 home198979 PHP 架构数据映射器 datamapper
前面分别介绍了数据源架构模式之表数据入口、数据源架构模式之行和数据入口数据源架构模式之活动记录，相较于这三种数据源架构模式，数据映射器显得更加“高大上”。一、概念数据映射器（Data Mapper）：在保持对象和数据库（以及映射器本身）彼此独立的情况下，在二者之间移动数据的一个映射器层。概念永远都是抽象的，简单的说，数据映射器就是一个负责将数据映射到对象的类数据。 &nb
在Python中使用MYSQL pda158 mysql python
缘由　　近期在折腾一个小东西须要抓取网上的页面。然后进行解析。将结果放到数据库中。　　了解到 Python在这方面有优势，便选用之。　　由于我有台 server上面安装有 mysql，自然使用之。在进行数据库的这个操作过程中遇到了不少问题，这里记录一下，大家共勉。　　 python中mysql的调用　　百度之后能够通过MySQLdb进行数据库操作。
单例模式 hxl1988_0311 java 单例设计模式单件
package com.sosop.designpattern.singleton; /* * 单件模式：保证一个类必须只有一个实例，并提供全局的访问点 * * 所以单例模式必须有私有的构造器，没有私有构造器根本不用谈单件 * * 必须考虑到并发情况下创建了多个实例对象 * */ /** * 虽然有锁，但是只在第一次创建对象的时候加锁，并发时不会存在效率
27种迹象显示你应该辞掉程序员的工作 vipshichg 工作
1、你仍然在等待老板在2010年答应的要提拔你的暗示。 2、你的上级近10年没有开发过任何代码。 3、老板假装懂你说的这些技术，但实际上他完全不知道你在说什么。 4、你干完的项目6个月后才部署到现场服务器上。 5、时不时的，老板在检查你刚刚完成的工作时，要求按新想法重新开发。 6、而最终这个软件只有12个用户。 7、时间全浪费在办公室政治中，而不是用在开发好的软件上。 8、部署前5分钟才开始测试。

Bootstrap5的html模板、Bootstrap5 CDN、Bootstrap5（、表格、图像、 按钮、加载、进度条、Flex字体图标）、条纹的进度条、边框类

一、Bootstrap 简介

二、Bootstrap安装

三、Bootstrap5的html模板

四、响应式布局相关的标签

五、Bootstrap5 CDN

六、Bootstrap5 容器

1.固定宽度

2.100% 宽度

3.响应式容器

七、Bootstrap5 表格

1.创建一个简单的表格

2.表格颜色

3.创建带条纹行的表格

4.带边框表格

5.无边框表格

6.鼠标悬停状态表格

7.创建较小的表格

8.响应式表格

9.总结

八、Bootstrap5 图像

1.圆角图片

2.圆形

3.缩略图

4.对齐图像

5.图片居中

6.响应式图片

九、Bootstrap5 按钮

1.Bootstrap 按钮样式

2.按钮设置边框

3.按钮尺寸

4.块级按钮

5.活动/禁用按钮

十、Bootstrap5 按钮组

1.基本的按钮组

2.按钮组的大小

3.垂直按钮组

十一、Bootstrap5 加载器

1.可以使用文本颜色类设置不同的颜色：

2.闪烁的加载效果

3.设置加载效果大小

4.加载按钮

十二、Bootstrap5 进度条

1.工作原理:

2.进度条的高度

3.进度条标签

4.进度条颜色

十三、条纹的进度条

1.添加额外的类

2.进度条动画

3.混合色彩进度条

十四、Bootstrap5 小工具

十五、边框类

1.使用边框类为元素添加或删除边框：

2.边框圆角

十六、浮动与清除浮动

1.响应式浮动

2.居中对齐

6.文本对齐类

7.宽度

8.高度

十七、间距

1.间距的方向

2.间距的距离

3.auto - 把 margin 设置为 auto

4.阴影

十八、Bootstrap 5 Flex

1.创建一个弹性盒子容器

2.使用d-inline-flex类创建行内 flexbox 容器，

3.水平方向

4.垂直方向

5.换行

6.对齐内容

7.顺序

8.等宽

9.伸展

10.指定子元素对齐

11.响应式 flex 类

12.Bootstrap5

你可能感兴趣的:(前端,bootstrap,html,前端,javascript,开发语言,windows,vscode)

Bootstrap5的html模板、Bootstrap5 CDN、Bootstrap5（、表格、图像、按钮、加载、进度条、Flex字体图标）、条纹的进度条、边框类