El propósito principal de este artículo le permite aprender a usar Twitter Bootstrap para crear un sitio en 20 minutos. Cómo construir un sitio se introduce a continuación:
Lo primero que debe decir es que Twitter Bootstrap es un excelente marco de código abierto front-end. Proporciona casos de uso detallados para todas las agrupaciones clave, lo que le permite adjuntar fácilmente su diseño copiando y pegando.
Plantillas HTML básicas
Necesitamos usar una plantilla HTML básica para que podamos incluir el archivo de arranque que necesitamos. Aquí está el comienzo de nuestro proyecto Bootstrap de Twitter, copie estos códigos en un archivo y asígnele el nombre index.html.
<! Doctype html> <head> <title> Twitter Bootstrap Tutorial - Un tutorial de diseño receptivo </title> <style type = 'text/css'> body {background -color: #ccc; } </style> </head> <body> </body> </html>En este código, hemos agregado algunos CSS para hacer que el fondo de la página sea gris brillante, porque de esta manera podemos ver fácilmente diferentes columnas en nuestro diseño, lo que hace que sea más fácil de entender.
Introducir el archivo de bootstrap de Twitter
Para usar Twitter Bootstrap, solo necesitamos introducir un archivo en nuestra plantilla. Hay muchas formas de introducir archivos. Si desea conocer estos métodos, consulte los documentos relevantes.
Según el punto de partida de este tutorial, presentaremos el archivo bootstrap-combinado.min.css a través de CDN sin descargar ningún archivo.
La copia del código es la siguiente: href = "http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/css/bootstrap-combined.min.css" rel = "Stylesheet">
Twitter Bootstrap CSS entra en vigencia en nuestras plantillas.
Contenedor de bootstrap de Twitter
La clase de contenedor de Bootstrap es muy útil. Puede crear un área centrada en la página, y luego podemos colocar el contenido de otras ubicaciones dentro. La clase de contenedor es equivalente a crear un cuadro DIV centrado con un ancho estático y un valor magin de Auto. La ventaja de la clase de contenedores de Bootstrap de Twitter es que responde y calcula el mejor ancho en función del ancho de pantalla actual para fines prácticos.
En la etiqueta del cuerpo, use la clase de contenedor para crear un DIV. Servirá como la envoltura exterior principal para otros códigos en la página.
Si ajusta la altura de este div y establece su color de fondo en blanco, el efecto que vea será así:
Título y navegación
Ahora que tenemos un lugar para agregar código HTML adicional, podemos agregar el texto del título y luego crear la barra de navegación principal para el sitio.
Agregue el siguiente texto o el texto que seleccionó a la etiqueta DIV de la clase de contenedor.
<h1> Twitter Bootstrap Tutorial </h1>
No hay mucho nuevo ahora, es solo un título, pasemos al aspecto más interesante de la navegación de bootstrap de Twitter.
Bootstrap tiene una clase de Nav que nos permite crear varios elementos de navegación. Puede agregar el siguiente código después de la etiqueta H1.
<div class = 'Navbar Navbar-Inverse'> <div class = 'Nav-Collapse' style = "Height: Auto;"> <ul> <li> <a href = "#"> Home </a> </li> <li> <a href = "#"> Página uno </a> </li> <li> <a href = "#"> Page dos </a> </li>
Las clases relacionadas con la barra de Navbar tienen todos los estilos de la barra de navegación. Agregar la clase NAVBAR-Inverse aplicará un estilo negro genial, que es una combinación común de bootstrap de Twitter. Sugiero expandirse en este estilo para crear su navegación única. Pero en este tutorial todavía usaremos el estilo básico de bootstrap.
En un divbar con clase de navegación, agregamos otro DIV con el colapso de navegación de la clase y agregamos altura de estilo en línea: Auto; Esto le dice a Bootstrap que cuando esta página está en una ventana del navegador con un ancho de menos de 970px, proporcionará una vista de interruptor comprimido.
Si guarda el archivo index.html y lo abre en el navegador, podrá ver este cambio cuando ajuste el ancho de la ventana del navegador, como se muestra en la figura.
Mayor que 979px:
Menos de 979px:
Además, podemos agregar una clase de NAV a un elemento de lista HTML desordenado para aplicar más estilos desde el archivo Bootstrap CSS, o podemos agregar una clase activa al elemento de la lista "Inicio".
Comparta artículos maravillosos sobre la navegación de bootstrap: "Navegación que debe aprender todos los días con Bootstrap", "Navegación que debe aprender todos los días por Bootstrap"
Contenido principal y barra lateral
Hemos terminado la navegación principal del sitio, y ahora necesitamos agregar el área de contenido principal y una barra lateral para admitir más enlaces o rutas de navegación. Agregue el siguiente código a la barra de navegación.
<div id = 'content' class = 'row-fluid'> <div class = 'span9 main'> <h2> Sección de contenido principal </h2> </div> <div class = 'span3 Sidebar'> <h2> Sidebar </h2> </div> </div>
Esto es exactamente lo que necesitamos entender sobre el sistema de trama de Bootstrap. Por supuesto, la documentación oficial de Bootstrap cubre más detalles, pero comenzaremos con los conceptos básicos y le permitiremos entenderlo mejor.
El sistema Raster utiliza un diseño de 12 columnas, lo que significa que una página se puede dividir en 12 columnas idénticas. La siguiente imagen obtenida del documento oficial de Bootstrap ofrece una buena pantalla.
En el código que acabamos de pegar en la barra de navegación, puede ver las clases llamadas SPAN9 y SPAN3. Dividirán la página en dos partes de las 9 columnas a la izquierda y 3 columnas a la derecha, formando nuestra área de contenido y barra lateral. Uno de los beneficios de usar un sistema de ráster es que calcula dinámicamente el ancho de la columna en función del ancho de la ventana, por lo que no necesita escribir ninguna consulta de medios para que su sitio funcione en cualquier resolución de pantalla.
Puede observar su efecto cambiando la cantidad de tramos y ajustando el tamaño de su navegador. Notará que cuando el área de contenido es inferior a 724px, estas columnas se apilan verticalmente.
Ahora ponemos el siguiente texto o cualquier otro texto detrás de la etiqueta H2 en el área de contenido principal, solo para alargar un poco la página.
Copie el código de la siguiente manera: PSUM Dolor Sit AMET, consectetuer adipiscing Elit, Sed diam nibh nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut Wisi enim ad mínimo Veniam, Quis Nostrud Ejercicio STA Ullamcorper Suscipit lobortis nisl ut aliquip ex ea comrodo consecuente. DUIS AUTEM VEL EUM IRIURE Dolor in Hendrerit en vulputate Velit Esse Molestia consecuente, vel illum dolore eu feugiat nulla facilisis en vero eros et accessan et iusto odio dignissim qui blandit guiltit lumtatum zzril delenit augue dolore te feugit nulialilililiit Guiltit. Nam Liber Tempe Cum soluta Nobis Opción Eleifend Congger Nihil Imperdiet Doming Id Quod Mazim Placerat Facer Possim Asum. </p>
<p> typi no habent Clariitatem Insitam; EST Usus Legitis en iis qui facit eorum clariitatem. Investigaciones Demuestraverunt Clariitres Legende me lius quod II Legunt Saepius. Claritas est Etiam Process Dynamicus, qui secuencante Mutationem consuetudium legorum. Mirum est Notare quam litta gothica, quam nunc putamus parum claram, anteposuerit litterarum formato humanitatis por marta cuarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes en futurum. </p>
Ahora el sitio se mostrará de la siguiente manera:
Navegación de la barra lateral
Puede ver todos los elementos de navegación que Twitter Bootstrap nos proporciona aquí (twitter.github.com/bootstrap/components.html#navs).
Usaremos la pestaña Vertical para crear un área de navegación adicional. Copie y pegue el siguiente código en la etiqueta H2 de la barra lateral.
<ul> <li> <a href = '#'> otro enlace 1 </a> </li> <li> <a href = '#'> otro enlace 2 </a> </li> <li> <a href = '#'> otro enlace 3 </a> </li> </ul>
¡Esta es una pantalla simple! El código anterior es literalmente solo una lista desordenada con clases de Tabs NAV y NAV-Stacked, pero nos crea un panel de navegación para nosotros.
Mirando el efecto final, se termina una página basada en Twitter Bootstrap.
Después de leer este tutorial, debería poder usar Bootstrap para crear una página de diseño receptiva básica, comprender el sistema de la cuadrícula y poder usar Bootstrap para navegar, barras de navegación y comprender los conceptos básicos del diseño receptivo.
También se puede encontrar más contenido sobre Bootstrap en temas especiales: "Tutorial de aprendizaje de bootstrap"
Todo lo anterior es el conocimiento requerido para usar Twitter Bootstrap. Espero que sea útil para el aprendizaje de todos. Espero que puedas pasar más tiempo y hacer perfecto. En el futuro cercano, puede convertirse en un experto en Bootstrap.