Escribir en frente
En este artículo, hablaré sobre el uso de Bootstrap basado en una página web de paisaje que hice. Las capturas de pantalla de la página web son las siguientes:
Los efectos y el código de la página web completa se pueden ver aquí o ver en CodePen. Los principales efectos que deben lograr las páginas web incluyen lo siguiente:
1. Los botones de inicio de sesión y registro en la barra de navegación aparecen después de hacer clic en los cuadros modales de inicio de sesión y registro, y las ventanas de inicio de sesión y registro se pueden cambiar. La barra de menú es receptiva
2. Las opciones de paisaje en la barra de navegación se pueden derribar. Haga clic en la cueva de la cortina de agua Jiuzhaigou Lijiang en el menú desplegable para localizar la pestaña correspondiente.
3. Carusel de presentación de diapositivas de pantalla grande
4. Haga clic para encender la página de pestañas
Ahora comenzamos a abrazar Bootstrap.
Creo que los amigos han oído hablar de Bootstrap o lo han usado. En esta página web, uso CDN Bootstrap v3.3.4. Haga clic aquí para descargar la última versión de Bootstrap v3.3.5 o haga clic aquí para descargarla en el sitio web oficial. Creo que siempre hay uno que te adapta ~~~~~~
En este artículo, hablemos primero sobre la barra de navegación.
Barra de navegación
Antes de usar BS, primero debe consultar BS, incluidos CSS y JS. El método de referencia es muy simple, lo mismo que hacer referencia a archivos externos ordinarios. Puede usar enlaces CDN o colocarlos en referencias locales. El código se proporciona a continuación.
<html lang = "zh-cn"> <fead> <meta charset = "utf-8"> <meta http-equiv = "x-ua compatible" content = "ie = bord"> <meta name = "viewport" content = "width = dispositivo-width, inicial a escala = 1"> <Title> myvin's Landscape </title> <link Rel = "sty" stylesheet " href = "http://cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap.min.css"> <!-html5 shim y respond.js para el soporte IE8 de html5 elementos y consultas de los medios-> <!-advertencia: Respond.js no funciona si ve la página a través del archivo: // 9]> <script src = "http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"> </script> <script src = "http://cdn.bootcss.com/rpond.js/1.4.2/prespond.min.js"> <script " < src = "http://cdn.bootcss.com/bootstrap/3.3.4/js/bootstrap.min.js"> </script>
En este ejemplo de página web de paisaje, uso el enlace CDN.
Al mismo tiempo, debido a que el complemento BS se basa en JQ, JQ también debe introducirse.
Primero dale el código completo de la barra de navegación
<Nav> <Viv> <!-Brand y Toggle se agrupan para una mejor pantalla móvil-> <div> <botón type = "button" data-toggle = "colapse" data-target = "#bs-example-navbar-collapse-1"> <span> toggle navegati href = "#"> Definir una marca registrada usted mismo </a> </div> <!-Navegación en la esquina superior izquierda-> <div id = "bs-exame-navbar-colapse-1"> <ul> <li> <a href = "#"#"> homePage <span> (actual) </apla> </a> </li> <li> <li> <a href ="#"#" data data <span> "span) </span> </a> </li> <li> <li> <a href ="#"#" data de datos <span> ") </span> </a> </li> <li> <li> <a href ="#"#" data de datos <span> "span) </span> </a> </li> <li> <li> <a href ="#"#" data data <pan> " role = "Button" Aria-Expandandy = "False"> Paisery <span> </span> </a> <ul role = "menú"> <li> <a href = "#jiuzhaigou"> jiuzhaigou </a> </li> <li> <a href = "#lijiang"> lijiang </a> </li> <a> <a a href = "#shuilianong"> shuijian cave </a> </li> <li> </li> <li> <a href = "#shuilianandong"> shuijian cave </a> </li> <li> </li> <li> <i href = "#"> más .. </a> </li> </li> </li> <li> data-target = "#sobre"> <a href = "#"> Acerca de </a> </li> </ul> <form role = "search"> <div> <put type = "text" placeholder = "buscar atracciones .."> <button type = "botón"> go </button> </div> </form> <ul> <li data-toggle = "modal" modal "data-target ="#"#"#"#"#"#"#" id = "Signin-Button"> <a href = "#"> Login </a> </li> <li data-toggle = "modal" data-target = "#firl-signup-tab" id = "registrar-button"> <a href = "#"> registrar </a> </li> </ul> </div> </iv> </ar Nav>
Los componentes de navegación de BS dependen de la misma clase .nav y el código se explica por separado. Veamos primero este párrafo:
<button type = "botón" data-toggle = "colapse" data-target = "#bs-example-navbar-colapse-1"> <span> Toggle Navigation </span> <span> </span> <span> </span> <span> </span> </botte>
El propósito de este código es reducir la vista de la visión, las opciones de menú en la barra de navegación colapsarán, hagan clic en el icono de colapso y las opciones de menú en la barra de navegación se organizarán verticalmente. La clase .Navbar-Inverse en NAV es de color inverso. Los amigos pueden eliminar la clase .navbar-inverso para observar el efecto. Como soy un control negro, uso el color invertido aquí. Si desea usar otros colores, Rich Gold, los amigos pueden igualarlos de acuerdo con su propio gusto. La clase .navbar-marca se puede utilizar para definir la marca registrada de su propio sitio web. Usaré el texto para definir una marca registrada aquí. Los amigos interesados pueden agregar su propio logotipo. La clase .dropdown-toggle puede implementar un desplegable, y la clase .divider puede implementar una línea divisoria clara y oscura.
Como su nombre indica , la clase .navbar-right en el cuadro de búsqueda e inicio de sesión y registro es correcto.
Atributos de datos
Aquí es necesario hablar sobre el atributo de datos de BS. En BS, los desarrolladores pueden usar todos los complementos JS en BS solo a través de los atributos de datos. Esta es una API de primera clase en BS y a menudo es nuestra forma preferida de usar complementos JS. Por ejemplo, Data-toggle = "colapso" y data-toggle = "desplegable" en el código anterior son las formas de usar complementos JS en BS.
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 se trata de este artículo, espero que sea útil para todos aprender la barra de navegación de Bootstrap.