1. Introducción
Bootstrap tiene un sistema de rejilla de transmisión de primer nivel, receptivo móvil. A medida que aumenta el dispositivo de pantalla o el tamaño de la visión, el sistema se dividirá automáticamente en hasta 12 columnas . Incluye clases predefinidas fáciles de usar y poderosas mezclas para generar más diseños semánticos.
2. Opciones de ráster
Bootstrap3.x utiliza cuatro opciones de cuadrícula para formar un sistema de cuadrícula. La introducción de estas cuatro opciones en el sitio web oficial es la siguiente. Mucha gente no lo entiende. Aquí explicaré las diferencias entre las cuatro opciones de cuadrícula en detalle. De hecho, solo una de las diferencias es que son adecuadas para dispositivos de pantalla de diferentes tamaños . Veamos el elemento de prefijo de clase. Vamos a nombrar estas cuatro opciones de cuadrícula para el prefijo. Son COL-XS, COL-SM, COL-MD y COL-LG. Aquellos que entiendan inglés sabrán que LG es la abreviatura de grande, MD es la abreviatura de Mid, SM es la abreviatura de la pequeña y XS es la abreviatura de ***. Este nombre refleja los diferentes anchos de pantalla a los que estas clases se adaptan. A continuación presentamos las características de estas clases.
La siguiente tabla le permite ver en detalle cómo funciona el sistema Raster de Bootstrap en múltiples dispositivos de pantalla.
3. Compensación de columna
Use .col-md-ofset-* para compensar la columna a la derecha. Estas clases agregan todas las columnas al margen izquierdo de la columna utilizando el selector *. Por ejemplo, .col-md-offset-4 cambió .col-md-4 a la derecha por 4 columnas de ancho.
4. Columnas anidadas
Para anidar el contenido utilizando rásters incorporados, se puede hacer agregando un nuevo .row y una serie de columnas .col-md-* en las columnas .col-md-* ya existentes. Las columnas contenidas en filas anidadas deben sumar hasta 12 .
5. Clasificación de columna
El orden de las columnas se puede cambiar fácilmente usando .Col-MD-Push-* y .Col-MD-Pull-*.
Caso
<%@ page lenguaje = "java" pageEncoding = "utf-8"%> <%string path = request.getContextPath ();%> <! DocType html> <html lang = "zh-cn"> <toad> <title> raster </title> <meta content = "ie = edge" http-eequiv = "x-ua-cacompatible"> <etaaMe "<metaArtable> <metaawapatible" <setai http-equiv = "content-type" content = "text /html; charset = utf-8" /> <meta http-equiv = "content-language" content = "zh-cn" /> <meta name = "autor" Content = "[email protected]" /> <meta name = "copyright" content = "parami | xiami | xiamenen nwuth netwuth Ltd. " /> <meta http-equiv = "pragma" content = "no-cache"> <meta http-equiv = "cache-confontrol" content = "no-cache"> <meta http-equiv = "expires" content = "0"> <meta http-equiv = "keywords" contenido = "palabras clave1, keyword2, keyword3" <piresword "<meta http-equiv =" Keywords "Content =" Keyword1, Keyword2, Keyword3 " http-equiv = "descripción" content = "esta es mi página"> <jsp: include page = "/damo/base/js_bootstrap.jsp"/> <style type = "text/css">. show-grid [class ^= "col-"] {padding-top: 10px; padding-bottom: 10px; background-color: #eee; border: 1px sólido; RGBA (86, 61, 124, .15); borde: 1px sólido RGBA (86, 61, 124, .2);} </style> <script type = "text/javaScript"> $ (function () {}); </script> </head> <body> <b> collg-*usage </b> <br/> <Div> <VIV> .COL-LG-8 </div> <div> .Col-LG-4 </div> </div> <br/> <b> col-md-*uso </b> <div> <div> .col-md-1 </div> <div> .col-md-1 </div> <div> .col-md-1 </div> <div> .col-md-1 </div> <div> .col-md-1 </div> <div> .col-md-- 1 </div> <div> .col-md-1 </div> <div> .col-md-1 </div> <div> .col-md-1 </div> <div> .col-md-1 </div> <div> .col-md-1 </div> <iv> .col-md-1 </div> </div> <br/> <b> col-md-8 </div> <div> .col-md-4 </div> </div> <br/> <b> col-sm-*use </b> <div> <div> .col-sm-8 </div> <div> .col-sm-4 </div> </div> <br/> <b> col-xs-*uso </b> <div> <div> .col-xs-8 </div> <div> .col-xs-4 </div> </div> <br/> <b> desplazamiento de la columna: col-md offset-*</b> <div> <div> .col-md-4 </div> <div> .col-md-4 </div> <div> .col-md-4 </div> <div> .col-md-4 </div> <di v> .col-md-4 </div> <div> .col-md-4 </div> <div> .col-md-4 </div> <div> .col-md-4 </div> <div> .col-md-4 </div> <div> .col-m d-4 </div> <div> .col-md-4 </div> <div> .col-md-4 </div> <div> .col-md-4 </div> <div> .col-md-4 </div> <div> .col-md-4 </d V> <VIV> .COL-MD-4 </div> <div> .Col-MD-4 </div> <div> .Col-MD-4 </div> <div> .Col-MD-4 </div> <div> .Col-Md-4 </div> </div> <br/> <b> Compensación de columna: col-md offset-*</b> <div> <div> .col-md-4 </div> <div> .col-md-4 </div> <div> .col-md .col-md offset-4 </div> </div> <div> <div> .col-md-3 .col-md offet-3 </div>. .col-md offset-3 </div> </div> <div> <div> .col-md-6 .col-md offset-3 </div> </div> <br/> <b> columnas anidadas: las columnas contenidas en una fila anidada deben ser iguales a 12 </b> <div> <iv> nivel 1: .col-md-9 <div> <iv> nivel 2: .col-md- 2: .col-md-6 </div> </div> </div> <br/> <b> clasificación de columna: .col-md-push-* y .col-md-pull-* </b> <div> <div> .col-md-9 .col-md-push-3 </div> <div> .col-md-3 .col-md-pull-9 </div> </div> </div> </body> </html>
Efecto de demostración
Lo anterior es el conocimiento relevante sobre el sistema de cuadrícula Bootstrap introducido por el editor. ¡Espero que te sea útil!