コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > jsチュートリアル > 本文

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

WBOY
リリース： 2016-05-16 09:00:21
オリジナル
3694 人が閲覧しました

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

1. ボタン グループ

1. 単一ボタン グループ
.btn-group を使用して、複数の 

<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" を追加します。

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

チェックボックス。 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 までご連絡ください。
著者別の最新記事
最新の問題
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
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート