Bootstrap4 学习笔记（一）

最新推荐文章于 2023-03-29 10:27:26 发布
最新推荐文章于 2023-03-29 10:27:26 发布
阅读量818 收藏 4
点赞数 1
分类专栏： 前端 文章标签： bootstrap jquery javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Mr_changxin/article/details/115463906
版权

文章目录

布局系统

  • Bootstrap4.x 提供了.container 和 .container-fluid两种容器布局
  • 这两种样式是启动布局栅格系统最基本的要素
  • .contianer是固体自适应方式，.container-fluid是流体100%自适应方式
  • 容器布局可以嵌套，但一般不推荐使用（需要自己清除一些边距）
  • 自适应对应的响应式方式如下media：
// Small devices(landscape phone,578px and up)
@media (min-width:576px){...}

// Medium devices(tablets, 768px and up)
@media (min-width:768px){...}

// Large devices (desktops,992px and up)
@media (min-width:992px){...}

// Extar large devices(large desktops, 1200px and up)
@media (min-width:1200px){...}
  • 从响应式的media可以看出，Bootstrap4.x是以移动端为优先的

栅格系统

  • Bootstrap4.x 的栅格系统是一个以移动为优先的网格系统；
  • 基于12列的布局，5种响应尺寸（面向不同屏幕设备）；
  • 完全使用flexbox流式布局构建的，完全支持响应式标准；
  • 具体采用div容器的行，列和对齐内容来构建响应式布局；

样例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>栅格布局</title>
    <!-- 移动设备优先 -->
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- 引入Bootstrap CSS -->
    <link rel="stylesheet" href="css/bootstrap.css">


    <style>
        .row {
            border:dashed 1px red;
            margin:10px 0;
        }

        .col-sm, .col-sm-4, .col-sm-2, .col-sm-3, .col-sm-5,.col-sm-6 {
            border:solid 1px blue;
            background: #EFEFEF;
        }
    </style>
</head>
<body>

    <div class="container">
        <div class="row">
            <div class="col-sm-4">第一列</div>
            <div class="col-sm-4">第二列</div>
            <div class="col-sm-4">第三列</div>
        </div>

    </div>


    <div class="container-fluid">
        <div class="row">
            <div class="col-sm">第一列</div>
            <div class="col-sm">第二列</div>
            <div class="col-sm">第三列</div>
        </div>

    </div>

    <div class="container">
        <div class="row">
            <div class="col-sm-2">第一列</div>
            <div class="col-sm-5">第二列</div>
            <div class="col-sm-3">第三列</div>
        </div>

    </div>

    <div class="container">
        <div class="row">
            <div class="col-sm-4">第一列</div>
            <div class="col-sm-5">第二列</div>
            <div class="col-sm-6">第三列</div>
        </div>

    </div>



    <!-- 先引入 jQuery.js , 再引入 poppper.js 最后引入bootstrap.js -->
    <script src="js/jquery-3.4.1.slim.min.js"></script>
    <script src="js/popper.min.js"></script>
    <script src="js/bootstrap.js"></script>

</body>
</html>

在 bootstrap4 中会自动平均分配列，而在 bootstrap3 中，如果不指明所占列数，会默认占一整列，如果采用的是 container-fluid 会占据100%的屏幕宽度，在col-sm-*，可以强制规定每列所占用的栅栏列，超过12行会换行，不超过这会空出。

栅格等级

  • 栅格中有五个等级，具体如下：
超小屏幕：<576px小屏幕：>=576px中等屏幕：>=768px大屏幕：>=992px超大屏幕：>=1200px
最大容器宽度None(auto)540px720px960px1140px
类前缀.col-.col-sm-.col.md-.col-lg-.col-xl-
列数1212121212
  • 如果同时使用两个以上的级别，且比例相同，则遵循移动端优先的原则（当前设备尺寸优先级最高）
  • 可以通过两个或以上来实现不同设备不同比例的混合布局
  • 使用.w-100可以切割栅格栏数，进行分行操作
  • 如果强制设置了col-3的个数，不会填充，如果不指定，就会自动填充

