关键词搜索

源码搜索 ×
×

BootStrap笔记-按钮相关

发布2022-01-17浏览1333次

详情内容

程序运行截图如下：

源码如下：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>CN_TEST1</title>
  6.     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  7.  
  8. <!--    bootstrap css核心文件-->
  9.     <link rel="stylesheet" href="bootstrap-4.4.1-dist/css/bootstrap.min.css">
  10. <!--    bootstrap使用到了jquery，需要提前引用-->
  11.     <script src="js/jquery-3.5.1.min.js"></script>
  12. <!--    弹窗、提示、下拉菜单-->
  13.     <script src="bootstrap-4.4.1-dist/js/bootstrap.bundle.js"></script>
  14. <!--    bootstrap核心文件-->
  15.     <script src="bootstrap-4.4.1-dist/js/bootstrap.min.js"></script>
  16.  
  17. </head>
  18. <body>
  19.     <div class="container-fluid">
  20.         <button type="button" class="btn">btn按钮</button>
  21.         <button type="button" class="btn btn-primary">btn-primary按钮</button>
  22.         <button type="button" class="btn btn-secondary">btn-secondary按钮</button>
  23.         <button type="button" class="btn btn-success">btn-success按钮</button>
  24.         <button type="button" class="btn btn-info">btn-info按钮</button>
  25.         <button type="button" class="btn btn-warning">btn-warning按钮</button>
  26.         <button type="button" class="btn btn-dark">btn-dark按钮</button>
  27.         <button type="button" class="btn btn-light">btn-light按钮</button>
  28.         <button type="button" class="btn btn-link">btn-link按钮</button>
  29.         <br/>
  30.         <button type="button" class="btn">btn按钮</button>
  31.         <button type="button" class="btn btn-outline-primary">btn-primary按钮</button>
  32.         <button type="button" class="btn btn-outline-secondary">btn-secondary按钮</button>
  33.         <button type="button" class="btn btn-outline-success">btn-success按钮</button>
  34.         <button type="button" class="btn btn-outline-info">btn-info按钮</button>
  35.         <button type="button" class="btn btn-outline-warning">btn-warning按钮</button>
  36.         <button type="button" class="btn btn-outline-dark">btn-dark按钮</button>
  37.         <button type="button" class="btn btn-outline-light">btn-light按钮</button>
  38.         <button type="button" class="btn btn-outline-link">btn-link按钮</button>
  39.         <br/>
  40.         <button type="button" class="btn">btn按钮</button>
  41.         <button type="button" class="btn btn-outline-primary btn-lg">btn-primary按钮</button>
  42.         <button type="button" class="btn btn-outline-secondary btn-lg">btn-secondary按钮</button>
  43.         <button type="button" class="btn btn-outline-success btn-lg">btn-success按钮</button>
  44.         <button type="button" class="btn btn-outline-info btn-lg">btn-info按钮</button>
  45.         <button type="button" class="btn btn-outline-warning btn-lg">btn-warning按钮</button>
  46.         <button type="button" class="btn btn-outline-dark btn-lg">btn-dark按钮</button>
  47.         <button type="button" class="btn btn-outline-light btn-lg">btn-light按钮</button>
  48.         <button type="button" class="btn btn-outline-link btn-lg">btn-link按钮</button>
  49.         <br/>
  50.         <button type="button" class="btn">btn按钮</button>
  51.         <button type="button" class="btn btn-outline-primary btn-lg btn-block">btn-primary按钮</button>
  52.         <button type="button" class="btn btn-outline-secondary btn-lg btn-block">btn-secondary按钮</button>
  53.         <button type="button" class="btn btn-outline-success btn-lg btn-block">btn-success按钮</button>
  54.         <button type="button" class="btn btn-outline-info btn-lg btn-block">btn-info按钮</button>
  55.         <button type="button" class="btn btn-outline-warning btn-lg btn-block">btn-warning按钮</button>
  56.         <button type="button" class="btn btn-outline-dark btn-lg btn-block">btn-dark按钮</button>
  57.         <button type="button" class="btn btn-outline-light btn-lg btn-block">btn-light按钮</button>
  58.         <button type="button" class="btn btn-outline-link btn-lg btn-block">btn-link按钮</button>
  59.         <br/>
  60.         <button type="button" class="btn btn-outline-primary btn-lg btn-block active">btn-primary按钮</button>
  61.         <button type="button" class="btn btn-outline-secondary btn-lg btn-block" disabled>btn-secondary按钮</button>
  62.         <br/>
  63.         <button class="btn btn-primary">
  64.             <span class="spinner-border spinner-border-sm"></span>
  65.         </button>
  66.         <button class="btn btn-primary">
  67.             <span class="spinner-border spinner-border-sm"></span>
  68.             Loading...
  69.         </button>
  70.         <button class="btn btn-primary">
  71.             <span class="spinner-grow spinner-grow-sm"></span>
  72.             Loading...
  73.         </button>
  74.     </div>
  75. </body>
  76. </html>

解释：

①span中的一个类是spinner-border和sprnner-graw分别代表的效果：

②使用BootStrap的button属性时，要用btn类，后面再接各种不同的类样式。

相关技术文章

最新源码

下载排行榜
点击QQ咨询
开通会员
返回顶部
×
微信扫码支付 元
微信扫码支付
确定支付下载
请使用微信描二维码支付
×

提示信息

×

选择支付方式

  • 微信支付
  • 支付宝付款
确定支付下载