Bootstrap, de Twitter, es el marco front-end más popular en la actualidad. Bootstrap se basa en HTML, CSS y JavaScript. Es simple y flexible, lo que hace que el desarrollo web sea más rápido.
Puntos clave para el aprendizaje:
1. Se prefieren los dispositivos móviles
2. Contenedor de diseño
3. Sistema de cuadrícula
En esta lección, aprenderemos principalmente sobre el sistema de cuadrícula de Bootstrap y proporcionaremos un sistema de rejilla de transmisión de primer nivel receptivo.
uno. Se prefieren los dispositivos móviles
En el proyecto HTML5, hicimos el proyecto móvil. Tiene un meta muy importante para configurar la pantalla y el ancho de cuádruple del dispositivo y si ejecutar escala de usuarios y escala.
// El ancho de la pantalla es consistente con el dispositivo, el escalable inicial, el máximo escalable y la prohibición de la escala del usuario.
dos. Recipiente de diseño
Bootstrap requiere un contenedor .Container para el contenido de la página y el sistema de ráster. Debido a atributos como el relleno, estas dos clases de contenedores no pueden anidarse entre sí.
// Ancho fijo <Div> ... </div> // 100% ancho <div> ... </div>
En un sistema de trama, el navegador asignará automáticamente hasta 12 columnas a medida que el tamaño de la pantalla aumenta o disminuya. Cree un diseño de página combinando una serie de filas y columnas. El principio de trabajo es el siguiente:
1. "La fila" debe incluirse en .Container (ancho fijo) o .Container-Fluid (100% de ancho) para darle una alineación y relleno adecuados.
2. Cree un conjunto de "columnas" horizontalmente a través de "fila".
3. Su contenido debe colocarse en "columna", y solo la "columna" puede usarse como un elemento infantil directo de la fila.
4. Clases predefinidas como .Row y .COL-XS-4 se pueden usar para crear rápidamente diseños de ráster.
La mezcla definida en el código fuente de Bootstrap también se puede usar para crear diseños semánticos.
5. Crear un canal entre columnas configurando la propiedad de relleno para "columna". Estableciendo valores negativos para.
El margen compensa así el relleno establecido para el elemento .container, que compensa indirectamente el relleno para la "columna" contenida en "fila".
6. El margen negativo es la razón por la cual el siguiente ejemplo se destaca hacia afuera. Los contenidos en la columna Raster están dispuestos en una fila.
7. Una columna en un sistema de trama representa el rango que abarca especificando valores de 1 a 12. Por ejemplo, se pueden crear tres columnas de igual ancho utilizando tres .Col-XS-4.
8. Si la "columna" contenida en una "fila" es mayor que 12, los elementos en los que se encuentran la "columna" adicional se organizarán en otra fila en su conjunto.
9. La clase de cuadrícula es adecuada para dispositivos con ancho de pantalla mayor o igual al tamaño del punto de división, y cubre la clase de la cuadrícula para dispositivos de pantalla pequeña. Por lo tanto, la aplicación de cualquier clase de ráster .col-MD-* en el elemento es adecuada para dispositivos con anchos de pantalla mayores o igual al tamaño del punto de división y sobrescribe la clase Raster para dispositivos de pantalla pequeña. Por lo tanto, la aplicación de cualquier .col-lg-* en el elemento no existe, lo que también afecta el dispositivo de pantalla grande.
// Crear una fila receptiva <div> <iv> ... </div> </div> // crear una fila receptiva con hasta 12 columnas <VIV> <VIV> <VIV> 1 </div> <div> 2 </div> <div> 3 </div> <div> 4 </div> <div> 5 </div> <div> 6 </div> <div> 7 </div> <div> 8 </div> <div> 9 </div> <div> 10 </div> <div> <div> 11 </div> <div> 12 </div> <div> Css.a {altura: 100px; fondo de fondo: #eee; borde: 1px sólido #ccc;} // El número total de columnas es 12, y a cada columna se le asigna varias columnas <Div> <VIV> <VIV> 1-4 </div> <div> 5-8 </div> <div> 9-12 </div> </div> <div> <div> 1-8 </div> <div> 9-12 </div> </div> </div> 9-12 </div> </div>> </div>> 9-12 </div> </div>>>Tabla de parámetros de trama
Como se muestra en la figura anterior, la capa más externa del sistema de cuadrícula distingue cuatro anchos de navegadores: pantalla ultra pequeña (<768px), pantalla pequeña (> = 768px), pantalla media (> = 992px) y pantalla grande (> = 1200px). Los anchos adaptativos del contenedor interno .container son: automático, 750px, 970px y 1170px. Automático significa que si está en la pantalla del teléfono móvil, mostrará completamente exclusivamente una línea.
// Activar las cuatro pantalla Categorías <Div> <VIV> <VIV> 4 </div> <div> 4 </div> <div> 4 </div> <div> 4 </div> <div> 4 </div> <div> 4 </div> <div> 4 </div> <div> 4 </shiv> <div> 4 </div> <div> 4 </div> <div> 4 </div> <div> 4 </div> // a veces podemos configurar las compensaciones de la columna para mantener una brecha en el medio <div> <div> <div> 8 </div> <div> 3 </div> </div> </div> // también puede anidadarse, y la incrustación también es 12. columna <div> <div> <iv> 1-8 </div> <iv> <div> Cambie dos columnas, empuje hacia la izquierda y tire a la derecha <div> <div> <div> 9 </div> <div> 3 </div> </div> </div>
Lo anterior es información relacionada para el sistema de cuadrícula Bootstrap, ¡espero que sea útil para todos!