Bouton d'amorçage


Bootstrap Plug-in Button

Button a été introduit dans le chapitre Bootstrap Button. Avec le plug-in Button, vous pouvez ajouter certaines interactions, telles que le contrôle de l'état des boutons, ou créer des groupes de boutons pour d'autres composants (tels que les barres d'outils).

Si vous souhaitez référencer les fonctionnalités de ce plugin séparément, vous devez alors référencer button.js. Alternativement, comme mentionné dans le chapitre Présentation du plugin Bootstrap, vous pouvez référencer bootstrap.js ou la version minifiée de bootstrap.min.js.

État de chargement

Pour ajouter un état de chargement à un bouton, ajoutez simplement data-loading-text="Loading..." à l'élément bouton comme attributs suffisent, comme le montre l'exemple suivant :

Instance

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 按钮（Button）插件加载状态</title>
  <link href="http://libs.baidu.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet">
  <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
  <script src="http://libs.baidu.com/bootstrap/3.3.0/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');
         });        
      });
   });  
</script>

</body>
</html>

Exécuter l'instance»

Cliquez sur "Exécuter l'instance" Exemple d'affichage de bouton en ligne

Bascule simple

Pour activer la bascule d'un seul bouton (c'est-à-dire changer l'état normal du bouton à l'état enfoncé, ou vice versa), ajoutez simplement à l'élément bouton data-toggle="button" peut être utilisé comme attribut, comme le montre l'exemple suivant :

Instance

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 按钮（Button）插件单个切换</title>
  <link href="http://libs.baidu.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet">
  <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
  <script src="http://libs.baidu.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>
<body>

<button type="button" class="btn btn-primary" 
   data-toggle="button"> 单个切换
</button>

</body>
</html>

Exécuter l'instance»

Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne

Checkbox (Checkbox)

Vous pouvez créer un groupe de cases à cocher et passez Ajouter l'attribut de données data-toggle="buttons" à btn-group pour ajouter la bascule du groupe de cases à cocher.

Instance

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 按钮（Button）插件复选框</title>
   <link href="http://libs.baidu.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet">
  <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
  <script src="http://libs.baidu.com/bootstrap/3.3.0/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>

Exécuter l'instance»

Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne

Boutons radio (Radio)

De même, vous pouvez créer un groupe de boutons radio et ajouter l'attribut de données data-toggle="boutons à btn-group " pour ajouter une bascule pour le groupe de boutons radio.

Instance

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 按钮（Button）插件单选按钮</title>
   <link href="http://libs.baidu.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet">
  <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
  <script src="http://libs.baidu.com/bootstrap/3.3.0/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>

Exécuter l'instance»

Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne

Utilisation

Vous pouvez activer le plugin Button via JavaScript comme suit :

$('.btn').button( )

Options

Aucune option.

Méthodes

Voici quelques méthodes utiles dans les plug-ins Button :

方法描述实例
button('toggle')切换按压状态。赋予按钮被激活的外观。您可以使用 data-toggle 属性启用按钮的自动切换。
$().button('toggle')
.button('loading')当加载时，按钮是禁用的，且文本变为 button 元素的 data-loading-text 属性的值。
$().button('loading')
.button('reset')重置按钮状态，文本内容恢复为最初的内容。当您想要把按钮返回为原始的状态时，该方法非常有用。
$().button('reset')
.button(string)该方法中的字符串是指由用户声明的任何字符串。使用该方法，重置按钮状态，并添加新的内容。
$().button(string)

Exemple

L'exemple suivant montre l'utilisation de la méthode ci-dessus :

Instance

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 按钮（Button）插件方法</title>
   <link href="http://libs.baidu.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet">
  <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
  <script src="http://libs.baidu.com/bootstrap/3.3.0/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() { 
      $("#myButton4").click(function(){
         $(this).button('loading').delay(1000).queue(function() {
            $(this).button('complete');
         });        
      });
   }); 
</script> 


</body>
</html>

Exécuter l'instance»

Cliquez sur le bouton "Exécuter l'instance" pour afficher l'instance en ligne exemple