Bootstrap Basic Tutorial

Bootstrap plug-in

Bootstrap Collapse Plugin Bootstrap Alert Box

Bootstrap Button (Button) plug-in

Button(Button) in Bootstrap Buttons It has been introduced in the first chapter. You can add some interactions through the Button plug-in, such as controlling the button status, or creating button groups for other components (such as toolbars).

Load state

To add a load state to the button, simply add data-loading-text="Loading..." as its attribute, as shown in the following example:

在线示例

示例




	　
	Bootstrap　示例　-　Button plug-in load state</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 id="fat-btn" class="btn btn-primary" data-loading-text="Loading..."　
　　　	type="button"> Load state
</button>
<script>
　　　　$(function() {
　　　　　　　　$(".btn").click(function(){
　　　　　　　　　　　　$.button('loading').delay(1000).queue(function()　{
　　　　　　　　　　　　//　$(this).button('reset');
　　　　　　　　　　　　//　$(this).dequeue();　
　　　　　　　　　　　　});
　　　　　　　　});
　　　　});　　
</script>
</body>
</html></pre><a target="_blank" href="/run/bootstrap-button-plugin-1.html" class="btn btn-success btn-run">Test and see ‹/›</a></div><p>The results are as follows:</p><div style="border: 1px solid #D6D6D6;padding: 5px;"></div><h2>Single toggle</h2><p>To activate the toggle of a single button (i.e., change the normal state of the button to pressed state, and vice versa), simply add <strong>data-toggle="button"</strong> as its attribute, as shown in the following example:</p><h2>在线示例</h2><div class="example_code"><label class="example_title">示例</label><pre><!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8">　
	<title>Bootstrap　示例　-　Button plug-in single toggle</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-primary"　
　　　	data-toggle="button"> Single toggle
</button>
</body>
</html></pre><a target="_blank" href="/run/bootstrap-button-plugin-2.html" class="btn btn-success btn-run">Test and see ‹/›</a></div><p>The results are as follows:</p><div style="border: 1px solid #D6D6D6;padding: 5px;"></div><h2>Checkbox(Checkbox)</h2><p>You can create a checkbox group and pass it to <strong>btn-group</strong> Add data attributes <strong>data-toggle="buttons"</strong> to add the toggle of the checkbox group.</p><h2>在线示例</h2><div class="example_code"><label class="example_title">示例</label><pre><!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8">　
	<title>Bootstrap　示例　-　Button plug-in checkbox</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="btn-group" data-toggle="buttons">
	<label class="btn btn-primary">
		<input type="checkbox"> Options　1
	</label>
	<label class="btn btn-primary">
		<input type="checkbox"> Options　2
	</label>
	<label class="btn btn-primary">
		<input type="checkbox"> Options　3
	</label>
</div>
</body>
</html></pre><a target="_blank" href="/run/bootstrap-button-plugin-3.html" class="btn btn-success btn-run">Test and see ‹/›</a></div><p>The results are as follows:</p><div style="border: 1px solid #D6D6D6;padding: 5px;"></div><h2>Radio button(Radio)</h2><p>Similarly, you can create a radio button group and pass it to <strong>btn-group</strong> Add data attributes <strong>data-toggle="buttons"</strong> to add the toggle of the radio button group.</p><h2>在线示例</h2><div class="example_code"><label class="example_title">示例</label><pre><!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8">　
	<title>Bootstrap　示例　-　Button plug-in radio 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="btn-group" data-toggle="buttons">
	<label class="btn btn-primary">
		<input type="radio" name="options" id="option1">　Options　1
	</label>
	<label class="btn btn-primary">
		<input type="radio" name="options" id="option2">　Options　2
	</label>
	<label class="btn btn-primary">
		<input type="radio" name="options" id="option3">　Options　3
	</label>
</div>	
</body>
</html></pre><a target="_blank" href="/run/bootstrap-button-plugin-4.html" class="btn btn-success btn-run">Test and see ‹/›</a></div><p>The results are as follows:</p><div style="border: 1px solid #D6D6D6;padding: 5px;"></div><h2>Usage</h2><p>You can <strong>Through JavaScript</strong> Enable the Button plug-in as shown below:</p><pre>$('.btn').button()</pre><h2>Options</h2><p><em>No options.</em></p><h2>method</h2><p>Here are some useful methods in the Button plug-in:</p><table class="table table-striped table-bordered"><tbody><tr><th>method</th><th>description</th><th>示例</th></tr><tr><td>button('toggle')</td><td>Toggle the pressed state. Give the button the appearance of being activated. You can use <strong>data-toggle</strong> The property enables the automatic toggle of the button.</td><td><pre>$().button('toggle')</pre></td></tr><tr><td>.button('loading')</td><td>When loading, the button is disabled and the text becomes the text of the button element <strong>data-loading-text</strong> The value of the property.</td><td><pre>$().button('loading')</pre></td></tr><tr><td>.button('reset')</td><td>重置按钮状态，文本内容恢复为最初的内容。当您想要把按钮返回为原始的状态时，该方法非常有用。</td><td><pre>$().button('reset')</pre></td></tr><tr><td>.button(string)</td><td>该方法中的字符串是指由用户声明的任何字符串。使用该方法，重置按钮状态，并添加新的内容。</td><td><pre>$().button(string)</pre></td></tr></tbody></table><h2>在线示例</h2><p>下面的示例演示了上面方法的用法：</p><h2>在线示例</h2><div class="example_code"><label class="example_title">示例</label><pre><!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8">　
	<title>Bootstrap　示例　-　按钮(Button)插件方法
	
	

点击每个按钮查看方法效果
演示　.button('toggle')　方法

　　　	原始
</div>
演示　.button('loading')　方法

	原始
	</button>
</div>
演示　.button('reset')　方法

	原始
	</button>
</div>
演示　.button(string)　方法
请点击我
</button>

	$(function　()　{
		1　.btn
			$(this).button('toggle');
		});
	});
	$(function() {　
		2　.btn
			$.button('loading').delay(1000).queue(function()　{
			});　　　　　　　　
		});
	});　　　
	$(function() {　
		3　.btn
			$.button('loading').delay(1000).queue(function()　{
				$(this).button('reset');
			});　　　　　　　　
		});
	});　　
	$(function() {　
		$("#myButton"4").click(function(){
			$.button('loading').delay(1000).queue(function()　{
				$.button('complete');
			});　　　　　　　　
		});
	});　
</script>　
</body>
</html>

Test and see ‹/›

The results are as follows:

Bootstrap Collapse Plugin Bootstrap Alert Box

Bootstrap Basic Tutorial

Bootstrap plug-in

Bootstrap Button (Button) plug-in

Load state

在线示例

点击每个按钮查看方法效果

演示 .button('toggle') 方法

演示 .button('loading') 方法

演示 .button('reset') 方法

演示 .button(string) 方法

演示　.button('toggle')　方法

演示　.button('loading')　方法

演示　.button('reset')　方法

演示　.button(string)　方法