ブートストラップボタン


Bootstrap Button プラグイン

Button は、Bootstrap Button の章で紹介されました。 Button プラグインを使用すると、ボタンの状態の制御などの操作を追加したり、他のコンポーネント (ツールバーなど) のボタン グループを作成したりできます。

このプラグインの機能を個別に参照したい場合は、button.jsを参照する必要があります。あるいは、ブートストラップ プラグインの概要の章で説明したように、bootstrap.js または bootstrap.min.js の縮小バージョンを参照することもできます。

読み込み状態

ボタンに読み込み状態を追加するには、以下の例に示すように、属性としてボタン要素に data-loading-text="Loading..." を追加するだけです:

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>

インスタンスの実行»

「インスタンスの実行」ボタンをクリックしてオンラインインスタンスを表示します

単一スイッチ

単一のボタンのスイッチをアクティブにする必要がある場合 (つまり、ボタンの通常の状態を押された状態、またはその逆)、次の例に示すように、属性としてボタン要素に data-toggle="button" を追加するだけです:

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>

Run Instance»

[インスタンスの実行] ボタンをクリックします。 オンラインの例を参照してください

Checkbox

データ属性 data-toggle="buttons" を btn-group に追加することで、チェックボックス グループを作成し、チェックボックス グループ トグルを追加できます。

インスタンス

<!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>

インスタンスの実行 »

「インスタンスの実行」ボタンをクリックしてオンラインインスタンスを表示します

ラジオボタン(ラジオ)

同様に、ラジオボタングループを作成して、 btn-group データ属性 data-toggle="buttons" を追加して、ラジオ ボタン グループの切り替えを追加します。

インスタンス

<!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>

インスタンスの実行»

「インスタンスの実行」ボタンをクリックしてオンラインインスタンスを表示します

使用方法

次のように JavaScript を通じて Button プラグインを有効にすることができます

: $ ('.btn').button()

オプション

オプションはありません。

メソッド

ボタンプラグインの便利なメソッドをいくつか紹介します:

メソッド説明インスタンス
button('toggle')押された状態を切り替えます。ボタンがアクティブになっているように見えます。 data-toggle 属性を使用して、ボタンの自動切り替えを有効にできます。 
$().button('toggle')
.button('loading') ロード中、ボタンは無効になり、テキストはボタン要素の data-loading-text 属性の値になります。 
$().button('loading')
.button('reset') ボタンの状態をリセットし、テキストの内容を元の内容に戻します。このメソッドは、ボタンを元の状態に戻したい場合に便利です。 
$().button('reset')
.button(string) このメソッドの文字列は、ユーザーが宣言した任意の文字列を指します。このメソッドを使用して、ボタンの状態をリセットし、新しいコンテンツを追加します。 
$().button(string)

インスタンス

次の例は、上記のメソッドの使用法を示しています:

インスタンス

<!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>

インスタンスの実行 »

オンラインの例を表示するには、「インスタンスの実行」ボタンをクリックします

←
→