Bootstrap 3 es móvil primero, en este sentido, el código Bootstrap comienza con dispositivos de pantalla pequeños (como dispositivos móviles, tabletas) y luego se expande a componentes y cuadrículas en dispositivos de pantalla grande (como computadoras portátiles, escritorios).
1. Estrategia de prioridad del dispositivo móvil
1. Contenido: decidir qué es lo más importante.
2. Diseño
Diseño preferencial de anchos más pequeños.
Se prefiere CSS básico para dispositivos móviles, y las consultas de medios están dirigidas a tabletas y computadoras de escritorio.
3. Mejorado gradualmente
Agregue elementos a medida que aumenta el tamaño de la pantalla.
A medida que aumenta la pantalla o el tamaño de la visión, el sistema se dividirá automáticamente en hasta 12 columnas. Como se muestra en la figura a continuación:
2. Principio de trabajo del sistema de cuadrícula Bootstrap (sistema de cuadrícula)
El sistema de cuadrícula crea diseños de página a través de una serie de filas y columnas que contienen contenido. Aquí hay una lista de cómo funciona el sistema Bootstrap Mesh:
1. Las filas deben colocarse en la clase .continer para obtener la alineación y el relleno adecuados.
2. Use filas para crear grupos horizontales de columnas.
3. El contenido debe colocarse en la columna, y solo la columna puede ser un elemento infantil directo de la fila.
4. Las clases de cuadrícula predefinidas, como .Row y .Col-XS-4, se pueden usar para crear rápidamente diseños de cuadrícula. Se pueden usar clases menos híbridas para diseños más semánticos.
5. Las columnas crean espacios entre el contenido de la columna a través del relleno. Este margen interno es negativo por el margen en.
7. El sistema de cuadrícula se crea especificando las doce columnas disponibles que desea abarcar. Por ejemplo, para crear tres columnas iguales, use tres .COL-XS-4.
3. Consulta de medios
Las consultas de los medios son muy elegantes "reglas CSS condicionales" muy elegantes. Solo se aplica a algunos CSS basados en ciertas condiciones prescritas. Si se cumplen esas condiciones, se aplica el estilo correspondiente.
Las consultas de los medios en Bootstrap le permiten moverse, mostrar y ocultar contenido basado en el tamaño de la vista. La siguiente consulta de medios se usa en el archivo menos para crear umbrales críticos de punto de interrupción en el sistema de cuadrícula Bootstrap.
/* Dispositivo Ultra-Small (teléfono móvil, menos de 768px)* //* Sin consulta de medios de medios de forma predeterminada en bootstrap*///* dispositivo pequeño (tableta, que comienza desde 768px)*/ @media (min-width: @screen-sm-min) {...}/* dispositivo medio (escritorio, desde 992px)*/ @medios (medios (min-width: screen-md-md-min) {...} Dispositivo (escritorio grande, que comienza desde 1200px) */ @media (mínimo-width: @screen-lg-min) {...}A veces incluimos el ancho máximo en nuestro código de consulta de medios, lo que limita el impacto de CSS a una gama más pequeña de tamaños de pantalla.
@media (max-width: @screen-xs-max) { ... }@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... }@media (min-width: @screen-lg-min) { ... }Hay dos partes para la consulta de medios, primero una especificación de dispositivo y luego una regla de tamaño. En el caso anterior, se establecen las siguientes reglas:
Veamos la siguiente línea de código:
@Media (min-width: @screen-sm-min) y (width max: @screen-sm-max) {...}
Para todos los dispositivos con Min-Width: @Screen-SM-Min, se realizará algún procesamiento si el ancho de la pantalla es más pequeño que @Screen-SM-Max.
4. Opciones de cuadrícula
La siguiente tabla resume cómo funciona el sistema de malla Bootstrap en múltiples dispositivos:
5. Estructura básica de la cuadrícula
Aquí está la estructura básica de la cuadrícula de bootstrap:
<Div> <Viv> <Viv> </div> <div> </div> </div> <div> ... </div> </div> <div> ....
Aquí hay un ejemplo de código específico:
<Viv> <h1> Hello, World! </h1> <div> <!-Teléfono móvil de dispositivo pequeño (<768px)-> <div style = "fondo: #f00"> 1 </div> <div style = "fondo: #b2b0b0"> 2 </div> <div style = "fondo: #ff6a00"> 3 </shiv> <divsy style = " #ffd800" #ffd800 "Div 4 style = "Background: #4cff00"> 5 </div> <div style = "fondo: #0ff"> 6 </div> <div style = "fondo: #0094ff"> 7 </div> <div style = "fondo: #0094ff"> 7 </by style = "fondo: #b200ff"> 8 </div> <divil style = "background: #ff00dc" "Div style =" div. style = "Background: #FF006E"> 10 </div> <div style = "fondo: #ac5050"> 11 </div> <div style = "fondo: #54bd4f"> 12 </div> </div> <div> <!-Tableta de dispositivos pequeños (≥768px)-> <bitle de div style = "fondo: #b2b0b0"> 1 <//div> #ffd800 "> 1 </div> <div style =" fondo: #ac5050 "> 1 </div> </div> <div> <!-computadora de escritorio de tamaño mediano (≥992px)-> <div style =" fondo: #ac5050 "> 1 </div> <div style =" fondo: #54bd4f "> 1 </div> </div> <div> <! (≥1200px) -> <div style = "fondo: #ac5050"> 1 </div> <div style = "fondo: #54bd4f"> 1 </div> </div> </div> </div>
6. Columna de compensación
Offset es una característica útil para diseños más profesionales. Se pueden usar para hacer más espacio para la columna. Por ejemplo, las clases .col-xs =* no admiten compensaciones, pero simplemente pueden lograr esto usando una celda vacía.
Para usar compensaciones en monitores de pantalla grandes, use la clase .col-md offset-*. Estas clases aumentarán el margen izquierdo de una columna por * columna, donde * el rango es de 1 a 11.
En el siguiente ejemplo, tenemos <div> .. </div>, y usaremos la clase .col-md-ofset-3 para centrar este div.
<div> <div> <div style = "fondo de fondo: #dedf8;"> <p> columna de compensación de prueba --- 3 columnas se desplazan al día aquí </p> </div> </div> <div> <divsy style = "fondo: #f00"> 1 <//style = "fondo: #b2b0b0"> 2 </iv> <bondle = "fondo: #ff6a00> 3 div> div>/div> div>/div>/div>/div>/div>/div>/div>/div>/div>/div>/div>/divse style="background: #ffd800">4</div> <div style="background: #4cff00">5</div> <div style="background: #0ff">6</div> <div style="background: #0094ff">7</div> <div style="background: #b200ff">8</div> <div style="background: #ff00dc">9</div> <div style = "Background: #FF006E"> 10 </div> <div style = "Fondo: #AC5050"> 11 </div> <div style = "Fondo: #54bd4f"> 12 </div> </div> </div> </div> </div>
Efecto de visualización:
7. columnas anidadas
Para anidar la cuadrícula predeterminada en el contenido, agregue un nuevo .row y agregue un conjunto de columnas .col-md-* dentro de una columna .col-md-* existente. Las filas anidadas deben contener un conjunto de columnas, y el número de columnas en este conjunto de columnas no puede exceder las 12 (en realidad, no hay requisito de que deba ocupar 12 columnas).
En el siguiente ejemplo, el diseño tiene dos columnas, y la segunda columna se divide en dos filas y cuatro cuadros.
<div> <div> <div style = "fondo: #b2b0b0"> Primera columna </iv> <div style = "fondo: #dedf8"> la segunda columna: hay cuatro divs anidados en it <div> <div style = "fondo: #0094ff"> Estoy contento un contenido <Br /> <Br /> <Br /> </iv> <divsy style = "back: #b200ff" </div> <div> <div style = "fondo: #ff00dc"> Soy contenido tres <Br/> <Br/> <Br/> </div> <div style = "Fondo: #FF006E"> Soy contenido cuatro </div> </div> </div> </div> </div> </div> </div>
Efecto de visualización:
8. Clasificación de columna
Otra característica perfecta del sistema de malla Bootstrap es que puede escribir columnas fácilmente en un orden y luego mostrarlas en otro.
Puede cambiar fácilmente el orden de las columnas de cuadrícula incorporadas con clases .col-md-push-* y .col-md-pull-*, donde* varía de 1 a 11.
En el ejemplo a continuación, tenemos dos diseños de columna, la columna izquierda es estrecha, como la barra lateral. Usaremos las clases .col-md-push-* y .col-md-pull-* para intercambiar el orden de las dos columnas.
<Div> <div> <div style = "fondo: #ff00dc"> izquierda </div> <div style = "fondo: #ff006e"> derecho </div> </div> </div>
Efecto de visualización:
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.