Latest web development tutorials

Bootstrap Overview plug-in

Na seção anterior discutiuo layout dos componentes para a montagem é apenas o começo.Bootstrap vem com 12 tipos plugin jQuery estende a funcionalidade pode ser adicionada ao site mais interativo. Mesmo se você não for um desenvolvedor experiente JavaScript, você também pode começar a aprender os plug-ins Bootstrap JavaScript. API Use Bootstrap de Dados (Bootstrap API de dados), a maior parte do plug-in pode ser acionado sem escrever qualquer código.

Site referencia plugue Bootstrap de duas maneiras:

  • Citar Alone: usar separado arquivos* .jsde Bootstrap.Alguns plug-ins e CSS componente depende de outros plug-ins. Se você conectar uma referência separada, certifique-se de que eles entendem as dependências entre os plug-ins.
  • Compilar (simultaneamente) Citações: Usebootstrap.jsou versão comprimida debootstrap.min.js.
    Não tente citar esses dois arquivos, e por causa bootstrap.jsbootstrap.min.js conter todos os plugins.
Todos os plug-ins contar com jQuery. Você deve ser referenciado no arquivo plugin jQuery antes. Visite bower.json ver Bootstrap versão atualmente suportada do jQuery.

dados de propriedade

  • Você só pode ser capaz de usar todos os dados atributo Bootstrap API plugin, sem escrever uma única linha de código JavaScript. Esta é uma API Bootstrap primeira classe, deve ser a sua forma preferida.
  • Então, novamente, em alguns casos, pode ser necessário desativar esse recurso. Portanto, nós também oferecemos um método fechado API atributo de dados, ou seja, para levantar o namespace-api dadose obrigatória para os eventos do documento. Tais como os seguintes: 
    $ (Documento) .off ( '. Data-api')
  • Para fechar um plug-in específico, pouco antes do namespace-api dados mais o nome do widget como um espaço de nomes, como mostrado aqui: 
    $ (Documento) .off ( '. Alert.data-api')

API programático

Nós fornecemos uma maneira de pura API JavaScript para todos os plugins Bootstrap. Todas as chamadas de API pública são suportados individualmente ou no modo encadeado, e retorna um conjunto de elementos que atua (Nota: a forma e invocar acordo jQuery). Por exemplo: 

$ ( ". Btn.danger"). Button ( "toggle"). AddClass ( "fat")

Todos os métodos podem ter um opções opcionais objeto como um parâmetro, ou uma string representando um método particular, ou sem parâmetros (neste caso, ele irá inicializar o plug-in para o comportamento padrão), como segue: 

// Inicializado para o comportamento padrão do $ ( "# myModal"). Modal ()    
 // Inicializar teclado não suporta o $ ( "# myModal") modal ({keyboard: false}).  
// Inicializar e chamar o show imediatamente
$ ( "# MyModal"). Modal ( 'show')

Cada plug-in na propriedadeConstructor também expõe seuconstrutor original:$ .fn.popover.Constructor.Se você deseja obter uma instância de um widget especial que você pode obter diretamente através dos elementos da página: 

 $ ( '[Rel = popover]'). Dados ( 'popover').

Evitar conflitos de namespace

Às vezes plugins Bootstrap pode precisar de ser usado com outros frameworks de UI. Neste caso, as colisões de espaço de nomes pode ocorrer. Infelizmente, se isso acontecer, você pode restaurar o seu valor original, chamando os métodos Widget.noConflict.

// Retorna $ .fn.button antes do valor de var atribuído bootstrapButton = $ .fn.button.noConflict () 
// Para o $ (). Funções BootstrapBtn conferido Bootstrap					       
$ .fn.bootstrapBtn = BootstrapButton

evento

Bootstrap fornece um evento personalizado como um comportamento único da maioria dos plug-ins. Geralmente, esses eventos vêm em duas formas:

  • Infinitivo: Este será acionado quando o evento começa.Comoex: show.evento infinitivo fornece uma funçãopreventDefault.Isto faz com que seja possível interromper a operação começou antes do evento. 
    $ ( "# MyModal '). Em (' show.bs.modal ', function (e) {
// Caixa de modal Prevenir é exibida se (Data!) Retornar e.preventDefault () 
})
  • forma particípio passado: Este será acionado quando a operação for concluída.Comoex: mostrado.