Bootstrap - Visão geral dos plug-ins
Os componentes discutidos nos capítulos anteriores em Layout Componentssão apenas o começo. O Bootstrap vem com 12 plug-ins jQuery que estendem os recursos e podem adicionar mais interação ao seu site. Para começar com os plug-ins JavaScript do Bootstrap, você não precisa ser um desenvolvedor JavaScript avançado. Utilizando a API Bootstrap Data, a maioria dos plug-ins pode ser acionada sem escrever uma única linha de código.
Os plug-ins Bootstrap podem ser incluídos em seu site de duas formas -
Individually- Usando arquivos * .js individuais do Bootstrap . Alguns plug-ins e componentes CSS dependem de outros plug-ins. Se você incluir plug-ins individualmente, certifique-se de verificar essas dependências nos documentos.
Ou compiled (all at once)- Usando bootstrap.js ou bootstrap.min.js minificado . Não tente incluir ambos, pois bootstrap.js e bootstrap.min.js contêm todos os plug-ins em um único arquivo.
Todos os plug-ins dependem do jQuery. Portanto, jQuery deve ser incluído antes dos arquivos de plug-in. Verifique bower.json para ver quais versões do jQuery são compatíveis.
Atributos de dados
Todos os plug-ins Bootstrap são acessíveis usando a API de dados incluída. Portanto, você não precisa incluir uma única linha de JavaScript para invocar qualquer um dos recursos do plugin.
Em algumas situações, pode ser desejável desativar essa funcionalidade da API de dados. Se você precisar desligar a API de dados, poderá desvincular os atributos adicionando a seguinte linha de JavaScript -
$(document).off('.data-api')
Para desligar um plugin específico / único, basta incluir o nome do plugin como um namespace junto com o namespace data-api como este -
$(document).off('.alert.data-api')
API programática
Os desenvolvedores do Bootstrap acreditam que você deve ser capaz de usar todos os plug-ins puramente por meio da API JavaScript. Todas as APIs públicas são métodos únicos e encadeados e retornam a coleção usada, digamos, por exemplo -
$(".btn.danger").button("toggle").addClass("fat")
Todos os métodos aceitam um objeto de opções opcionais, uma string que tem como alvo um método específico, ou nada (que inicia um plugin com comportamento padrão) como mostrado abaixo
// initialized with defaults
$("#myModal").modal()
// initialized with no keyboard
$("#myModal").modal({ keyboard: false })
// initializes and invokes show immediately
$("#myModal").modal('show')
Cada plugin também expõe seu construtor bruto em um Constructorpropriedade: $ .fn.popover.Constructor . Se você gostaria de obter uma instância particular do plugin, recupere-o diretamente de um elemento -
$('[rel = popover]').data('popover').
Sem conflito
Plug-ins de bootstrap às vezes podem ser usados com outras estruturas de IU. Nessas circunstâncias, podem ocorrer ocasionalmente colisões de namespace. Para superar esta chamada.noConflict no plugin do qual você deseja reverter o valor.
// return $.fn.button to previously assigned value
var bootstrapButton = $.fn.button.noConflict()
// give $().bootstrapBtn the Bootstrap functionality
$.fn.bootstrapBtn = bootstrapButton
Eventos
O Bootstrap fornece eventos personalizados para a maioria das ações exclusivas do plugin. Geralmente, esses eventos vêm em duas formas -
Infinitive form- Isso é acionado no início de um evento. Ex: show . Os eventos infinitivos fornecem a funcionalidade preventDefault . Isso fornece a capacidade de interromper a execução de uma ação antes que ela comece.
$('#myModal').on('show.bs.modal', function (e) {
// stops modal from being shown
if (!data) return e.preventDefault()
})
Past participle form- Isso é acionado na conclusão de uma ação. Por exemplo, mostrado.