Bootstrap 3の `data-target`属性とは何ですか？

93

data-targetBootstrap 3で使用される属性の背後にあるシステムまたは動作は何ですか？

data-toggleがグラフィカル機能のBootstrapのAPI JavaScriptを狙うために使用されたことを知っています。

twitter-bootstrap-3

— Darkomen
ソース

112

data-targetブートストラップで使用して、あなたの生活を楽にします。作成済みのJavaScriptコンポーネントを使用するために、ほとんどの場合、JavaScriptを1行書く必要はありません。

data-target属性は、HTML要素にポイントが変更されるCSSセレクタが含まれている必要があります。

BS3のモーダルサンプルコード：

<!-- Button trigger modal -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  [...]
</div>

この例では、ボタンにがありdata-target="#myModal"、クリック<div id="myModal">...</div>すると変更されます（この場合はフェードイン）。これは#myModal、CSSセレクターidがmyModal値を持つ属性を持つ要素を指すために発生します。

HTML5の "data-"属性に関する詳細情報：https : //developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_data_attributes

— パスカルム
ソース

これはセレクターCSSエンジンのようなもので他には何もありませんか？

— darkomen

@miltone-正確には、好きではありません。data-target関連する要素を指すCSSセレクターを受け入れます。

— PhistucK 2015年

18

トグルはBootstrapに何をするかを指示し、ターゲットはBootstrapにどの要素を開くかを指示します。そのため、そのようなリンクがクリックされるたびに、「basicModal」のIDを持つモーダルが表示されます。

— user3098847
ソース