回答:
これは、要素をウィジェットのタイプに自動的にフックするBootstrapデータ属性です。Data- *はhtml5仕様の一部であり、data-toggleはBootstrapに固有です。
いくつかの例：
data-toggle="modal"
data-toggle="collapse"
data-toggle="dropdown"
data-toggle="tab"通過ブートストラップJavaScriptのドキュメントとデータトグルを検索し、あなたはそれがコード例で使用される表示されます。
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>で始まる属性はすべてdata-、特定の目的に使用されるカスタム属性のプレフィックスです（その目的はアプリケーションによって異なります）。これはrel、本来の目的以外の目的で人々が頻繁に使用する属性やその他の属性に対する意味論的救済策として追加されました（rel高度なツールチップなどのデータを保持するためによく使用されました）。
ブートストラップの場合、私はその内部の仕組みに精通していませんが、名前から判断すると、それは、可視性またはおそらくそれが接続されている要素のモード（折りたたみ可能など）の切り替えを可能にするフックだと思いますOctopress.orgのサイドバー）。
たとえば、レシピを一覧表示するWebアプリケーションを作成しているとします。顧客が開くレシピを選択する前に、リストを並べ替えたり、レシピの機能を表示したりできるようにしたい場合があります。これを行うには、調理時間、主な材料、食事の位置などをレシピのリスト要素の中に直接関連付ける必要があります。
<li><a href="recipe1.html">Borscht</a></li>
<li><a href="recipe2.html">Chocolate Mousse</a></li>
<li><a href="recipe3.html">Almond Radiccio Salad</a></li>
<li><a href="recipe4.html">Deviled Eggs</a></li>その情報をページに取り込むには、さまざまなことができます。各LI要素にコメントを追加したり、リストアイテムにrel属性を追加したり、すべてのレシピを時間、食事、材料（つまり）に基づいて個別のフォルダーに配置したりできます。ほとんどの開発者が取ったソリューションは、現在の要素に関する情報を格納するためにクラス属性を使用することでした。これにはいくつかの利点があります。
しかし、この方法にはいくつかの大きな欠点があります。
私が提案した他のすべての方法には、これらの問題とその他の問題がありました。しかし、それが迅速かつ簡単にデータを含める唯一の方法だったので、それを行いました。レスキューへのHTML5データ属性
HTML5は、新しいタイプの属性を任意の要素、つまりカスタムデータ要素（data- *）に追加しました。これらはカスタム属性（*で示される）であり、HTML要素に追加して、必要な任意のタイプのデータを定義できます。それらは2つの部分で構成されます。
属性名これは属性の名前です。少なくとも1つの小文字で、接頭辞data-が必要です。例：data-main-ingredient、data-cooking-time、data-meal。これはデータの名前です。
属性Vaule他のHTML属性と同様に、データ自体を等号で区切って引用符で囲みます。このデータは、Webページで有効な任意の文字列にすることができます。例：data-main-ingredient = "chocolate"。
次に、これらのデータ属性を任意のHTML要素に適用できます。たとえば、上記のリストの例の情報を定義できます。
<li data-main-ingredient="beets" data-cooking-time="1 hour" data-meal="dinner"><a href="recipe1.html">Borscht</a></li>
<li data-main-ingredient="chocolate" data-cooking-time="30 minutes" data-meal="dessert"><a href="recipe2.html">Chocolate Mousse</a></li>
<li data-main-ingredient="radiccio" data-cooking-time="20 minutes" data-meal="dinner"><a href="recipe1.html">Almond Radiccio Salad</a></li>
<li data-main-ingredient="eggs" data-cooking-time="15 minutes" data-meal="appetizer"><a href="recipe1.html">Deviled Eggs</a></li>HTMLでその情報を取得すると、JavaScriptでその情報にアクセスし、そのデータに基づいてページを操作できるようになります。
<!--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>非常に多くの答えが出されましたが、彼らは要点を理解していません。これを修正しましょう。
http://www.w3schools.com/bootstrap/bootstrap_ref_js_collapse.asp
要点
data-は、HTML5パーサーによって解析されません。data-toggle属性を使用して、折りたたみ機能を作成します。使用方法：2ステップのみ
class="collapse"要素に追加し#Aます。data-target="#A"しdata-toggle="collapse"ます。目的：このdata-toggle属性により、divBootstrapを使用する場合、（ブロック）を折りたたむ/展開するコントロールを作成できます。
ブートストラップでのデータ切り替えの目的は、jQueryを使用して特定のタイプのすべてのタグを検索できるようにすることです。たとえば、すべてのポップオーバータグに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>正常に動作します。
ブートストラップで定義されたHTML5データ属性です。ボタンをイベントにバインドします。