按钮使用教程
<h5>1.基础示例相关代码</h5>
<p>css、js引入：</p>
<pre><code class="language-java"><link href="/css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
<script src="/js/jquery.min.js?v=2.1.4"></script>
<script type="text/javascript" src="/js/bootstrap.min.js?v=3.3.6"></script></code></pre>
<p>html代码：</p>
<pre><code class="language-java"><div class="container-fluid">
<div class="row">
<div class="col-md-12">
<button id="myButtons1" type="button" class="btn btn-primary">
.button('toggle')</button>
<button id="myButtons2" type="button" class="btn btn-primary"
data-loading-text="Loading...">.button('loading')</button>
<button id="myButtons3" type="button" class="btn btn-primary"
data-loading-text="Loading...">.button('reset')
</button>
<button id="myButtons4" type="button" class="btn btn-primary" id="myButton4"
data-complete-text="Loading finished">.button(string)
</button>
</div>
</div></code></pre>
<p>js代码：</p>
<pre><code class="language-java"><script>
// toggle事件
$(function() {
$("#myButtons1").click(function(){
$(this).button('toggle');
});
});
// 按钮变loading
$(function() {
$("#myButtons2").click(function(){
$(this).button('loading').delay(1000).queue(function() {
});
});
});
// 按钮loading状态reset
$(function() {
$("#myButtons3").click(function(){
$(this).button('loading').delay(1000).queue(function() {
$(this).button('reset');
});
});
});
// loading事件完成
$(function() {
$("#myButtons4").click(function(){
$(this).button('loading').delay(1000).queue(function() {
$(this).button('complete');
});
});
});
</script></code></pre>
<h5>2.展现</h5>
<p><img src="https://www.showdoc.cc/server/api/common/visitfile/sign/9681b4cccce8dbefcdd81027eb0f3ac9?showdoc=.jpg" alt="" /></p>
<h5>3.定义按钮的样式</h5>
<table>
<thead>
<tr>
<th>类</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr>
<td>.btn</td>
<td>为按钮添加基本样式</td>
</tr>
<tr>
<td>.btn-default</td>
<td>默认/标准按钮</td>
</tr>
<tr>
<td>.btn-primary</td>
<td>原始按钮样式（未被操作）</td>
</tr>
<tr>
<td>.btn-success</td>
<td>表示成功的动作</td>
</tr>
<tr>
<td>.btn-info</td>
<td>该样式可用于要弹出信息的按钮</td>
</tr>
<tr>
<td>.btn-warning</td>
<td>表示需要谨慎操作的按钮</td>
</tr>
<tr>
<td>.btn-danger</td>
<td>表示一个危险动作的按钮操作</td>
</tr>
<tr>
<td>.btn-link</td>
<td>让按钮看起来像个链接 (仍然保留按钮行为)</td>
</tr>
<tr>
<td>.btn-lg</td>
<td>制作一个大按钮</td>
</tr>
<tr>
<td>.btn-sm</td>
<td>制作一个小按钮</td>
</tr>
<tr>
<td>.btn-xs</td>
<td>制作一个超小按钮</td>
</tr>
<tr>
<td>.btn-block</td>
<td>块级按钮(拉伸至父元素100%的宽度)</td>
</tr>
<tr>
<td>.active</td>
<td>按钮被点击</td>
</tr>
<tr>
<td>.disabled</td>
<td>禁用按钮</td>
</tr>
</tbody>
</table>