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

Plugin de botão (Button) do Bootstrap

O botão (Button) em Botão Bootstrap Foi introduzido em um capítulo. Através do plug-in de botão (Button), você pode adicionar algumas interações, como controlar o estado do botão ou criar grupos de botões para outros componentes (como a barra de ferramentas).

Estado de carregamento

Para adicionar o estado de carregamento ao botão, basta adicionar data-loading-text="Carregando..." Como seu atributo, conforme o exemplo a seguir:

在线示例




	 
	Bootstrap 示例 - Botão(Button) plugin estado de carregamento</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="Carregando..." 
   	type="button"> Estado de carregamento
</button>
<script>
    $(function() {
        $(".btn").click(function(){
            $(this).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">Teste e Veja ‹/›</a></div><p>Os resultados estão conforme mostrado:</p><div style="border: 1px solid #D6D6D6;padding: 5px;"></div><h2>Alteração individual</h2><p>Para ativar a troca de um botão individual (ou seja, alterar o estado normal do botão para pressionado e vice-versa), basta adicionar <strong>data-toggle="button"</strong> Como seu atributo, conforme o exemplo a seguir:</p><h2>在线示例</h2><div class="example_code"><label class="example_title">示例</label><pre><!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"> 
	<title>Bootstrap 示例 - Botão(Button) plugin alteração individual</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"> Alteração individual
</button>
</body>
</html></pre><a target="_blank" href="/run/bootstrap-button-plugin-2.html" class="btn btn-success btn-run">Teste e Veja ‹/›</a></div><p>Os resultados estão conforme mostrado:</p><div style="border: 1px solid #D6D6D6;padding: 5px;"></div><h2>Caixa de seleção(Checkbox)</h2><p>Você pode criar um grupo de caixas de seleção e passar para ele <strong>btn-group</strong> Adicione atributo data <strong>data-toggle="buttons"</strong> para adicionar a troca de grupo de caixas de seleção.</p><h2>在线示例</h2><div class="example_code"><label class="example_title">示例</label><pre><!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"> 
	<title>Bootstrap 示例 - Botão(Button) plugin caixa de seleção</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"> Opções 1
	</label>
	<label class="btn btn-primary">
		<input type="checkbox"> Opções 2
	</label>
	<label class="btn btn-primary">
		<input type="checkbox"> Opções 3
	</label>
</div>
</body>
</html></pre><a target="_blank" href="/run/bootstrap-button-plugin-3.html" class="btn btn-success btn-run">Teste e Veja ‹/›</a></div><p>Os resultados estão conforme mostrado:</p><div style="border: 1px solid #D6D6D6;padding: 5px;"></div><h2>Botão de rádio(Radio)</h2><p>Da mesma forma, você pode criar um grupo de botões de rádio e passar para ele <strong>btn-group</strong> Adicione atributo data <strong>data-toggle="buttons"</strong> para adicionar a troca de grupo de botões de rádio.</p><h2>在线示例</h2><div class="example_code"><label class="example_title">示例</label><pre><!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"> 
	<title>Bootstrap 示例 - Botão(Button) plugin botão de rádio</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"> Opções 1
	</label>
	<label class="btn btn-primary">
		<input type="radio" name="options" id="option2"> Opções 2
	</label>
	<label class="btn btn-primary">
		<input type="radio" name="options" id="option3"> Opções 3
	</label>
</div>	
</body>
</html></pre><a target="_blank" href="/run/bootstrap-button-plugin-4.html" class="btn btn-success btn-run">Teste e Veja ‹/›</a></div><p>Os resultados estão conforme mostrado:</p><div style="border: 1px solid #D6D6D6;padding: 5px;"></div><h2>Uso</h2><p>Você pode <strong>através de JavaScript</strong> Ative o plugin de botão(Button) conforme mostrado a seguir:</p><pre>$('.btn').button()</pre><h2>Opções</h2><p><em>Sem opções.</em></p><h2>método</h2><p>A seguir estão alguns métodos úteis no plugin de botão(Button):</p><table class="table table-striped table-bordered"><tbody><tr><th>método</th><th>descrição</th><th>示例</th></tr><tr><td>button('toggle')</td><td>Alterne o estado de pressão. Dê ao botão o aspecto ativo. Você pode usar <strong>data-toggle</strong> A propriedade habilita a troca automática do botão.</td><td><pre>$().button('toggle')</pre></td></tr><tr><td>.button('loading')</td><td>Quando estiver carregando, o botão está desativado e o texto torna-se o texto do elemento button. <strong>data-loading-text</strong> O valor da propriedade.</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 $(this).button('loading').delay(1000).queue(function() { });         }); });    $(function() {  3 .btn $(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>
Teste e Veja ‹/›

Os resultados estão conforme mostrado: