☰

Twitter Bootstrap の data-toggle 属性について質問する

tag-icon • tag-icon javascript jquery html twitter-bootstrap
Twitter Bootstrap の data-toggle 属性について質問する

Twitter Bootstrap で属性は何をdata-toggleしますか? Bootstrap API で答えを見つけることができませんでした。

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

ベストアンサー1

これは、要素をウィジェットの種類に自動的に関連付ける Bootstrap データ属性です。data-* は html5 仕様の一部であり、data-toggle は Bootstrap に固有です。

いくつかの例：

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

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

1 つの実例:

<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>

おすすめ記事