样例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>栅格布局</title>
    <!-- 移动设备优先 -->
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- 引入Bootstrap CSS -->
    <link rel="stylesheet" href="css/bootstrap.css">


    <style>
        .row {
            border:dashed 1px red;
            margin:10px 0;
        }

        .ca {
            border:solid 1px blue;
            background: #EFEFEF;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="ca col-4 col-sm-2 col-md-5 col-lg-6 col-xl-12">第一列</div>
            <div class="ca col-3 col-sm-3 col-md-2 col-lg-6 col-xl-12">第二列</div>
            <div class="ca col-5 col-sm-7 col-md-5 col-lg-12 col-xl-12">第三列</div>
        </div>
    </div>
    <div class="container">
        <div class="row">
            <div class="ca col">一</div>
            <div class="ca col">二</div>
            <div class="w-100"></div>
            <div class="ca col">三</div>
            <div class="ca col">四</div>
        </div>

    </div>

    <div class="container">
        <div class="row">
            <div class="ca col-3">一</div>
            <div class="ca col-3">二</div>
            <div class="w-100"></div>
            <div class="ca col-3">三</div>
            <div class="ca col-3">四</div>
        </div>
    </div>
    <!-- 先引入 jQuery.js , 再引入 poppper.js 最后引入bootstrap.js -->
    <script src="js/jquery-3.4.1.slim.min.js"></script>
    <script src="js/popper.min.js"></script>
    <script src="js/bootstrap.js"></script>

</body>
</html>

屏幕自适应隐藏与显示

  • Bootstrap4.4 在制作自适应页面时或多或少会用到，而且非常方便，如何实现某个元素只在pc上面显示而其他屏幕不显示，或者在移动小屏幕和PC上显示，平板上隐藏。
屏幕尺寸类
隐藏在所有.d-none
仅在xs上隐藏.d-none .d-sm-block
仅在sm上隐藏.d-sm-none .d-md-block
仅在md上隐藏.d-md-none .d-lg-block
仅在lg上隐藏.d-lg-none .d-xl-block
仅在xl上隐藏.d-xl-none
所有人可见.d-block
仅在xs上可见.d-block .d-sm-none
仅在sm上可见.d-none .d-sm-block .d-md-none
仅在md上可见.d-none .d-md-block .d-lg-none
仅在lg上可见.d-none .d-lg-block .d-xl-none
仅在xl上可见.d-none .d-xl-block
  • 要隐藏元素，只需要对任何响应屏幕变化使用.d-none这个class即可，语法为：.d-{sm,md,lg,xl}-none
  • 要仅在给定的屏幕间隔上显示元素，可以将一个 .d-*-none类与一个 .d-*-*类结合使用例如：.d-none .d-md-block .d-xl-none 将为所有屏幕尺寸隐藏该元素，但在md和lg设备上会显示.
  • .d-*-none 与 .d-*-block 看做在 * 尺寸后显示或者隐藏，当 * 相同时失效，在所有尺寸都会显示

样例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>栅格布局</title>
    <!-- 移动设备优先 -->
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- 引入Bootstrap CSS -->
    <link rel="stylesheet" href="css/bootstrap.css">


    <style>
        .row {
            border: dashed 1px red;
            margin: 10px 0;
        }

        .ca {
            border: solid 1px blue;
            background: #EFEFEF;
        }
    </style>
</head>

<body>

    <div class="container">
        <div class="row">
            <div class="ca col-4 col-sm-2 col-md-5 col-lg-6 col-xl-12 ">第一列</div>
            <div class="ca col-3 col-sm-3 col-md-2 col-lg-6 col-xl-12">第二列</div>
            <div class="ca col-5 col-sm-7 col-md-5 col-lg-12 col-xl-12 d-none d-md-block">第三列</div>
        </div>
    </div>
    <br>

    <p class="d-none d-md-block">这是一段文字</p>

    <p class="d-md-none">###############</p>

    <!-- 先引入 jQuery.js , 再引入 poppper.js 最后引入bootstrap.js -->
    <script src="js/jquery-3.4.1.slim.min.js"></script>
    <script src="js/popper.min.js"></script>
    <script src="js/bootstrap.js"></script>

</body>

</html>

对齐与排序

  • 栅格对齐

行对齐，用在行中

样式(作用域行间)
居顶（默认）.align-items-start
居中.align-items-center
居底.align-items-end

列对齐，用在列中

样式(作用域行间)
居顶（默认）.align-self-start
居中.align-self-center
居底.align-self-end

不足100%填充，实现水平对齐方式，用在行中

样式(作用域行间)
居左（默认）.justify-content-start
居中.justify-content-center
居右.justify-content-end
间隔相对（分散）.justify-content-around
两端对齐（分散）.justify-content-between

样例（部分）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>栅格布局</title>
    <!-- 移动设备优先 -->
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- 引入Bootstrap CSS -->
    <link rel="stylesheet" href="css/bootstrap.css">


    <style>
        .row {
            border:dashed 1px red;
            margin:10px 0;
            height:100px;
        }

        .ca {
            border:solid 1px blue;
            background: #EFEFEF;
            height:30px;
        }
    </style>
</head>
<body>

    <div class="container">
        <div class="row">
            <div class="ca col-sm">第一列</div>
            <div class="ca col-sm">第二列</div>
            <div class="ca col-sm">第三列</div>
        </div>

    </div>

    <div class="container">
        <div class="row align-items-center">
            <div class="ca col-sm">第一列</div>
            <div class="ca col-sm">第二列</div>
            <div class="ca col-sm">第三列</div>
        </div>

    </div>

    <div class="container">
        <div class="row align-items-end">
            <div class="ca col-sm">第一列</div>
            <div class="ca col-sm">第二列</div>
            <div class="ca col-sm">第三列</div>
        </div>

    </div>

    <div class="container">
        <div class="row">
            <div class="ca col-sm">第一列</div>
            <div class="ca col-sm align-self-center">第二列</div>
            <div class="ca col-sm align-self-end">第三列</div>
        </div>

    </div>

    <div class="container">
        <div class="row justify-content-center">
            <div class="ca col-sm-3">第一列</div>
            <div class="ca col-sm-3">第二列</div>
            <div class="ca col-sm-3">第三列</div>
        </div>

    </div>

    <div class="container">
        <div class="row justify-content-end">
            <div class="ca col-sm-3">第一列</div>
            <div class="ca col-sm-3">第二列</div>
            <div class="ca col-sm-3">第三列</div>
        </div>

    </div>

    <div class="container">
        <div class="row justify-content-around">
            <div class="ca col-sm-3">第一列</div>
            <div class="ca col-sm-3">第二列</div>
            <div class="ca col-sm-3">第三列</div>
        </div>

    </div>


    <div class="container">
        <div class="row justify-content-between">
            <div class="ca col-sm-3">第一列</div>
            <div class="ca col-sm-3">第二列</div>
            <div class="ca col-sm-3">第三列</div>
        </div>

    </div>

    <br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br>

    <div class="container">
        <div class="row">
            <div class="ca col-sm-3 order-last">第一列</div>
            <div class="ca col-sm-3">第二列</div>
            <div class="ca col-sm-3 order-first">第三列</div>
        </div>

    </div>

    <div class="container">
        <div class="row">
            <div class="ca col-sm-3">第一列</div>
            <div class="ca col-sm-3">第二列</div>
            <div class="ca col-sm-3">第三列</div>
        </div>

    </div>

    <div class="container">
        <div class="row">
            <div class="ca col-sm-3 offset-1">第一列</div>
            <div class="ca col-sm-3">第二列</div>
            <div class="ca col-sm-3 offset-2">第三列</div>
        </div>

    </div>

    <div class="container">
        <div class="row">
            <div class="ca col-sm-3 ml-2">第一列</div>
            <div class="ca col-sm-3 ml-2 mr-2">第二列</div>
            <div class="ca col-sm-3">第三列</div>
        </div>

    </div>

    <div class="container">
        <div class="row">
            <div class="ca col-sm-3">第一列</div>
            <div class="ca col-sm-3">第二列</div>
            <div class="ca col-sm-3 ml-auto">第三列</div>
        </div>

    </div>

    <div class="container">
        <div class="row">
            <div class="ca col-sm-3 mr-auto">第一列</div>
            <div class="ca col-sm-3">第二列</div>
            <div class="ca col-sm-3">第三列</div>
        </div>

    </div>


    <br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br>
    <div class="container">
        <div class="row">
            <div class="ca col-sm-3 order-3">第一列</div>
            <div class="ca col-sm-3 order-2">第二列</div>
            <div class="ca col-sm-3 order-1">第三列</div>
        </div>

    </div>


    <div class="container">
        <div class="row">
            <div class="ca col-sm-3 order-3">第一列</div>
            <div class="ca col-sm-3">第二列</div>
            <div class="ca col-sm-3">第三列</div>
        </div>
    </div>
    <!-- 先引入 jQuery.js , 再引入 poppper.js 最后引入bootstrap.js -->
    <script src="js/jquery-3.4.1.slim.min.js"></script>
    <script src="js/popper.min.js"></script>
    <script src="js/bootstrap.js"></script>

</body>
</html>
  • 栅格排列：
    1. 栅格的列可以排序，使用order-N，N最大值为12
    2. 说那个order-frist 强行设置列为第一列，order-last为最后一列
    3. 使用offset-N 或offset-*-N设置列的偏移量，N表示栅格列数
    4. 使用.ml-N 或.mr-N微调列距
    5. 使用.ml-auto 和 .mr-auto 来左右对齐

内容排版

  • 标题类
    1. 使用<h1>到<h6>可以创建不同的标题文字
    2. 如果是使用其他元素标签，比如<p>或<div>，调用 .h1到6实现大标题
    3. 通过 .text-muted样式，构建大标题的附属小标题
    4. 还有一种更大型，更醒目的标题方式：.display-1到4
  • 文本类
    1. 想要指定一些锻炼中重要的内容，可以使用 .lead 来强调
    2. 比较常用的文本内联元素，来自HTML5：<mark><del><s><ins><u><small><strong><em>可以用 .mark .small 等方式来实现同样的效果
    3. 使用 .title 样式和 <add> 缩略语给文本提示
    4. 使用 Blockquote 设置来源备注或引用，使用 .blockquote-footer 设置底部备注来源
    5. 可以对内容进行居中对齐 .text-center 或者居右对齐 .text-right
  • 列表类
    1. 使用 .list-unstyled 样式，可以将列表初始化
    2. 使用 .list-inline 和 .list-item 结合实现多列并排列表
    3. 使用dl，dt和dd可以实现水平描述，使用 .text-truncate 可以省略溢出

样例：

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>栅格布局</title>
    <!-- 移动设备优先 -->
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- 引入Bootstrap CSS -->
    <link rel="stylesheet" href="css/bootstrap.css">


    <style>
        .row {
            border:dashed 1px red;
            margin:10px 0;
            height:100px;
        }

        .ca {
            border:solid 1px blue;
            background: #EFEFEF;
            height:30px;
        }
    </style>
</head>
<body>
<!--
标题类
使用<h1>~</h6>可以创建不同尺寸的标题文字

    如果是使用其它元素标签，比如<p>或<div>，调用.h1~6同样实现大标题；
        通过.text-muted样式，构建大标题的附属小标题；
        还有一种更大型，更加醒目的标题方式：.display-1~4;
 -->

<h1>eduwork</h1>
<h2>eduwork</h2>
<h3>eduwork</h3>
<h4>eduwork</h4>
<h5>eduwork</h5>
<h6>eduwork</h6>

<div class="h1">eduwork</div>
<p class="h3">eduwork</p>

<h1>eduwork<small class="text-muted">.cn</small></h1>

<h1 class="display-1">eduwork</h1>
<h1 class="display-2">eduwork</h1>
<h1 class="display-3">eduwork</h1>
<h1 class="display-4">eduwork</h1>


<!--       文本类
        想要指定一些段落中重要的内容，可以使用.lead强调；
        比较常用的文本内联元素，来自HTML5:
        <mark><del><s><ins><u><small><strong><em>
            也可以使用.mark、.small等方式实现同样元素的效果；
            使用.title样式和<abbr>缩略语给文本做提示；
            使用Blockquote设置来源备注或引用，使用.blockquote-footer设置底部备注来源；
            可以对内容进行居中对齐.text-center或居右对齐.text-right;
  -->

<p>在工作中学习， 在学习中工作</p>
<p class="lead">在工作中学习， 在学习中工作</p>

<p>在工作中<mark>学习</mark>， 在学习中工作</p>

<p>在<del>工作</del>中<s>学习</s>， 在学习中工作</p>

<p>在工作中<span class="mark">学习</span>学习， 在学习中工作</p>

<p><addr title="这是一个提示">在工作中学习， 在学习中工作</addr></p>

<blockquote class="blockquote text-right">

    <p>在工作中学习， 在学习中工作</p>

    <footer class="blockquote-footer">
          eduwork.cn
    </footer>
</blockquote>


<!--           列表类
            使用.list-unstyled样式，可以将列表初始化；
            使用.list-inline和.list-inline-item结合实现多列并排列表；
            使用dl、dt和dd可以实现水平描述, 使用.text-truncate可以省略溢出；

 -->

<div class="container">
    <dl class="row">
        <dt class="ca col-sm-3">eduwork</dt>
        <dd class="ca col-sm-9">在工作中学习，在学习中工作</dd>

        <dt class="ca col-sm-3">eduwork</dt>
        <dd class="ca col-sm-9 text-truncate">在工作中学习，在学习中工作,在工作中学习，在学习中工作,在工作中学习，在学习中工作,在工作中学习，在学习中工作</dd>


        <dt class="ca col-sm-3">eduwork</dt>
        <dd class="ca col-sm-9">在工作中学习，在学习中工作</dd>
    </dl>
</div>

<ul class="list-inline">
    <li class="list-inline-item">Java</li>
    <li class="list-inline-item">Python</li>
    <li class="list-inline-item">PHP</li>
    <li class="list-inline-item">JavaScript</li>
</ul>

<ul class="list-unstyled">
    <li>Java</li>
    <li>Python</li>
    <li>PHP</li>
    <ul class="list-unstyled">
        <li>linux</li>
        <li>Apache</li>
        <li>MySQL</li>
    </ul>
    <li>JavaScript</li>
</ul>





            <!-- 先引入 jQuery.js , 再引入 poppper.js 最后引入bootstrap.js -->
    <script src="js/jquery-3.4.1.slim.min.js"></script>
    <script src="js/popper.min.js"></script>
    <script src="js/bootstrap.js"></script>

</body>
</html>

代码与图文

  • 代码样式
    1. 使用<code>标签元素，可以将代码放入其中，但还是要手动转义特殊符号
    2. 使用<pre>标签元素，配合<code>实现代码块的效果
    3. 可以在代码区域设置 .pre-scrollable 样式，实现固定区域滚动，默认高350px
    4. 使用<var>标签元素标识变量部分
    5. 使用<kdb>标签元素标识键盘输入
    6. 使用<samp>标签标识这是一个例子
  • 图文样式
    1. 给图片添加一个 .img-fluid 样式或者设置 max-width：100%，height:auto
    2. 给小图片添加一个缩略样式 ，img-thumbnail，设置一个空心边框
    3. 通过设置 float-left 和 float-right 来设置图片的左右浮动
    4. 通过 d-block 设置为区块，再通过 margin 左右 auto 方式 .max-auto 实现居中
    5. 因为图片是内联块属性，所以，直接在父层用 .text-center 也可以实现居中
    6. 使用 HTML5 新标签<picture> 来实现响应式图片设置
    7. 使用 figure 和 figcaption 实现图文结合显示

样例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>栅格布局</title>
    <!-- 移动设备优先 -->
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- 引入Bootstrap CSS -->
    <link rel="stylesheet" href="css/bootstrap.css">


    <style>
        .row {
            border:dashed 1px red;
            margin:10px 0;
            height:100px;
        }

        .ca {
            border:solid 1px blue;
            background: #EFEFEF;
            height:30px;
        }
    </style>
</head>
<body>
<!--
使用<code>标签元素，可以将编程代码放入其中，但还是要手动转义特殊符号；
使用<pre>标签元素，配合<code>实现代码块的效果；
可以在代码区域设置.pre-scrollable样式，实现固定区域滚动，默认高350px;
使用<var>标签元素标识变量部分；
使用<kdb>标签元素标识键盘输入；
使用<samp>标签标识这是一个示例；

 -->
<pre class="pre-scrollable" style="width:500px;height:100px">
    <code>
        var <var>a</var> = <var>b</var> + <var>c</var>;

        <var>var a = a + b</var>

     function demo(a, b){
        alert('this is a test!');
      }

    </code>

     <code>
    var a = b + c;

     function demo(a, b){
        alert('this is a test!');
      }

    </code>

     <code>
    var a = b + c;

     function demo(a, b){
        alert('this is a test!');
      }

    </code>

</pre>


<kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>S</kbd>

<samp>这是一个实例</samp>

<!--
给图片添加一个.img-fluid样式或设置max-width:100%,height:auto;
给小图片加上一个缩略图的样式，img-thumbnail, 设置一个空心边框；
通过设置.float-left和float-right来设置图片的左右浮动；
通过.d-block设置为区块，再通过margin左右auto方式.mx-auto实现居中；
因为图片本身是内联块属性，所以，直接在父层用.text-center也可以实现居中；
使用HTML5新标签<picture>来实现响应式图片设置；
使用figure和figcaption实现图文组合显示；
  -->

<br>
<br>
<br>
<figure class="figure">
    <img src="images/qrcode.png" class="figure-img img-thumbnail"  alt="">
    <figcaption class="figure-caption text-center">关注我们</figcaption>
</figure>


<br>
<br>
<br>
<br>
<br>


<picture>
    <source srcset="images/qrcode.png" media="(max-width:600px)">
    <img src="images/banner.jpg" alt="">
</picture>


<img src="images/qrcode.png" class="mx-auto d-block" alt="">

<div class="text-center">
    <img src="images/qrcode.png" alt="">
</div>


<img src="images/banner.jpg" class="img-fluid" alt="">

<br>
<br>
<img src="images/qrcode.png" class="img-thumbnail" alt="">

<br><br><br><br><br>

<img src="images/qrcode.png" class="img-thumbnail float-left" alt="">
<img src="images/qrcode.png" class="img-thumbnail float-right" alt="">

<br>

            <!-- 先引入 jQuery.js , 再引入 poppper.js 最后引入bootstrap.js -->
    <script src="js/jquery-3.4.1.slim.min.js"></script>
    <script src="js/popper.min.js"></script>
    <script src="js/bootstrap.js"></script>

</body>
</html>

表格样式

  • 使用 .table 给表格设置一个类，这是表格的基本样式
  • 使用 .table-dark 样式，启用颜色反转对比效果
  • 在 <thead> 使用 .thead-light 或 .thead-dark 实现浅黑或深灰调的标头
  • 使用 .table-striped 实现数据表的条纹显示
  • 条纹显示适用于反转色调上
  • 默认情况下，边框是不完全的，使用 .table-bordered 设置表格边框
  • 表格边框也可以作用域反转色调上
  • 使用 .table-borderless 设置无边框，无边框效果也可以用于反转色调上
  • 使用 .table-hover 实现一行悬停效果，行悬停效果也可以作用于反转色调上
  • 使用 .table-sm 实现紧缩型表格，反转色调依然支持
  • 使用 .table-success 等语义化实现<tr>或<td>，<th> 等效果，反转色通用
  • 使用 .table-responsive 实现溢出时只显示底部滚动条
  • 使用 .table-responsive-sm 实现只有小于768px 溢出时出现底部滚动条

样例

<table class="table table-striped table-responsive-sm table-hover table-bordered table-sm ">
        <thead class="table-dark">
            <tr>
                <th></th>
                <th>姓名</th>
                <th>性别</th>
                <th>年龄</th>
                <th>email</th>
            </tr>
        </thead>
        <tbody>
            <tr class="table-success">
                <td>1</td>
                <td>张三</td>
                <td>女</td>
                <td>18</td>
                <td>1254@qq.com</td>
            </tr>
            <tr>
                <td>1</td>
                <td>张三</td>
                <td>女</td>
                <td>18</td>
                <td>1254@qq.com</td>
            </tr>
            <tr>
                <td>1</td>
                <td>张三</td>
                <td>女</td>
                <td>18</td>
                <td>1254@qq.com</td>
            </tr>
            <tr>
                <td>1</td>
                <td>张三</td>
                <td>女</td>
                <td>18</td>
                <td>1254@qq.com</td>
            </tr>
        </tbody>
    </table>

颜色样式

  • 颜色样式

    • 使用 .text-* 将文本设置成指定的颜色，比如 .text-success; 也可以 .text-*-50 降色
    • 使用 .text-* 也可以实现悬停和焦点的超链接样式，white和muted不支持
    • 使用 .bg-* 可以实现背景色，比如：.bg-success。也可以使用 .bg-transparent 设置透明度

  • 边框样式

    • 使用 .border 给元素增加响应的边框，默认的是（border-*；top，bottom，left，right 指定任意一边）
    • 如果颜色太淡,可以使用.border- *设置想要的场景，比如: .border-success;
    • border-*包含: primary、 secondary、 success、 danger、 warning、 info、 light、 dark、 white;
    • 使用. border-0消除四周的边框，或使用border-* -0消除某- -边的边框;
    • 使用.rounded和.rounded *实现各种方位圆角,使用.rounded -circle正圆，使用.rounded- pill椭圆
    • 使用.rounded-sm (小圆角)和.rounded-lg (大圆角)实现圆角半径大小;
      样例：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>栅格布局</title>
    <!-- 移动设备优先 -->
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- 引入Bootstrap CSS -->
    <link rel="stylesheet" href="css/bootstrap.css">


    <style>
        .row {
            border:dashed 1px red;
            margin:10px 0;
            height:100px;
        }

        .ca {
            border:solid 1px blue;
            background: #EFEFEF;
            height:30px;
        }

        .wh {
            width:100px;
            height:100px;
            background:#EFEFEF;
            float:left;
            margin:10px;
        }
    </style>
</head>
<body>

<div class="wh border-success border"> </div>
<div class="wh border-success border-top"> </div>
<div class="wh border-success border-right"> </div>
<div class="wh border-success border-bottom"> </div>
<div class="wh border-success border-left"> </div>
<div style="clear:both;"></div>
<div class="wh border-success border-0"> </div>
<div class="wh border-success border border-top-0"> </div>
<div class="wh border-success border border-right-0"> </div>
<div class="wh border-success border  border-bottom-0"> </div>
<div class="wh border-success border  border-left-0"> </div>
<div style="clear:both;"></div>
<div class="wh border-success border rounded"> </div>
<div class="wh border-success border rounded-top"> </div>
<div class="wh border-success border rounded-bottom"> </div>
<div class="wh border-success border rounded-left"> </div>
<div class="wh border-success border rounded-right"> </div>
<div style="width:200px" class="wh border-success border rounded-circle"> </div>
<div style="width:200px"  class="wh border-success border rounded-pill"> </div>
<div style="width:200px"  class="wh border-success border rounded-0"> </div>
<div class="wh border-success border rounded-sm"> </div>
<div class="wh border-success border rounded-lg"> </div>



<span>eduwork.cn</span>
<span class="text-primary">eduwork.cn</span>
<span class="text-secondary">eduwork.cn</span>
<span class="text-success">eduwork.cn</span>
<span class="text-danger">eduwork.cn</span>
<span class="text-warning bg-info bg-transparent">eduwork.cn</span>
<span class="text-info">eduwork.cn</span>
<span class="text-dark">eduwork.cn</span>
<span class="text-muted">eduwork.cn</span>
<span class="text-white bg-dark">eduwork.cn</span>
<span class="text-white-50 bg-dark">eduwork.cn</span>
<br>

<a href="#" class="text-success">eduwork.cn</a>

            <!-- 先引入 jQuery.js , 再引入 poppper.js 最后引入bootstrap.js -->
    <script src="js/jquery-3.4.1.slim.min.js"></script>
    <script src="js/popper.min.js"></script>
    <script src="js/bootstrap.js"></script>

</body>
</html>

公共样式

  • 使用.close和&times;构建一 个关闭按钮;
  • 使用.float-left、 .float- right、.float-none实现浮动效果
  • 使用.clear-fix给浮动的区域的父元素添加，实现清理浮动的功能;
  • 还可以使用.float-*-left等来实现不同屏幕的浮动效果
  • 使用.text-hide来隐藏元素标签内容,但本身还存在保持SEO优化;
  • 使用.overflow-auto和.overflow-hidden来设置 区域显示方式;
  • 使用.visible和.invisible来设置内容可见或不可见;
  • 使用.align-*来设置 内容文本的对齐方式

样例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>栅格布局</title>
    <!-- 移动设备优先 -->
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- 引入Bootstrap CSS -->
    <link rel="stylesheet" href="css/bootstrap.css">


    <style>
        .row {
            border:dashed 1px red;
            margin:10px 0;
            height:100px;
        }

        .ca {
            border:solid 1px blue;
            background: #EFEFEF;
            height:30px;
        }

        .wh {
            width:100px;
            height:100px;
            background:#EFEFEF;
            float:left;
            margin:10px;
        }
    </style>
</head>
<body>

<button class="close"><span>&times;</span></button>

<br>

<div class="wh float-left">
    left;
</div>

<div class="wh float-right">
    right;
</div>

<div style="clear:both"></div>

<div class="wh float-none">
    none
</div>

<div class="clearfix">

    <div class="wh float-left">
        left1;
    </div>

    <div class="wh float-right">
        right1;
    </div>
</div>


<div class="wh float-none">
    none1
</div>


<div class="clearfix">

    <div class="wh float-md-left overflow-auto">
        left1;<br>
        left1;<br>
        left1;<br>
        left1;<br>
        left1;<br>
        left1;<br>
        left1;<br>
        left1;<br>
        left1;<br>
        left1;<br>
        left1;<br>
        left1;<br>
        left1;<br>
        left1;<br>
    </div>

    <div class="wh float-md-right overflow-hidden">
        right1;<br>
        right1;<br>
        right1;<br>
        right1;<br>
        right1;<br>
        right1;<br>
        right1;<br>
        right1;<br>
        right1;<br>
        right1;<br>
        right1;<br>
        right1;<br>
        right1;<br>
        right1;<br>
    </div>
</div>


<div class="wh float-none">
    none1
</div>


<div class="text-hide">eduwork.cn</div>

<div>eduwork.cn</div>
<div class="invisible">eduwork.cn</div>
hello;

<style>
    span {
        background: #EFEFEF;
        height:60px;
        display: inline-block;
    }
</style>
<span class="align-baseline">基准线</span>
<span class="align-text-top">文本顶部</span>
<span class="align-top">顶部</span>
<span class="align-middle">垂直居中</span>
<span class="align-bottom">底部</span>
<span class="align-text-bottom">文本底部</span>

<table class="table table-bordered" style="height:200px;">
    <tr>
        <td class="align-baseline">基准线</td>
        <td class="align-text-top">文本顶部</td>
        <td class="align-top">顶部</td>
        <td class="align-middle">垂直居中</td>
        <td class="align-bottom">底部</td>
        <td class="align-text-bottom">文本底部</td>
    </tr>
</table>

            <!-- 先引入 jQuery.js , 再引入 poppper.js 最后引入bootstrap.js -->
    <script src="js/jquery-3.4.1.slim.min.js"></script>
    <script src="js/popper.min.js"></script>
    <script src="js/bootstrap.js"></script>

</body>
</html>
  • 使用.p-*来设置内边距(padding)，范围在0-5之间和auto;
  • 使用.m-*来设置外边距(margin),范围在0 5之间和auto;
  • 使用.pt-* 或mt-*设置边缘的距离，这里的可以是top, 其它还有b(bottom)、l(left)、 r(right)等;
  • 使用.px-*或mx-*设置左右边缘距离，这里的x表示(left,right);
  • 使用.py-*或my-*设置上下边缘距离,这里的y表示(top,bottom);
  • 使用.pt-*-5, *可以是md、lg等响应式的方式来设置边缘;
  • 使用.W-*设置元素的长度， 包括25%、50%、 75%、 100%和auto;
  • 使用.h-*设置元素的高度， 包括25%、50%、 75%、 100%和auto;
  • 使用.mw-*和.mh-*设置max-width和max-height;
  • 使用.W-*和.vh-*设置相对于窗口的大小;
  • e使用.shadow-*实现元素的阴影效果;
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>栅格布局</title>
    <!-- 移动设备优先 -->
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- 引入Bootstrap CSS -->
    <link rel="stylesheet" href="css/bootstrap.css">


    <style>
        .row {
            border:dashed 1px red;
            margin:10px 0;
            height:100px;
        }

        .ca {
            border:solid 1px blue;
            background: #EFEFEF;
            height:30px;
        }

        .wh {
            width:100px;
            height:100px;
            background:#EFEFEF;


        }
    </style>
</head>
<!--
<div class="wh float-left m-1 p-1">
    eduwork
</div>

<div class="wh float-left m-2 p-2">
    eduwork
</div>
<div class="wh float-left m-3 p-3">
    eduwork
</div>
<div class="wh float-left m-4 p-4">
    eduwork
</div>
<div class="wh float-left m-5 p-5">
    eduwork
</div>
<div class="wh float-left m-6 p-6">
    eduwork
</div>
<div class="wh float-left mt-1 mr-1 p-1">
    eduwork
</div>

<div class="wh float-left mt-2 ml-5 pt-2">
    eduwork
</div>
<div class="wh float-left mt-3 p-3">
    eduwork
</div>
<div class="wh float-left mt-4 p-4">
    eduwork
</div>
<div class="wh float-left mt-5 p-5">
    eduwork
</div>
<div class="wh float-left mt-6 p-6">
    eduwork
</div>



<div class="wh float-left mx-5">
    eduwork
</div>

<div class="wh float-left my-5">
    eduwork
</div>
<div class="wh float-left px-3">
    eduwork
</div>
<div class="wh float-left py-3">
    eduwork
</div>
<div class="wh float-left mt-5 p-5">
    eduwork
</div>
<div class="wh float-left mt-6 p-6">
    eduwork
</div>

-->

<div class="border m-5 w-50 shadow-none">eduwork</div>

<div class="border m-5 w-50 shadow">eduwork</div>

<div class="border m-5 w-50 shadow-sm">eduwork</div>

<div class="border m-5 w-50 shadow-lg">eduwork</div>

<div class="bg-dark w-100">
    eduwork.cn
</div>

<div class="bg-dark w-25">
    eduwork.cn
</div>

<div class="bg-dark w-50">
    eduwork.cn
</div>

<div class="bg-dark w-75">
    eduwork.cn
</div>
<div class="bg-dark w-auto">
    eduwork.cn
</div>
<div class="border border-success" style="height:200px;">
    <div class="d-inline-block bg-info h-25">25%</div>
    <div class="d-inline-block bg-info h-50">50%</div>
    <div class="d-inline-block bg-info h-75">75%</div>
    <div class="d-inline-block bg-info h-100">100%</div>
    <div class="d-inline-block bg-info h-auto">auto%</div>

</div>
<div class="border border-success" style="height:200px;">
    <div class="mw-100 bg-info mh-100">eduwork</div>
</div>

<div class="border border-success" style="height:200px;">
    <div class="vw-100 bg-info vh-100">eduwork</div>
</div>


<div class="border border-success" style="height:200px;">
    <div class="m-5 d-inline-block bg-info h-25">25%</div>
    <div class="m-5 d-inline-block bg-info h-50">50%</div>
    <div class="m-5 d-inline-block bg-info h-75">75%</div>
    <div class="m-5 d-inline-block bg-info h-100">100%</div>
    <div class="m-5  d-inline-block bg-info h-auto">auto%</div>

</div>



            <!-- 先引入 jQuery.js , 再引入 poppper.js 最后引入bootstrap.js -->
    <script src="js/jquery-3.4.1.slim.min.js"></script>
    <script src="js/popper.min.js"></script>
    <script src="js/bootstrap.js"></script>

</body>
</html>
  • 使用 .d-*来设置元素的display模式，*可以是none、inline、 inline- block、block、 table、 table-row等;
  • 也可以通过 .d-md-*中的md设置响应式的媒体查询效果;
  • 使用.embed- responsive实现嵌入响应式，比如 <iframe>、<embed>等
  • 再使用.embed-responsive-16by9实现响应式比例，还可以21:9, 4:3, 1:1;
  • 使用.text-*设置文本的对齐方式，有left、 center、right
  • 也可以设置 .text md-*实现响应式的媒体查询效果;
  • 使用 .text-warp和.text- nowarp实现文本溢出时是否换行;
  • 使用.text- break对于很长的字符串， 且中间没有空格实现换行;
  • 使用.text-lowercase设置小写，.text-uppercase设置大写，以及.text-capitalize设置首字母大写;
  • 使用.font-weight-bold加粗， .font-weight-normal正常、.font-weight-light纤细、.font-italic倾斜;
  • 使用.text-monospace设置等宽字体;
  • 使用.text-reset实现字体颜色的重置;
  • 使用.text -decoration none删除超链接下划线;
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>栅格布局</title>
    <!-- 移动设备优先 -->
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- 引入Bootstrap CSS -->
    <link rel="stylesheet" href="css/bootstrap.css">


    <style>
        .row {
            border:dashed 1px red;
            margin:10px 0;
            height:100px;
        }

        .ca {
            border:solid 1px blue;
            background: #EFEFEF;
            height:30px;
        }

        .wh {
            width:100px;
            height:100px;
            background:#EFEFEF;


        }
    </style>
</head>
<div class="embed-responsive embed-responsive-item">
    <iframe src="https://www.baidu.com" frameborder="0"></iframe>
</div>

<div class="border border-success text-nowrap " style="width:100px;">eduwork.cn eduwork.cn</div>
<div class="border border-success text-break" style="width:400px;">eduwork.cneduwork.cneduwork.cneduwork.cneduwork.cneduwork.cneduwork.cneduwork.cneduwork.cneduwork.cneduwork.cneduwork.cneduwork.cneduwork.cneduwork.cneduwork.cneduwork.cneduwork.cn</div>
<div class="text-lowercase">edu Work cn</div>
<div class="text-uppercase">edu work cn</div>
<div class="text-capitalize">edu work cn</div>

<div class="font-weight-bold">eduwork.cn</div>
<div class="font-weight-normal">eduwork.cn</div>
<div class="font-weight-light">eduwork.cn</div>
<div class="font-italic font-weight-bold">eduwork.cn</div>
<div class="text-monospace">eduwork.cn</div>
<div class="text-success">
    eduwok<a href="#" class="text-reset">.cn</a>
</div>

<a href="#" class="text-decoration-none">www.eduwork.cn</a>

            <!-- 先引入 jQuery.js , 再引入 poppper.js 最后引入bootstrap.js -->
    <script src="js/jquery-3.4.1.slim.min.js"></script>
    <script src="js/popper.min.js"></script>
    <script src="js/bootstrap.js"></script>

</body>
</html>
_CX_
关注
  • 1
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
Bootstrap 4 安装使用教程
lsx202406的博客
06-27 588
Bootstrap 4 是一个流行的开源前端框架，用于快速开发响应式和移动设备优先的网站。它由 Twitter 开发，并得到了全球开发者的广泛使用。本教程将指导您如何安装和使用 Bootstrap 4，以便您能够利用其强大的功能来构建现代网页。
Bootstrap4学习
Suxiaomowang的博客
08-25 848
btn 按钮 btn 按钮没有边框和背景 btn-xxxx 设置按钮背景 btn-outline-primary 设置按钮边框颜色鼠标进入后修改背景颜色 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"&gt.
【笔记】Bootstrap简单运用
不二D荧林仕的博客
10-01 384
Bootstrap框架的简单运用，仅作为大致了解，不涉及项目实际操作
Bootstrap常用布局样式
热门推荐
橘猫吃不胖的博客
01-16 1万+
Bootstrap常用布局样式1 内容布局1.1 标题类1.2 文本类1.3 列表类2 代码和图文布局2.1 代码样式2.2 图文样式3 表格布局4 辅助样式4.1 添加或移除边框4.2 设置边框颜色 1 内容布局 1.1 标题类 在HTML中，可以使用不同的标签来定义不同的文本样式，例如文字的大小、粗体、删除线等。Bootstrap通过覆写元素的默认样式，实现对页面布局的优化，让页面在用户面前呈现得更加美观。下面对标题类相关样式进行讲解。 在浏览网页时最先关注的就是文章的标题，Bootstrap和普通的H
bootstrap4 知识点整理
dpy521的博客
12-10 3764
定义按钮颜色
Bootstrap页面内容——初始化
xun__xing的博客
07-27 1800
页面内容一、初始化与CSS重置（Reboot）1.路线方针2.页面默认值3.本地字体属性4.标题和段落5.列表6.pre预先格式化文本7.表格8.Forms表单9.addr内联元素10.概要11.HTML5 的[hidden] 属性 一、初始化与CSS重置（Reboot） 1.路线方针 系统重置建立新的规范化，只允许元素选择器向各个HTML元素提供了自有的风格，额外的样式只通过明确的.class类来规范。例如，我们重置了一系列<table>样式作为简单的基准，然后提供了.table、 .tabl
【02】Bootstrap — 布局容器
有心博客
09-03 914
Bootstrap需要为页面内容和栅格系统包裹一个容器。我们提供了两个类，分别是.container和.container-fluid。.container类用于固定宽度并支持响应式布局的容器。 .container-fluid类用于100%宽度，占据窗口全部的容器。 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta chars
bootstrap4学习
Suxiaomowang的博客
08-26 676
Bootstrap4 导航栏 用.navbar类来创建一个标准的导航栏 .navbar-expand-xl|lg|md|sm类来创建响应式的导航栏 (大屏幕水平铺开，小屏幕垂直堆叠)。 用ul元素并添加class="navbar-nav"类。 然后在li元素上添加.nav-item类，a元素上使用.nav-link类: 删除.navbar-expand-xl|lg|md|sm类来创建垂直导航栏 bg-primary,.bg-success,.bg-info,...
bootstrap4学习笔记（一）
02-08
bootstrap4学习笔记，中文的，适用于初学者学习，知识点配合案例的。
Bootstrap3.0学习笔记之表格相关
09-22
Bootstrap3.0是世界上最受欢迎的前端开发框架之一，它提供了丰富的预定义样式，使得构建美观且响应式的网页变得更加容易。本篇文章将详细讲解Bootstrap3.0中的表格组件，包括其不同类型的表格及其应用场景。 首先，...
bootstrap4随书笔记
11-10
本笔记是作者经过一个月深入学习Bootstrap4后的成果，包括亲手敲打的代码、详细的索引和学习心得，还有相关的参考资料链接。 Bootstrap4的核心概念是网格系统，它基于12列的响应式布局，可以根据屏幕尺寸自动调整...
Bootstrap学习笔记
03-16
Bootstrap 笔记 学习 教程 学习总结 有的class类等是官网上还没介绍的
bootstrap学习笔记之初识bootstrap
10-22
Bootstrap是前端开发领域的一款热门框架，它以HTML、CSS和JavaScript为基础，为开发者提供了一整套构建现代化网页和应用程序的工具。Bootstrap的核心理念是简洁、直观且强大，它旨在加速和简化网页设计与开发过程。 ...
【1+X Web】1+X高级试题（4）
`雾博客
10-14 1275
【代码】【1+X Web】1+X高级试题（4）
html5响应式媒体查询,css基于媒体查询和 rem 的响应式布局实践
weixin_39934302的博客
06-16 264
我们开发一个网站的时候希望在手机端、iPad 端、PC 端都有良好的体验，CSS 给我们提供了一个强大的条件判断语法，可以根据设备的宽度来设置不同的样式，从而实现不同的设备应用不同的布局。下图展示了利用 @media 实现的同一页面手机端 2 列、iPad 端 3 列、PC 端 4 列的布局。下面我们来分析下如何实现上述 Demo。.grid {display: flex;flex-wrap: w...
学习笔记
xiaoying1223的博客
02-05 183
JS 依赖jQuery，Popper.js,bootstrap自身插件 顺序要一致 注意：bootstrap.bundle.js包含了Popper，不包含jQuery 模板 <!doctype html> <!-- Bootstrap CSS --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap
bootstrap table 初始化以及搜索刷新问题
记录技术的小本本
03-31 1969
bootstrap table 初始化以及搜索刷新问题 bootstrap 初始化数据和根据条件查询以及后端分页排序 1、bootstrap table 初始化： $("#bootstrap-table").bootstrapTable({ url: prefix + "/url", method: 'get', queryParams: function(params) { return {
BootStrap初始化表格
Tz.的博客
03-29 2089
1、HTML页面需要有一个表格标签，引入js，css： <table id="data" class="table table-bordered table-hover"></table> <link rel="stylesheet" href="../../../static/lib/css/bootstrap.min.css"> <link rel=...
BootStrap4：组件
分享日常工作技术
03-29 1731
Bootstrap包括多个预定义的按钮样式，每个样式都有自己的语义目的，另外还有一些额外的功能可以用于更多的控制。
bootstrap学习笔记
最新发布
05-28
Bootstrap 是一个流行的前端框架，它可以帮助开发者快速构建各种响应式网站和应用程序。以下是一些 Bootstrap 学习笔记： 1. 开始使用 Bootstrap 要开始使用 Bootstrap，你需要在你的 HTML 文件中引入 Bootstrap 的 CSS 和 JavaScript 文件。你可以在 Bootstrap 的官方网站上下载这些文件，或者通过 CDN 引入。 2. 使用 Bootstrap 的网格系统 Bootstrap 的网格系统是它最重要的功能之一。它可以帮助你创建响应式布局，使你的网站在不同的设备上都能够良好地显示。使用 Bootstrap 的网格系统，你可以将页面分为不同的列和行，并在这些列和行中放置内容。 3. Bootstrap 的组件 Bootstrap 提供了许多组件，包括导航栏、表单、按钮、模态框、轮播图等等。这些组件可以帮助你快速构建功能丰富的页面。 4. 自定义 Bootstrap 样式 如果你想要使用自定义的样式，可以使用 Bootstrap 的 SASS 或 LESS 变量。这些变量可以帮助你更改 Bootstrap 的颜色、字体、间距等等。 5. 使用 Bootstrap 的插件 Bootstrap 还提供了许多插件，包括日期选择器、滚动条、下拉菜单等等。这些插件可以让你的网站更加交互性。 以上是关于 Bootstrap 的一些学习笔记，希望能对你有所帮助。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

_CX_

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值