O Bootstrap, do Twitter, é a estrutura de front-end mais popular no momento. O Bootstrap é baseado em HTML, CSS e JavaScript. É simples e flexível, tornando o desenvolvimento da Web mais rápido. Em seguida, durante este artigo, apresentarei a você o exemplo do uso do plug-in de dobragem (colapso) do Bootstrap (colapso). Vamos dar uma olhada!
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 separadamente, é necessário fazer referência a colapso.js. Ao mesmo tempo, você também precisa fazer referência ao plug -in de transição na sua versão de bootstrap. Ou, como mencionado no capítulo Visão geral do plug -in Bootstrap, você pode consultar o bootstrap.js ou versões compactadas do bootstrap.min.js.
Você pode usar o plug -in de colapso:
Crie um painel dobrável ou dobrável dobrável da seguinte maneira:
<! Doctype html> <html> <head> <title> Instância de bootstrap - painel dobrável </ititle> <link href = "/bootstrap/css/bootstrap.min.css" rel = "StyleSheet"> <Script src = "/scripts/jquery.min.js"> " src = "/bootstrap/js/bootstrap.min.js"> </script> <body> <div id = "acordeion"> <div> <h4> <a data-toggle = "colapso" data-parent = "#acordeion" href = "#colapsone"> clique em mim para me expandir, clique para colapsar novamente. Parte 1 </a> </h4> </div> <div id = "colapsone"> <div> nihil anim keffiyeh helvetica, cerveja artesanal wes anderson credit nesciunt sapientte ea proident. AD VEGAN, exceto o Butcher Vice Lomo. Parte 2 </a> </h4> </div> <div id = "colapsetwo"> <div> nihil anim keffiyeh helvetica, cerveja artesanal wes Anderson credit nesciunt sapiente e proident. AD VEGAN, exceto o Butcher Vice Lomo. Parte 3 </a> </h4> </div> <div id = "collapsethree"> <div> nihil anim keffiyeh helvetica, cerveja artesanal wes Anderson credit nesciunt sapiente e proident. Ad vegan, exceto o vice -lomo de açougueiro.
Os resultados são os seguintes:
Data-toggle = "colapso" é adicionado ao link ao componente que você deseja expandir ou colapsar.
A propriedade HREF ou alvo de dados é adicionada ao componente pai e seu valor é o ID do componente filho.
A propriedade dos pais de dados adiciona o ID do painel colapsado ao link do componente a ser expandido ou desmoronado.
Crie um componente dobrável simples sem a etiqueta de acordeão, como mostrado abaixo:
<! DOCTYPE html> <html> <head> <title> Instância de bootstrap- Componente dobrável simples </title> <link href = "/bootstrap/css/bootstrap.minmin.css" Rel = "StyleSheet"> <Script Src = "/scripts/jQuery.min.nin.nin.nin. src = "/bootstrap/js/bootstrap.min.js"> </script> <body> <botão tipo = "button" data-toggle = "colapso" data-target = "#Demo"> componente dobrável simples </button> <Div Id = "Demo"> nihil e keffiyeh helvetica AD VEGAN, exceto o vice -lomo de açougueiro
Os resultados são os seguintes:
Como você pode ver na instância, criamos um componente dobrável, diferentemente do painel dobrado, não adicionamos o parente de dados da propriedade.
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 ()Opções
Existem algumas opções que são passadas pelas propriedades de dados ou JavaScript. A tabela a seguir lista estas opções:
método
Aqui estão alguns métodos úteis nos plugins de colapso:
Exemplo
O exemplo a seguir demonstra o uso do método:
<! Doctype html> <html> <head> <title> Instância de bootstrap - Método de plug -in de colapso </ititle> <link href = "/bootstrap/css/bootstrap.minmin.css" rel = "StyleSheet"> <Script Src = "/scripts/jQuery.min.nin.nin.nin.nin.nin.nin.nin.nin.nin.nin.nin.nin.nin.nin.nin.JSin.JSIN.MIN.NIN.NIN.NIN.NIN.NIN.MIN.NIN.NIN.NIN.NIN.NIN.NIN.NIN.NIN.NIN.NIN.NIN.NIN.NIN.NIN.NIN.NIN.NIN.NIN.NIN.NIN.NIN.NIN.NIN.NIN.NIN.NIN.NIN.NIN.NIN.NIN.NIN. src = "/bootstrap/js/bootstrap.min.js"> </script> <body> <div id = "acordeion"> <div> <h4> <a data-toggle = "colapso" data-parent = "#acordeion" href = "#colapsone"> clique em mim para me expandir, clique para colapsar novamente. Parte 1-Método de Hide </a> </h4> </div> <div id = "colapsone"> <div> nihil anim keffiyeh helvetica, cerveja artesanal trabalhista de trabalho wes anderson credit nesciunt sapiente ea proident. AD VEGAN, exceto o Butcher Vice Lomo. Parte 2 -Método de Show </a> </h4> </div> <div id = "colapso"> <div> nihil anim keffiyeh helvetica, cerveja artesanal wes Anderson credit nesciunt sapiente ea proident. AD VEGAN, exceto o Butcher Vice Lomo. Parte 3-Método-toggle </a> </h4> </div> <div id = "collapsethree"> <div> nihil anim keffiyeh helvetica, cerveja artesanal wes anderson credit nesciunt sapiente ea proident. AD VEGAN, exceto o Butcher Vice Lomo. Parte 4-Options Method </a> </h4> </div> <div id = "colapsofour"> <div> nihil anim keffiyeh helvetica, cerveja artesanal wes Anderson credit nesciunt sapientte ea proident. AD VEGAN EXCETOEUR Butcher Vice Lomo. $ ('#collapsethree'). COLLAPSE ('alternar')}); $ (function () {$ ('#colapsone'). colapso ('hide')}); </script> </body> </html>Os resultados são os seguintes:
evento
A tabela a seguir lista os eventos a serem usados no plug-in de colapso. Esses eventos podem ser usados como ganchos nas funções.
Exemplo
O exemplo a seguir demonstra o uso de eventos:
<!DOCTYPE html><html><head><title>Bootstrap instance - Collapse plugin event</title><link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"><script src="/scripts/jquery.min.js"></script><script src = "/bootstrap/js/bootstrap.min.js"> </script> <body> <div id = "acordeion"> <div> <h4> <a data-toggle = "colapso" data-parent = "#acordeion" href = "#colapsoxample"> clique em mim para expandir, clique para me colher novamente. -Evento-Shoown </a> </h4> </div> <div id = "colapsoxample"> <div> nihil anim keffiyeh helvetica, cerveja artesanal wes Anderson credit nesciunt sapiente e proident. Anúncio vegan, exceto o açougueiro, vice -lomo.
Os resultados são os seguintes:
O acima é a explicação detalhada do exemplo de uso de plug-in dobrável (colapso) de bootstrap (colapso) introduzido pelo editor. Espero que seja útil para todos!