Bootstrapにおけるdata-[*]属性の整理とまとめ

【1 data-プロパティ】dataプロパティはHTML 5の新しいプロパティです.開発者がラベルに属性を追加し、データを格納できるようにします.このカスタム属性は一般的に「data」で始まります.保存された(カスタマイズされた)データは、ページのJavaScriptで取得して利用することができる.data-*プロパティには、次の2つのセクションがあります.

*プロパティ名には大文字は含まれず、接頭辞「data」の後に少なくとも1つの文字が必要です.

*属性値は、任意の文字列であってもよい.

率直に言えばdata属性の応用であり、HTMLラベルに暗黙的にいくつかのデータを添付することができ、Javascriptはこれらの属性データに対して / 操作を行うことができ、さらに相応の動作とイベントを行うことができる.
【2 Bootstrapのdataプロパティ】公式サイトでは data API Bootstrap ， JavaScript 。 Bootstrap API， 。と紹介されています
従来,オリジナルのjavascrptを用いた場合,フロントエンドスタイルレイアウトや必要なインタラクションイベントを特定してから,JavascriptやHTMLのDOMツリーを用いて既存のテキストオブジェクトを操作し,動的効果などのインタラクションを実現した.その後、フェイスブック会社は、ドロップダウンメニュー、折りたたみ、モードボックスなど、多くの基本的なWebページで効果がよく使われていることを発見しました.なぜこれらの一般的な標準モデルを抽出して使用規則を制定し、使用時にこれらの規則に従って直接使用すればよいのか、Bootstrapが誕生した.言い換えれば、以前は機能的なニーズがあってから実現していたということです.今は機能が基本的に上書きされています.js関連の操作関数はもう書いてあります.cssスタイルも書いてあります.使いたいなら直接彼のルールに従って呼び出してください.そしてもっと多様化するためにjsの関数には、ラベルのプロパティに基づいて設定された異なるパラメータ値があります.(実は今jsプラグインは基本的にこのコースで、Javaの各種クラスライブラリも)

   class="xxx"   ，       bootstrap css  ，
                  。

   data-[xx]="yy"  ，          bootstrap      ，   bootstrap.js         。

【3 Bootstrap共通data属性】
1 data-toggle data-toggleは、次のようなイベントタイプでトリガーされます.

data-toggle="dropdown"//    
data-toggle="model" //     
data-toggle="tooltip"//     
data-toggle="tab"//   
data-toggle="collapse"//  
data-toggle="popover"//   
data-toggle="button"//    

一般的なイベントはラベルオブジェクトに作用します.他のラベルオブジェクトの場合、data-targetを使用してイベントのラベルターゲットを指す必要があります.したがってdata-loggleとdata-targetは組み合わせて使用される場合があります.次のように

<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
           
button>

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                    ×
                button>
                code。。。
            div>
        div>
    div>
div>

2 data-dismiss
一般的には、モードウィンドウでモードウィンドウdata-dismiss=「modal」を閉じるために使用されます.
3 data-slide-to、data-slide、data-ride
data-slide-to、data-slide、data-rideは、マルチキャストチャートcarouselに使用されます.

      data-slide      prev   next，                 。
      data-slide-to               ，data-slide-to="2"              ，    0    。
   data-ride="carousel"                      

詳細については、Bootstrapプラグインの概要がわかりませんが、propertyとattribute HTML 5のdata-*データの処理方法BootstrapのJavaScript bootstrapフレームワークのdata-[]カスタムプロパティの理解