Uso de bootstrap

En esta sección se resolverán temas de diseño gráfico, como uso de herramientas como photoshop, illustrator, herramientas para prototipado, herramientas de diseño web, entre otros.

Moderator: julianmartinez16

Post Reply
User avatar
xacarana
Site Admin
Posts: 1213
Joined: Fri Jan 15, 2016 6:13 pm

Uso de bootstrap

Post by xacarana » Mon Aug 29, 2016 3:09 pm

Para maquetar un documento, se recomienda usar bootstrap, ya que me facilita la diagramación de un documento a partir de un wireframe.

Para mayor información, visitar el sitio de bootstrap
  1. Descargar bootstrap.min.css, que esta acá
  2. Guarde la librería en la carpeta css

    Code: Select all

    css/
  3. Víncule con el html la librería, así :

    Code: Select all

    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
  4. Para validar que bootstrap esta funcionando empiece a agregar clases a los elementos html y mire el resultado
La configuración se explica paso a paso en el siguiente video:



O también le recomiendo ver la lista de reproducción para más ejemplos

Lista de reproducción en youtube
Andrés Bedoya Tobón
Profesor
"I only smile in the dark, I only smile when it's complicated" Raybiez

User avatar
xacarana
Site Admin
Posts: 1213
Joined: Fri Jan 15, 2016 6:13 pm

Re: Uso de bootstrap

Post by xacarana » Mon Aug 29, 2016 3:38 pm

Para diagramar un contenedor al lado de otro, cada uno con display en bloque, se hace de la siguiente forma:

HTML

Code: Select all

<div class="clearfix">
		<div id="circulo" class="animated bounceIn pull-left"></div>
		<p class="texto pull-right">
			Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
		</p>
	</div>
	<p class="texto2">
		Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do 
	</p>
Explicación funcionamiento de clearfix acá:

Andrés Bedoya Tobón
Profesor
"I only smile in the dark, I only smile when it's complicated" Raybiez

Post Reply