El post que buscas se encuentra eliminado, pero este también te puede interesar

Introducción a Bootstrap [Parte 1]

Anuncios

Introducción a Bootstrap [Parte 1]

Antes que nada mencionar que este es mi primer Post en esta comunidad (aunque no soy nuevo en el campo del desarrollo web) así que espero que sea de su agrado, espero poder escribir en Taringa frecuentemente si todo va bien.


-¿Que es Bootstrap?-
Bootstrap es un framework fron-end, es decir, un conjunto de herramientas para el desarrollo de las interfaces de usuario. Este framework tiene componentes css, javascript y html para hacer el desarrollo web mas fácil y rápido.

Bootstrap incluye plantillas css y html así como un conjunto de elementos como tipos de letas, formularios, botones, tablas, slider de imágenes y mas, así como también código javascript necesario para su funcionamiento.

La principal característica de bootstrap es que es mobile first, es decir, que esta pensado para adaptarse correctamente a la resolución de cualquier dispositivo. En resumen el contenido de nuestra web se adaptara perfectamente a cualquier dispositivo desde donde se acceda, esto evita muchos dolores de cabeza si no se utiliza un diseño responsivo.

Bootstrap es fácil de usar (solo debes saber un poco de html y css), diseño responsivo (como ya dijimos se adapta a cualquier resolución) y es compatible con todos los navegadores modernos hoy en día (nos olvidamos de esa fase tan molesta de estar revisando compatibilidad).

-Agregando Bootstrap a nuestro proyecto-
Para comenzar a utilizar bootstrap en nuestros proyectos tenemos 2 opciones:

  • Descargar bootstrap.
  • Utilizar un CDN (Red de entrega de contenidos).

Si utilizamos la primer opción solo vamos a getbootstrap.com y descargarnos un .zip, después descomprimimos y utilizamos en nuestro proyecto llamando los archivos en nuestro código (mas adelante veremos esto).

Si utilizas la opción del CDN solo necesitas llamar las URLS desde nuestro código (mas adelante veremos esto).

-Primera web con Bootstrap-
Lo primero que necesitamos en nuestra pagina donde utilizaremos bootstrap es agregar la etiqueta DOCTYPE de html5 asi:


<!DOCTYPE html>
<html lang="en">
  <head>
   
  </head>
</html>


dentro de nuestras etiquetas head necesitaremos agregar algunos metas:


<meta charset="utf-8"> 

establecemos el conjunto de caracteres utf-8 para evitar problemas de acentos y eñes.


<meta name="viewport" content="width=device-width, initial-scale=1">

es necesaria para bootstrap pues es mobile first.

Ahora llamamos a los archivos bootstrap.min.cs y bootstrap.min.js de bootstrap:

mediante CDN:


<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>


mediante la descarga de bootstrap:


<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script> 


nota: las carpetas css, fonts y js que descomprimiste de la descarga de bootstrap deben de estar en la carpeta raíz donde esta tu pagina.

Por ultimo dentro de nuestras etiquetas body deberemos agregar lo siguiente:


<body>
    <div class="container">
      <h1>Pagina web con Bootstrap</h1>
      <p>Todo el contenido de la pagina debe estar dentro de algún div con clase container o container-fluid.</p> 
    </div>
</body>


Hasta aquí todo el código que aparece es común a lo que sabemos a excepción de una cosa, la clase container-fluid. En bootstrap todo el contenido debe de estar dentro de algún div con clase container o container-fluid, la diferencia es que el primero nos da un margen lateral y el segundo nos da un full width, es decir sin margen a los laterales a pantalla completa. Intenta variar esta clase y ve el resultado.

-Entendiendo el sistema de cuadricula de Bootstrap-
Ahora escribe el siguiente código dentro de la etiqueta body (elimina cualquier otro codigo que tengas en este body):


<div class="container">
  <h1>Agregando mas contenido a mi web con Bootstrap</h1>
  <p>Si haces mas pequeño el navegador el contenido se ajusta a tu pantalla.</p>
  <div class="row">
    <div class="col-sm-4" style="background-color:lavender;"><h2>Titulo de elemento 1</h2></div>
    <div class="col-sm-4" style="background-color:lavenderblush;"><h2>Titulo de elemento 2</h2></div>
    <div class="col-sm-4" style="background-color:lavender;"><h2>Titulo de elemento 3</h2></div>
  </div>
</div>


Repasemos un poco..

tenemos un elemento padre de clase container (ancho con margen a los laterales), después del contenedor principal tenemos un elemento row (fila), observa que todos estos identificadores los aplicamos sobre elementos div, este elemento row nos crea una nueva fila y dentro de esta fila declaramos 3 elementos col (columnas).

Al ejecutar esta web tendremos que al re dimensionar la ventana de nuestro navegador el contenido se ajustara automáticamente a la resolución de pantalla, esto es bootstrap! (ademas de muchas otras cosas que faltan por ver).

Por últimos notaremos que en los elementos columnas tenemos col-sm-4, vamos a dividir esto en sus 3 partes:

col -> indica que es una columna.
sm -> indica que es un tamaño para tablets, existen otros mas: xs para teléfonos, sm para tablets, md para desktop normales y lg para desktop grandes. combinadas podemos hacer que nuestro contenido se ajuste perfectamente a cualquier resolución. (mas abajo explico este punto)
4 -> indica que la columna abarca 4 unidades, déjame explicar: cada row o fila en bootstrap debe contener 12 columnas, en nuestro ejemplo tenemos 3 columnas de 4 unidades: 3*4=12. Al re dimensionar la pagina se sigue conservando la misma proporción en sus columnas sin importar el tamaño de la resolución.

Por ultimo vamos a hablar un poco mas sobre las medidas xs, sm, md y lg, estos son breakpoints.

Cuando una web se ejecuta en dispositivo con una resolución pequeña entonces nuestro contenido se ordena de acuerdo a la clase xs que hayas establecido, si la resolución es un poco mayor entonces xs deja de ser tomada en cuenta y ahora toma en cuenta el valor que estableciste para sm y asi..

  • xs - menor que 768px
  • sm - mayor que 768px y menor que 992px
  • md - mayor que 992px y menor que 1200px
  • lg - mayor que 1200px


entonces si en un elemento estableces,


<div class="col-sm-6 col-md-3">


el elemento abarcara 6 unidades en la fila cuando se ejecute en una resolución sm, si se ejecuta en una resolución md entonces el elemento abarcara 3 unidades dentro de la fila.


El próximo post hablaremos de la tipografía y de algunos elementos disponibles en bootstrap, lo difícil ya fue hoy.
Cualquier duda o comentario la resolveré en breve.

Saludos!

Anuncios

3 comentarios - Introducción a Bootstrap [Parte 1]

sysadown
Prefiero jeet.gs, es muy sencillo de usar y permite mejores funcionalidades que el grid que incorpora bootstrap
jonathanmelgoza
Hola!

Jeet es muy bueno también, tiene muchas características buenas (me gusta que puedas usar valores fraccionarios) es cuestión de gustos y oportunidades.

Saludos!
tengotutto
Me gusta que todavía en taringa se sigan posteando cosas de programación!
Yo hice un sitio con angularjs y bootstrap, queda muy lindo y fàcil
jonathanmelgoza
Gracias amigo
aleemardaras
Justo lo que buscaba! Se agradece magia.