Esta vez echaremos un vistazo al uso de componentes JS. Este artículo será un poco largo. Espero que todos puedan leerlo con paciencia y creo que habrá muchas ganancias. Muchos amigos del jardín me agregaron a mis amigos y expresaron su estilo de escritura. Es simple y claro. Aquí, gracias nuevamente por su apoyo. Por un lado, mi propia tecnología es limitada y escribo cosas relativamente básicas. Por otro lado, escribo cosas basadas en mi propia comprensión y expreso cosas complejas en el lenguaje más simple. Por lo tanto, si hay algo mal con la escritura, por favor dame algunas correcciones.
1. Referencia de archivo JS
Nota: JQuery debe presentarse antes de otros archivos JS, porque otros complementos dependen de jQuery.
< src = "js/bootstrap.min.js"> </script>
2. Atributos de datos
Función: a través del atributo de datos, puede usar cualquier complemento Bootstrap sin escribir ningún código JS. Los complementos del menú de referencia mencionados anteriormente, como Data-toggle = "desplegable" y otros menús de referencia.
Entonces, dado que hay una función de encendido, ¿cómo apagar la función? Agregue el siguiente código a JavaScript:
<script type = "text/javaScript"> $ (documento) .Off ('. data-api'); </script>Si desea desactivar las funciones de un complemento específico, agregue el siguiente código:
<script type = "text/javaScript"> // cierre la función de complemento del cuadro de solicitud $ (documento) .Off ('. Alert.data-api'); </script>Todos los complementos JS son básicamente los siguientes pasos:
1: ¿Cómo usarlo? --- ¿Cómo escribir la clase correspondiente?
2: ¿Cómo llamar? --- Después de escribir la clase, ¿cómo hacer que la clase que escribe entra en vigencia?
3: Procesamiento de eventos: incluye la ocurrencia antes de que la acción se active y ocurra después de que se inicia la acción
NOTA: Todas las acciones ocurren antes de activar, Bootstrap proporciona evidentes de evasión, lo que implementa detener la acción antes de ejecutarla. El código es el siguiente:
$ ('#mymodal'). on ('show.bs.modal', function (e) {if (! data) return e.preventDefault () // Evite la visualización de la caja modal, por supuesto, también puede cambiar para evitar la aparición de otros complementos})Nota: Bootstrap no toma medidas correctivas para los navegadores que deshabilitan JavaScript. Por lo tanto, necesitamos escribir un código para remediarnos, y creo que todos lo saben.
<roscript> Su navegador no es compatible con JavaScript, descargue el último navegador </roscript>
3. Componente de caja modal (modal.js)
Nota:
1: No es compatible para abrir múltiples cuadros modales al mismo tiempo
2: La caja modal debe ubicarse en el elemento infantil del cuerpo tanto como sea posible para evitar otros componentes que afecten la pantalla y la función de la caja modal.
3: Instrucciones de terminal móvil
4: Mejorar el accesibilidad-Atributo de rol Agregado
5: La vista se puede incrustar en el cuadro modal, es decir, Data-Toggle = "Modal"
Veamos la columna a continuación. Haga clic en el botón y aparecerá un cuadro modal. Con respecto a las propiedades aquí, si ha leído el artículo anterior, creo que no es difícil de entender. No lo explicaré en detalle aquí. Puede publicar el código para probarlo usted mismo:
<! DocType html> <html lang = "zh-cn"> <head> <meta charset = "utf-8"> <meta http-equiv = "x-ua compatible" content = "ie = edge"> <meta name = "viewport" content = "width = dispositivo-width, inicial-scale = 1" <<r!-el 3 meta * Mets * viewport "debe colocar primero * * cualquier otro contenido * debe * seguirlos! -> <title> </title> <link href = "css/bootstrap.css" rel = "stylesheet"> <link href = "css/bootstrap.min.css" rel = "stylesheet"> <link href = "css/style.css" rel = "Stylesheet"> </head> <body> <body> <body> <body> data-toggle = "modal" data-target = ". bs-exame-modal-lg"> Un cuadro modal grande aparece </boton> <div id = "mymodal" tabindex = "-1" rol = "dialog" aria-labelledByBy aria-label="close"> <span aria-hidden="true">×</span> </button> <h4>Modal title</h4> </div> <div> <p>one fine body …</p> </div> <div> <button type="button" data-dismiss="modal">close</button> <button type="button">save changes</button> </div> </div> </div></div><!-- Change the size of the modal box and add the class modal-sm--><button type="button" data-toggle="modal" data-target=".bs-example-modal-sm"> A small modal box pops up</button><div id="mymodal" tabindex="-1" role="dialog" aria-labelledby = "myLargemodallabel"> <div> --- cuadro modal pequeño <div> <div> <button type = "botón" data-dismiss = "modal" aria-label = "cerrar"> <span aria-hidden = "true"> × </span> </boton> <h4> título modal </hiv4> </iv> <p> <p> un cuerpo fino ... <Div> <Botton type = "Button" Data-Dismiss = "Modal"> Close </Button> <Button type = "Button"> Guardar cambios </botón> </div> </div> </div> </div> </div> <!-Los efectos de animación están prohibidos, solo eliminen el fat. src = "http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"> </script> <script src = "js/bootstrap.min.js"> </script> <script type = "text/javaScript"> $ ("#mymodal). modal (" show "); --- Llamar a este código para que el complemento funcione </script> </body> </html>El efecto es el siguiente:
Combinado con cuadros modales , también puede agregar otras funciones al contenido del cuerpo, como cuadros de entrada integrados en el formulario, etc., y no se publica ningún código aquí.
Para eventos en cuadro modal , agregue el siguiente código en JavaScript, como se muestra a continuación:
Copie el código de la siguiente manera: <script src = "http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"> </script> <script src = "js/bootstrap.min.js"> </script> <script type = "text/javaScript"> $ ("#mymodal"). --- Llamar a este código para que el cuadro modal del complemento surta efecto y muestra $ ('#mymodal'). On ('hidden.bs.modal', function (e) {
alerta ("111");
}) --- Este evento significa que el evento de alerta se activará después de cerrar el cuadro modal </script>
Echemos un vistazo a cómo se incrusta la caja modal en el video. Necesitamos agregar algún código, reproducción automática, parada y otras funciones. Echemos un vistazo al código primero
<a href = "#" data-toggle = "modal" data-target = "#videomodal" data-thevideo = "http://v.youku.com/v_show/id_xmtu2odmymduyyma===.html"> video </a> <Div id = "Videomodal" Tabindex = "-1" "Dialog" "" "". aria-labelledby = "videOmodal" aria-hidden = "true"> <div> <div> <div> <button type = "button" data-dismiss = "modal" aria-hidden = "true"> × </boton> <viv> src = "js/jQuery-1.11.3.min.js"> </script> archivo de carga local-> <script src = "http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"> </script> <script src = "js/bootstrap.min.min.js"> <script <script <script <script <script <script <script <script <script <script <script <script <script <script <scry type = "text/javaScript"> // ver función autoplayModal () {var disparar = $ ("cuerpo"). find ('[data-toggle = "modal"]'); Trigger.Click (function () {var hemodal = $ (this) .data ("target"); var videosrc = $ (this) .attr ("data-thevideo"); var videosrcauto = videosrc+"? Autoplay = 1"; $ (Themodal+'ifRame'). Button.Close '). Click (function () {$ (Themodal+' iframe '). Attr (' src ', videosrc);}); }); }); }); } // llame a la función $ (documento) .Ready (function () {autoplayModal ();}); </script> <roscript> no admite el navegador JavaScript </roscript>El efecto ya no es capturas de pantalla, el SRC anterior presenta la dirección de Youku.
4. Componente de monitoreo de desplazamiento
Listado en la barra de navegación, es decir, cambia automáticamente las pestañas de acuerdo con la posición de desplazamiento. Veamos el código.
1: Asegúrese de que aparezca la barra de desplazamiento.
2: Por lo general, agregue el spy de datos al cuerpo, es decir, use data-spy = "scroll" <body data spy = "scroll" data-target = ". Navbar" data offset = "70"> <div id = "myscrollspy"> <Nav rol = "Navegati"> <divi Id = "Navbar-Scroll"> <li> <li> <i <a Href = "#Home" <li><a href="#message">message</a></li> <li><a href="#about">about</a></li> <li> <a href="#about">about</a></li> <li> <a href="#" data-toggle="dropdown">Drop-down Menu<b></b></a> <ul> <li><a href = "#uno"> one </a> <li> <a href = "#dos"> dos </a> <li> <a href = "#tres"> tres </a> </ul> </li> </ul> </div> </div> </ar Nav> <!-Contenido exhibido-> <h1 id = "Home"> Home </h1> <P> 11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 of111111111111 of111111111111 of111111111111ge 11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111. 11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111. A 1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111. 11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111. A 1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111. <P> 11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111. 1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111. 1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111. 1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111. id = "Acerca de"> Acerca de </h1> <p> 11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111. 11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111. A 11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111. A 11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111. A <hr> <h1 id = "one"> one </h1> <p> 11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 < 111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111. 111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111. A 111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111. </p> <h1 id = "two"> two </h1> <p> 11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111. a 111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111. A 111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111. A 111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111. A 11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111. A 1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111. 11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111. A 1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111. 11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111. A 1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111. 11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111. A 1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111. 11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111. A 1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111. 11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111. A 1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111.
Comprenda el significado de la compensación de datos: es decir, el desplazamiento de la parte superior cuando la posición de desplazamiento es. En segundo lugar, su procesamiento de eventos es similar al uso de cajas modales y no se explicará.
Los efectos son los siguientes:
5. Componente de cuadro de inmediato
Aviso:
1: use Data-Toggle = "ToolTiP"
2: La colocación de datos representa la dirección del cuadro de inmediato, hay cuatro direcciones, izquierda, derecha, abajo, arriba
3: La animación de datos es establecer su efecto de animación en False, es decir, después de que el mouse se mueve, cambia de la apariencia gradual original de entrada y salida a una apariencia instantánea, sin un efecto amortiguador.
<viv> <p> <!-Easing-> Este es un título de prueba, <a href = "#" id = "clicKevent" data-toggle = "toolTip" data-plactice = "fondo" data-original-title = "cnblog.com/jtjds" data-animation = "fals" src = "js/jQuery-1.11.3.min.js"> </script> archivo de carga local-> <script src = "http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"> </script> <script src = "js/bootstrap.min.min.js"> <script <script <script <script <script <script <script <script <script <script <script <script <script <script <scry type = "text/javaScript"> $ ('[data-toggle = "tooltip"]'). ToolTip (); // Inicializar $ ('#clickevent'). ToolTip ('show') // abre y muestra directamente $ ('#clickevent'). En ('show.bs.tooltip', function () {alerta ("2222"); mostrado}) </script>6. Componente de marco emergente
Aviso:
1: El cuadro emergente agrega una pequeña capa suspendida a cualquier elemento para almacenar información no principal.
2: Cuando la longitud del contenido es 0, el cuadro emergente no se mostrará. Use Data-Toggle = "Popover"
3: Confíe en el complemento del cuadro de inmediato y debe inicializarse manualmente (ver Inicialización en JavaScript)
Mire el siguiente código y no más capturas de pantalla:
Copie el código de la siguiente manera: <!-Haga clic en el botón para aparecer, luego haga clic en el botón para ocultar->
<botón tipo = "botón" data-toggle = "Popover" Data-Content = "y aquí hay un contenido sorprendente, es muy atractivo, ¿verdad?"> Haga clic en mí para aparecer/ocultar el cuadro emergente </botón>
Al hacer clic en el botón, aparece, luego haga clic en el botón y desaparece. ¿Qué debo hacer si quiero hacer clic en él en un espacio en blanco y ocultarlo?
Simplemente agregue Data Trigger = "Focus" para ocultar el foco, activar el activador de medios.
Copie el código de la siguiente manera: <!- Haga clic en el botón para aparecer, haga clic en cualquier espacio en blanco para ocultarlo. Es mejor usar la etiqueta A, por supuesto que también puede usar el botón->
<a tabindex = "0" id = "mypopover" role = "botón" data-toggle = "Popover"
data-thrigger = "foco" data-content = "y este es un contenido hermoso"> Haga clic en mí para desaparecer </a>
7. Componente de cuadro de advertencia
Aviso:
1: use data-dismiss = "alerta"
2: El complemento puede agregar clics y desaparecer al mensaje de advertencia
3: Cuando se usa el botón Cerrar, es decir, cuando se usa la clase de cierre, debe ser el primer elemento infantil de alerta, y el texto no puede aparecer ante él.
Veamos el código:
< Aria-Label = "Close"> <span aria-hidden = "true"> × </span> </boton> <span> bienvenido </span> <botón type = "botón"> Detalles </botón> </div>
Si hay múltiples cuadros de advertencia en JavaScript y desea cerrar un cuadro de advertencia, agregue el siguiente código en JavaScript, de la siguiente manera:
$ (" #myalert"). Alert ('Cerrar') // Cuando se cierra el primer cuadro de advertencia, o cuando #Myalert se reemplaza con #myalert1, el segundo cuadro de advertencia se cerrará $ (' #myalert1'). On ('cerrado.bs.alert', function () {alerta ("Cerrar"); - Cuando el botón de cierre se hace clic, ejecute el evento alerta})8. Componente del botón
Aviso:
1: Alternar el estado del botón (deshabilitado o activado): esto se logra usando autocomplete = "apagado"
2: Haga múltiples botones en barras de herramientas, etc.
3: Establezca el estado de carga configurando datos-carga-text = "Carga ..."
< autocomplette = "Off" checked> home </selebel> <label> <input type = "checkBox" Autocomplette = "Off"> Mensaje </etiqueta> <label> <input type = "checkBox" Autocomplete = "Off"> Perfil </selt> </div>
Si desea cambiar el contenido después de hacer clic en el botón, agregue Data-Complete-text = "xxxx" y agregue el código JavaScript de la siguiente manera:
Copie el código de código de la siguiente manera: <!-Después de hacer clic en los disparadores, cambie el contenido de datos de datos de contenido representa el contenido terminado->
<button type = "botón" data-complete-text = "fink" autocomplete = "Off"> El contenido cambiará automáticamente después de hacer clic en </botón> <script> $ ('. mybtn'). on ('click', function () {$ (this) .button ('completo') // El contenido se convertirá en final
Para configurar el botón para cambiar el estado y establecer el tiempo para cambiar el estado, puede agregar el siguiente código a JavaScript:
<script> $ ('#myButton'). on ('click', function (e) {var btn = $ (this) .button ('loading'); setTimeOut (function (e) {btn.button ('reset'); // Establezca restaurar al estado original}, 3000)}) </script>9. Conjunto de marco plegable
Nota: Use Data-Toggle = "colapso" para ver el código:
<a rol = "Button" data-toggle = "colapse" href = "#collapseExample" aria-expanded = "false" aria-confuntrols = "collapseExample"> enlace con href </a> <div id = "collapseExample"> <div> hola, esta es una prueba! </div> </div>
Además, se puede usar en combinación con grupos de paneles, como se muestra a continuación:
; id = "colapso" role = "tabpanel"> <div> hola sobre mí </div> </div> </div> <!-segundo panel-> </div>
Al hacer clic en casa para controlar la parte del contenido, es establecer su href = "#colapso", esa es la ID correspondiente al contenido.
Con respecto a los eventos, similares a los utilizados anteriormente, estos componentes tienen un uso de tiempo similar, de la siguiente manera
<script type = "text/javaScript"> $ ('#mypanel'). on ('hidden.bs.collapse', function () {alert ("2222");}) </script>10. Componente deslizante de Carsousel
Nota: Use Data-Ride = "Carousel", como el carrusel que solemos hacer. Veamos primero el código del diagrama del carrusel que hice:
<div id = "myContainer"> --- Nota El objetivo de Data-Target <div id = "Carousel1" data-ride = "Carousel"> <ol>-Los indicadores representan indicación deslizante, es decir, de qué se desliza a la que se desliza a la primera <li data-Target = "#Carousel1" Data-Slide-to = "0"> </li> data-slide-to = "1"> </li> <li data-target = "#carousel1" data-slide-to = "2"> </li> </ol> <!-Rendering Content-> <div role = "ListBox"> <div> <img src = "bg.jpeg"> <div>--carousel-coption agregó texto, etc. <h-h3> verde green <p> Sunshine Wooth, usted y yo iremos contigo </p> </div> </div> <div> <img src = "timg.jpg"> </div> <div> <div> <img src = "xx.jpg"> <//div> <!-dos etiquetas a la izquierda y derecha-> <a href = "#carousel1" button "bocet <span aria-hidden = "true"> </span> <span> anterior </span> </a> <a href = "#carousel1" role = "botón" data-slide = "next"> <span aria-hidden = "true"> </span> <span> next </span> </a> </div> </div>
Los efectos son los siguientes:
Con respecto a la velocidad del deslizamiento, puede agregar directamente datos-interval = "2000" para establecer el interruptor de 2 segundos, pero el problema con este método es que
Cuando actualiza el navegador, debe hacer clic manualmente en los botones izquierdo y derecho antes de poder cambiar. La mejor manera es configurarlo en JavaScript. Como se muestra en el siguiente código
<script type = "text/javaScript"> $ (". Carousel"). Carousel ({Interval: 2000;}) </script>11. Ajuste de componentes
Nota: Use la posición: fijado para posicionamiento, use Data-spy = "Affix" combinado con la compensación de datos para lograr el monitoreo, y cuando ocurre un determinado evento, se compensa. Lea el siguiente código:
<Viv> <!-Diseño del sistema de cuadrícula-> <div> <ul> <li> 11111111111 </li> <li> 2222222222222 </li> <li> 3333333333333333333 </li> <li> 444444444444444444 </li> <li> 55555555555 </li> <li> 666666666666 </li> <li> 7777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777 777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777 77777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777 777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777 11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111. A 1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111. 11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111. A 1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111. 11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111. A 1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111. 11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111. A 1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111. 11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111. A 1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111. 11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111. A 1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111. <P> 11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111. 1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111. 1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111. 1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111. 11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111. A 1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111. 11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111. A 1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111. 11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111. A 1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111. 11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111. A 1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111. 11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111. A 1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111. 11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111. A 1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111. 11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111. A 1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111. 11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111. A 1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111. 11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111. A 1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111. 11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111. A 1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111. 11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111. A 1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111. 11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111. A 1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111. 11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111. A 1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111. 11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111. A 1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111. <div> <ul> <li> 1111111111111 </li> <li> 2222222222222 </li> <li> 333333333333333333 </li> <li> 4444444444444444444444444444 </li> <li> 5555555555555555 <li> 66666666666666 </li> <li>777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777 7777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777 7777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777 7777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777 src = "http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"> </script> <script src = "js/bootstrap.min.js"> </script> <script type = "text/javaScript"> $ ('. js-afixed-element-top'). }}) $ ('. JS-Affixed-Element-Bottom'). Affix ({Offset: {Bottom: 200} --- Cuando el mouse rueda hacia la parte inferior, el DIV cambiará automáticamente a 200px desde la parte inferior}) </script>El componente JS está casi por aquí, y aprender el marco de Bootstrap casi ha terminado. El siguiente artículo ha terminado. Planeo diseñar una página específicamente con Bootstrap para crearla y compartirla con usted. Si también está aprendiendo el marco Bootstrap, ¡comuníquese y aprenda!
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 complemento de bootstrap
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.