相关文章推荐
年轻有为的猴子  ·  html2pdf转换PDF时解决了文字被切断 ...·  11 月前    · 
冷静的猴子  ·  UITextField 类 (UIKit) ...·  1 年前    · 
茫然的木瓜  ·  android中非阻塞socket通信_an ...·  1 年前    · 
踏实的茄子  ·  万字解析 | 感性与理性认识 ...·  1 年前    · 
Code  ›  bootstrap5 - 夜雨初凉
https://www.cnblogs.com/Alax-LJJ/p/16026645.html
聪明伶俐的沙发
1 年前

Bootstrap，来自 Twitter，是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。

它是利用css3弹性盒子 + @media 查询 实现的响应式布局

关于@media语法 

/*直接在css中的用法*/
@media mediatype and|not|only (条件) {
 CSS-Code;
/*或者也可以针对不同的媒体使用不同 stylesheets*/
<link rel="stylesheet" media="mediatype and|not|only (条件)" href="mystylesheet.css">

  • 媒体类型可选的值
    • 

    示例2：浏览器宽度大于等于960px且小于等于1200px时使用样式
    

    @media screen and (min-width:960px) and (max-width:1200px){
    body{
        background:yellow;

    2、下载和安装
    

  • 官网：https://getbootstrap.com/
    • 

    官网可以下载编译版本的js、css 或  源码版本的js、css，根据个人喜好来吧。
    

    编译版本的：
    

    源码版本的：
    

    我这里以下载的编译后的版本为例，将其解压，我这里下载的bootstrap最新版本为5.x，解压后将bootstrap-5.1.1-dist 放到你的工程里，如我这里用的是vscode工具开发前端
    

    然后建立一个html文件。内容如下：
    

    <!DOCTYPE html>
    <title>Bootstrap 模板</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 引入 Bootstrap css 文件-->
    <link href="./bootstrap-5.1.1-dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- bootstrap的js库，包括所有已编译的插件 -->
    <script src="./bootstrap-5.1.1-dist/js/bootstrap.bundle.min.js"></script>
</head>
    <!--我们在看一看 这个h1样式 如何-->
    <h1>Hello, world!</h1>
</body>
</html>

    bootstrap安装完毕。
    

    3、Bootstrap CSS概览
    

    3.1、移动设备优先
    

    从Bootstrap 3开始之后，设计目标是移动设备优先，然后才是桌面设备。这实际上是一个非常及时的转变，因为现在越来越多的用户使用移动设备。
    

    为了让 Bootstrap 开发的网站对移动设备友好，确保适当的绘制和触屏缩放，需要在网页的 head 之中添加 viewport meta 标签，如下所示：
    

    <!--width=device-width:表示网页内容宽度根据设备宽度自动适配
	initial-scale=1.0: 确保网页加载时，以 1:1 的比例呈现，不会有任何的缩放-->
<meta name="viewport" content="width=device-width, initial-scale=1.0">

    3.2、容器
    

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

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

  • .container 类用于固定宽度并支持响应式布局的容器。
    • 

  • .container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器。
    • 

    3.2.1、.container 类
    

    用于创建固定宽度的响应式页面。
    

    注意：宽度 (max-width) 会根据屏幕宽度同比例放大或缩小。
    
<div class="container-fluid">
    <h1>我的第一个 Bootstrap 页面</h1>
    <p>使用了 .container-fluid，100% 宽度，占据全部视口（viewport）的容器。</p>

    3.2.3、flex 弹性布局
    

    弹性盒子是 CSS3 的一种新的布局模式，更适合响应式的设计，如果你还不了解 flex赶紧回去补习css3
    

    3.2.3.1、d-flex 、d-inline-flex
    

  • d-flex 弹性盒子
    • 

  • d-inline-flex 行内弹性盒子
    • 

    3.2.3.2、水平方向
    

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

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

    3.2.3.3、垂直方向
    

  • .flex-column 类用于设置弹性子元素垂直方向显示, .flex-column-reverse 用于翻转子元素
    • 

    3.2.3.4、沿x轴内容对齐
    

  • justify-content-* 类用于修改弹性子元素的排列方式，* 号允许的值有：start (默认), end, center, between 或 around
    • 

    3.2.3.5、沿y轴的内容对齐
    

  • 如果要设置单行的子元素对齐可以使用 .align-items-* 类来控制，包含的值有：**.align-items-start(默认), .align-items-end, .align-items-center, .align-items-baseline, 和 .align-items-stretch **
    • 

    3.2.3.6、在换行情况下的对齐方式
    

  • 我们可以使用 .align-content-* 来控制在垂直方向上如何去堆叠子元素，包含的值有：.align-content-start (默认), .align-content-end, .align-content-center, .align-content-between, .align-content-around 和 .align-content-stretch。
    • 

  • 注意：这些类在只有一行的弹性子元素中是无效的（默认flex-nowrap 不换行）。可以给其加上 .flex-wrap让其允许换行
    • 

    3.2.3.7、是否换行
    

  • 弹性容器中包裹子元素可以使用以下三个类： .flex-nowrap (默认), .flex-wrap 或 .flex-wrap-reverse。设置 flex 容器是单行或者多行。
    • 

    3.2.3.8、弹性子相关样式类
    

    3.2.3.8.1、平均宽度
    

  • .flex-fill 类强制平均按比例分配各个弹性子元素的宽度
    • 

    3.2.3.8.2、扩展
    

  • .flex-grow-1 用于设置子元素使用剩下的空间。
    • 

    3.2.3.8.3、指定子元素对齐
    

  • 如果要设置指定子元素对齐对齐可以使用 .align-self-* 类来控制，包含的值有：.align-self-start (默认), .align-self-end, .align-self-center, .align-self-baseline, 和 .align-self-stretch。
    • 

    <div class="container ">
    <p>使用 d-flex 类创建一个弹性盒子容器，并设置三个弹性子元素：</p>
        p-*：是padding 挤压*个像素
        bg-secondary:这个是设置背景色
        text-white:这个设置的是文本颜色
    <div class="d-flex p-3 bg-secondary text-white">
        <div class="p-2 bg-info">Flex item 1</div>
        <div class="p-2 bg-warning">Flex item 2</div>
        <div class="p-2 bg-primary">Flex item 3</div>
    <p>创建显示在同一行上的弹性盒子容器可以使用 d-inline-flex 类,注意：这个盒子没撑满整行</p>
    <div class="d-inline-flex p-3 bg-secondary text-white">
        <div class="p-2 bg-info">Flex item 1</div>
        <div class="p-2 bg-warning">Flex item 2</div>
        <div class="p-2 bg-primary">Flex item 3</div>
        默认.flex-row 可以设置弹性子元素水平显示。<br />
        使用 .flex-row-reverse 类用于设置右对齐显示，即与 .flex-row 方向相反
    <p>默认水平 左对齐</p>
    <div class="d-flex flex-row p-3 bg-secondary text-white">
        <div class="p-2 bg-info">Flex item 1</div>
        <div class="p-2 bg-warning">Flex item 2</div>
        <div class="p-2 bg-primary">Flex item 3</div>
    <p>反转 右对齐</p>
    <div class="d-flex flex-row-reverse p-3 bg-secondary text-white">
        <div class="p-2 bg-info">Flex item 1</div>
        <div class="p-2 bg-warning">Flex item 2</div>
        <div class="p-2 bg-primary">Flex item 3</div>
    <p>.flex-column 类用于设置弹性子元素垂直方向显示, .flex-column-reverse 用于翻转子元素</p>
    <p>垂直摆列</p>
    <div class="d-flex flex-column p-3 bg-secondary text-white">
        <div class="p-2 bg-info">Flex item 1</div>
        <div class="p-2 bg-warning">Flex item 2</div>
        <div class="p-2 bg-primary">Flex item 3</div>
    <p>垂直反转摆列</p>
    <div class="d-flex flex-column-reverse p-3 bg-secondary text-white">
        <div class="p-2 bg-info">Flex item 1</div>
        <div class="p-2 bg-warning">Flex item 2</div>
        <div class="p-2 bg-primary">Flex item 3</div>
        内容排列方式<br />
        .justify-content-* 类用于修改弹性子元素的排列方式，* 号允许的值有：
        start (默认), end, center, between 或 around:
    <div class="d-flex justify-content-start bg-secondary mb-3">
        <div class="p-2 bg-info">Flex item 1</div>
        <div class="p-2 bg-warning">Flex item 2</div>
        <div class="p-2 bg-primary">Flex item 3</div>
    <div class="d-flex justify-content-end bg-secondary mb-3">
        <div class="p-2 bg-info">Flex item 1</div>
        <div class="p-2 bg-warning">Flex item 2</div>
        <div class="p-2 bg-primary">Flex item 3</div>
    <div class="d-flex justify-content-center bg-secondary mb-3">
        <div class="p-2 bg-info">Flex item 1</div>
        <div class="p-2 bg-warning">Flex item 2</div>
        <div class="p-2 bg-primary">Flex item 3</div>
    <div class="d-flex justify-content-between bg-secondary mb-3">
        <div class="p-2 bg-info">Flex item 1</div>
        <div class="p-2 bg-warning">Flex item 2</div>
        <div class="p-2 bg-primary">Flex item 3</div>
    <div class="d-flex justify-content-around bg-secondary mb-3">
        <div class="p-2 bg-info">Flex item 1</div>
        <div class="p-2 bg-warning">Flex item 2</div>
        <div class="p-2 bg-primary">Flex item 3</div>
    <p>.flex-fill 类强制设置各个弹性子元素的宽度是一样的</p>
    <p>没有使用 .flex-fill </p>
    <div class="d-flex p-3 bg-secondary text-white">
        <div class="p-2 bg-info">Flex item 1</div>
        <div class="p-2 bg-warning">Flex item 2</div>
        <div class="p-2 bg-primary">Flex item 3</div>
    <p>使用了 .flex-fill</p>
    <div class="d-flex p-3 bg-secondary text-white">
        <div class="p-2 bg-info flex-fill">Flex item 1</div>
        <div class="p-2 bg-warning flex-fill">Flex item 2</div>
        <div class="p-2 bg-primary flex-fill">Flex item 3</div>
    <p>.flex-grow-1 用于设置子元素使用剩下的空间</p>
    <div class="d-flex p-3 bg-secondary text-white">
        <div class="p-2 bg-info">Flex item 1</div>
        <div class="p-2 bg-warning">Flex item 2</div>
        <div class="p-2 bg-primary flex-grow-1">Flex item 3</div>
    <p>包裹</p>
    <p>.flex-nowrap 不换行(默认)</p>
    <div class="d-flex flex-nowrap p-3 bg-secondary text-white">
        <div class="p-2 border">Flex item 1</div>
        <div class="p-2 border">Flex item 2</div>
        <div class="p-2 border">Flex item 3</div>
        <div class="p-2 border">Flex item 4</div>
        <div class="p-2 border">Flex item 5</div>
        <div class="p-2 border">Flex item 6</div>
        <div class="p-2 border">Flex item 7</div>
        <div class="p-2 border">Flex item 8</div>
        <div class="p-2 border">Flex item 9</div>
        <div class="p-2 border">Flex item 10</div>
        <div class="p-2 border">Flex item 11</div>
        <div class="p-2 border">Flex item 12</div>
        <div class="p-2 border">Flex item 13</div>
        <div class="p-2 border">Flex item 14</div>
        <div class="p-2 border">Flex item 15</div>
        <div class="p-2 border">Flex item 16</div>
        <div class="p-2 border">Flex item 17</div>
    <p>.flex-wrap 自动换行</p>
    <div class="d-flex flex-wrap p-3 bg-secondary text-white">
        <div class="p-2 border">Flex item 1</div>
        <div class="p-2 border">Flex item 2</div>
        <div class="p-2 border">Flex item 3</div>
        <div class="p-2 border">Flex item 4</div>
        <div class="p-2 border">Flex item 5</div>
        <div class="p-2 border">Flex item 6</div>
        <div class="p-2 border">Flex item 7</div>
        <div class="p-2 border">Flex item 8</div>
        <div class="p-2 border">Flex item 9</div>
        <div class="p-2 border">Flex item 10</div>
        <div class="p-2 border">Flex item 11</div>
        <div class="p-2 border">Flex item 12</div>
        <div class="p-2 border">Flex item 13</div>
        <div class="p-2 border">Flex item 14</div>
        <div class="p-2 border">Flex item 15</div>
        <div class="p-2 border">Flex item 16</div>
        <div class="p-2 border">Flex item 17</div>
    <p>.flex-wrap-reverse 反转</p>
    <div class="d-flex flex-wrap-reverse p-3 bg-secondary text-white">
        <div class="p-2 border">Flex item 1</div>
        <div class="p-2 border">Flex item 2</div>
        <div class="p-2 border">Flex item 3</div>
        <div class="p-2 border">Flex item 4</div>
        <div class="p-2 border">Flex item 5</div>
        <div class="p-2 border">Flex item 6</div>
        <div class="p-2 border">Flex item 7</div>
        <div class="p-2 border">Flex item 8</div>
        <div class="p-2 border">Flex item 9</div>
        <div class="p-2 border">Flex item 10</div>
        <div class="p-2 border">Flex item 11</div>
        <div class="p-2 border">Flex item 12</div>
        <div class="p-2 border">Flex item 13</div>
        <div class="p-2 border">Flex item 14</div>
        <div class="p-2 border">Flex item 15</div>
        <div class="p-2 border">Flex item 16</div>
        <div class="p-2 border">Flex item 17</div>
    <p>内容对齐,注意：这些类在只有一行的弹性子元素中是无效的,可以通过 flex-wrap让其自动换行</p>
    <p>.align-content-start</p>
    <div style="height: 300px;" class="d-flex flex-wrap  align-content-start p-3 bg-secondary text-white">
        <div class="p-2 border">Flex item 1</div>
        <div class="p-2 border">Flex item 2</div>
        <div class="p-2 border">Flex item 3</div>
        <div class="p-2 border">Flex item 4</div>
        <div class="p-2 border">Flex item 5</div>
        <div class="p-2 border">Flex item 6</div>
        <div class="p-2 border">Flex item 7</div>
        <div class="p-2 border">Flex item 8</div>
        <div class="p-2 border">Flex item 9</div>
        <div class="p-2 border">Flex item 10</div>
        <div class="p-2 border">Flex item 11</div>
        <div class="p-2 border">Flex item 12</div>
        <div class="p-2 border">Flex item 13</div>
        <div class="p-2 border">Flex item 14</div>
        <div class="p-2 border">Flex item 15</div>
        <div class="p-2 border">Flex item 16</div>
        <div class="p-2 border">Flex item 17</div>
    <p>.align-content-end</p>
    <div style="height: 300px;" class="d-flex flex-wrap align-content-end p-3 bg-secondary text-white">
        <div class="p-2 border">Flex item 1</div>
        <div class="p-2 border">Flex item 2</div>
        <div class="p-2 border">Flex item 3</div>
        <div class="p-2 border">Flex item 4</div>
        <div class="p-2 border">Flex item 5</div>
        <div class="p-2 border">Flex item 6</div>
        <div class="p-2 border">Flex item 7</div>
        <div class="p-2 border">Flex item 8</div>
        <div class="p-2 border">Flex item 9</div>
        <div class="p-2 border">Flex item 10</div>
        <div class="p-2 border">Flex item 11</div>
        <div class="p-2 border">Flex item 12</div>
        <div class="p-2 border">Flex item 13</div>
        <div class="p-2 border">Flex item 14</div>
        <div class="p-2 border">Flex item 15</div>
        <div class="p-2 border">Flex item 16</div>
        <div class="p-2 border">Flex item 17</div>
    <p>.align-content-center</p>
    <div style="height: 300px;" class="d-flex flex-wrap align-content-center p-3 bg-secondary text-white">
        <div class="p-2 border">Flex item 1</div>
        <div class="p-2 border">Flex item 2</div>
        <div class="p-2 border">Flex item 3</div>
        <div class="p-2 border">Flex item 4</div>
        <div class="p-2 border">Flex item 5</div>
        <div class="p-2 border">Flex item 6</div>
        <div class="p-2 border">Flex item 7</div>
        <div class="p-2 border">Flex item 8</div>
        <div class="p-2 border">Flex item 9</div>
        <div class="p-2 border">Flex item 10</div>
        <div class="p-2 border">Flex item 11</div>
        <div class="p-2 border">Flex item 12</div>
        <div class="p-2 border">Flex item 13</div>
        <div class="p-2 border">Flex item 14</div>
        <div class="p-2 border">Flex item 15</div>
        <div class="p-2 border">Flex item 16</div>
        <div class="p-2 border">Flex item 17</div>
    <p>.align-content-between</p>
    <div style="height: 300px;" class="d-flex flex-wrap align-content-between p-3 bg-secondary text-white">
        <div class="p-2 border">Flex item 1</div>
        <div class="p-2 border">Flex item 2</div>
        <div class="p-2 border">Flex item 3</div>
        <div class="p-2 border">Flex item 4</div>
        <div class="p-2 border">Flex item 5</div>
        <div class="p-2 border">Flex item 6</div>
        <div class="p-2 border">Flex item 7</div>
        <div class="p-2 border">Flex item 8</div>
        <div class="p-2 border">Flex item 9</div>
        <div class="p-2 border">Flex item 10</div>
        <div class="p-2 border">Flex item 11</div>
        <div class="p-2 border">Flex item 12</div>
        <div class="p-2 border">Flex item 13</div>
        <div class="p-2 border">Flex item 14</div>
        <div class="p-2 border">Flex item 15</div>
        <div class="p-2 border">Flex item 16</div>
        <div class="p-2 border">Flex item 17</div>
    <p>.align-content-around</p>
    <div style="height: 300px;" class="d-flex flex-wrap align-content-around p-3 bg-secondary text-white">
        <div class="p-2 border">Flex item 1</div>
        <div class="p-2 border">Flex item 2</div>
        <div class="p-2 border">Flex item 3</div>
        <div class="p-2 border">Flex item 4</div>
        <div class="p-2 border">Flex item 5</div>
        <div class="p-2 border">Flex item 6</div>
        <div class="p-2 border">Flex item 7</div>
        <div class="p-2 border">Flex item 8</div>
        <div class="p-2 border">Flex item 9</div>
        <div class="p-2 border">Flex item 10</div>
        <div class="p-2 border">Flex item 11</div>
        <div class="p-2 border">Flex item 12</div>
        <div class="p-2 border">Flex item 13</div>
        <div class="p-2 border">Flex item 14</div>
        <div class="p-2 border">Flex item 15</div>
        <div class="p-2 border">Flex item 16</div>
        <div class="p-2 border">Flex item 17</div>
    <p>.align-content-stretch</p>
    <div style="height: 300px;" class="d-flex flex-wrap align-content-stretch p-3 bg-secondary text-white">
        <div class="p-2 border">Flex item 1</div>
        <div class="p-2 border">Flex item 2</div>
        <div class="p-2 border">Flex item 3</div>
        <div class="p-2 border">Flex item 4</div>
        <div class="p-2 border">Flex item 5</div>
        <div class="p-2 border">Flex item 6</div>
        <div class="p-2 border">Flex item 7</div>
        <div class="p-2 border">Flex item 8</div>
        <div class="p-2 border">Flex item 9</div>
        <div class="p-2 border">Flex item 10</div>
        <div class="p-2 border">Flex item 11</div>
        <div class="p-2 border">Flex item 12</div>
        <div class="p-2 border">Flex item 13</div>
        <div class="p-2 border">Flex item 14</div>
        <div class="p-2 border">Flex item 15</div>
        <div class="p-2 border">Flex item 16</div>
        <div class="p-2 border">Flex item 17</div>
    <p>子元素对齐</p>
    <p>如果要设置单行的子元素对齐可以使用 .align-items-* 类来控制，包含的值有：
        .align-items-start (默认) , .align-items-end, .align-items-center,
        .align-items-baseline, 和 .align-items-stretch</p>
    <p>.align-items-start</p>
    <div style="height: 300px;" class="d-flex align-items-start p-3 bg-secondary text-white">
        <div class="p-2 border">Flex item 1</div>
        <div class="p-2 border">Flex item 2</div>
        <div class="p-2 border">Flex item 3</div>
    <p>.align-items-end</p>
    <div style="height: 300px;" class="d-flex align-items-end p-3 bg-secondary text-white">
        <div class="p-2 border">Flex item 1</div>
        <div class="p-2 border">Flex item 2</div>
        <div class="p-2 border">Flex item 3</div>
    <p>.align-items-center</p>
    <div style="height: 300px;" class="d-flex align-items-center p-3 bg-secondary text-white">
        <div class="p-2 border">Flex item 1</div>
        <div class="p-2 border">Flex item 2</div>
        <div class="p-2 border">Flex item 3</div>
    <p>.align-items-baseline</p>
    <div style="height: 300px;" class="d-flex align-items-baseline p-3 bg-secondary text-white">
        <div class="p-2 border">Flex item 1</div>
        <div class="p-2 border">Flex item 2</div>
        <div class="p-2 border">Flex item 3</div>
    <p>.align-items-stretch</p>
    <div style="height: 300px;" class="d-flex align-items-stretch p-3 bg-secondary text-white">
        <div class="p-2 border">Flex item 1</div>
        <div class="p-2 border">Flex item 2</div>
        <div class="p-2 border">Flex item 3</div>
    <p>指定子元素对齐</p>
    <p>如果要设置指定子元素对齐对齐可以使用 .align-self-* 类来控制，包含的值有：
        .align-self-start , .align-self-end, .align-self-center,
        .align-self-baseline, 和 .align-self-stretch(默认)</p>
    <div style="height: 300px;" class="d-flex p-3 bg-secondary text-white">
        <div class="p-2 border align-self-start">align-self-start</div>
        <div class="p-2 border align-self-end">align-self-end</div>
        <div class="p-2 border align-self-center">align-self-center</div>
        <div class="p-2 border align-self-baseline">align-self-baseline</div>
        <div class="p-2 border align-self-stretch">align-self-stretch(默认)</div>

    3.3、网格系统
    

    Bootstrap 提供了一套响应式、移动设备优先的流式网格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多 12 列。




    

    

    我们也可以根据自己的需要，定义列数：
    

    Bootstrap 5 的网格系统是响应式的，列会根据屏幕大小自动重新排列。
    

    请确保每一行中列的总和等于或小于 12。
    

    3.3.1、网格类
    

    Bootstrap 5 网格系统有以下 6 个类:
    

  • .col- 针对所有设备
    • 

  • .col-sm- 平板 - 屏幕宽度等于或大于 576px
    • 

  • .col-md- 桌面显示器 - 屏幕宽度等于或大于 768px)
    • 

  • .col-lg- 大桌面显示器 - 屏幕宽度等于或大于 992px)
    • 

  • .col-xl- 特大桌面显示器 - 屏幕宽度等于或大于 1200px)
    • 

  • .col-xxl- 超大桌面显示器 - 屏幕宽度等于或大于。1400px)
    • 

    3.3.2、网格系统规则
    

    网格每一行需要放在设置了 .container (固定宽度) 或 .container-fluid (全屏宽度) 类的容器中，这样就可以自动设置一些外边距与内边距。
    
    <p>col-[1,12]的宽度平均分配并撑满,但是总计不能超过12,超过12就会 换行</p>
    <div class="row">
        <div class="col-1">col-1</div>
        <div class="col-1">col-1</div>
        <div class="col-1">col-1</div>
        <div class="col-1">col-1</div>
        <div class="col-1">col-1</div>
        <div class="col-1">col-1</div>
        <div class="col-1">col-1</div>
        <div class="col-1">col-1</div>
        <div class="col-1">col-1</div>
        <div class="col-1">col-1</div>
        <div class="col-1">col-1</div>
        <div class="col-1">col-1</div>
    <div class="row">
        <div class="col-2">col-2</div>
        <div class="col-2">col-2</div>
        <div class="col-4">col-4</div>
        <div class="col-4">col-4</div>
    <div class="row">
        <div class="col-6">col-6</div>
        <div class="col-6">col-6</div>
    <div class="row">
        <div class="col-12">col-12</div>
    <p>col-sm- 平板 - 屏幕宽度等于或大于 576px,
        如果屏幕小于576px，那么将会堆叠排版</p>
    <div class="row">
        <div class="col-sm-4">col-sm-4</div>
        <div class="col-sm-4">col-sm-4</div>
        <div class="col-sm-4">col-sm-4</div>
    <p>.col-md- 桌面显示器 - 屏幕宽度等于或大于 768px,
        如果屏幕小于768px，那么将会堆叠排版</p>
    <div class="row">
        <div class="col-md-4">col-md-4</div>
        <div class="col-md-4">col-md-4</div>
        <div class="col-md-4">col-md-4</div>
        组合使用,当屏幕 小于768px，将使用 col-6样式，跨6列。
        当屏幕大于768px时，将使用 col-md-4样式，跨4列。
    <div class="row">
        <div class="col-1">1</div>
        <div class="col-1">1</div>
        <div class="col-1">1</div>
        <div class="col-1">1</div>
        <div class="col-1">1</div>
        <div class="col-1">1</div>
        <div class="col-1">1</div>
        <div class="col-1">1</div>
        <div class="col-1">1</div>
        <div class="col-1">1</div>
        <div class="col-1">1</div>
        <div class="col-1">1</div>
    <div class="row">
        <div class="col-6 col-md-4">1</div>
        <div class="col-6 col-md-4">1</div>
        <div class="col-6 col-md-4">1</div>

    3.4、文字排版
    

    3.4.1、<h1> - <h6>
    

    Bootstrap 中定义了所有的 HTML 标题（h1 到 h6）的样式。请看下面的实例：
    

    <div class="container">
    <p>字体大小会随着屏幕的变化而变化，可以重置浏览器大小查看效果。</p>
    <h1>h1 Bootstrap 标题</h1>
    <h2>h2 Bootstrap 标题</h2>
    <h3>h3 Bootstrap 标题</h3>
    <h4>h4 Bootstrap 标题</h4>
    <h5>h5 Bootstrap 标题</h5>
    <h6>h6 Bootstrap 标题</h6>

    3.4.2、Display 标题类
    

    Bootstrap 还提供了四个 Display 类来控制标题的样式: .display-1, .display-2, .display-3, .display-4。
    

    <div class="container">
    <h1>Display 标题</h1>
    <p>Display 标题可以输出更大更粗的字体样式。</p>
    <h1 class="display-1">Display 1</h1>
    <h1 class="display-2">Display 2</h1>
    <h1 class="display-3">Display 3</h1>
    <h1 class="display-4">Display 4</h1>

    3.4.3、<small>
    

    在 Bootstrap 5 中 HTML  元素用于创建字号更小的颜色更浅的文本:
    

    <div class="container">
    <h1>更小文本标题</h1>
    <p>small 元素用于字号更小的颜色更浅的文本:</p>
    <h1>h1 标题 <small>副标题</small></h1>
    <h2>h2 标题 <small>副标题</small></h2>
    <h3>h3 标题 <small>副标题</small></h3>
    <h4>h4 标题 <small>副标题</small></h4>
    <h5>h5 标题 <small>副标题</small></h5>
    <h6>h6 标题 <small>副标题</small></h6>

    3.4.4、<mark>
    

    Bootstrap 5 定义  标签及 .marked 类为黄色背景及有一定的内边距:
    

    <div class="container">
    <h1>高亮文本</h1>
    <p>使用 mark 元素来 <mark>高亮</mark> 文本。</p>

    3.4.5、<abbr>
    

    Bootstrap 5 定义 HTML  元素的样式为显示在文本底部的一条虚线边框:
    

    <div class="container">
    <h1>缩写</h1>
    <p>abbr元素用于标记缩写或首字母缩略词:</p>
    <p>这个 <abbr title="世界卫生组织">WHO</abbr> 成立于 1948.</p>

    3.4.6、<blockquote>
    

    对于引用的内容可以在 
     上添加 .blockquote 类 :
    

    <div class="container">
    <h1>Blockquotes</h1>
    <p>blockquote元素用于表示来自另一个源的内容:</p>
    <blockquote class="blockquote">
        <p>50年来，世界自然基金会一直在保护自然的未来。世界领先的保护组织，
            世界自然基金会在100个国家开展工作，得到美国120万会员和近5个国家的支持全球有100万人。</p>
        <footer class="blockquote-footer">来自于 世界自然基金会网站</footer>
    </blockquote>

    3.4.7、<dl>
    

    Bootstrap 5 定义 HTML 
     元素的样式如下:
    

    <div class="container">
    <h1>Description Lists</h1>
    <p>dl元素用于描述列表:</p>
        <dt>咖啡</dt>
        <dd>- 拿铁</dd>
        <dd>- 玛奇朵</dd>
        <dd>- 康巴纳</dd>
        <dd>- 卡贝奇诺</dd>
        <dt>牛奶</dt>
        <dd>- 珍珠奶茶</dd>
        <dd>- 烧仙草</dd>
        <dd>- 芒果沙冰</dd>

    3.4.8、<code>
    

    Bootstrap 5 定义 HTML  元素的样式如下:
    

    <div class="container">
    <h1>代码片段</h1>
    <p>可以将一些代码元素放到 code 元素里面:</p>
    <p>以下 HTML 元素: <code>span</code>, <code>section</code>, 和 <code>div</code> 用于定义部分文档内容。</p>

    3.4.9、<kbd>
    

    Bootstrap 5 定义 HTML  元素的样式如下:
    

    <div class="container">
    <h1>键盘输入</h1>
    <p>要指示通常通过键盘输入的输入，请使用kbd元素:</p>
    <p>使用 <kbd>ctrl + p</kbd> 组合键可以打开打印弹窗.</p>

    3.4.10、<pre>
    

    Bootstrap 5 定义 HTML 
     元素的样式如下:
    

    <div class="container">
    <h1>多行代码</h1>
    <p>对于多行代码，请使用pre元素:</p>
    这段文本在pre标签内，这是第一行
    第二行，没有使用br标签
    第三行，没有使用br标签

    3.4.11、更多的排版类
    
