O plug -in de colapso facilita a dobra da área da página. Se você o usa para criar uma navegação em colapso ou um painel de conteúdo, ele permite muitas opções de conteúdo.
Se você deseja fazer referência à funcionalidade do plug -in individualmente, é necessário fazer referência a colapso.js ou, como mencionado no capítulo Visão geral do plug -in de bootstrap , você pode fazer referência ao bootstrap.js ou versões compactadas do bootstrap.min.js.
1. Uso
A tabela a seguir lista o plug-in de colapso para lidar com a escala pesada:
Você pode usar o plug -in de colapso de duas maneiras:
Através do atributo de dados: adicione data-toggle = "colapso" e alvo de dados ao elemento para atribuir controles automaticamente aos elementos dobráveis. A propriedade-alvo de dados aceita um seletor CSS e aplica um efeito de colapso. Certifique -se de adicionar classe .collapse ao elemento dobrável. Se você deseja que seja por padrão, adicione uma classe extra .in.
Para adicionar um gerenciamento dobrado de agrupamento semelhante ao painel ao controle dobrável, adicione o Data Property Data-Parent = "#Selector".
Através do JavaScript : O método de colapso pode ser ativado por meio de JavaScript, como mostrado abaixo:
$ ('. colapso'). Colapso ()
2. Exemplos
O conteúdo pode ser colapso clicando.
// Exemplo básico
<Button data-toggle = "colapso" data-alget = "#content"> bootstrap </button> <div id = "content"> <div> bootstrap é um kit de ferramentas de código aberto para o desenvolvimento do front-end lançado pelo Twitter. Foi desenvolvido pelo designer do Twitter Mark Otto e Jacob Thornton e é uma estrutura CSS/HTML. Atualmente, a versão mais recente do Bootstrap é 3.0. </div> </div>
// dobragem de acordeão
<div id = "acordeão"> <div> <div> <h4> <a href = "#colapsone" data-toggle = "colapso" data-parent = "#acordeion"> clique em mim para exibir e clique em mim para dobrar, parte 1 </a> </h4> </div id id = "colapsone"> <> </div> </div> </div> <div> <h4> <a href = "#collapsetwo" data-toggle = "colapso" data-parent = "#acordeion"> clique em mim para exibir e clique em dobrar, parte 2 </a> </h4> </div> Part = "collapsetwo"> </div> </div> </div> <div> <div> <h4> <a href = "#collapsethree" data-toggle = "colapso" data-parent = "#acordeion"> clique em mim para exibir, depois clique em dobrar, parte 3 </a> </h4> </div> <divid id = "collapsethree"> </div> </div> </div> </div>
// Efeito de acordeão
$ ('#colapsone,#colapsetwo,#collapsethree, #collapsefour'). colapso ({parent: '#accordion', alternativa: false,});// Ligue manualmente
$ ('botão'). on ('clique', function () {$ ('#colapsone'). colapso ({altern: true,});});// O método de colapso também fornece três parâmetros: ocultar, mostrar e alternar.
$ ('#colapsone'). colapso ('hide'); $ ('#colapsetwo'). colapso ('show'); $ ('botão').Existem quatro tipos de eventos no plug-in de colapso.
// eventos, outras semelhanças
$ ('#colapsone'). on ('show.bs.collapse', function () {alert ('livre quando o método do show é chamado');});Espero que este artigo seja útil e inspirador para aprender sobre o plug-in de colapso do Bootstrap.