Aprendí Bootstrap hace unos días y resolví el sistema de cuadrícula. Si hay algún error, no dude en corregirlos.
Resumen: El sistema de cuadrícula ha desarrollado páginas web receptivas para PC, PAD y terminales móviles, y existen diferentes soluciones basadas en diferentes resoluciones de pantalla.
(0.1, el tamaño del dispositivo de pantalla es mayor que 1200px Select COL-LG
(0.2. El tamaño del dispositivo de pantalla está entre 970px y 1200px seleccionado Col-MD
(0.3. El tamaño del dispositivo de pantalla está entre 768px y 970px seleccionado col-sm
(0.4. El tamaño del dispositivo de pantalla es inferior a 768px seleccionado col-xs
1. El sistema de cuadrícula divide la página en 12 columnas (hasta 12 columnas), como sigue :
<! Doctype html> <html lang = "zh-cn"> <head> <meta charset = "utf-8"> <meta name = "viewport" content = "width = dispositivo-width, inicial-escala = 1, maxinum-escala, user-scalable = no"> <titter> raster system </title> <link rel = "stylesheet" Stylesheet " href = "biblioteca/bootstrap.min.css"> <style> .a {altura: 50px; borde: 1px sólido rojo; Antecedentes: rosa; } </ystye> </head> <body> <viv> <div> <div> 1 </div> <div> 1 </div> <div> 1 </div> <div> 1 </div> <div> 1 </div> <div> 1 </div> <div> 1 </div> 1 </div> <div> 1 </div> <div> 1 </div> <div> 1 <div> 1 <div> 1 <div> 1 <div> 1 <div> 1 <div> 1 <div> <VIV> 1 </div> <div> 1 </div> <div> 1 </div> <div> 1 </div> <div> 1 </div> <div> 1 </div> <div> 1 </div> <div> 1 </div> <div> 1 </siv> <div> 1 </div> <div> 1 </div> <diM> 3 </div> <div> </div> <div> <div> <div> <div> <div> <div> <divs> <div> </div> </div> <script src = "biblioteca/jq.js"> </script> <script src = "biblioteca/bootstrap.min.js"> </script> </body> </html>(2.1, Col-MD-1 es una columna, con un total de 12 columnas cubiertas con una "fila horizontal". El número que sigue después de MD es el número de columnas asignadas (Col-LG, Col-SM, Col-XS es el mismo)
3. En dispositivos con diferentes resoluciones de pantalla, la página presentada es la "página de barra de formato de trama" correspondiente, realizando así un diseño receptivo, de la siguiente manera :
<! Doctype html> <html lang = "zh-cn"> <head> <meta charset = "utf-8"> <meta name = "viewport" content = "width = dispositivo-width, inicial-escala = 1, maxinum-escala, user-scalable = no"> <titter> raster system </title> <link rel = "stylesheet" Stylesheet " href = "biblioteca/bootstrap.min.css"> <style> .a {altura: 50px; borde: 1px sólido rojo; Antecedentes: rosa; } </ystye> </head> <body> <viv> <div> <div> 1 </div> <div> 1 </div> <div> 1 </div> <div> 1 </div> <div> 1 </div> <div> 1 </div> <div> 1 </div> 1 </div> <div> 1 </div> <div> 1 </div> <div> 1 <div> 1 <div> 1 <div> 1 <div> 1 <div> 1 <div> 1 <div> <Div> 1 </div> <div> 1 </div> <div> 1 </div> <div> 1 </div> <div> 1 </div> <div> 1 </div> </div> </div> </div> <script src = "biblioteca/jq.js"> </script> <script src = "biblioteca/bootstrap.min.js"> </script> </script> </script> </script> </body> </script> </script> </script> </script> </body> </script> </script> </script> </script> </script> </HOLY> </HOBI(3.1. El código anterior muestra que cuando el tamaño del dispositivo de pantalla es superior a 1200px, una fila horizontal tiene cuatro columnas, una columna grande tiene tres columnas pequeñas y la columna pequeña tiene un total de 12 columnas.
(3.2, indicando que cuando el tamaño del dispositivo de pantalla está entre 970px y 1200px (primero puede mirar el navegador que se encoge en esta etapa), hay tres columnas en una fila horizontal y cuatro columnas en una columna grande, con un total de 12 columnas.
(3.2, lo que indica que cuando el tamaño del dispositivo de pantalla está entre 768px y 970px (primero puede mirar el navegador que se encoge en esta etapa), hay dos columnas grandes en una fila horizontal y seis columnas pequeñas en una columna grande, con un total de 12 columnas.
(3.2, lo que indica que cuando el tamaño del dispositivo de pantalla es inferior a 768px (primero puede mirar el navegador que se encoge en esta etapa), hay una columna grande en una fila horizontal, y una columna grande tiene doce columnas pequeñas, con un total de 12 columnas.
4. Posiciones de compensación de columna, anidación y intercambio en el sistema Raster
(4.1, desplazamiento de columna
<Div> <Viv> 8 </div> <div> 3 </div> <!-La columna compensa uno por uno a la derecha-> </div>
(4.2, anidación
<div> <!-Nesting-> <div style = "Padding: 0;"> <div> </div> <div> </div> <div> </div> </div> <div> 3 </div> </div>
(4.3, posición de intercambio
<div> <!-posición de intercambio-> <div> 9 </div> <!-empuje, muévase a la derecha-> <div> 3 </div> <!-tire, muévase a la izquierda-> </div>
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
Este artículo utiliza los casos más simples para analizar los puntos de diseño clave involucrados en el caso, con la esperanza de ser útiles para el aprendizaje de todos.