JSコンポーネントの詳細説明 ブートストラップボタングループとドロップダウンボタン_javascriptスキル

この記事では、まずボタン グループの使用方法について説明します。具体的な内容は次のとおりです。

1. ボタン グループ

1. 単一ボタン グループ
.btn-group を使用して、複数の を .btn でカプセル化します

<div class="btn-group"> 
 <button class="btn">1</button> 
 <button class="btn">2</button> 
 <button class="btn">3</button> 
</div> 

2. 複数のボタン グループ

に複数の

を入れます。

<div class="btn-toolbar"> 
 <div class="btn-group"> 
  ... 
 </div> 
 <div class="btn-group"> 
  ... 
 </div> 
</div> 

3. 垂直ボタン グループ
.btn-group-vertical を .btn-group に追加します。

<div class="btn-group btn-group-vertical"> 
 ... 
</div> 

2. ボタンのドロップダウン

例

<div class="btn-group"> 
 <a class="btn dropdown-toggle" data-toggle="dropdown" href="#"> 
  action 
  <span class="caret"></span> 
 </a> 
 <ul class="dropdown-menu"> 
  <!-- dropdown menu links --> 
 </ul> 
</div> 

1. サイズの制御
サイズを制御するには、.btn-large、.btn-small、および .btn-mini も使用します。

2. 分割ドロップダウン ボタン

<div class="btn-group"> 
 <button class="btn">action</button> 
 <button class="btn dropdown-toggle" data-toggle="dropdown"> 
  <span class="caret"></span> 
 </button> 
 <ul class="dropdown-menu"> 
  <!-- dropdown menu links --> 
 </ul> 
</div> 

3. 上向きに表示されるメニュー

<div class="btn-group dropup"> 
 <button class="btn">dropup</button> 
 <button class="btn dropdown-toggle" data-toggle="dropdown"> 
  <span class="caret"></span> 
 </button> 
 <ul class="dropdown-menu"> 
  <!-- dropdown menu links --> 
 </ul> 
</div> 

3. javascript

例
読み込みステータス。 data-loading-text="読み込み中..." を追加します。

コピーコード コードは次のとおりです。

状態読み込み中

スイッチのステータス。 data-toggle="button" を追加します。

コピーコード コードは次のとおりです。

single toggle

チェックボックス。 btn-group の後に data-toggle="buttons-checkbox" を追加します。

<div class="btn-group" data-toggle="buttons-checkbox"> 
 <button type="button" class="btn btn-primary">left</button> 
 <button type="button" class="btn btn-primary">middle</button> 
 <button type="button" class="btn btn-primary">right</button> 
</div> 

単一の選択肢。 btn-group の後に data-toggle="buttons-radio" を追加します。

<div class="btn-group" data-toggle="buttons-radio"> 
 <button type="button" class="btn btn-primary">left</button> 
 <button type="button" class="btn btn-primary">middle</button> 
 <button type="button" class="btn btn-primary">right</button> 
</div> 

使用法
javascript コードがスイッチ状態をトリガーします。
$().button("トグル")
data-toggle 属性を追加して、自動的にトリガーすることもできます。
…

javascript コードを使用して読み込み状態をトリガーすると、ボタンには data-loading-text 属性で指定された値が表示されます。

$().button("loading")

... 注: firefox は、ページの読み込み中、ボタンを無効のままにします。回避策は、ボタンに autocomplete="off" を適用することです。

javascript コードを使用してボタンの状態をリセットします。
$().button("reset")

ボタンの状態をリセットし、ボタンのテキストを指定されたテキストに変更します。次の例の complete は一例であり、置き換えることができます。

<button class="btn" data-complete-text="finished!" >...</button> 
<script> 
 $('.btn').button('complete') 
</script> 

以上がこの記事の全内容です。皆さんの学習に役立つことを願っています。

関連ラベル：

Bootstrap按钮组 Bootstrap下拉按钮

ソース：php.cn

前の記事：AngularJsを使って権限管理システムを構築する方法【簡単】_AngularJS 次の記事：Bootstrap ボタンのドロップダウン メニューのコンポーネント_JavaScript スキルの詳細な説明

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

著者別の最新記事

• NullPointerException とは何ですか?どのように修正すればよいですか?
  2024-10-22 09:46:29
• 初心者からプログラマーへ: 旅は C の基礎から始まります
  2024-10-13 13:53:41
• PHP による Web 開発のロックを解除する: 初心者ガイド
  2024-10-12 12:15:51
• C の謎を解く: 新人プログラマーのための明確でシンプルな道
  2024-10-11 22:47:31
• コーディングの可能性を解き放つ: まったくの初心者のための C プログラミング
  2024-10-11 19:36:51
• 内なるプログラマーを解き放つ: まったくの初心者のための C
  2024-10-11 15:50:41
• C で生活を自動化する: 初心者向けのスクリプトとツール
  2024-10-11 15:07:41
• PHP を簡単に: Web 開発の最初のステップ
  2024-10-11 14:21:21
• Python で何でも構築: 創造性を解き放つための初心者ガイド
  2024-10-11 12:59:11
• コーディングの鍵: 初心者のための Python の力を解き放つ
  2024-10-11 12:17:31

最新の問題

SQL groupbyが機能しないので、code_branchでグループ化したい ->select('a.statusasstatus','b.nameascustomer_name','e.nameasbranch_name','c.nameascomp...

から 2024-04-06 19:24:49

0

2

488

ループするために MySQL の結果を ID ごとにグループ化する mysqlにフライトデータを含むテーブルがあります。 codeigniter3Journey_idair_idFlightDurationout_or_inflightdurati...

から 2024-04-06 17:27:56

0

1

406

Javascript/Jqueryを使用してボタンなしでフォームを送信する JavaScript 関数を呼び出し、JQUERY/PHP を使用してフォームを実行することにより、ボタンのないフォームを送信しようとしています。ページを再読み込みせずに、バックエ...

から 2024-04-06 14:54:03

0

2

421

React でスリーステート スイッチングを実装する最良の方法は? React で、ある状態から次の状態への状態変更をトリガーするボタンをいくつか作成しています。ボタンの中には、列挙型で表される 3 つの状態を持つものもあります。これら 3 つの状...

から 2024-04-06 13:51:32

0

1

418

送信後に選択したチェックボックスの値を印刷する方法 これは、データを送信するために必要なチェックボックスとボタンのリストです。<label>AccessLocations</label><br/>...

から 2024-04-06 13:07:43

0

2

337

関連トピック

詳細>

• TikTokの友達は何ができるの？
• C言語での#includeの使用法
• Pythonのsort()関数の使い方の紹介
• JavaScriptでinsertBeforeを使用する方法
• xfceとは何ですか
• デジタル通貨取引所トップ 10
• amd240
• vscodeでコードを実行する方法