Cargando

Ir a contenido

X

 


Maquetar un proyectos web con Bootstrap 2.0

Bootstrap es un framework diseñado para simplificar el proceso de creación de diseños web. Para ello ofrece un conjunto de clases CSS y de archivos JavaScript ya programados, en este tutorial veremos como usarlo y en qué consiste.


Escrito por el jun 20 2014 09:04


La tarea pricipal al crear una web es maquetar el diseño crear la estructura con xhtml y css para definir los espacios del contenido, para ayudarnos en esta tarea existe frameworks estandar como 960gs o Bootstrap.

En este caso vere Bootstrap que ha sido desarrollado y utilizado por Twitter.

Bootstrap es un framework diseñado para simplificar el proceso de creación de diseños web. Para ello ofrece un conjunto de clases CSS y de archivos Javascript ya programados, los cuales permiten desarrollar tareas como:


  • Diseño web que funcionen en los navegadores actuales, sin tener que realizar muchos cambios.
  • Un diseño web que pueda ser visualizado de forma correcta en distintos dispositivos y a distintas escalas y resoluciones.
  • Una mejor integración con las librerías mas habitualmente utilizadas, como por ejemplo jQuery.
  • Un diseño sólido basado en herramientas actuales y estándares cómo CSS3/HTML5


Comenzaremos un ejemplo descargando el framework http://getbootstrap.com/2.3.2/

bootstrap.jpg


Descomprimimos el archivo y veremos 2 directorios con los componentes de bootstrap
Crewamos un archivos index.html que iremos explicando.

Creamos un html con los componentes basicos:

<!DOCTYPE html>
<html>
  <head>
    <title>Diseño con Bootstrap</title>
    <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
    <link href="bootstrap/css/bootstrap-responsive.min.css" rel="stylesheet">
</head>
  <body>
  
 /*  Aquí ira el contenido */

    <script src="js/jquery.js"></script>
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>


Bootstrap dive la estructura de 980px en 12 columnas de 60pixeles para poner contenido. Los bloques que se pueden crear van del 1 al 12 utilizando la clase spanx asi span1 será un bloque de 60 pixeles. Un ejemplo de todos los bloques de contenido que podemos tener.

bootstrap_2.jpg


Vamos acrear un estructura basica de una web cabecera, columna izquierda, contendio, pie de pagina. Todas las clase ya vienen en el frameworks

<div class="container">	 //marco contenedor  general
  <div class="row">		  //define el comienzo de una fila de bloques
	 <div class="span12">	 //bloque de 12 columnas igual a 980px para la cabecera;
	  <!--Cabecera-->
    </div> 	      
    <div class="span2" >   //bloque de 2 columnas igual a 120px para la columna;
	  <!--Columna -->
    </div>
    <div class="span10" >   //bloque de 10 columnas igual a 600px para contenido;
	  <!--Contenido -->
    </div>
	 <div class="span12">   //bloque de 12 columnas igual a 980px para el pie;
	  <!--Pie-->
    </div>
  </div>


Componentes para crear un menu

En la parte de la cabecera podes insertar un menu de listas con las clases navbar para crear un menú:
  <div class="span12">	 //bloque de 12 columnas igual a 980px para la cabecera;
  <div class="navbar">
  <div class="navbar-inner">
    <ul class="nav">
	  <li class="active"><a href="#">Tema 1</a></li>
	  <li><a href="#">Tema2</a></li>
	  <li><a href="#">Tema 3</a></li>
    </ul>
  </div>
</div>

Así podemos observar nuestro menú listo sin haber tenido que lidiar con css.


Luego si querés extender bootstrap creando nuestras propias reglas css creamos otro archivo default.css y allí ponemos nuestro código de esa manera luego añadimos nuestra clase en el código ejemplo:

<div class="navbar  miclase ">

Creamos un contenido en la columna contenido

  <div class="span10" >   //bloque de 10 columnas igual a 600px para contenido;
    <div class="hero-unit">
	 <h1>Testeando bootstrap</h1>
  <p>Creamos contenido con Bootstrap para explicar el tutorial</p>
  <p></p>	   //un parrafo vacio es igual a dejar un renglon o espacio
    <a class="btn btn-primary btn-large">
	  Ver Bootstrap
    </a>
  </p>
</div>
</div>

El resultado al refrescar nuestro ejemplo sera:


El ejemplo no es una web completa ni con una estética apreciable, pero como vemos con poco esfuerzo podemos hacer un demo o crear plantillas sin necesidad más que un editor de texto y ahorrar mucho trabajo con toda la plataforma estandarizada.
¿Te ha gustado y ayudado este Tutorial?
Puedes premiar al autor pulsando este botón para darle un punto positivo
  • -
  • 0


Tutoriales Relacionados



Sin comentarios, sé el primero!

No esperes más y entra en Solvetic
Deja tus comentarios y aprovecha las ventajas de la cuenta de usuario ¡Únete!
10
VOTA
5
100%
4
0%
3
0%
2
0%
1
0%

  Información

  •   Publicado jun 20 2014 09:04
  •   Actualizado jun 20 2014 09:14
  •   Visitas 4.9K