Bootstrap 按钮

最新推荐文章于 2024-03-29 02:52:44 发布
最新推荐文章于 2024-03-29 02:52:44 发布
阅读量1k 收藏 3
点赞数
分类专栏： bootstrap
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/biggbang/article/details/114586781
版权

Bootstrap 按钮

本章将通过实例讲解如何使用 Bootstrap 按钮。任何带有 class .btn 的元素都会继承圆角灰色按钮的默认外观。但是 Bootstrap 提供了一些选项来定义按钮的样式，具体如下表所示：

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

类描述
.btn为按钮添加基本样式
.btn-default默认/标准按钮
.btn-primary原始按钮样式（未被操作）
.btn-success表示成功的动作
.btn-info该样式可用于要弹出信息的按钮
.btn-warning表示需要谨慎操作的按钮
.btn-danger表示一个危险动作的按钮操作
.btn-link让按钮看起来像个链接 (仍然保留按钮行为)
.btn-lg制作一个大按钮
.btn-sm制作一个小按钮
.btn-xs制作一个超小按钮
.btn-block块级按钮(拉伸至父元素100%的宽度)
.active按钮被点击
.disabled禁用按钮

下面的实例演示了上面所有的按钮 class：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"> 
	<title>Bootstrap 实例 - 按钮选项</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">  
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<!-- 标准的按钮 -->
<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>

</body>
</html>

结果如下所示：

在这里插入图片描述

按钮大小

下表列出了获得各种大小按钮的 class：

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

下面的实例演示了上面所有的按钮 class：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"> 
	<title>Bootstrap 实例 - 按钮大小</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">  
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<p>
   <button type="button" class="btn btn-primary btn-lg">大的原始按钮</button>
   <button type="button" class="btn btn-default btn-lg">大的按钮</button>
</p>
<p>
   <button type="button" class="btn btn-primary"> 默认大小的原始按钮</button>
   <button type="button" class="btn btn-default"> 默认大小的按钮</button>
</p>
<p>
   <button type="button" class="btn btn-primary btn-sm">小的原始按钮</button>
   <button type="button" class="btn btn-default btn-sm">小的按钮</button>
</p>
<p>
   <button type="button" class="btn btn-primary btn-xs">特别小的原始按钮</button>
   <button type="button" class="btn btn-default btn-xs">特别小的按钮</button>
</p>
<p>
   <button type="button" class="btn btn-primary btn-lg btn-block">块级的原始按钮</button>
   <button type="button" class="btn btn-default btn-lg btn-block">块级的按钮</button>
</p>

</body>
</html>

结果如下所示：

在这里插入图片描述

按钮状态

Bootstrap 提供了激活、禁用等按钮状态的 class，下面将进行详细讲解。

激活状态

按钮在激活时将呈现为被按压的外观（深色的背景、深色的边框、阴影）。

下表列出了让按钮元素和锚元素呈激活状态的 class：

元素Class
按钮元素添加 .active class 来显示它是激活的。
锚元素添加 .active class 到 按钮来显示它是激活的。

下面的实例演示了这点：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"> 
	<title>Bootstrap 实例 - 按钮激活状态</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">  
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<p>
	<button type="button" class="btn btn-default btn-lg ">默认按钮</button>
   	<button type="button" class="btn btn-default btn-lg active">激活按钮</button>
</p>
<p>
   	<button type="button" class="btn btn-primary btn-lg ">原始按钮</button>
   	<button type="button" class="btn btn-primary btn-lg active">激活的原始按钮</button>
</p>

</body>
</html>

结果如下所示：

在这里插入图片描述

禁用状态

当您禁用一个按钮时，它的颜色会变淡 50%，并失去渐变。

下表列出了让按钮元素和锚元素呈禁用状态的 class：

元素Class
按钮元素添加 disabled 属性 到 按钮。
锚元素添加 disabled class 到 按钮。

