Muchas compañías ahora usan el marco de Bootstrap en el desarrollo. Bootstrap es el trabajo de un equipo de Twitter, que simplifica enormemente nuestro desarrollo frontal. (Resumiré un poco menos de uso más adelante)
Aprendiendo a usar API Le sugiero que vea directamente la API del sitio web oficial, dirección: http://www.bootcss.com/
Aquí hay algunas representaciones objetivo:
A continuación resumiré las técnicas y principios en una pequeña demostración:
El primer paso es descargar el paquete comprimido de Bootstrap en http://www.bootcss.com/, crear un nuevo index.html, usar sublime u otro editor para abrir la página de índice, y el directorio después de la descompresión es
Paso 2 : Copie una plantilla básica del sitio web oficial http://v3.bootcss.com/getting-started/ para facilitar el desarrollo posterior.
<! 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> Bootstrap 101 Template </title> <!-Bootstrap-> <link href = "css/bootstrap.min.css" rel = "stylesheet"> <!-html5 shim y respond.js para el soporte IE8 de los elementos html5 y los medios de comunicación-<!-Advertencia: advertencia: advertencia: la respuesta: la respuesta de la respuesta. -> <!-[if LT IE 9]> <script src = "// cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"> </script> <script src = "// cdn.bootcss.com/rpond.js/1.4.2/ponder.min.js"> </script] </head> <body> <h1> ¡Hola, mundo! </h1> <!-jQuery (necesario para los complementos Javascript de Bootstrap)-> <script src = "// cdn.bootcss.com/jquery/1.11.3/jquery.min.js"> </script> <!-Incluya todos los complementos compilados (a continuación), o incluya archivos individuales según sea necesario-> <script src = "js/bootstrap.min.js"> </script> </body> </html>
1) Nota: La referencia a jQuery.js debe estar frente a bootstrap.min.js, y es mejor descargar manualmente un jQuery.js y colocarlo en la ruta js, <script src = "js/jQuery.min.js"> </script> </script>
Porque más tarde, cuando estaba emulando, descubrí que los efectos desplegables y de animación de carrusel habían desaparecido, y descubrí que el archivo jQuery de la plantilla básica se descargó y puede no estar conectado a Internet, por lo que no lo descargué. Es mejor citar al local por mí mismo.
2) Nota: La referencia de CSS se coloca arriba de la página y la referencia JS se coloca debajo de la página, porque CSS necesita cargar primero la página representada, y JS necesita cargar y ejecutar después de que se complete la renderización de la página; y las declaraciones meta para dispositivos móviles se adaptan a: <meta name = "viewport" content = "width = dispositivo-width, inicial a escala = 1">
Paso 3, barra de navegación
1) Efecto de centrado: el contenedor-fluente debe cambiarse al contenedor
2) Cambie de blanco a negro con efecto de contraste: <AV>
3) La barra de navegación se fija en la parte superior y agregue atributos de clase de tiempo: Navbar-Fixed-Top
<Nav> <!-Brand and Toggle se agrupa para una mejor pantalla móvil-> <divir> <botón tipo = "botón" data "data-toggle =" colapse "data-target ="#bs-example-navbar-collapse-1 "aria-expandy =" false "> <span> Toggle Navigation </span> href = "#"> Zootopia </a> </div> <!-recopile los enlaces de navegación, formularios y otro contenido para alternar-> <div id = "bs-example-navbar-collapse-1"> <ul> <li> <a href = "#"> homePage <s-span) Descripción </a> </li> <li> <a href = "#"> Características </a> </li> <li> <a href = "#"> sobre </a> </li> </div> <!-/.navbar-collapse-> </div> <!-/.container-fluid-> </ar Nav>
4) La barra de navegación cubrirá la parte superior del cuerpo, así que agregue estilo
<style type = "text/css"> cuerpo {padding-top: 50px; } </style>5) Los elementos de navegación destacados agregan menús desplegables
<li> <a href = "#" data-toggle = "desplegable"> Características </a> <ul> <li> <a href = "#"> animal 1 </a> </li> <li> <a href = "#"> animal 2 </a> </li> <li> <a href = "#"> animal 3 </a> </li> <a> <a href = "#"#"#"#"animal>" 4 </a> </li> </li> </li>
Tenga en cuenta que el contenido del submenú está anidado en la etiqueta Li más externa, y la etiqueta Li tiene un menú desplegable de clase, y el submenú también es una etiqueta UL, y la clase es menú desplegable. Ver arriba para la relación de mapeo específica.
Paso 4: Aumente el efecto de rotación y copie y modifique el módulo de carrusel del componente de arranque:
<div id = "Carusel-Example-Generic" Data-Ride = "Carousel"> <!-Indicadores-> <ol> <li Data-Target = "#Carousel-Example-Generic" Data-Slide-To = "0"> </li> <li Data-Target = "#Carousel-Expleamper-Genérico" data-Target = "#Carousel-Example-Generic" data-slide-to = "2"> </li> </ol> <!-wrapper para diapositivas-> <div role = "listbox"> <div> <img src = "imagen/1.jpg"> <hiv> <h1> Zootopia 1 </h1> <p> La posición de la casa femenina que vio la posición de la casa femenina que expande la posición de la casa que expone la posición de la casa de la casa. La experiencia de la posición de visualización de la casa femenina que abre los dos números que ocurren en el país </p> </div> </div> <div> <img src = "image/2.jpg"> <div> <div> <img src = "imagen/2.jpg"> <div> <h1> zootopia 1 </h1> <p> La posición de la casa de la casa que ve la posición de la casa de la casa de la casa de la casa de la casa de la casa de la casa de la experiencia de la experiencia de la experiencia de la experiencia de la experiencia. Se abre los dos números que ocurren en el país </p> </div> </div> <div> <img src = "imagen/3.jpg"> <div> <h1> zootopia 1 </h1> <p> la visita de la casa de la casa femenina que se expande la experiencia de la posición de la casa femenina que abre los dos números que ocurren en el país </p> </biv> </div>. href="#carousel-example-generic" role="button" data-slide="prev"> <span aria-hidden="true"></span> <span>Previous page</span> </a> <a href="#carousel-example-generic" role="button" data-slide="next"> <span aria-hidden="true"></span> <span>Next page</span> </a> </div>
1) Para que no le queden espacio o huecos en blanco al girar la imagen, agregue estilo
.Carousel {altura: 500px; Color de fondo: #000; } .carousel .Item {altura: 500px; Color de fondo: #000; } .carusel img {ancho: 100%; }2) Establezca el estilo para el texto para que sea más hermoso
. Caption P {margen-bottom: 20px; tamaño de fuente: 20px; Línea de altura: 1.8; }Los efectos actuales son los siguientes
Continuemos: (la codificación se está actualizando ...)
La segunda parte se ha actualizado, demostración en el caso de desarrollo front-end basado en bootstrap (ii)
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.
Si aún desea estudiar en profundidad, puede hacer clic aquí para aprender y adjuntarle un tema maravilloso: Tutorial de aprendizaje de Bootstrap