Boostrap proporciona 12 complementos de JavaScript, que incluyen:
Transición de animación
Modal modal
Menú desplegable
Desplazamiento
Pestaña
Taloteo de herramientas de cuadro de solicitud
Popover
Alerta de caja de advertencia
Botón
Colapsar
Carrusel giratorio
Colocar automáticamente el flotador de float
Ventana emergente modal
<div> <iv> <div> <div> <button type = "button" data-dismiss = "modal" aria-hidden = "true"> × </boton> <h4> Título modal </h4> </div> <div> <p> Esto es lo que muestra la ventana de ventana .... data-dismiss = "modal"> save </boton> </div> </div> </div>
Menú desplegable
Uso declarativo
En general, el menú desplegable se implementa en la barra de navegación (Navbar) y la pestaña (pestaña).
<div id = "Nav-Example"> <a href = "#"> Nombre del proyecto </a> <ul role = "navegación"> <li> <a data-toggle = "desplegable" rol = "botón" href = "#" id = "drop1"> Dropdown <b> </b> </a> <ul Aria-labelledby = "Drop1" Menú = "Menú"> <li "<li" <li " href = "#" tabindex = "-1" rol = "Menuitem"> Action1 </a> </li> <li role = "presentación"> <a href = "#" tabindex = "-1" role = "menuitem"> Action2 </a> </li> <li role = "Presentation"> <a href = "#" Tabindex = "-1" Role = "Menuitem" </li> </ul> </li> <li> <a data-toggle = "desplegable" rol = "botón" href = "#" id = "drop"> desplegable2 <b> </b> </a> <ul aria-labelledby = "drop2" rol = "menú"> <li role = "Presentación"> <a href = "#" Tabindex = "-1" "" "" "" "" "" "" " rol = "Menuitem"> Action4 </a> </li> <li role = "presentación"> <a href = "#" tabindex = "-1" role = "menuitem"> Action5 </a> </li> <li rol = "presentación"> <a href = "#" tabindex = "-1" rol = "menuitem"> Action6 </a>>>> </li> </ul> </li> </ul> </div>
Pestaña
<%-pestaña de barra de navegación-%> <ul> <li> <a href = "#home" data-toggle = "tab"> inicio </a> </li> <li> <a href = "#perfil" data-toggle = "tab"> perfil </a> </li> <li> <a href = "#mensajes" toggle = "tab"> mensajes </a> </li> <li> <li> <li> href = "#settings" data-toggle = "tab"> configuración </a> </li> </ul> <%-panel de tabulación-%> <div> <divi id = "home"> home ... </div> <div it = "perfil"> perfil ... </div> <div ity = "mensajes"> mensajes ... </div> <div it = "configuraciones"> calificaciones ... </div> </div>
Casilla rápida
<Botton Data-Original-Title = "ToolTip on Left" Data-Toggle = "ToolTip" data-placation = "Left"> ToolTip on Left </boton> <Button Data-Original-Title = "ToolTip en Top" Data-Toggle = "Tooltip" Data-placmacment = "Top"> Tope en Top </Botton <Botton Data-Original-Title = "Tooltip-placacmacion" Top "Top" data-toggle = "Tooltip" data-placsion = "fondo"> Intervisión de herramientas en la parte inferior </boton> <botón data-original-title = "ToolTip on Bottom" Data-toggle = "ToolTip" Data-placation = "Bottom"> ToolTip on Bottom </Button> <Button Data-Original-TITLE = "TOUCHT-TOOL TOULLAT ON DATA DAT
Caja de advertencia
<div> <button data-Mismiss = "alerta" type = "botón"> x </botón> <h4> Título de advertencia </h4> <p> Cambie esto y aquello e intente logoin. </p> </div>
doblar
<div id = "acordeón"> <div> <div> <h4> <a data-toggle = "colapso" data-parent = "#acorkion" href = "#acorkion"> Elemento de activación#1 </a> </h4> </div> <diMid = "colapso"> <div> plegar contenido ...
Carrusel giratorio
<div data-recide = "Carouse1" id = "Container"> <%-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- ----------------------------------------------------------------------------------------------- data-slide-to = "2" data-target = "#contenedor"> </li> </ol> <%-botones de control de izquierda e izquierda-%> <a data-slide = "previo" href = "#contenedor"> <span> </span> </a> <a data-slide = "previo" href = "#contenedor"> <pan> <pan> </a> </siv>
Lo anterior es el capítulo de complemento JavaScript del tutorial básico de Boostrap presentada por el editor. Espero que te sea útil. Si tiene alguna pregunta, déjame un mensaje y el editor le responderá a tiempo. ¡Muchas gracias por su apoyo al sitio web de Wulin.com!