Bootstrap.js

Olhando a documentação e lendo o arquivo javascript do framework (e olhando posts no stackoverflow) eu consegui entender em partes e percebi o jquery.

Button.prototype.toggle = function () {
    var changed = true
    var $parent = this.$element.closest('[data-toggle="buttons"]')

    if ($parent.length) {
      var $input = this.$element.find('input')
      if ($input.prop('type') == 'radio') {
        if ($input.prop('checked')) changed = false
        $parent.find('.active').removeClass('active')
        this.$element.addClass('active')
      } else if ($input.prop('type') == 'checkbox') {
        if (($input.prop('checked')) !== this.$element.hasClass('active')) changed = false
        this.$element.toggleClass('active')
      }
      $input.prop('checked', this.$element.hasClass('active'))
      if (changed) $input.trigger('change')
    } else {
      this.$element.attr('aria-pressed', !this.$element.hasClass('active'))
      this.$element.toggleClass('active')
    }
  }

O curso de jquery pelo que vi aborda esta parte, certo ?

Pois estou curisoso com o porques de :

<a href="#" class="dropdown-toggle" data-toggle="dropdown">

<button type="button" data-toggle="collapse"  data-target=".navbar-collapse" class="navbar-toggle">

Curioso com o pq devo passar estes nomes desta forma com estes atributos data e como eles se relacionam no jquery

:DDDDDDDDDDDD