下面的实例演示了这点：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"> 
	<title>Bootstrap 实例 - 按钮禁用状态</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">  
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<p>
   <button type="button" class="btn btn-default btn-lg">默认按钮</button>
   <button type="button" class="btn btn-default btn-lg" disabled="disabled">禁用按钮</button>
</p>
<p>
   <button type="button" class="btn btn-primary btn-lg ">原始按钮</button>
   <button type="button" class="btn btn-primary btn-lg" disabled="disabled">禁用的原始按钮</button>
</p>
<p>
   <a href="#" class="btn btn-default btn-lg" role="button">链接</a>
   <a href="#" class="btn btn-default btn-lg disabled" role="button">禁用链接</a>
</p>
<p>
   <a href="#" class="btn btn-primary btn-lg" role="button">原始链接</a>
   <a href="#" class="btn btn-primary btn-lg disabled" role="button">禁用的原始链接</a>
</p>

</body>
</html>

结果如下所示：

在这里插入图片描述

按钮标签

您可以在 、 或 元素上使用按钮 class。但是建议您在 元素上使用按钮 class，避免跨浏览器的不一致性问题。

下面的实例演示了这点：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"> 
	<title>Bootstrap 实例 - 按钮标签</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">  
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<a class="btn btn-default" href="#" role="button">链接</a>
<button class="btn btn-default" type="submit">按钮</button>
<input class="btn btn-default" type="button" value="输入">
<input class="btn btn-default" type="submit" value="提交">

</body>
</html>

结果如下所示：

在这里插入图片描述

按钮组

在 div 中直接使用 .btn-group 可以创建按钮组：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"> 
	<title>Bootstrap 实例 - 按钮（Button）插件单选按钮</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>按钮组</h2>
  <p>.btn-group 类用于创建按钮组：</p>
  <div class="btn-group">
    <button type="button" class="btn btn-primary">Apple</button>
    <button type="button" class="btn btn-primary">Samsung</button>
    <button type="button" class="btn btn-primary">Sony</button>
  </div>
</div>

</body>
</html>

使用 .btn-group-lg|sm|xs 来控制按钮组的大小：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"> 
	<title>Bootstrap 实例 - 按钮组</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Button 按钮组 - 设置按钮大小</h2>
  <p>通过 .btn-group-* 类来控制按钮组中使用按钮的大小。</p>
  <h3>大按钮:</h3>
  <div class="btn-group btn-group-lg">
    <button type="button" class="btn btn-primary">Apple</button>
    <button type="button" class="btn btn-primary">Samsung</button>
    <button type="button" class="btn btn-primary">Sony</button>
  </div>
  <h3>默认大小按钮:</h3>
  <div class="btn-group">
    <button type="button" class="btn btn-primary">Apple</button>
    <button type="button" class="btn btn-primary">Samsung</button>
    <button type="button" class="btn btn-primary">Sony</button>
  </div>
  <h3>小按钮:</h3>
  <div class="btn-group btn-group-sm">
    <button type="button" class="btn btn-primary">Apple</button>
    <button type="button" class="btn btn-primary">Samsung</button>
    <button type="button" class="btn btn-primary">Sony</button>
  </div>
  <h3>超级小按钮:</h3>
  <div class="btn-group btn-group-xs">
    <button type="button" class="btn btn-primary">Apple</button>
    <button type="button" class="btn btn-primary">Samsung</button>
    <button type="button" class="btn btn-primary">Sony</button>
  </div>
</div>

</body>
</html>

如果要设置垂直方向的按钮可以通过 .btn-group-vertical 类来设置：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"> 
	<title>Bootstrap 实例 - 按钮</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>垂直按钮组</h2>
  <p>如果要设置垂直方向的按钮可以通过 .btn-group-vertical 类来设置：</p>
  <div class="btn-group-vertical">
    <button type="button" class="btn btn-primary">Apple</button>
    <button type="button" class="btn btn-primary">Samsung</button>
    <button type="button" class="btn btn-primary">Sony</button>
  </div>
