Después de descargar e instalar Bootstrap, puede encontrar 12 archivos JS en D:/archivos de programa/nodejs/node_modules/bootstrap/js. Estos archivos JS son 12 complementos jQuery que vienen con Bootstrap. También puede encontrar bootstrap.js y bootstrap.min.js en d:/archivos de programa/nodejs/node_modules/bootstrap/dist/js. Ambos archivos contienen 12 complementos jQuery.
Entre estos 12 complementos de jQuery, los más utilizados son Picture Carousel.js, Tag Switching Tab.js, desplazamiento de la audición Scrollspy.js, Lista desplegable desplegable.js, capa emergente de la caja de módulo Modal.js y el cuadro indicador Tooltip.js .
(I) Imagine Carousel.js
El carrusel de la imagen puede establecer el tamaño de la imagen, la posición, etc. en CSS según sea necesario.
Image Carousel requiere la introducción de jQuery.min.js y carousel.js, o transición. Se pueden introducir para agregar efectos de transición.
<div> <div> <div> <!-- data-ride="carousel" attribute is used to mark the carousel that starts animation playback when the page is loaded --> <div data-ride="carousel" id="carousel-332839"> <ol> <li data-slide-to="0" data-target="#carousel-332839"> </li> <li data-slide-to = "1" data-target = "#carousel-332839"> </li> <li data-slide-to = "2" data-target = "#carousel-332839"> </li> </ol> <l> <div> <div> <img src = "imágenes/chrysanthemum.jpg"/> <viv> <hiT> <h4) <p> Cras Justo Odio, Dapibus AC Facilisis in, eggiors egg quam. Donec Id Elit Non Mi Porta Gravida en Eget Metus. Nulam Id Dolor Id Nibh Ultricies Vehicula Ut Id Elit. </p> </div> </div> <div> <img src = "imágenes/desert.jpg"/> <div> <h4> Segunda etiqueta de miniatura </h4> <p> cras justo odio, dapibus ac facilisis en, egstas eget quam. Donec Id Elit Non Mi Porta Gravida en Eget Metus. Nulam Id Dolor Id Nibh Ultricies Vehicula Ut Id Elit. </p> </div> </div> <div> <img src = "imágenes/hydrangeas.jpg"> <div> <h4> tercera etiqueta de miniatura </h4> <p> cras justo odio, dapibus ac facilisis en, egstas eget quam. Donec Id Elit Non Mi Porta Gravida en Eget Metus. Nulam Id Dolor Id Nibh Ultricies Vehicula Ut Id Elit. </p> </div> </div> </div> <a href="#carousel-332839" data-slide="prev"><span></span></a> <a href="#carousel-332839" data-slide="next"><span></span></a> </div> </div> </div> </div>
(Ii) TABA DE CAMBITA DE Etiqueta.js
El cambio de etiqueta requiere la introducción de jQuery.min.js y tab.js, o transición. Se pueden introducir para agregar efectos de transición.
<div> <div> <div> <div id="tabs-440751"> <ul> <li> <a href="#panel-1" data-toggle="tab">Section 1</a> </li> <li> <a href="#panel-2" data-toggle="tab">Section 2</a> </li> </ul> <div> <div id="panel-1"> <p> I'm in Section 1. </p> </div> <div id = "panel-2"> <p> Estoy en la sección 2. </p> </div> </div> </div> </div> </div> </div> </div> </div>
(Iii) Scrolling escuchando scrollspy.js y la lista desplegable desplegable.js
Combine listas de desplazamiento y desplegable para crear una barra de navegación que pueda desplazarse y escuchar con una lista desplegable.
Necesita establecer un estilo, el estilo de este ejemplo es:
.a, .b {altura: 500px; Ancho: 100%;}. B {Color de fondo: blanco;}. A {Color de fondo: negro;}jQuery.min.js, Droptdown.js, ScrollSpy.js debe ser introducido.
<Body data-spy = "scroll" data-target = "#navbarexample"> <div> <div> <div> <div> <divi id = "navbarexample"> <div> <button type = "botón" data-toggle = "colapse" data-target = "#bs-eexample-navbarpse-1"> <panging> toggle navegación </span> <span> </span> <span> </span> <span> </span> <span> </span> </boton> <a href = "#"> marca </a> </div> <div it = "bs-example-navbar-colapse-1"> <ul> <li> <a href = "#1"> enlaz href = "#2"> enlace </a> </li> <li> <a href = "#3" data-toggle = "desplegable"> desplegable <strong> </strong> </a> <ul> <li> <a href = "#"> Action </a> </li> <li> <a href = "#"> otra acción </a> </li> <ahi> <a otra> <s> " aquí </a> </li> <li> <a href = "#"> enlace separado </a> </li> <li> <a href = "#"> enlace separado </a> </li> <li> <a href = "#"> un enlace más separado </a> </li> </li> </li> </ul> <form rol = "Search" <SviT> <VIn> <button type="submit"> Submit </button> </form> <ul> <li> <a href="#4">Link</a> </li> <li> <a href="#5" data-toggle="dropdown">Dropdown<strong></strong></a> <ul> <li> <a href="#">Action</a> </li> <li> <a href = "#"> otra acción </a> </li> <li> <a href = "#"> algo más aquí </a> </li> <li> </li> <li> <a href = "#"> enlace separado </a> </li> </li> </li> </li> </ul> </div> </div> </iv> </div> </div> </div> <biv Div data data-spy = "scroll" data-target = "#navbarexample">-> <viv> <div id = "1"> </div> <div ID = "2"> </div> <divi Id = "3"> </div> <Div Id = "4" "> </div Id =" 5 "> </div> </div> </div> </div> </div> </div> </div> </div> </div> </body> </html>
(Iv) Capa emergente de marco modal modal.js
Debe presentar jQuery.min.js y modal.js, o puede introducir Transition.js para agregar efectos de transición.
<div> <iv> <a id = "modal-732948" href = "#modal-Container-732948" role = "botón" data-toggle = "modal"> lanzar modal modal </a> <div it = "modal-condainer-732948" rol = "dialo" aria-labelledbyy = "mymodallAllAbel" aria "aria" aria "aria" aria "aria" aria "aria" aria "verdad" <div> <div> <div> <button type = "button" data-dismiss = "modal" aria-hidden = "true"> × </boton> <h4 id = "mymodallabel"> modal title </h4> </div> <div> ... </shiv> <div> <button type = "botón" Data-Dississ = "modal"> Cerrar </play> <button de botón </"Button" Button "Button" Button ". </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </shi </div>
(V) cuadro de inmediato ToolTip.js
Debe presentar jQuery.min.js y ToolTip.js, o puede introducir Transition.js para agregar efectos de transición.
Además, el complemento ToolTip no es como otros complementos, no es un complemento CSS puro. Para usar este complemento, debe usar jQuery para activarlo.
$ (function () {$ ("[data-toggle = 'tooltip']"). tooltip ();}); <Body style = "relleno: 100px;" > <a href = "#" data-toggle = "tooltip"> tooltip predeterminado </a> <br/> <a href = "#" data-toggle = "tooltip" data-placation = "left"> tooltip en la izquierda </a> <BR/> <a href = "#" data-toggle = "tooltip" data-placmacement = "top"> top </ab/"top </aBR/</aBR/" Tooltip "Data-Placmacion =" Top "> <a href = "#" data-toggle = "tooltip" data-placsion = "fondo"> toolTip en la parte inferior </a> <br/> <a href = "#" data-toggle = "tooltip" data-placsion = "right"> tooltip en el directo </a> <br/> <botón tipo = "botón" data-toggle = "tooltip"> tooltip <> tooltip </button </botón de botón </botón de botón <bron). type="button" data-toggle="tooltip" data-placement="left">Tooltip on the left</button> <br/> <button type="button" data-toggle="tooltip" data-placement="top">Tooltip at the top</button> <br/> <button type="button" data-toggle="tooltip" data-placement="bottom">Tooltip at the bottom</button> <br/> <botón tipo = "botón" data-toggle = "tooltip" data-placsion = "right"> toolTiP a la derecha </botón> </body>Maravilloso intercambio de temas: jQuery Picture Carousel JavaScript Picture Carousel Bootstrap Picture Carousel
Si aún desea estudiar en profundidad, puede hacer clic aquí para estudiar y adjuntar 3 temas emocionantes a usted:
Tutorial de aprendizaje de bootstrap
Tutorial práctico de bootstrap
Tutorial de uso de la mesa de bootstrap
Este artículo se ha compilado en el "Tutorial de uso de complementos de bootstrap", y todos son bienvenidos a aprender y leer.
Lo anterior es todo el contenido de este artículo. Espero que sea útil para el aprendizaje de todos y espero que todos apoyen más a Wulin.com.