sistema de arranque rejilla Ejemplo: teléfonos móviles, computadoras tablet, ordenadores de sobremesa
Hemos visto equipos de tamaño mediano y grande . Ahora, vamos a ver otro ejemplo, vamos a hacer que sea igualmente adecuado para los pequeños teléfonos móviles. Queremos que la columna de la tableta se divide en un 25% / 75%, añadiremos las siguientes opciones:
<Div class = "col-sm-3 col-MD-6 col-lg-4"> .... </ div> <Div class = "col-sm-9 col-MD-6 col-lg-8"> .... </ div>
Ahora, nos dan un diseño diferente columna 3, respectivamente, para los tres dispositivos. En el teléfono, se deja a la derecha el 25% de diseño 75%. En tabletas, será la distribución de 50% / 50%. En los equipos de visualización grande, será la distribución de 33% / 66%. Véase el siguiente ejemplo para la verificación. (En este caso, las columnas se definen para cada estilo, puede evitar hacerlo.)
<! DOCTYPE html>
<Html>
<Head>
<Título> ejemplo Bootstrap - el teléfono, tablet, ordenador </ title>
<Enlace href = "/ bootstrap / css / bootstrap.min.css" rel = "stylesheet">
<Script src = "/ scripts / jquery.min.js"> </ script>
<Script src = "/ bootstrap / js / bootstrap.min.js"> </ script>
</ Head>
<Cuerpo>
<Div class = "contenedor">
<H1> Hola, mundo! </ H1>
<Div class = "fila">
<Div class = "col-sm-3 col-MD-6 col-lg-8"
style = "background-color: # dedef8;
box-shadow: 1px 1px 1px inserción # 444,
inserción 1px 1px 1px # 444; ">
<P> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed hacer
eiusmod tempor ut labore et dolore incididunt magna aliqua. Ut
enim ad minim veniam, quis nostrud laboris exercitation ullamco
nisi ut aliquip consequat ex ea commodo.
</ P>
<P> Sed ut perspiciatis unde omnis iste natus error sit voluptatem
accusantium doloremque laudantium, totam rem aperiam, eaque ipsa
quae ab illo inventore veritatis et ARCHITECTO cuasi beate vitae
dicta explicabo sunt.
</ P>
</ Div>
<Div class = "col-sm-9 col-MD-6 col-lg-4"
style = "background-color: # dedef8;
box-shadow: 1px 1px 1px inserción # 444,
inserción 1px 1px 1px # 444; ">
<P> Sed ut perspiciatis unde omnis iste natus error sit voluptatem
accusantium doloremque laudantium.
</ P>
<P> Neque Porro quisquam est, qui dolorem ipsum dolor sit amet quia,
consectetur, adipisci velita, sed quia no numquam eius modi
tempora incidunt ut labore et dolore magnam aliquam quaerat
voluptatem.
</ P>
</ Div>
</ Div>
</ Body>
</ Html>
Los resultados son los siguientes:
