284

data-toggleTwitter Bootstrap で属性は何をしますか? Bootstrap API で答えが見つかりませんでした。

同様の質問を以前にも見たことがあります。しかし、それはあまり役に立ちませんでした。

4

10 に答える 10

210

これは、要素をウィジェットのタイプに自動的に接続する Bootstrap データ属性です。Data-* は html5 仕様の一部であり、data-toggle は Bootstrap に固有です。

いくつかの例：

data-toggle="modal"
data-toggle="collapse"
data-toggle="dropdown"
data-toggle="tab"

Bootstrap JavaScript ドキュメントに目を通し、data-toggle を検索すると、コード例で使用されていることがわかります。

一例：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>

<div class="dropdown">
  <a class="dropdown-toggle" data-toggle="dropdown" href="#">Dropdown trigger</a>
  <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
    <li><a href="#">Item</a></li>
  </ul>
</div>

于 2013-02-27T13:48:46.890 に答える
75

で始まる属性data-は、特定の目的に使用されるカスタム属性のプレフィックスです (その目的はアプリケーションによって異なります)。relこれは、人々が本来の目的以外の目的で やその他の属性を多用することに対するセマンティックな救済策として追加されました(rel高度なツールチップなどのデータを保持するためによく使用されていました)。

Bootstrap の場合、私はその内部の仕組みに精通していませんが、名前から判断すると、可視性またはおそらくそれが接続されている要素のモード (折りたたみ可能など) を切り替えるためのフックだと思います。Octopress.orgのサイドバー)。

html5doctor には、 data- 属性に関する優れた記事があります。

サイクル 2 は、data-属性の広範な使用の別の例です。

于 2013-02-27T13:50:19.367 に答える
27

ブートストラップ ドキュメントから:

<!--Activate a modal without writing JavaScript. Set data-toggle="modal" on a 
controller element, like a button, along with a data-target="#foo" or href="#foo" 
to target a specific modal to toggle.-->

<button type="button" data-toggle="modal" data-target="#myModal">Launch modal</button>
于 2014-06-24T03:27:42.900 に答える
11

非常に多くの回答が与えられていますが、それらは要点に達していません。これを修正しましょう。

http://www.w3schools.com/bootstrap/bootstrap_ref_js_collapse.asp

ポイントへ

  1. で始まる属性data-は、HTML5 パーサーによって解析されません。
  2. Bootstrap はこのdata-toggle属性を使用して折りたたみ機能を作成します。

使い方：たったの2ステップ

  1. 折りたたみたいclass="collapse"要素に追加します。#A
  2. とを追加data-target="#A"しdata-toggle="collapse"ます。

目的: この属性により、 Bootstrap を使用する場合に (ブロック)data-toggleを折りたたむ/展開するコントロールを作成できます。div

于 2016-04-21T07:04:59.367 に答える
5

ブートストラップの data-toggle の目的は、jQuery を使用して特定のタイプのすべてのタグを検索できるようにすることです。たとえば、すべての popover タグに data-toggle="popover" を配置すると、JQuery セレクターを使用してそれらのタグをすべて検索し、popover() 関数を実行してそれらを初期化できます。タグに class="myPopover" を配置し、.myPopover セレクターを使用して同じことを行うこともできます。ドキュメントは、その属性で何か特別なことが起こっているように見えるため、紛らわしいです。

これ

<div class="container">
    <h3>Popover Example</h3>
    <a href="#" class="myPop" title="Popover1 Header" data-content="Some content inside the popover1">Toggle popover1</a>
    <a href="#" class="myPop" title="Popover2 Header" data-content="Some content inside the popover2">Toggle popover2</a>
</div>

<script>
    $(document).ready(function(){
        $('.myPop').popover();   
    });
</script>

うまく動作します。

于 2016-07-26T22:51:07.097 に答える
5

この data-attribute の存在は、Bootstrap に、ユーザー インタラクションで別の要素の視覚的状態または論理的状態を切り替えるように指示します。

モーダル、タブ コンテンツ、ツールチップ、ポップオーバー メニューを表示したり、トグル ボタンの押された状態を設定したりするために使用されます。明確なドキュメントなしで複数の方法で使用されます。

于 2013-02-27T13:50:10.933 に答える
4

Bootstrap で定義された HTML5 データ属性です。ボタンをイベントにバインドします。

于 2013-02-27T13:49:44.140 に答える
2

Bootstrap は HTML5 標準を利用して、javascript 内で DOM 要素の属性に簡単にアクセスします。

データ-*

カスタム データ属性と呼ばれる属性のクラスを形成します。これにより、独自の情報を HTML と、スクリプトで使用できるその DOM 表現との間で交換できます。このようなカスタム データはすべて、属性が設定されている要素の HTMLElement インターフェイスを介して利用できます。HTMLElement.dataset プロパティはそれらへのアクセスを提供します。

参照

于 2016-02-18T02:10:57.550 に答える