<div class="container">
    <p class="text-lowercase">英文小写显示：AbC.</p>
    <p class="text-uppercase">英文大写显示：abcd.</p>
    <p class="text-capitalize">首个英文大写显示：abc.</p>
<div class="container">
    <p>.list-unstyled样式能移出默认的列表样式和左边距（受该样式影响的只有直系儿子，孙子不受影响）。:</p>
    <ul class="list-unstyled">
        <li>咖啡</li>
                <li>黑茶</li>
                <li>绿茶</li>
        <li>牛奶</li>
<div class="container">
    <p>默认情况下ul中的li等元素是会换行的，
        .list-inline配合.list-inline-item 可以让它们的li都在一行:</p>
    <ul class="list-inline">
        <li class="list-inline-item">咖啡</li>
        <li class="list-inline-item">茶</li>
        <li class="list-inline-item">牛奶</li>

    3.5、颜色
    

    3.5.1、文本颜色
    

    Bootstrap 5 提供了一些有代表意义的颜色类：.text-muted, .text-primary, .text-success, .text-info, .text-warning, .text-danger, .text-secondary, .text-white, .text-dark, .text-body (默认颜色，为黑色) and .text-light:
    

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

    3.5.2、背景色
    

    提供背景颜色的类有: .bg-primary, .bg-success, .bg-info, .bg-warning, .bg-danger, .bg-secondary, .bg-dark 和 .bg-light。
    

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

    3.5、表格
    

    3.5.1、表格类
    

    下表样式可用于表格中：
    
        table-striped 类，可以在 <code>&lt;tbody&gt;</code> 内的行上看到条纹，<br />
        table-bordered 类可以为表格添加边框 <br />
        table-hover 类可以为表格的每一行添加鼠标悬停效果<br />
        如下面的实例所示：
    <table class="table table-striped table-bordered table-hover">
        <thead>
                <th>姓名</th>
                <th>年龄</th>
                <th>Email</th>
        </thead>
        <tbody>
                <td>白素贞</td>
                <td>母</td>
                <td>john@example.com</td>
                <td>妲己</td>
                <td>母</td>
                <td>mary@example.com</td>
                <td>嫦娥</td>
                <td>女</td>
                <td>july@example.com</td>
        </tbody>
    </table>

    3.6、表单
    

  • form-control //所有input都可使用
    • 

  • form-select //select使用
    • 

  • form-check-label  //一般使用于checkbox或radio的label上
    • 

  • form-check-input //一般使用与 checkbox 或 radio上
    • 
        输入框：<input type="text" class="form-control" placeholder="请输入名字"><br />
        下拉框：<select class="form-control">
            <option>java</option>
            <option>c#</option>
            <option>c++</option>
        </select> <br />
        多行文本框：<textarea class="form-control">
        </textarea> <br />
        <label class="form-check-label"><input class="form-check-input" type="radio" name="sex" />男</label>
        <label class="form-check-label"><input class="form-check-input" type="radio" name="sex" />女</label><br />
        <label class="form-check-label"><input class="form-check-input" type="checkbox" name="course" />数学</label>
        <label class="form-check-label"><input class="form-check-input" type="checkbox" name="course" />语文</label>
        <label class="form-check-label"><input class="form-check-input" type="checkbox" name="course" />英语</label> <br />
    	文件：<input type="file" class="form-control"/> <br/>
		日期：<input type="date" class="form-control" value="2021-12-27"/>
    </form>

    3.6.1、表单校验
    

    特别注意： form上面必须有 .was-validated 此css类
    

    <form action="#" class="was-validated">
    <div class="row">
        <div class="col-6">
            <!--利用 .input-group 将 label 和 input排列为一行-->
            <div class="input-group">
                <label class="form-label">姓名：</label>