</div>

</body>
</html>

自适应大小的按钮组

可以通过 .btn-group-justified 类来设置自适应大小的按钮组。

以下实例使用 a 标签来展示：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"> 
	<title>Bootstrap 实例 - 按钮</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>自适应按钮组</h2>
  <p>以通过 .btn-group-justified 类来设置自适应大小的按钮组。</p>
  <div class="btn-group btn-group-justified">
    <a href="#" class="btn btn-primary">Apple</a>
    <a href="#" class="btn btn-primary">Samsung</a>
    <a href="#" class="btn btn-primary">Sony</a>
  </div>
</div>

</body>
</html>

注意: 如果是 <button> 元素, 你需要在外层使用 .btn-group 类来包裹:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"> 
	<title>Bootstrap 实例 - 按钮</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>自适应按钮组</h2>
  <div class="btn-group btn-group-justified">
    <div class="btn-group">
      <button type="button" class="btn btn-primary">Apple</button>
    </div>
    <div class="btn-group">
      <button type="button" class="btn btn-primary">Samsung</button>
    </div>
    <div class="btn-group">
      <button type="button" class="btn btn-primary">Sony</button>
    </div>
  </div>
</div>

</body>
</html>

内嵌下拉菜单的按钮组

按钮组内嵌的按钮可以设置下拉菜单，如下实例：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"> 
	<title>Bootstrap 实例 - 按钮</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>内嵌按钮组</h2>
  <p>内嵌按钮组创建下拉菜单：</p>
  <div class="btn-group">
    <button type="button" class="btn btn-primary">Apple</button>
    <button type="button" class="btn btn-primary">Samsung</button>
    <div class="btn-group">
      <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
      Sony <span class="caret"></span></button>
      <ul class="dropdown-menu" role="menu">
        <li><a href="#">Tablet</a></li>
        <li><a href="#">Smartphone</a></li>
      </ul>
    </div>
  </div>
</div>

</body>
</html>

分割按钮

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"> 
	<title>Bootstrap 实例 - 按钮</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>分隔按钮</h2>
  <div class="btn-group">
    <button type="button" class="btn btn-primary">Sony</button>
    <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
      <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" role="menu">
      <li><a href="#">Tablet</a></li>
      <li><a href="#">Smartphone</a></li>
    </ul>
  </div>
</div>

</body>
</html>

转载请注明：虚幻私塾 » Bootstrap 按钮

