web-dev-qa-db-ja.com

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

Bootstrap 3で使われているdata-target属性の背景にあるシステムや動作は何ですか？

私はデータトグルがグラフィカル機能のブートストラップのAPI JavaScriptを目的としていたことを知っています。

twitter-bootstrap-3
81
darkomen

data-targetはあなたの人生を楽にするためにブートストラップによって使われます。あなたは（ほとんどの場合）それらの既成のものを使用するためにJavascriptの一行を書く必要はありません JavaScriptコンポーネント 。

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>が変更されます（この場合はフェードイン）。これは、CSSセレクターの#myModalが、idの値を持つmyModal属性を持つ要素を指すために発生します。

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

98
Pascalmh

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

15
user3098847