sistema de red de arranque Ejemplo: equipos medianos y grandes
En el ejemplo: nivel de pila , hemos visto el sistema de red básica. Aquí, utilizamos dos div, y en el medio de la anchura de la ventana gráfica de ellos 50% / 50% de división:
<Div class = "col-MD-6"> .... </ div> <Div class = "col-MD-6"> .... </ div>
Sin embargo, en los equipos a gran escala, su diseño final de 33% / 66%. Así que tenemos que hacer es estar preparado para cambiar el ancho de columna del punto de ruptura:
<Div class = "col-MD-6 col-lg-4"> .... </ div> <Div class = "col-MD-6 col-lg-8"> .... </ div>
Ahora Bootstrap en equipos de tamaño mediano, busque las clases conmd, y los utilizan.En gran escala de equipos, busque las clases conLG, y utilizarlos.En este ejemplo, nuestros dos div de 50% / 50% dividido en 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> Bootstrap ejemplo - a medio y grandes equipos </ 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-MD-6-lg Col-4" 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-MD-6-lg col-8" 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: