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.