required:表示必填
当校验不通过:
bootstrap5会自动查找后面的兄弟元素，
css类为 .invalid-feedback 的元素显示出来
                <input type="text" class="form-control" required />
                <div class="invalid-feedback">
                    请输入姓名
        <div class="col-6">
            <div class="input-group">
                <label class="form-label">爱好：</label>
                <select class="form-select" required>
                    <option value="">请选择</option>
                    <option value="01">游泳</option>
                    <option value="02">打游戏</option>
                </select>
                <!--校验提示信息还可以使用 弹框的形式-->
                <div class="invalid-tooltip">
                    请输入姓名
        <div class="col-6">
            <!--单选按钮/复选框等 也是可以校验的-->
            <label class="form-label">性别：</label>
            <input type="radio" id="man" name="sex" 
                   class="form-check-input" value="男" required/>
            <label class="form-check-label" for="man">
            </label>
            <input type="radio" id="wumen" name="sex" 
                   class="form-check-input " value="女" required/>
            <label class="form-check-label" for="wumen">
            </label>
            <div class="invalid-feedback">
                请选择性别
        <div class="col-6">
            <div class="input-group">
                <!--可以通过 .is-invalid 这个css类直接控制校验文本显示出来-->
                <label class="form-label">地区:</label> 
                <input type="text" class="form-control is-invalid">
                <div class="invalid-tooltip">
                    请输入省份
        <div class="col-6">
            <!--文件上传也可以玩-->
            <div class="input-group">
                <label class="form-label">头像:</label> 
                <input type="file" class="form-control" required>
                <div class="invalid-feedback">
                    请选择头像
        <div class="col-6">
            <div class="input-group">
                <label class="form-label">年龄:</label> 
                <input type="number" class="form-control" 
                       value="100" min="10" max="50">
                <div class="invalid-tooltip">
                    年龄必须是 10~50岁之前
        <div class="col-12">
            <button class="btn btn-primary" type="reset">重置</button>
            <button class="btn btn-primary" type="submit">提交</button>
