O que é o atributo `data-target` no Bootstrap 3?

93

Você pode me dizer qual é o sistema ou comportamento por trás do data-targetatributo usado pelo Bootstrap 3?

Eu sei que o data-toggle usado para apontar API JavaScript de Bootstrap de funcionalidade gráfica.

darkomen
fonte

Respostas:

112

data-targeté usado pelo bootstrap para tornar sua vida mais fácil. Você (principalmente) não precisa escrever uma única linha de Javascript para usar seus componentes JavaScript pré-fabricados .

O data-targetatributo deve conter um seletor CSS que aponta para o elemento HTML que será alterado.

Exemplo de código modal de 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>

Neste exemplo, o botão data-target="#myModal", se você clicar nele, <div id="myModal">...</div>será modificado (neste caso desbotado). Isso acontece porque #myModalnos seletores CSS aponta para elementos que possuem um idatributo com o myModalvalor.

Mais informações sobre o atributo HTML5 "data-": https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_data_attributes

Pascalmh
fonte
isso é como um mecanismo seletor de CSS e nada mais?
darkomen
@miltone - exatamente, não gosto. data-targetaceita um seletor CSS que aponta para o elemento relevante.
PhistucK
18

A alternância diz ao Bootstrap o que fazer e o destino diz ao Bootstrap qual elemento será aberto. Assim, sempre que um link como esse for clicado, um modal com um id “basicModal” aparecerá.

user3098847
fonte