<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
<title>按钮插件</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
</head>
<body style="margin: 200px;">
<button class="btn btn-primary" data-toggle="button" autocomplete="off">按钮</button>
<div class="btn-group" data-toggle="buttons">
<label for="" class="btn btn-primary active">
<input type="radio" name="sex" value="男" checked>男
</label>
<label for="" class="btn btn-primary">
<input type="radio" name="sex" value="女">女
</label>
</div>
<div class="btn-group" data-toggle="buttons">
<label for="" class="btn btn-primary active">
<input type="checkbox" name="fa" value="体育" checked>体育
</label>
<label for="" class="btn btn-primary">
<input type="checkbox" name="fa" value="音乐">音乐
</label>
<label for="" class="btn btn-primary">
<input type="checkbox" name="fa" value="艺术">艺术
</label>
<label for="" class="btn btn-primary">
<input type="checkbox" name="fa" value="电脑">电脑
</label>
</div>
<button id="#btn" class="btn btn-primary" data-loading-text="Loading..." autocomplete="off">开始上传</button>
<!-- <button class="btn btn-primary" autocomplete="off">按钮</button> -->
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script>
$('button').on('click', function () {
var btn = $(this).button('loading');
setTimeout(function () {
btn.button('reset');
}, 1000);
});
// $('button').on('click', function () {
// $(this).button('toggle');
// });
</script>
</body>
</html>
效果图：
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no"> <title>按钮插件</title> <link href="css/bootstrap.min.css" rel="stylesheet"> </head> <body style="margin: 100px;"> <!-- <button class="btn btn-primary" data-toggle="collapse" data-target="#content">Bootstrap</button> <div class="collapse" id="content"> <div class="well">Bootstrap 是Twitter 推出的一个用于前端开发的开源工具包。它由Twitter 的设计师Mark Otto 和Jacob Thornton 合作开发,是一个CSS/HTML 框架。目前,Bootstrap 最新版本为3.0 。</div> </div> --> <div class="panel-group" id="accordion"> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a href="#collapseOne" data-toggle="collapse" data-parent="#accordion">第一部分链接</a> </h4> </div> <div id="collapseOne" class="panel-collapse collapse"> <div class="panel-body"> 第一部分内容 </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a href="#collapseTwo" data-toggle="collapse" data-parent="#accordion">第二部分链接</a> </h4> </div> <div id="collapseTwo" class="panel-collapse collapse"> <div class="panel-body"> 第二部分内容 </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a href="#collapseThree" data-toggle="collapse" data-parent="#accordion">第三部分链接</a> </h4> </div> <div id="collapseThree" class="panel-collapse collapse"> <div class="panel-body"> 第三部分内容 </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a href="#collapseFour" data-toggle="collapse" data-parent="#accordion">第四部分链接</a> </h4> </div> <div id="collapseFour" class="panel-collapse collapse"> <div class="panel-body"> 第四部分内容 </div> </div> </div> </div> <script src="js/jquery.min.js"></script> <script src="js/bootstrap.min.js"></script> </body> </html>
效果图：
相关推荐
本章我们将深入探讨Bootstrap中的表格（Tables）和按钮（Buttons）元素，这两个组件在网页布局和交互中扮演着至关重要的角色。 ### 1. Bootstrap表格 Bootstrap的表格设计遵循简洁、响应式和易于定制的原则。表格...
Bootstrap是世界上最流行的前端开发框架之一，它为开发者提供了丰富的组件和样式，使网站设计和开发变得更加高效和简单。在这个特定的资源中，我们关注的是"Bootstrap带图标的按钮样式"，这是一种利用Bootstrap基础...
例如，导航条组件提供固定顶部、底部和折叠式等多种形式，满足不同设计需求；模态框则用于创建弹出窗口，可以用于显示详细信息或进行用户交互。 JavaScript插件是Bootstrap功能性的增强，它们基于jQuery库，提供...
使用bootstrap，配合JQ写的关于table表格的显示和折叠效果。点击实现table表格的折叠后，显示+号，再次点击，伸展表格中的内容，并显示-号
在第19章中，我们重点关注的是Bootstrap的附加导航插件，这些插件为开发者提供了更丰富的导航功能，使得用户界面更加交互性和易于使用。在本章节中，我们将深入探讨以下关键知识点： 1. **导航条（Navbar）**： - ...
bootstrap input 框 清除 小插件、很简单的一个小的js，引入即可。省时省力。
在第18章中，我们主要关注的是Bootstrap的轮播（Carousel）插件，这是一个强大的功能，用于创建动态的、可滑动的图片或内容展示。 Bootstrap轮播插件通过简单的HTML和CSS结构，配合JavaScript插件，能够实现多张...
总的来说，Bootstrap复选框和单选按钮美化插件是提升网页界面美观度的有效工具，它们通过提供丰富的样式选项和增强的交互功能，帮助开发者快速打造出更加吸引人的用户界面。在选择和应用这些插件时，应兼顾设计美学...
这个特定的插件是作者在处理公司业务时为适应Bootstrap样式而自定义开发的，它继承了Bootstrap原有的CSS样式，同时也具有较高的灵活性，方便开发者进行定制和调整。 Bootstrap分页插件的主要特点和功能包括： 1. *...
Bootstrap datetimepicker是一款流行的JavaScript插件，它允许用户在网页上方便地选择日期和时间。这个插件基于Bootstrap框架，提供了一种美观且响应式的日期时间选择解决方案。在默认配置下，datetimepicker通常会...
"bootstrap页面载入按钮插件"是Bootstrap框架的一个扩展，专门用于处理页面加载时的用户体验。这个插件允许在页面数据正在获取或处理时显示一个具有反馈功能的加载按钮，提升用户对加载过程的认知，同时保持页面界面...
Bootstrap使用`<button>`元素和`.navbar-toggle`类来创建折叠按钮。`data-toggle="collapse"`和`data-target="#navBar"`属性指定了当按钮被点击时，要展开或折叠的目标元素。在按钮内部，有三个`.icon-bar`元素，...
在第7章中，我们将深入探讨Bootstrap中的图标菜单和按钮组件，这些组件极大地提升了用户体验和界面美观性。 首先，Bootstrap图标菜单通常结合了字体图标库，如Font Awesome或Glyphicons，这些图标库提供了大量的...
在第16章中，我们将聚焦于Bootstrap的弹出框（Popover）和警告框（Alert）插件，这两个组件在网页交互中扮演着重要角色。 首先，让我们深入了解Bootstrap的弹出框。弹出框主要用于展示额外的信息，当用户对某个元素...
bootstrap五等分代码CSS和圆形按钮css，讲文档添加到bootstrap.css的最后直接写class即可。非常好用
Bootstrap的分页插件提供了一套完整的样式和交互设计，包括页码链接、上一页/下一页按钮、活动状态显示等。通过简单的HTML标记和CSS类，开发者可以轻松地在网页上创建出符合Bootstrap风格的分页。 **JavaScript插件...
该插件的核心功能是构建一个基于Bootstrap的响应式网格系统，这个系统由一系列行（rows）和列（columns）组成，允许内容在不同设备上自适应显示。Bootstrap的网格系统通常分为12个等宽的列，通过调整列的数量和组合...
Ladda 为 Bootstrap 3 设计的这个插件，将 Ladda 的功能无缝集成到了Bootstrap的按钮样式中，使得整体风格保持一致，增强了Bootstrap应用的视觉吸引力和用户体验。Bootstrap 3 是一个广泛使用的前端框架，提供了丰富...
Bootstrap 框架是网页开发中的一个强大工具，它提供了丰富的预设样式、组件和JavaScript插件，大大简化了创建响应式和移动优先的网站。在这个"bootstrap炫酷的按钮集合"中，我们主要探讨的是Bootstrap如何通过其按钮...