Los dos artículos anteriores solo hablan sobre cómo usar componentes, básicamente no sobre JS. Este blog debe discutirse en combinación con JS.
Déjame explicar varios componentes
1. Caja modal
2. Monitoreo de desplazamiento
3. Página de etiqueta
4. Tras de herramientas
5. Caja emergente
6. Botón
7. apilamiento
8. Página giratoria
9. Barra lateral
Importar CSS y JS primero
<link rel = "stylesheet" type = "text/css" href = "css/bootstrap.min.css"> <link rel = "stylesheet" href = "// cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.cssup src = "js/jQuery-3.1.0.min.js"> </script> <script src = "js/bootstrap.min.js"> </script>
1. Caja modal
Por lo general, usamos este cuadro modal al iniciar sesión o leer ciertas regulaciones, por lo que el cuadro modal es muy común
Primero escriba un botón para abrir el cuadro modal
<
Luego escribe el cuadro modal
<div id = "mymodal" role = "dialog" aria-label = "mymodallabel" aria-hidden = "true"> <!-Este es un cuadro modal pequeño. Cambiar modal-sm a modal-lg es un cuadro modal grande-> <div> <!-cabezal de caja modal-> <div> <!-Cerrar botón en la esquina superior derecha-> <button type = "botón" data-dismiss = "modal" aria-label = "cerrar"> <span aria-hidden = "true"> × </span> </botin> <!-title-> <hiv> modal </divive </divive </divive </divive </hiv 4 Contenido de cuadro-> <div> <!-El contenido de marco modal puede ser texto o tabla-> <!-<p> hola </p>-> <form> <div> <label> nombre de usuario </label> <input type = "text"> </div> <div> <label> contraseña </etiqueta> <put type = "contraseña"> </div> </form> </div> <!-Modal frame fot-> <div button "Button" Button "Button" Button " data-dismiss = "modal"> cerrar </boton> <button type = "button"> save </boton> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </bon
Si hace clic en el botón y luego pasa los parámetros a la tabla en el cuadro modal
Agregue Data-Label al atributo del botón: Valor
El Data-Data-Whuse = "@IME" anterior se agrega como ejemplo. Se agrega el parámetro con la etiqueta y se agrega el valor de @ime.
La siguiente es la operación JS
// Método $ ("#mymodal"). On ("show.bs.modal", function (e) {// obtiene el botón que hace clic para abrir el botón var = $ (e.relatedTarget) // Obtener el parámetro aprobado por el botón VAR Destinator = botón.data ("lo que sea") // Obtenga el cuadro modal VAR modal = $ (esto) // Cambiar el texto el texto el texto del texto modal.find (". Modal-title"). Text ("Hello"+Destinator); // Cambiar el valor de la entrada en el cuerpo modal.find (". Entrada de cuerpo modal"). Val (destinatario)})2. Monitoreo de desplazamiento
Deslice a diferentes contenidos, la página de pestaña cambiará
Primero escriba el atributo del cuerpo
<!-Offset se establece en 70, este valor es el mejor valor probado->
<Body data-spy = "scroll" data-target = ". navbar" data offset = "70">
Entonces escribe la pestaña
< menú desplegable en la etiqueta-> <li> <a href = "#" data-toggle = "desplegable"> menú desplegable <span> </span> </a> <ul role = "menú"> <li> <a href = "##un" tabindex = "-1"> un </a> </li> <li> <a href = "#dos" Tabindex = "-1"> dos </aa> <li> <a href = "#tres" tabindex = "-1"> tres </a> </li> </ul> </li> </li> </ul> </div> </div> </naving>
Luego escribe el contenido
<h2 id = "iwen">@iwen </h2> <p> Esta es una persona, esta es una persona </p> <h2 id = "ime">@ime </h2> <p> Esta es una persona es una persona </p> <h2 id = "one">@one </h2> <p> Esta es una persona que es una persona que es una persona </p> <h2 id = "dos">@dos </h2> <p> Esta es una persona, esta es una persona </p> <h2 id = "tres">@tres </h2> <p> Esta es una persona que es una persona </p> <h2 id = "tres">@tres </h2> <p> Esta es una persona que es una persona </p>
Se recomienda escribir el contenido por más tiempo para que el efecto sea más obvio. No es conveniente escribir demasiadas palabras inútiles aquí.
También puedes escribir algunos métodos JS
// método $ ("#myscrollspy"). On ("activate.bs.scrollspy", function (e) {alert ("hola");})3. Página de etiqueta
Haga clic en diferentes etiquetas para mostrar un contenido diferente
Escribe la barra de etiqueta primero
<ul id = "mytab"> <!-Un enlace de etiqueta corresponde a la ID del panel de pestaña a continuación-> <li> <a href = "#home" data-toggle = "tab"> home </a> </li> <li> <a href = "#perfil" data-toggle = "tab"> perfil </a> </li> <li> <a href = "#"#"#" "Id =" "mytabdle =" Tab "> perfil </a> </li> <li> <a href ="#"#"#"" Id = "" mytabdle = "TAB"> perfil </a> </li> <li> <a href = "#"#"#" "Id =" "mytabdle =" Tab "> perfil </a> </li> <li> <a href ="#"#"#"" Id = "" mytabdlee data-toggle = "desplegable"> menú desplegable <span> </span> </a> <ul role = "menú"> <!-A diferencia de los menús desplegables ordinarios, agregue Data-toggle = "tab"-> <li> <a href = "#un" tabindex = "-1" data-toggle = "tab"> one </a> </li> <li> <li> <i href = "#dos" Tabgle "1"-1 "-" "" "" "". data-toggle = "tab"> dos </a> </li> </ul> </li> </li> </ul>
Luego escriba el contenido de diferentes etiquetas
<div id = "mytabcontent"> <div id = "home"> <p> home </p> <div id = "perfil"> <p> perfil </p> <div id = "one"> <p> one </p> <div id = "dos"> <p> dos </p>
Puede inicializar la página de pestaña mostrada con JS
Hay varias formas de seleccionar una página de pestaña
$ ('#mytabs a [href = "#perfil"]'). Tab ('show') // seleccione $ ('#mytabs a: fRIST'). Tab ('show') // Seleccione la primera página de pestañas $ ('#mytabs a: último'). tab ('show' // seleccione la última tabla $ ('#mytabs li: eq (2) a'). (Porque 0 es el primero). Si es una página de pestaña en el menú desplegable, el número debe agregarse por 1.4. Tras de herramientas
<p> <!-Si el contenido del título está vacío, se muestra el contenido del título original de datos. La colocación es la posición de visualización, que se puede configurar en arriba | Bottom | Izquierda | Derecha-> <!-Los parámetros se pueden configurar en los datos-**** ---> Bienvenido a <a data-animation = "false" id = "mytooltip" href = "#" data-toggle = "tooltip" data-placates = "fondo" data-original-title = "wwww.jk..com" jack's page "
Entonces debe inicializarlo con JS, de lo contrario no tendrá ningún efecto
// Inicializar la información sobre herramientas, apunte a mostrar
$ ('[Data-toggle = "ToolTip"]'). ToolTip ();
5. Caja emergente
El cuadro emergente es similar a una información sobre herramientas, pero se muestra más rico que la información sobre herramientas y también se usa más comúnmente.
<!-data-thrigger = "foucus" haga clic en el espacio en blanco para desaparecer. Si no lo agrega, haga clic en el botón para desaparecer. Si lo establece en el rondado, se muestra el botón que se mueve. Eliminar y desaparecer-> <!-Este cuadro emergente se titula, y el contenido es contenido-> <botón tipo = "botón" data-thrigger = "foucus" data-placation = "fondo" data-toggle = "popover" data-content = "content"> box pop-up </button>
Luego inicializarlo con js
// Inicializar Popover
$ (". JS-POPOVER"). POPOVER ();
6. Botón
Los dos primeros artículos hablan sobre el estilo básico de los botones. Esta vez avanza, lo que permite que los botones muestren un texto diferente al cargar.
<!-puede configurar el texto del botón al cargar-> <botón type = "botón" data-carga-text = "alojamiento para 3s"> Estado de carga </botón>
Luego use JS para vincular el evento de clics
// El evento de clic del botón de enlace $ (". JS-Loading-Btn"). ON ("Haga clic", function (e) {// Después de hacer clic, configure el estado de carga, mostrando el texto de la carga var btn = $ (this) .button ("cargando"); // restaurar el setTimeOut (función (e) {btn.button ("resete")}, 3000)}, 3000)})7. apilamiento
El efecto de apilamiento puede guardar muchos controles de pantalla, lo cual es muy práctico
Esto es para hacer clic en el botón para abrir la pila
<
Esta es la pila de grupos de paneles
<div id = "acorkion" role = "tablist"> <div> <div role = "tab" id = "headingone"> <!-title wantised-> <h4> <!-data-parent si la identificación del grupo de panel-> <a data-toggle = "colapso" data-parent = "#acorkion" href = "#colapsonee> item1 </a> </h4> </h4> </h4/</div4> </div 4/</h4/</H4/</h4/</H4/</h4/</H4/</H4/</h4/</h4/</H4/</h4/</H4/</H4/</H4/</h4/</H4/</H4/</H4/</h4/</H4/</H4/</H4/</H4/</H4/</H4/¡AGUDA IN Abra, sin esconder-> <div id = "colapsoe" rol = "tabpanel"> <div> hola <br> hola <br> hola <br> </div> </div> </div> <div> <div> <div role = "tab" id = "headingtwo"> <h4> <a data-toggle = "colapso" parente de datos = "#acorshion" href = "#colapsetwwwwwwwwwwwwe>##collapsetwwwwe>#iguietos </h4> </div> <div id = "colapsetwo" role = "tabpanel"> <div> hola <br> hola <br> hola <br> </div> </div> </div> <div> <div role = "tab" id = "headingthree"> <h4> <a data-toggle = "colapso" de datos de datos = "#acuerdo" " href = "#colapsethree"> item1 </a> </h4> </iv> <div id = "colapsethree" rol = "tabpanel"> <div> hola <br> hola <br> hola <br> </div> </div> </div> </div> </div> </div> </div>
8. Página giratoria
A menudo podemos verlo en la página de inicio del sitio web
<Div ID = "Carusel-Example-Genérico"> <!-Este es el indicador de los tres círculos blancos a continuación-> <ol> <li data-Target = "#Carousel-exame-Genérico" data-slide-to data-target="#carousel-example-generic" data-slide-to="2"></li> </ol> <!--The content of the rotation page--> <div> <img src="images/4.jpg"> <!--Add text--> <div> <h3>U3D</h3> <p>New version upgrade</p> </div> </div> <div> <img src = "imágenes/2.jpg"> <div> <h3> u3d </h3> <p> lanzamiento del nuevo producto </p> </div> </div> <div> <img src = "imágenes/3.jpg"> <div> <h3> manzana </h3> <p> Apple </p> </div> </div> <! href = "#Carousel-Example-Generic" data-slide = "prew"> <span> </span> </a> <a href = "#Carousel-Example-Generic" data-slide = "next"> <span> </span> </a> </div>
Puede establecer intervalos y comenzar automáticamente con JS
// Establezca el intervalo en 2s y automáticamente Carusel $ (". Carousel"). Carousel ({Intervalo: 2000})9. Barra lateral
El contenido principal de la barra lateral es una lista
<!-para configurar el ancho, escúchelo en la pantalla del teléfono-> <viv> <ul> <a href = "#"> hola </a> <a href = "#"> hola </a> <a href = "#"> hola </a> <a href = "#"> hola </a> <a href = "#" href = "#"> hola </a> <a href = "#"> hola </a> <a href = "#"> hola </a> <a href = "#"> hola </a> </ul> </div>
Escribir estilo de nuevo
<Syle> .Affixed-Element-Top.affix { /*Si desea estar en la parte inferior, puede cambiarlo a la parte inferior: 10px;* / top: 10px; } .afixed-element-top.affix-bottom {posición: relativo; } </style>Agrega un poco de js
$ (". JS-Affixed-Element-Top"). Affix ({Offset: {}})Este es el uso básico de Boostrap. Después de dominarlo, puede crear una buena página web.
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.