Bootstrap tutorial básico

Bootstrap plugins

Plugin de Efeito de Transição Bootstrap Criar uma Página Web com Bootstrap

Introdução aos Plugins Bootstrap

no início componentes de layout Os componentes discutidos no capítulo são apenas o começo. O Bootstrap vem com 12 jQuery plugin, que expande as funcionalidades e pode adicionar mais interatividade ao site. Mesmo que você não seja um desenvolvedor JavaScript avançado, você pode começar a aprender os plugins JavaScript do Bootstrap. Utilizando o API de dados do Bootstrap (Bootstrap Data API), a maioria dos plugins pode ser acionada sem a necessidade de escrever nenhum código.

Existem duas maneiras de referenciar plugins do Bootstrap em um site:

referência separada：Use o Bootstrap individualmente *.js Alguns plugins e componentes CSS dependem de outros plugins. Se você chamar o plugin separadamente, certifique-se primeiro de entender as dependências entre esses plugins.
compilação (ao mesmo tempo) referência：Use bootstrap.js ou a versão comprimida bootstrap.min.js. Não tente chamar esses dois arquivos ao mesmo tempo, porque bootstrap.js e bootstrap.min.js Eles contêm todos os plugins.

Todos os plugins dependem do jQuery. Portanto, é necessário chamar o jQuery antes do arquivo do plugin. Acesse bower.json Ver a versão atual do jQuery suportada pelo Bootstrap.

Atributo data

Você pode usar todos os plugins do Bootstrap apenas através da API de atributo data, sem precisar escrever uma linha de código JavaScript. Esta é uma API de primeira classe no Bootstrap e também deve ser sua preferência.
De qualquer forma, em alguns casos, pode ser necessário desativar essa função. Portanto, também fornecemos um método para desativar a API de atributo data, ou seja, desvincular data-api Para nomear o espaço de nomes e vincular eventos ao documento. Assim como abaixo:
```
$(document).off('.data}}-api')
```
Para fechar um plugin específico, basta remover o evento de data-Adicione o nome do plugin como espaço de nomes antes do espaço de nomes do plugin, conforme mostrado a seguir:
```
$(document).off('.alert.data-api')
```

API de programação

Oferecemos APIs de JavaScript puras para todos os plugins Bootstrap. Todas as APIs públicas são suportadas para chamadas separadas ou em cadeia e retornam a coleção de elementos que operam (notação: idêntica à forma de chamada do jQuery). Por exemplo:

$(".btn.danger").button("toggle").addClass("gordo")

Todos os métodos podem aceitar um objeto de opções opcional como parâmetro, uma string que representa um método específico ou nenhum parâmetro (neste caso, o plugin será inicializado com o comportamento padrão), conforme mostrado a seguir:

//　Inicializa para comportamento padrão
$("#myModal").modal()　　　　
　//　Inicializa para não suportar teclado　　　　　　　　　　　　　　　
$("#myModal").modal({ keyboard: false })　　
//　inicializa e chama imediatamente show
$("#myModal").modal('show')

Cada plugin em Constructor A propriedade também expõe sua função construtora original:$.fn.popover.Constructor。Se você quiser obter um exemplo de um plugin específico, você pode fazer isso diretamente pelo elemento da página:

　$('[rel=popover]').data('popover').

evitar conflito de nomes de espaço

Às vezes, os plugins Bootstrap podem precisar ser usados com outras frameworks UI. Neste caso, pode ocorrer conflito de nomes de espaço. Se isso acontecer, você pode chamar o plugin .noConflict Método recupera seu valor original.

//　Retorna o valor anterior de $.fn.button
var bootstrapButton = $.fn.button.noConflict()　
//　Para atribuir funcionalidade Bootstrap a $().bootstrapBtn　　　　　　　　　　　　　　　　　　　　　　　　　　　
$.fn.bootstrapBtn = bootstrapButton

evento

Bootstrap oferece eventos personalizados para comportamentos únicos de maioria dos plugins. Geralmente, esses eventos têm duas formas:

forma verbal infinitiva：Será acionado no início do evento. Por exemplo ex: mostrarA forma verbal infinitiva de evento oferece prevenirEventoPorPadrão Função. Isso permite que a execução da operação seja interrompida antes do início do evento.
```
$('#myModal').on('show.bs.modal', function (e) {
//　Prevenir a Exibição do Modal
　　if (!data) return e.preventDefault()　
)
```
Forma Passada：这将触发动作执行完毕后。例如 ex: mostrado.

Plugin de Efeito de Transição Bootstrap Criar uma Página Web com Bootstrap