</form>
<script>
    // 提交按钮
    document.querySelector("*[type='submit']").onclick = function(){
        //获取form
        let form = document.querySelector("form");
        //确保form表单上有 was-validated 这个css类，才能给你动态校验
        form.classList.add("was-validated");
        //校验函数，表单若校验通过，则返回true,反之返回false
        let valid = form.checkValidity();
        console.info("valid:",valid)
    // 重置按钮
    document.querySelector("*[type='reset']").onclick = function(){
        //获取form
        let form = document.querySelector("form");
        //重置表单的话，只要移出 was-validated 这个css类即可
        form.classList.remove("was-validated");
</script>

    3.7、按钮
    

    3.7.1、一般按钮
    

    以下样式可用于<a>, <button>, 或 <input> 元素上：
    

    <!-- 标准的按钮 -->
    <button type="button" class="btn btn-default">默认按钮</button>
    <!-- 提供额外的视觉效果，标识一组按钮中的原始动作 -->
    <button type="button" class="btn btn-primary">原始按钮</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-link">链接按钮</button>

    3.7.2、按钮组
    

    可以在 
     元素上添加 .btn-group 类来创建按钮组。
    

    <div class="container">
    <h2>按钮组</h2>
    <p> .btn-group 类用于创建按钮组:</p>
    <div class="btn-group">
        <button type="button" class="btn btn-primary">苹果</button>
        <button type="button" class="btn btn-primary">三星</button>
        <button type="button" class="btn btn-primary">索尼</button>

    3.7.3、垂直的按钮组
    

    可以使用 .btn-group-vertical 类来创建垂直的按钮组
    

    <div class="container">
    <h2>垂直按钮组</h2>
    <p>可以使用 .btn-group-vertical 类来创建垂直的按钮组：</p>
    <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>

    3.7.4、内嵌按钮组及下拉菜单
    

    .dropdown-toggle  :让按钮右上角多了个下标
    

    data-bs-toggle="dropdown" : 让bootstrap对其绑定js相关事件处理
    

    .dropdown-menu ：表明这是一个下拉菜单的样式
    

    .dropdown-item :表明这是下拉菜单项的样式
    

    <div class="container">
    <h2>内嵌按钮组</h2>
    <p>按钮组设置下拉菜单:</p>
    <div class="btn-group">
        <button type="button" 
                class="btn btn-primary dropdown-toggle" 
                data-bs-toggle="dropdown">手机</button>
        <!--下拉菜单-->
        <ul class="dropdown-menu">
            <li><a class="dropdown-item" href="#">苹果</a></li>
            <li><a class="dropdown-item" href="#">三星</a></li>
            <li><a class="dropdown-item" href="#">索尼</a></li>

    3.8、图片
    

    3.8.1、图片形状
    

  • .rounded 类可以让图片显示圆角效果
    • 

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

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

    <div class="container">
    <p>.rounded 类可以让图片显示圆角效果：</p>            
    <img class="rounded" src="./imgs/blhx.jpg" width="200" />
    <p>.rounded-circle 类可以设置椭圆形图片:</p>
    <img class="rounded-circle" src="./imgs/blhx.jpg" width="200" />
    <p>.img-thumbnail 类用于设置图片缩略图(图片有边框):</p>   
    <img class="img-thumbnail" src="./imgs/blhx.jpg" width="200" />

    3.8.2、图片的对齐方式
    

    .float-start 、.float-end 其实就是设置了浮动而已。
    

  • 居左和居右：使用 .float-start 类来设置图片左对齐，使用 .float-end 类设置图片右对齐
    • 

  • 图片居中:使用 .mx-auto (margin:auto) 和 .d-block (display:block) 类来设置图片居中对齐
    • 

  • 响应式图片

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

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

    居左和居右
    

    <div class="container">
    <p>使用 .float-start 类来设置图片右对齐，使用 .float-end 类设置图片左对齐:</p>
    <img class="float-start" src="./imgs/blhx.jpg" width="200" />
    <img class="float-end" src="./imgs/blhx.jpg" width="200" />

    <div class="container">
    <p>.mx-auto .d-block 类可以让图片居中</p>            
    <img class="mx-auto d-block" src="./imgs/blhx.jpg" width="200" />

    响应式图片
    

    <div class="container">
    <p>.img-fluid 类可以设置响应式图片，重置浏览器大小查看效果:</p>
    <img class="img-fluid" src="./imgs/blhx.jpg" width="400" />

    3.9、提示框
    

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

    <div class="container">
    <h2>提示框</h2>
    <p>提示框可以使用 .alert 类, 后面加上指定特定意义的颜色类来实现:</p>
    <div class="alert alert-success">
        <strong>成功!</strong> 指定操作成功提示信息。
    <div class="alert alert-info">
        <strong>信息!</strong> 请注意这个信息。
    <div class="alert alert-warning">
        <strong>警告!</strong> 设置警告信息。
    <div class="alert alert-danger">
        <strong>错误!</strong> 失败的操作
    <div class="alert alert-primary">
        <strong>首选!</strong> 这是一个重要的操作信息。
    <div class="alert alert-secondary">
        <strong>次要的!</strong> 显示一些不重要的信息。
    <div class="alert alert-dark">
        <strong>深灰色!</strong> 深灰色提示框。
    <div class="alert alert-light">
        <strong>浅灰色!</strong>浅灰色提示框。

    我们可以在提示框中的 div 中添加 .alert-dismissible 类，然后在关闭按钮的链接上添加 class="btn-close" 和 data-dismiss="alert" 类来设置提示框的关闭操作。
    

    <div class="container">
    <h2>关闭提示框</h2>
    <p>我们可以在提示框中的 div 中添加 .alert-dismissible 类，然后在关闭按钮的链接上添加 class="btn-close" 和 data-dismiss="alert" 类来设置提示框的关闭操作。
    <div class="alert alert-success alert-dismissible">
        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        <strong>成功!</strong> 指定操作成功提示信息。
    <div class="alert alert-info alert-dismissible">
        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        <strong>信息!</strong> 请注意这个信息。
    <div class="alert alert-warning alert-dismissible">
        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        <strong>警告!</strong> 设置警告信息。
    <div class="alert alert-danger alert-dismissible">
        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        <strong>错误!</strong> 失败的操作。
    <div class="alert alert-primary alert-dismissible">
        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        <strong>首选!</strong> 这是一个重要的操作信息。
    <div class="alert alert-secondary alert-dismissible">
        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        <strong>次要的!</strong> 显示一些不重要的信息。
    <div class="alert alert-dark alert-dismissible">
        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        <strong>深灰色!</strong> 深灰色提示框。
    <div class="alert alert-light alert-dismissible">
        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        <strong>浅灰色!</strong>浅灰色提示框。

    3.10、进度条
    

    3.10.1、基本进度条
    

    创建一个基本的进度条的步骤如下：
    

  • 添加一个带有 .progress 类的 
    。




    

    • 

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

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

    <div class="container">
    <h2>基本进度条</h2>
    <p>要创建一个默认的进度条，可以在容器元素上添加 .progress 类，在子元素上添加 progress-bar 类，并设置进度条进度情况：:</p>
    <div class="progress">
        <div class="progress-bar" style="width:70%">进度君已经到达70%，快抗不住啦。。。</div>

    3.10.2、混合色彩进度条
    

    <div class="container">
        <h2>混合色彩进度条</h2>
        <p>进度条可以设置多种颜色:</p>
        <div class="progress">
            <div class="progress-bar bg-success" style="width:40%">
            <div class="progress-bar bg-warning" style="width:10%">
            <div class="progress-bar bg-danger" style="width:20%">

    3.11、加载效果
    

    3.11.1、一般加载效果
    

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

    <div class="container">
    <h2>加载中效果</h2>
    <p>要创建加载中效果可以使用 .spinner-border 类:</p>
    <div class="spinner-border"></div>

    还可以配合文本类来实现不同的加载效果颜色：
    

    <div class="container">
    <h2>不同颜色加载效果</h2>
    <p>可以使用文本颜色类设置不同的颜色：</p>
    <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>

    3.11.2、闪烁的加载效果
    

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

    <div class="container">
    <h2>闪烁的加载效果</h2>
    <p>使用 .spinner-grow 类来设置闪烁的加载效果:</p>
    <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.11.3、加载按钮示例
    

    .spinner-border-sm 或 .spinner-grow-sm 类来会让加载效果变小一些
    

    <div class="container">
    <h2>加载按钮</h2>
    <p>按钮添加正在加载按钮:</p>
    <button class="btn btn-primary">
        <span class="spinner-border spinner-border-sm"></span>
    </button>
    <button class="btn btn-primary">
        <span class="spinner-border spinner-border-sm"></span>
        Loading..
    </button>
    <button class="btn btn-primary" disabled>
        <span class="spinner-border spinner-border-sm"></span>
        Loading..
    </button>
    <button class="btn btn-primary" disabled>
        <span class="spinner-grow spinner-grow-sm"></span>
        Loading..
    </button>

    3.12、分页
    

  • 要创建一个基本的分页可以在 
    •  
    推荐文章
    年轻有为的猴子  ·  html2pdf转换PDF时解决了文字被切断的问题_html2pdf 不完整-CSDN博客
    11 月前
    冷静的猴子  ·  UITextField 类 (UIKit) | Microsoft Learn
    1 年前
    茫然的木瓜  ·  android中非阻塞socket通信_android非阻塞打开套接字_停止的猪头的博客-CSDN博客
    1 年前
    踏实的茄子  ·  万字解析 | 感性与理性认识 LaTeX，学术论文排版的「行业标准」 - 少数派
    1 年前
    今天看啥   ·   Py中国   ·   codingpro   ·   藏经阁   ·   小百科   ·   link之家   ·   卧龙AI搜索
    删除内容请联系邮箱 2879853325@qq.com
    Code - 代码工具平台
    © 2024 ~ 沪ICP备11025650号