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

Tutoriales básicos de Bootstrap

Complemento de Bootstrap

Complemento (Button) de Bootstrap

El botón (Button) en Botones Bootstrap Se ha presentado en el capítulo uno. A través del complemento (Button) de botón, puede agregar algunas interacciones, como controlar el estado del botón o crear grupos de botones para otros componentes (como la barra de herramientas).

加载状态

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

Ejemplo en línea

!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8">　
	<title> Ejemplo de 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(){
　　　　　　　　　　　　$.button('loading').delay(1000).queue(function()　{
　　　　　　　　　　　　//　$(this).button('reset');
　　　　　　　　　　　　//　$(this).dequeue();　
　　　　　　　　　　　　});
　　　　　　　　});
　　　　});　　
</script>
</body>
</html>
Prueba aquí ‹/›

Los resultados se muestran a continuación:

单个切换

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

Ejemplo en línea

!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8">　
	<title> Ejemplo de 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>
Prueba aquí ‹/›

Los resultados se muestran a continuación:

复选框(Checkbox)

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

Ejemplo en línea

!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8">　
	<title> Ejemplo de 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>
Prueba aquí ‹/›

Los resultados se muestran a continuación:

单选按钮(Radio)

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

Ejemplo en línea

!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8">　
	<title> Ejemplo de 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>
Prueba aquí ‹/›

Los resultados se muestran a continuación:

用法

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

$('.btn').button()

选项

没有选项。

方法

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

方法描述Ejemplo
button('toggle')切换按压状态。赋予按钮被激活的外观。您可以使用 data-toggle 属性启用按钮的自动切换。
$().button('toggle')
.button('loading')当加载时，按钮是禁用的，且文本变为 button 元素的 data-loading-text 属性的值。
$().button('loading')
.button('reset')Restablece el estado del botón, el contenido de texto se recupera al contenido inicial. Este método es muy útil cuando desea devolver el botón a su estado original.
$().button('reset')
.button(string)La cadena de caracteres en este método se refiere a cualquier cadena de caracteres declarada por el usuario. Al usar este método, se restablece el estado del botón y se agrega nuevo contenido.
$().button(string)

Ejemplo en línea

Los siguientes ejemplos muestran el uso de los métodos mencionados anteriormente:

Ejemplo en línea

!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8">　
	<title> Ejemplo de Bootstrap　-　Métodos del plugin de botones(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>Haga clic en cada botón para ver el efecto del método</h2>
<h4>Muestra el método .button('toggle')</h4>
<div　id="myButtons1"　class="bs-example">
　　　	<button　type="button"　class="btn　btn-primary">Original</button>
</div>
<h4>Muestra el método .button('loading')</h4>
<div　id="myButtons2"　class="bs-example">
	<button　type="button"　class="btn　btn-primary"　
			data-loading-text="Carga inicial">Original
	</button>
</div>
<h4>Muestra el método .button('reset')</h4>
<div　id="myButtons3"　class="bs-example">
	<button　type="button"　class="btn　btn-primary"　
			data-loading-text="Carga inicial">Original
	</button>
</div>
<h4>Muestra el método .button(string)</h4>
<button　type="button"　class="btn　btn-primary"　id="myButton4"　
　　　	data-complete-text="Carga completada">Haga clic aquí
</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>
Prueba aquí ‹/›

Los resultados se muestran a continuación:

Complemento de plegable BootstrapCuadro de advertencia Bootstrap