虚坏叔叔
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
bootstrap 按钮 btn
chuncui2576的博客
02-09 689
一般制作按钮除了使用<button>标签元素之外，还可以使用<input type="submit">和<a>标签等。同样，在Bootstrap框架中制作按钮时，除了刚才所说的这些标签元素之外，还可以使用在其他的标签元素上，唯一需要注意的是，要在制作按钮的标...
Bootstrp--btn
weixin_44583881的博客
06-18 736
当我们浏览网页的时候，总是会看到许多各式各样，装饰精美的按钮，可以用于选择，跳转页面，按钮的作用，一般都是作为传递信息的桥梁。在Bootstrp中，还包括了多个预定义的按钮，每个样式的按钮都有自己的语义目的，另外还有一些额外的功能可以用于更多的控制。 例如，原按钮是这样的： 没有修饰的按钮看起来很单调，是因为只把他放进按钮标签里面。所谓的按钮标签，就是btn可以在<button...
Bootstrap 按钮的使用
最新发布
2401_83704159的博客
03-29 973
今天的文章可谓是积蓄了我这几年来的应聘和面试经历总结出来的经验，干货满满呀！如果你能够一直坚持看到这儿，那么首先我还是十分佩服你的毅力的。所以看完之后，还是多多行动起来吧！可以非常负责地说，如果你能够坚持把我上面列举的内容都一个不拉地看完并且全部消化为自己的知识的话，那么你就至少已经达到了中级开发工程师以上的水平，进入大厂技术这块是基本没有什么问题的了。你觉得这些内容对你有帮助，可以扫码获取！！（资料价值较高，非无偿）**今天的文章可谓是积蓄了我这几年来的应聘和面试经历总结出来的经验，干货满满呀！
BootStrap 按钮样式
m0_63649608的博客
11-09 171
BootStrap 按钮样式
Bootstrap按钮
m0_51281306的博客
03-27 730
<div class="container"> <!-- 可以使用a、button、input作为按钮，如果是a，那么必须加btn基础类 --> <a class="btn" href="#" role="button">超链接</a> <button class="btn btn-default" type="submit">Button</button> <inp...
详解Bootstrap按钮
09-02
本文给大家介绍bootstrap按钮相关知识，包括按钮大小、按钮状态、按钮标签相关样式定义，对bootstrap按钮相关知识感兴趣的朋友一起学习吧
Bootstrap 按钮组
12-13
Bootstrap 按钮组 按钮组允许多个按钮被堆叠在同一行上。当你想要把按钮对齐在一起时，这就显得非常有用。您可以通过 结果如下所示： 按钮工具栏 下面的实例演示了上面表格中讨论到的 class .btn-toolbar 的使用：...
bootstrap按钮颜色.txt
03-12
bootstrap样式按钮颜色(剩下的都是凑字数真的没什么可介绍的
Bootstrap按钮组简单实现代码
08-31
主要为大家详细介绍了Bootstrap按钮组的简单实现代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
Bootstrap 下拉菜单（Dropdowns）
虚幻社区
03-10 1427
Bootstrap 下拉菜单（Dropdowns） 本章将重点介绍 Bootstrap 下拉菜单。下拉菜单是可切换的，是以列表格式显示链接的上下文菜单。这可以通过与 下拉菜单（Dropdown） JavaScript 插件 的互动来实现。 如需使用下拉菜单，只需要在 class .dropdown 内加上下拉菜单即可。下面的实例演示了基本的下拉菜单： <!DOCTYPE html> <html> <head> <meta charset="utf-8">
Bootstrap 的网格系统（Grid System）
虚幻社区
03-08 746
本章节我们将讲解 Bootstrap 的网格系统（Grid System）。 Bootstrap 提供了一套响应式、移动设备优先的流式网格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。 什么是网格（Grid）？ 摘自维基百科： [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-nawJa3Sn-1615175825960)(未命名.assets/quote.png)]在平面设计中，网格是一种由一系列用于组织内容的相交的直线（垂直的、水平的）组成的
Bootstrap 字体图标(Glyphicons)
虚幻社区
03-09 690
本章将讲解字体图标(Glyphicons)，并通过一些实例了解它的使用。Bootstrap 捆绑了 200 多种字体格式的字形。首先让我们先来理解一下什么是字体图标。 什么是字体图标？ 字体图标是在 Web 项目中使用的图标字体。虽然，Glyphicons Halflings 需要商业许可，但是您可以通过基于项目的 Bootstrap 来免费使用这些图标。 为了表示对图标作者的感谢，希望您在使用时加上 GLYPHICONS 网站的链接。 获取字体图标 我们已经在 环境安装 章节下载了 Bootstrap
Bootstrap 简介
虚幻社区
03-08 639
什么是 Bootstrap？ Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的。 历史 Bootstrap 是由 Twitter 的 Mark Otto 和 Jacob Thornton 开发的。Bootstrap 是 2011 年八月在 GitHub 上发布的开源产品。 为什么使用 Bootstrap？ 移动设备优先：自 Bootstrap 3 起，框架包含了贯穿于整个库的移动设备优先的样式。 浏览器支
Bootstrap 表格
虚幻社区
03-09 571
Bootstrap 表格 Bootstrap 提供了一个清晰的创建表格的布局。下表列出了 Bootstrap 支持的一些表格元素： 标签 描述 table 为表格添加基础样式。 thead 表格标题行的容器元素（tr），用来标识表格列。 tbody 表格主体中的表格行的容器元素（tr）。 tr 一组出现在单行上的表格单元格的容器元素（td 或 th）。 td 默认的表格单元格。 th 特殊的表格单元格，用来标识列或行（取决于范围和位置）。必须在 thead 内使用。
Bootstrap CSS 概览
虚幻社区
03-08 401
Bootstrap CSS 概览 在这一章中，我们将讲解 Bootstrap 底层结构的关键部分，包括我们让 web 开发变得更好、更快、更强壮的最佳实践。 HTML 5 文档类型（Doctype） Bootstrap 使用了一些 HTML5 元素和 CSS 属性。为了让这些正常工作，您需要使用 HTML5 文档类型（Doctype）。 因此，请在使用 Bootstrap 项目的开头包含下面的代码段。 <!DOCTYPE html> <html> .... </html>
Bootstrap 环境安装
虚幻社区
03-08 305
Bootstrap 环境安装 Bootstrap 安装是非常容易的。本章将讲解如何下载并安装 Bootstrap，讨论 Bootstrap 文件结构，并通过一个实例演示它的用法。 下载 Bootstrap 您可以从 http://getbootstrap.com/ 上下载 Bootstrap 的最新版本。当您点击这个链接时，您将看到如下所示的网页： 您会看到两个按钮： Download Bootstrap：下载 Bootstrap。点击该按钮，您可以下载 Bootstrap CSS、JavaScript
Bootstrap 排版
虚幻社区
03-08 232
Bootstrap 排版 Bootstrap 使用 Helvetica Neue、 Helvetica、 Arial 和 sans-serif 作为其默认的字体栈。 使用 Bootstrap 的排版特性，您可以创建标题、段落、列表及其他内联元素。 标题 Bootstrap 中定义了所有的 HTML 标题（h1 到 h6）的样式。请看下面的实例： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> &
bootstrap按钮点击事件
09-13
Bootstrap按钮点击事件可以通过jQuery来实现。在给按钮添加点击事件的同时，可以通过相关的方法来改变按钮的状态或样式。 首先，在HTML中引入jQuery和Bootstrap的相关脚本文件： ``` <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script> ``` 然后，在合适的位置添加按钮元素： ```html <button type="button" class="btn btn-default js-btn">点击</button> ``` 接下来，使用jQuery选择器选中按钮元素，并为其添加点击事件： ```javascript $(".js-btn").on("click", function() { // 这里可以编写触发按钮点击事件后的逻辑代码 }); ``` 在点击事件的逻辑代码中，你可以使用各种方法来改变按钮的状态或样式，以达到你想要的效果。根据你的需求，以下是几个可能的示例： 1. 使用`button("loading")`方法来显示加载状态文本，可以通过`data-loading-text`属性来设置加载状态文本内容： ```javascript $(".js-btn").on("click", function() { $(this).button("loading"); // 显示加载状态 }); ``` 2. 使用`button("reset")`方法来重置按钮状态，将按钮文本还原为原始内容： ```javascript $(".js-btn").on("click", function() { $(this).button("reset"); // 重置按钮状态 }); ``` 3. 使用`button("complete")`方法来改变按钮状态为完成状态，可以通过`data-complete-text`属性来设置完成状态文本内容： ```javascript $(".js-btn").on("click", function() { $(this).button("complete"); // 改变按钮状态为完成状态 }); ``` 以上是几个常见的按钮点击事件的示例，你可以根据具体的需求选择适合的方法。重要的是要记得在HTML中引入jQuery和Bootstrap的脚本文件，并使用jQuery选择器选中按钮元素并添加点击事件，然后在点击事件的逻辑代码中使用相应的方法来改变按钮状态或样式。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

虚坏叔叔

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

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

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

打赏作者

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

抵扣说明：

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

余额充值