Latest web development tutorials

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:

equipos de mediana y gran sistema de cuadrícula