Herramientas como Bootstrap son muy prácticas a la hora realizar una web y organizar efectivamente el espacio de trabajo. Se comenzará incluyendo solo la parte de las columnas, pero más adelante estarán a la mano las mejores. Para dividir mejor el espacio de trabajo, las columnas de bootstrap representan la manera más adecuada para generalizar el trabajo, aquí se encuentran las divisiones más comunes que se suelen necesitar. Empiezo con la división para 5 columnas, más adelante se actualizaran las faltantes.
LINKEAR BOOTSTRAP A NUESTRO DOCUMENTO
HTML
<![CDATA[<!--DOCTYPE html-->
<html>
<head>
<title></title>
<script src="js/jquery.js"></script>
<link rel="stylesheet" href="css/bootstrap.css">
<script src="js/bootstrap.min.js"></script>
</head>
<body>
</body>
</html>]]>
1 COLUMNA
HTML
<![CDATA[<div class="row">
<div class="col-md-12"> 12 Col</div>
</div>]]>
2 COLUMNAS
HTML
<![CDATA[<div class="row">
<div class="col-md-6">.col-md-6</div>
<div class="col-md-6">.col-md-6</div>
</div>
]]>
3 COLUMNAS
HTML
<![CDATA[<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
</div>
]]>
5 COLUMNAS
HTML
<![CDATA[<div class="row">
<div class="col-sm-2 col-sm-offset-1"></div>
<div class="col-sm-2"></div>
<div class="col-sm-2"></div>
<div class="col-sm-2"></div>
<div class="col-sm-2"></div>
</div>
]]>
12 COLUMNAS
HTML
<![CDATA[
<div class="row">
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
</div>
]]>
0 comentarios:
Publicar un comentario