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

Tutoriel de base Bootstrap

Extension Bootstrap

Extension Bootstrap ( Bouton )

Le bouton (Button) dans Boutons Bootstrap Un chapitre a été introduit. Grâce à l'extension Button ( Bouton ), vous pouvez ajouter des interactions, telles que contrôler l'état du bouton ou créer des groupes de boutons pour d'autres composants (comme la barre d'outils).

État de chargement

Pour ajouter un état de chargement au bouton, il suffit simplement d'ajouter data-loading-texte="Chargement..." En tant que son attribut, comme dans l'exemple suivant:

在线示例

!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8">　
	<title>Bootstrap　示例　-　Bouton (Button) extension état de chargement</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-primaire"　data-loading-texte="Chargement..."　
　　　	type="bouton">　État de chargement
</button>
<script>
　　　　$(function()　{
　　　　　　　　$(".btn").click(function(){
　　　　　　　　　　　　$.button('loading').delay(1000).queue(function()　{
　　　　　　　　　　　　//　$(this).button('reset');
　　　　　　　　　　　　//　$(this).dequeue();　
　　　　　　　　　　　　});
　　　　　　　　});
　　　　});　　
</script>
</body>
</html>
Vérifiez et voyez si c'est correct/›

Les résultats sont affichés comme suit :

Bascule unique

Pour activer le basculement d'un bouton unique (c'est-à-dire changer l'état normal du bouton en appui, et inversement), il suffit d'ajouter data-basculer="bouton" En tant que son attribut, comme dans l'exemple suivant:

在线示例

!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8">　
	<title>Bootstrap　示例　-　Bouton (Button) extension bascule unique</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-basculer="bouton">　Bascule unique
</button>
</body>
</html>
Vérifiez et voyez si c'est correct/›

Les résultats sont affichés comme suit :

Case à cocher (Checkbox)

Vous pouvez créer un groupe de cases à cocher et les ajouter à btn-groupe Ajouter des attributs de données data-basculer="boutons" pour ajouter le basculage du groupe de cases à cocher.

在线示例

!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8">　
	<title>Bootstrap　示例　-　Bouton (Button) extension case à cocher</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-groupe"　data-basculer="boutons">
	<label　class="btn　btn-primaire">
		<input　type="checkbox">　Options　1
	</label>
	<label　class="btn　btn-primaire">
		<input　type="checkbox">　Options　2
	</label>
	<label　class="btn　btn-primaire">
		<input　type="checkbox">　Options　3
	</label>
</div>
</body>
</html>
Vérifiez et voyez si c'est correct/›

Les résultats sont affichés comme suit :

Bouton radio (Radio)

De même, vous pouvez créer un groupe de boutons radio et les ajouter à btn-groupe Ajouter des attributs de données data-basculer="boutons" pour ajouter le basculage du groupe de boutons radio.

在线示例

!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8">　
	<title>Bootstrap　示例　-　Bouton (Button) extension bouton radio</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-groupe"　data-basculer="boutons">
	<label　class="btn　btn-primaire">
		<input　type="radio"　name="options"　id="option1">　Options　1
	</label>
	<label　class="btn　btn-primaire">
		<input　type="radio"　name="options"　id="option2">　Options　2
	</label>
	<label　class="btn　btn-primaire">
		<input　type="radio"　name="options"　id="option3">　Options　3
	</label>
</div>	
</body>
</html>
Vérifiez et voyez si c'est correct/›

Les résultats sont affichés comme suit :

Utilisation

Vous pouvez Par JavaScript Activer l'extension de bouton (Button), comme suit:

$('.btn').bouton()

Options

Pas d'options.

méthode

Voici quelques méthodes utiles dans l'extension de bouton (Button):

méthodedescription示例
bouton('basculer')Changer l'état de pressage. Donner à l'bouton une apparence active. Vous pouvez utiliser data-basculer L'attribut active l'auto-basculage du bouton.
$().bouton('basculer')
.bouton('chargement')Lors du chargement, le bouton est désactivé et le texte devient le texte de l'élément bouton data-loading-texte La valeur de l'attribut.
$().bouton('chargement')
.bouton('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(){
			$.button('loading').delay(1000).queue(function()　{
			});　　　　　　　　
		});
	});　　　
	$(function()　{　
		$("#myButtons3　.btn").click(function(){
			$.button('loading').delay(1000).queue(function()　{
				$(this).button('reset');
			});　　　　　　　　
		});
	});　　
	$(function()　{　
		$("#myButton4").click(function(){
			$.button('loading').delay(1000).queue(function()　{
				$.button('complete');
			});　　　　　　　　
		});
	});　
</script>　
</body>
</html>
Vérifiez et voyez si c'est correct/›

Les résultats sont affichés comme suit :

Plugin de pli BootstrapBoîte de dialogue d'avertissement Bootstrap