Debido a las necesidades del proyecto, planeo aprender bien el marco Bootstrap. Aprendí un poco antes. El marco no es difícil en general, pero todavía hay muchas cosas involucradas. Si desea dominarlo de manera competente, aún necesita practicar más.
1. ¿Qué es Bootstrap?
¿Qué es BS? Es decir, la herramienta de marco estandarizada creada por la página de front-end se ha escrito en el estilo CSS.JS, y solo necesita ser utilizado.
¿Cómo usar BS? El efecto se incrementa principalmente mediante el uso de diferentes clases, y cada clase tiene diferentes funciones correspondientes.
Beneficios de BS: aumenta la eficiencia del desarrollo, hace que el diseño de la página sea más hermoso y respalda el desarrollo receptivo. Descargar dirección: https://github.com/foreverjiangting/bootstrap
Documentación de aprendizaje: http://v3.bootcss.com/getting-started/
2. Diseño de estilo CSS
1. Basado en la documentación HTML
Bootstrap se refiere a algunos elementos HTML, por lo que el encabezado debe escribirse como la columna de muestra que se muestra a continuación.
<! DocType html> --- contiene una declaración de documento HTML5, todos los navegadores activan el modo estándar <html> <fead> <meta charset = "utf-8"> <meta http-oquiv = "x-ua compatible" content = "ie = borde"> <meta name = "viewport" width = dispositivo-width, inicial-scale ". Las metaetiquetas * deben * ser colocadas primero, y cualquier otro contenido * debe * seguirlas! Asegúrese de que se admitan los diseños receptivos-> <title> bootstrap </title> [/code] [código] <!-nuevo archivo CSS de Bootstrap Core-> <Link rel = "Stylesheet" href = "// cdn.bootcss.com/bootstrap/3.3.5/csss/bootstrap.min.css"> Último ... ... -> <Link rel = "Stylesheet" href = "// cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap-theme.min.css"><!-- JQuery File. Asegúrese de introducir-> <script src = "// cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script><!-- El último archivo JavaScript de Bootstrap Core-> <script <script src = "// cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script></head><body><h1>hello, world! </h1> </body> </html>
2. Diseño del sistema de cuadrícula
Contenido de diseño configurando filas y columnas. Bootstrap establece la página en 12 columnas. Diseño cambiando el número de columnas, como configurar tres columnas de igual ancho:
<! 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> </title> <link href = "css/bootstrap.css" rel = "stylesheet"> <link href = "css/bootstrap.min.css" rel = "Stylesheet"> <script src = "http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"> </script> <script src = "http://cdn.bootcss.com/bootstrap/3.3.4/js/bootstrap.min.js"> </script> <sody <! Diseño-> <div> <!-o contenedor-fluid-> <div>-col-xs-4: se refiere a un dispositivo pequeño menor que 768px <div> 11 </div>-col-sm-4: se refiere a un dispositivo> = 768px <div> 22 </div>-col-md-4: se refiere a un dispositivo> = 992px <div> 33 </div>-COL-LG- Menos de 1200px </div> <div> 11 </div> <div> 22 </div> <div> 33 </div> </div> <div> 33 </div> </div> <div> <div> 11 </div> <div> 22 </div> <biv> 33 </div> <div> <div> 33 </div> <div> <div> <div> <div> <div> <div> 22 <Div> <div> <Div> 33 </div> </div> <div> <div> 11 </div> <div> 22 </div> <div> 33 </div> </div> </div> </body> </html>
Hay cuatro formas de escribir el formato de red CSS, que se utilizan principalmente en la resolución de diferentes dispositivos.
2: Traducir la columna
Use Offset a Pan. Es decir, el número de columnas traducidas
<Viv> <!-o contenedor-fluid-> <div> <div> 11 </div> <div> 22 </div> <div> 33 </div> --- se refiere al derecho de 33 </div> <div> 11 </div> <div> 22 </div> <div> 33 </div> --- se refiere al derecho de 33 </iv> <iv> 11 <div> <Div> 33 </div> </div> <div> 11 </div> <div> 22 </div> <div> 33 </div> </div> </div> <!-columna de traduce->
Los efectos son los siguientes:
33 Dado que se tradujeron las dos columnas, no pudo cumplir con su requisito de ocupar 4 columnas, por lo que se exprimió en la siguiente fila y comenzó a ocupar 4 columnas. En pocas palabras, es equivalente a mover todo el bloque DIV a la derecha.
3: columnas anidadas
Es decir, columnas de nido en la columna de la cuadrícula. Comparemos.
<Viv> <!-o contenedor-fluid-> <div> <div> <div> 11 </div> <div> 22 </div> <div> 33 </div> </div> </div> <div> <div> 11 </div> </div> <div> 11 </div> </div> <div> 11 </div> <div> 22 </div> <div> <div <div> </div> </div> <div> 11 </div> <div> 22 </div> <div> 33 </div> </div> </div> </div>
Los efectos son los siguientes:
¿Has encontrado algún problema? ¿Por qué no hay una distribución igual de 8 arriba?
Razón: echemos un vistazo a la consola de depuración
.Col-XS-1, .COL-XS-10, .COL-XS-11, .COL-XS-12, .COL-XS-2, .COL-XS-3, .COL-XS-4, .COL-XS-5, .COL-XS-6, .COL-XS-7, .COL-XS-8, .COL-X-9 {MIN-HEITH. ROLED-LEFUNDA: 15px; Right de relleno: 15px; Posición: relativo;}Se descubrió que el relleno-izquierda y el relleno de la derecha son de 15px. Esto se debe a que el relleno entre columnas es digna de influencia, entonces, ¿por qué el segundo div no tiene influencia? Exploremos el principio de la cuadrícula de la cerca.
1. "La fila" debe incluirse en .container (ancho fijo) o .container-fluid (100% de ancho) para darle la alineación y el relleno apropiados.
2. Cree un canal entre columnas configurando la propiedad padding para "columna". Estableciendo un margin negativo para el elemento .row , padding compensado establecido para el elemento .container
Indirectamente, la "columna" contenida en la "fila" compensa padding .
Nota : En este momento, la fila ha compensado el relleno de la columna, por lo que no hay valor de relleno.
4: clasificación de columna
El uso principalmente de col-xs-push-* col-xs-pull-* (* representa un número de 0-11) ¿Cómo entender estas dos clases? Push significa empujar, tirar significa tirar.
<Div> <Viv> 21 </div> <div> 24 </div> </div> <div> <div> 21 </div> <div> 24 </div> </div>
Las representaciones son las siguientes:
<Div> 21 </div> --- registrado como Div1 <iv> 24 </div>-registrado como Div2
Se puede entender que es intercambiar las posiciones de ambos. Debe empujar DIV1 a las 8 columnas derecha, y debe tirar de 4 columnas a la izquierda.
3. Diseño de la cuadrícula de transmisión
1. El ancho de la columna utiliza porcentajes, no píxeles
2. Cambie la clase de fila a fluido de fila
3. Otras funciones básicas son las mismas que el diseño fijo anterior y la capacidad de respuesta de soporte.
4. Al dividir una determinada columna en un bisectorial, ya que el diseño de transmisión usa porcentajes, debe calcularse de acuerdo con 6.
// Tenga en cuenta la siguiente situación. Al dividir 8 columnas bilateralmente, no se establece en dos 4s, sino dos 6s, porque hay 12 columnas de distribución de ráster en Bootstrap. <Div> <Viv> <Viv> 2 </div> <div> 2 </div> </div> </div> </div> </div>
Echemos un vistazo a la aplicación de diseños de transmisión y los comparemos con diseños fijos.
< clases de contenedores y contenedores-fluido, y este es el ancho de la pantalla <iv> 333 </div> <div> 444 </div> </div>
Cuando la pantalla es inferior a 768px, el efecto es el siguiente:
Cuando la pantalla es mayor que 992px, el efecto es el siguiente: en este momento, una línea es exclusiva
La clase de fluido de fila (muy importante) determina si se trata de un diseño de flujo. Luego, el código de bloque de contenido se escribe de la misma manera que el sistema de cuadrícula, y aún comienza de Col-MD-1 a Col-MD-12, que corresponde a diferentes porcentajes respectivamente.
4. Diseño receptivo
En pocas palabras, admite las resoluciones (960px, 1366px, 978px, etc.) de diferentes dispositivos (teléfonos móviles, PC) para respuesta adaptativa.
<Div> <Viv> 21 </div> <div> 24 </div> </div>
Cuando el dispositivo es inferior a 768px, el efecto es el siguiente:
Cuando dispositivo> = 992px. Los efectos son los siguientes:
Las resoluciones de las dos categorías anteriores son diferentes. Col-MD-12 significa que cada columna tiene una fila, es decir, 12 columnas.
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 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.