Respostas:
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-target
atributo 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 #myModal
nos seletores CSS aponta para elementos que possuem um id
atributo com o myModal
valor.
Mais informações sobre o atributo HTML5 "data-": https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_data_attributes
data-target
aceita um seletor CSS que aponta para o elemento relevante.
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á.