English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

Bootstrap 基礎トレーニング

Bootstrap プラグイン

Bootstrap ボタン（Button）プラグイン

ボタン（Button）は Bootstrap ボタン 第一章に紹介されています。ボタン（Button）プラグインを使用して、ボタン状態の制御や、他のコンポーネント（例えばツールバー）にボタングループを作成するなどのインタラクションを追加できます。

加载状态

如需向按钮添加加载状态，只需要简单地向 button 元素添加 data-loading-text="Loading..." 作为其属性即可，如下面示例所示：

オンラインサンプル

!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>
<button　id="fat-btn"　class="btn　btn-primary"　data-loading-text="Loading..."　
　　　	type="button">　加载状态
</button>
<script>
　　　　$(function()　{
　　　　　　　　$(".btn").click(function(){
　　　　　　　　　　　　$（this）.button（'loading'）.delay（1000）.queue（function（）　{
　　　　　　　　　　　　//　$(this).button('reset');
　　　　　　　　　　　　//　$(this).dequeue();　
　　　　　　　　　　　　});
　　　　　　　　});
　　　　});　　
</script>
</body>
</html>
テストを見てみる ‹/›

以下の結果が表示されます：

单个切换

如需激活单个按钮的切换（即改变按钮的正常状态为按压状态，反之亦然），只需向 button 元素添加 data-toggle="button" 作为其属性即可，如下面示例所示：

オンラインサンプル

!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>
<button　type="button"　class="btn　btn-primary"　
　　　	data-toggle="button">　单个切换
</button>
</body>
</html>
テストを見てみる ‹/›

以下の結果が表示されます：

复选框(Checkbox)

您可以创建复选框组，并通过向 btn-group 添加 data 属性 data-toggle="buttons" 来添加复选框组的切换。

オンラインサンプル

!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="btn-group"　data-toggle="buttons">
	<label　class="btn　btn-primary">
		<input　type="checkbox">　选项　1
	</label>
	<label　class="btn　btn-primary">
		<input　type="checkbox">　选项　2
	</label>
	<label　class="btn　btn-primary">
		<input　type="checkbox">　选项　3
	</label>
</div>
</body>
</html>
テストを見てみる ‹/›

以下の結果が表示されます：

单选按钮(Radio)

类似地，您可以创建单选按钮组，并通过向 btn-group 添加 data 属性 data-toggle="buttons" 来添加单选按钮组的切换。

オンラインサンプル

!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="btn-group"　data-toggle="buttons">
	<label　class="btn　btn-primary">
		<input　type="radio"　name="options"　id="option1">　选项　1
	</label>
	<label　class="btn　btn-primary">
		<input　type="radio"　name="options"　id="option2">　选项　2
	</label>
	<label　class="btn　btn-primary">
		<input　type="radio"　name="options"　id="option3">　选项　3
	</label>
</div>	
</body>
</html>
テストを見てみる ‹/›

以下の結果が表示されます：

用法

您可以 通过 JavaScript 启用按钮(Button)插件，如下所示：

$('.btn').button()

选项

没有选项。

方法

下面是一些按钮(Button)插件中有用的方法：

方法描述サンプル
button('toggle')切换按压状态。赋予按钮被激活的外观。您可以使用 data-toggle 属性启用按钮的自动切换。
$().button('toggle')
.button('loading')当加载时，按钮是禁用的，且文本变为 button 元素的 data-loading-text 属性的值。
$().button('loading')
.button('reset')ボタンの状態をリセットし、テキスト内容を元の内容に戻します。ボタンを元の状態に戻したい場合に非常に役立ちます。
$().button('reset')
.button(string)このメソッドの文字列は、ユーザーが宣言したどんな文字列でもできます。このメソッドを使用して、ボタンの状態をリセットし、新しい内容を追加します。
$().button(string)

オンラインサンプル

以下のサンプルでは、上記のメソッドの使用方法を示しています：

オンラインサンプル

!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>
<h2>各ボタンをクリックしてメソッドの効果を確認</h2>
<h4>デモ　.button('toggle')　メソッド</h4>
<div　id="myButtons1"　class="bs-example">
　　　	<button　type="button"　class="btn　btn-primary">オリジナル</button>
</div>
<h4>デモ　.button('loading')　メソッド</h4>
<div　id="myButtons2"　class="bs-example">
	<button　type="button"　class="btn　btn-primary"　
			data-loading-text="Loading...">オリジナル
	</button>
</div>
<h4>デモ　.button('reset')　メソッド</h4>
<div　id="myButtons3"　class="bs-example">
	<button　type="button"　class="btn　btn-primary"　
			data-loading-text="Loading...">オリジナル
	</button>
</div>
<h4>デモ　.button(string)　メソッド</h4>
<button　type="button"　class="btn　btn-primary"　id="myButton4"　
　　　	data-complete-text="Loading　finished">请点击我
</button>
<script　type="text/javascript">
	$(function　()　{
		$("#myButtons1　.btn").click(function(){
			$(this).button('toggle');
		});
	});
	$(function()　{　
		$("#myButtons2　.btn").click(function(){
			$（this）.button（'loading'）.delay（1000）.queue（function（）　{
			});　　　　　　　　
		});
	});　　　
	$(function()　{　
		$("#myButtons3　.btn").click(function(){
			$（this）.button（'loading'）.delay（1000）.queue（function（）　{
				$(this).button('reset');
			});　　　　　　　　
		});
	});　　
	$(function()　{　
		$（"#myButton"}4）。click（function（）{
			$（this）.button（'loading'）.delay（1000）.queue（function（）　{
				$（this）.button（'complete'）；
			});　　　　　　　　
		});
	});　
</script>　
</body>
</html>
テストを見てみる ‹/›

以下の結果が表示されます：

Bootstrap フェーダープラグインBootstrap アラートボックス