Tutoriales básicos de Bootstrap

Plugins de Bootstrap

Ejemplo de sistema de cuadrícula de Bootstrap: móvil, tableta, escritorio Ejemplo de sistema de cuadrícula de Bootstrap: horizontal apilado

Ejemplo de sistema de cuadrícula Bootstrap: dispositivos de tamaño medio y grande

en Ejemplo: horizontal apilado En, ya hemos visto el sistema de cuadrícula básica. Aquí, utilizamos 2 div, y centrarlas en el medio del ancho de la vista. 50%/50% la división:

<div>....</div>
<div>....</div>

Pero, en dispositivos de gran tamaño, el diseño final será 33%/66%. Por lo tanto, lo que debemos hacer es preparar cambios en el ancho de las columnas en los puntos de ruptura:

<div>....</div>
<div>....</div>

Ahora Bootstrap en dispositivos de tamaño medio, buscará aquellos con md clase, y utilícelas. En dispositivos de gran tamaño, se buscarán aquellos con lg clase, y utilícelas. En este ejemplo, nuestras 2 div se separarán desde 50%/50% la división se convierte en 33%/66%. Por favor, consulte los siguientes ejemplos para verificar. (Aquí, se han definido estilos para cada columna, y puede evitar hacerlo.).

ejemplo en línea

ejemplo

!DOCTYPE html>
<html>
<head>
　　　<title>Bootstrap ejemplo　-　dispositivos de tamaño medio y grande</title>
　　　<link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
　　　<script src="https://cdn.staticfile.org/jquery/2.0.0/jquery.min.js"></script>
　　　<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　　<h1>Hello, world!</h1>
　　　<div class="row">
　　　　　　<div class="col-md-6　col-lg-4" style="background-color: #dedef8;　
　　　　　　　　　box-shadow: inset　1px　-1px　1px #444, inset　-1px　1px　1px #444">
　　　　　　　　　<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do　
　　　　　　　　　　　　eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut　
　　　　　　　　　　　　enim ad minim veniam, quis nostrud exercitation ullamco laboris　
　　　　　　　　　　　　nisi ut aliquip ex ea commodo consequat.　
　　　　　　　　　</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 quasi architecto beatae vitae　
　　　　　　　　　　　　dicta sunt explicabo.　
　　　　　　　　　</p>
　　　　　　</div>
　　　　　　<div class="col-md-6　col-lg-8" style="background-color: #dedef8;box-shadow: inset　1px　-1px　1px #444, inset　-1px　1px　1px #444">
　　　　　　　　　Sed ut perspiciatis unde omnis iste natus error sit voluptatem　
　　　　　　　　　　　　accusantium doloremque laudantium.
　　　　　　　　　</p>
　　　　　　　　　No hay nadie que, por lo menos, sea indiferente al dolor propio por el dolor mismo, sino que lo busque.　
　　　　　　　　　　　　consectetur, adipsici velit, sed quia non numquam eiusmodi　
　　　　　　　　　　　　tempora incidunt ut labore et dolore magnam aliquam quaerat　
　　　　　　　　　　　　voluptatem.　
　　　　　　　　　</p>
　　　	</div>
　　</div>
</div>
</body>
</html>

Prueba aquí ‹/›

Los resultados se muestran a continuación:

Ejemplo de sistema de cuadrícula de Bootstrap: móvil, tableta, escritorio Ejemplo de sistema de cuadrícula de Bootstrap: horizontal apilado