Boostrap fornece 12 plugins JavaScript, incluindo:
Transição de animação
Modal modal
Menu suspenso
Scrollspy
Guia
Poting Box Tooltip
Popover
Alerta da caixa de aviso
Botão
Colapso
Carrossel rotativo
Posicionando automaticamente o float afixo
Janela pop-up modal
<div> <div> <div> <div> <button type = "button" data-dismiss = "modal" aria-hidden = "true"> × </button> <h4> título modal </h4> </div> <div> button. Data-Dismiss = "Modal"> Salvar </botão> </div> </div> </div>
Menu puxador
Uso declarativo
Geralmente, o menu suspenso é implementado na barra de navegação (NavBar) e na TAB (TAB).
<div id = "Nav-Exemplo"> <a href = "#"> nome do projeto </a> <ul role = "navegação"> <li> <a data-toggle = "suspenso" role = "button" href = "#" id = "Drop1"> DropDown <b> </b> </a> <ul arria-like ">" href = "#" tabindex = "-1" role = "menuitem"> action1 </a> </li> <li role = "Apresentação"> <a href = "#" tabindex = "-1" role = "Menuitem"> Action2 </a> </li> <li [role = "Apresentação"> <ai " </li> </li> </li> <li> <a data-toggle = "suspenso" role = "button" href = "#" id = "drop2"> suspenso2 <b> </b> </a> <ul Aria-labelledby = "Drop2" Role = "Menu"> <li = "Apresentação"> <a href = " Role = "Menuitem"> Action4 </a> </li> <li role = "Apresentação"> <a href = "#" tabindex = "-1" role = "menuitem"> Action5 </a> </li> <li role = "Apresentação"> <a href = "#" Taba = "-1" Role = "MenemMenem"> </li></ul> </li> </ul> </div>
Guia
<%-Guia da barra de navegação-%> <ul> <li> <a href = "#home" data-toggle = "tab"> home </a> </li> <li> <a href = "#perfil" data-toggle = "table"> perfil </a> </li> <li> <a href = "#"#"data-tggle"> "TABLE"> " href = "#Configurações" data-toggle = "tab"> Configurações </a> </li> </ul> <%-Tab Painel-%> <div> <div id = "home"> home ... </div> <div id = "perfil"> perfil ... </div> <id id = "mensagens"> ... <//Div = <d id = "Settings" Settings "> Settings ...
Caixa rápida
<botão Data-original-title = "ToolTip na esquerda" Data-toggle = "Tooltip" Data-posting = "Left"> ToolTip na esquerda </botão> <Button Data-original-title = "Tooltip em cima" Data-Toggle = "Tooltip" Data-placement = "Top"> Tooltip em cima </Button> <butro> <butrotgle = "Datatip" Data-placement = "top"> data-toggle = "Tooltip" Data-posting = "Bottom"> ToolTip na parte inferior </botão> <Button Data-original-title = "ToolTip na parte inferior" data-toggle = "Tooltip" Data-placement = "Bottom"> Tooltip "Datatip em baixo </botão> <butão-original-title =" Ferramenta "Fooltip"> "Tooltip "-Toggle (Button> <butter-original-title =" Ferramenta "Ferramenta" Ferramenta "Ferramenta" Ferramenta)
Caixa de aviso
<div> <botão data-mismiss = "alert" type = "button"> x </button> <h4> título de aviso </h4> <p> Altere isso e isso e tente atrás. </p> </div>
dobrar
<div id = "acordeão"> <div> <div> <h4> <a data-toggle = "colapso" data-parent = "#acordeion" href = "#acordeão"> elemento de gatilho#1 </a> </h4> </div> </div id = "colapsone"> <div> dobro ...
Carrossel rotativo
<div data-ride = "carouse1" id = "contêiner"> <%------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- Data-Slide-to = "2" Data-Target = "#Container"> </li> </ol> <%-Botões de controle esquerdo e esquerdo-%> <a data-slide = "prev" href = "#container"> <purn> </span> </a> <a dados-slide = "prev" href = "#"> "> </a> </a> <a dados-slide =" prev "href ="#">">
O acima é o capítulo plug-in javascript do tutorial básico de boostrap apresentado a você pelo editor. Espero que seja útil para você. Se você tiver alguma dúvida, deixe -me uma mensagem e o editor responderá a você a tempo. Muito obrigado pelo seu apoio ao site wulin.com!