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.

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


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

Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.