Recientemente descubrí algo bueno llamado Bootstrap, el marco CSS receptivo más popular hoy en día, que prioriza los dispositivos móviles y puede adaptarse rápidamente a diferentes dispositivos. Úselo para escribir páginas receptivas de manera rápida y conveniente, y bloquea las diferencias del navegador. Con Bootstrap, ya no puedes imaginar la trágica vida de escribir páginas web en CSS original en el pasado.
Después de aprender, descubrí que también tenía la capacidad de desarrollar una página de alta gama en minutos. Este artículo le presentará Bootstrap y lo llevará a implementar una página receptiva juntos.
Figura 1. Prioridad móvil, adaptada a diferentes dispositivos
1. Instalación
La forma más fácil es hacer referencia directamente a Bootstrap proporcionada por la Red de Distribución de Contenido (CDN) en la página web. Cuando un usuario accede a la página web, obtendrá recursos del servidor cercano.
Listado 1. Obtenga Bootstrap de la red de distribución de contenido
* JavaScript -> <script src = "bootstrap/3.3.4/js/bootstrap.min.js"> </script>
También puede optar por descargar Bootstrap para implementar localmente. Los usuarios pueden descargar el bootstrap completo en la página, o pueden seleccionar las funciones utilizadas en el proyecto de acuerdo con las necesidades del proyecto en la página personalizada, compilar y descargar una versión simplificada de Bootstrap. Después de completar la descarga, se obtiene un archivo zip. La estructura del directorio descomprimida es la siguiente:
Listado 2. Estructura del directorio de bootstrap
oreja/
├── CSS/
│ ├── bootstrap.css
│ ├── bootstrap.css.map
│ ├── bootstrap.min.css
│ ├── Bootstrap-theme.css
│ ├── bootstrap-theme.css.map
│ └── bootstrap-theme.min.css
├── JS/
│ ├── bootstrap.js
│ └── bootstrap.min.js
└iqute Fonts/
├── Glyphons-Halflings-Regular.Eot
├── Glyphons-Halflings-Regular.svg
├── Glyphons-Halflings-Regular.ttf
├── Glyphons-Halflings-Regular.Woff
└── Glyphics-Halflings-Regular.Woff2
Aquí nos centramos principalmente en tres archivos simplificados: bootstrap.min.css es el componente principal de Bootstrap y contiene una gran cantidad de clases CSS que se utilizarán; bootstrap-theme.min.css contiene temas de arranque opcionales; Bootstrap.min.js proporciona algunos métodos JavaScript. Cabe señalar que Bootstrap depende de jQuery, por lo que JQuery debe introducirse antes de usar bootstrap.min.js. Al igual que el uso de redes de distribución de contenido, utilizamos rutas relativas para introducir CSS y JavaScript correspondientes en nuestras páginas. En el desarrollo real, a menudo usamos la plantilla proporcionada por Bootstrap como punto de partida. Esta plantilla introduce los metadatos y la bota requerida por las páginas receptivas. Los desarrolladores pueden escribir sus propias páginas receptivas sobre esta base:
Listado 3. Plantilla básica de bootstrap
<! DocType html> <html lang = "en"> <head> <meta charset = "utf-8"> <meta http-oquiv = "x-ua compatible" content = "ie = bord"> <meta name = "viewport" content = "width = dispositivo-width, escala inicial = 1"> <!-el arriba 3 meta meta * debe * view ipping * the wid the * the tags * the the the tags *; Cualquier otro contenido de la cabeza debe venir * después de * estas etiquetas-> <title> Bootstrap 101 plantilla </title> <!-bootstrap-> <link href = "css/bootstrap.min.css" rel = "stylesheet"> <!-html5 shim y respuesta y respuesta para IE8 los elementos html5 y los elementos de medios de medios-<!-n. Funcione si ve la página a través del archivo: //-> <!-[if LT IE 9]> <script src = "https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"> </script> <script <script <script> <script> <script> <script> <script> <script> <script> <script> <script> <script> <script> <script> <script> <script> <script> <script> <script> <script> <script> <script> <script> <script> <script> <script> <script> <script> <script> <script> <script> <script> <script> <scruat src = "https://oss.maxcdn.com/ corresponsal/1.4.2/ corresponsh.min.js"> </script> <! [endif]-> </head> <body> <h1> hola, mundial src = "https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/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> </body> </html>
2. CSS
Bootstrap es primero un marco CSS, que predefinió muchas clases de CSS. Los desarrolladores solo necesitan agregar clases CSS apropiadas a los elementos HTML para obtener el estilo deseado, lo que puede completar el diseño de la página, el diseño y otras funciones. El CSS proporcionado por Bootstrap es extremadamente potente. Este artículo se centrará en el sistema de cuadrícula que proporciona. Para otras funciones, solo se mencionará por el camino al aplicarlo. Si desea saber más sobre las funciones, consulte la documentación oficial.
recipiente
Al usar el diseño de Bootstrap, debe incluir elementos HTML en un contenedor (.Container). Bootstrap proporciona dos contenedores: .Container y .Container-Fluid. El primero centra el contenido con ancho fijo, mientras que el segundo permite que el contenido llene horizontalmente toda la ventana del navegador, como se muestra a continuación:
Listado 4. .Container y .Container-Fluid
<Viv> <p> "Cuando era niña, mi madre me preparaba una taza de café cada vez que estaba enfermo. Dijo suavemente:" Los extranjeros beben esto "." Siempre tenía miedo del café y la agridulce y la amargura estaban entrelazadas. Ahora no puedo encontrar el sabor que bebí cuando era niño cuando era niño, hasta ese día bebía una taza de isatis. Ella dijo suavemente: "Los extranjeros beben esto". "Como joven, siempre tenía miedo al café, y el agrio y la amargura están entrelazados. Ahora no puedo encontrar el sabor que bebía cuando era niño cuando era niño, hasta ese día bebí una taza de isatis". </p> </div>
La siguiente imagen muestra cómo se ve en el navegador:
Figura 2. Contenedor
Sistema de rejilla
Al igual que el sistema de cuadrícula que diseñamos al escribir la primera página receptiva, Bootstrap divide la página en filas (.row), con 12 columnas por fila (.Col-Md-*). Las filas deben incluirse en el contenedor. Según el tamaño de la pantalla, las columnas se dividen en .COL-XS-, .COL-SM-, .COL-MD- y .COL-LG-, respectivamente, correspondientes a teléfonos móviles (<768px), tabletas (≥768px), computadoras de pantalla media (≥992px) y computadoras de pantalla grande (≥1200px). Estos píxeles que aparecen en él se llaman puntos críticos. Siempre que el tamaño o el tamaño de la pantalla del navegador alcance otro punto crítico, la clase CSS correspondiente funcionará y el diseño de la página cambiará. Consulte la siguiente figura para más detalles:
Figura 3. Sistema de cuadrícula
¿Cómo entiendes la tabla anterior? Si necesita cavar la página en tres columnas al navegar por una página en una computadora, que representa 1/4, 2/4 y 1/4 del ancho de fila, puede escribir el código de la siguiente manera:
Listado 5. Una fila se divide en tres columnas
<Div> <VIV> .COL-MD-3 </div> <div> .Col-MD-6 </div> <div> .Col-MD-3 </div> </div>>. Col-MD-3 </div> </div>
Abra el navegador y puede ver que cada uno ocupa 3, 6 y 3 de las 12 columnas, que suman exactamente 12 columnas. Si reducimos la ventana del navegador hasta que sea inferior a 970px, encontraremos que se ha convertido en tres líneas, apiladas para mostrar. A excepción de .Col-XS-, otras clases de CSS se comportan de la misma manera. Cuando el tamaño de la pantalla es más pequeño que su punto crítico, se mostrará apilado. Solo se mostrará en columnas cuando el tamaño de la pantalla sea mayor que su punto crítico, y .Col-XS- se muestra en columnas en cualquier caso.
Las clases CSS correspondientes a diferentes tamaños de pantalla se pueden usar de manera mixta. Por ejemplo, si quiero que una página muestre 3 columnas en la computadora y 2 columnas en el teléfono, puedo escribir el código de la siguiente manera. En el teléfono, la tercera columna se mostrará en la siguiente línea y ocupará la mitad del ancho de la línea:
Listado 6. Mostrar diferentes números de columnas en computadoras y teléfonos
<Div> <VIV> .COL-MD-3 </div> <div> .Col-MD-6 </div> <div> .Col-MD-3 </div> </div>>. Col-MD-3 </div> </div>
Si desea mostrar la misma columna en todos los dispositivos, solo necesita definir el tamaño mínimo .col-xs-, y el diseño se expandirá automáticamente a un tamaño más grande, de lo contrario no se mantendrá:
Listado 7. El mismo número de columnas se muestran en todos los dispositivos
<Div> <Viv> .COL-XS-6 </div> <div> .col-xs-6 </div> </div>
También puede dar un cierto desplazamiento a la columna, por ejemplo, la primera columna representa 1/4 del ancho de la fila, y queremos que la segunda columna compense 6 columnas a la derecha, ocupando 3 columnas al final de la fila:
Listado 8. Compensación de columna
<Div> <VIV> .COL-MD-3 </div> <div> .col-md-3 </div> </div>
El orden de las columnas también se puede ajustar mediante .Col-MD-Push-* y .Col-MD-Pull-*. Su significado es empujar un elemento hacia atrás o tirar de varias columnas hacia adelante. Los desarrolladores pueden usar esta función para extraer contenido importante al frente al mostrarla en el teléfono:
Listado 9. Empuje y tire de la columna
<VIV> <VIV> .COL-MD-9 .COL-MD-PUSH-3 </div> <div> .col-md-3 .col-md-pull-9 </div> </div>
Lo que es aún más emocionante es que este sistema de malla también puede estar anidado, de modo que se puedan llevar a cabo varios diseños complejos:
Listado 10. Anidación
<Div> <VIV> Nivel 1: .Col-SM-9 <Div> <Viv> Nivel 2: .Col-XS-8 .Col-SM-6 </div> <VIV> Nivel 2: .Col-XS-4 .Col-SM-6 </div> </div> <div> nivel 1: .Col-SM-3 </div> </iv> </iv>
El código anterior generalmente se divide en dos columnas, y la primera columna tiene dos columnas anidadas.
La función de cuadrícula de Bootstrap proporciona varias posibilidades para el diseño de la página web y es muy simple de usar. Tomemos un caso para ver qué tan simple es escribir una página receptiva usando Bootstrap.
3. Combate real
Supongamos que desea implementar una página web como se muestra en la siguiente imagen:
Figura 4. Diseño web
Primero, dividimos los elementos de la página web en las filas y columnas correspondientes. La siguiente figura muestra la división del autor:
Figura 5. Dividir el diseño web en filas y columnas
En consecuencia, defina nuestra estructura HTML y agregue la clase CSS Bootstrap apropiada:
Listado 11. Definición de la estructura HTML
<Div> <viv> <img src = "http://placehold.it/150x150"> </div> <div> <h1> jane doette </h1> <h3> front-end ninja </h3> </div> <hr> <div> <div> <img src = "http://placehold.it/950x350"> </div> <div> <div> <h2> trabajo destacado </h2> </div> <div> <div> <img src = "http://placehold.it/250x250"> <h2> aplicar </h2> href = "https://github.com/udacity/applify"> https://github.com/udacity/applify </a> </div> <viv> <img src = "http://placehold.it/250x250"> <h2> Sunflower </h2> <a href = "https://github.com/udacity/sunflower"> https://github.com/udacity/sunflower </a> </div> <div> <img src = "http://placehold.it/250x250"> <h2> Bokeh </ h2> <a a href = "https://github.com/udacity/bokeh"> https://github.com/udacity/boheh </a> </div> </div>
El autor tardó menos de 10 minutos en escribir el código anterior, y como no había fotos, el autor usó las imágenes de marcador de posición proporcionado en línea. Abrir esta página en un navegador está cerca del diseño, pero la fuente, el mayúscula, el mayúscula y la tipos de letra aún son inconsistentes con el diseño. A continuación, debe ajustar y navegar por el documento de arranque para descubrir clases CSS relacionadas. El efecto final se muestra en la figura a continuación:
Figura 6. Efecto de realización
Lo que es más interesante es que cuando reduce la ventana del navegador, o acceda a la página desde su teléfono, encontrará que ya es una página simple y receptiva, ¡y no hemos agregado ningún código adicional! Mirando el momento, tomó menos de 20 minutos en total, y también cumplí mi promesa de escribir una página receptiva en minutos.