Tutoriales básicos de Bootstrap

Plugins de Bootstrap

Ejemplo de sistema de rejilla de Bootstrap: dispositivos medianos y grandes Normas de codificación CSS de Bootstrap

Ejemplo de sistema de rejilla de Bootstrap: apilado horizontal

Vamos a ver un ejemplo de rejilla con un diseño simple: contiene dos columnas, cada una con dos párrafos. (Aquí, se han definido estilos para cada columna, lo que puede evitarse.).

ejemplo en línea

ejemplo

<!DOCTYPE　html>
<html>
<head>
　　　<meta　charset="utf-8">
　　　<title>Bootstrap ejemplo　-　apilado horizontal</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, mundo!</h1>
	<div class="row">
		<div class="col-md-6"estilo="fondo-color: #dedef8;caja-sombra: 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>
			<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"estilo="fondo-color: #dedef8;caja-sombra: inset　1px　-1px　1px #444, inset　-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 quia dolor sit amet,　
			consectetur, adipisci velit, sed quia non numquam eius modi　
			tempora incidunt ut labore et dolore magnam aliquam quaerat　
			voluptatem.　
			</p>
		</div>
	</div>
</div>
</body>
</html>

prueba y observa ‹/›

los resultados se muestran a continuación:

detalles

<div>...</div>/div> los elementos se han agregado, asegúrese de que estén centrados y tengan el ancho máximo.
Una vez que se ha agregado el contenedor, a continuación, debe considerar hacerlo por filas. Agregar <div>...</div>/div>y agregar columnas dentro de la fila <div></div>.
Cada fila de la rejilla está compuesta por 12 unidades compuestas, puede usar estas unidades para definir el tamaño de las columnas. En nuestro ejemplo, hay dos columnas, cada una compuesta por 6 unidades, es decir 6+6=12.

Puede intentar otras muchas opciones, como <div></div> y <div></div> o <div></div> y <div></div>.

Puede intentar, pero asegúrese de que la suma siempre sea 12.

Ejemplo de sistema de rejilla de Bootstrap: dispositivos medianos y grandes Normas de codificación CSS de Bootstrap