Introducción y primeros pasos

Bosstrap es un framework creado con la finalidad de crear páginas webs reponsive, es decir, páginas en las cuales el diseño se adapta en función del dispositivo desde el cual abrimos la página web.

¿Por qué usar Bootstrap?

  • . Facilidad de uso. Simplemente usando sus clases
  • . Responsive. Con las nuevas tecnologías queremos que nuestra página web se vea bien en todos los dispositivos.
  • . Personalizable. Al descargarlo podremos elegir que elementos queremos dependiendo de nuestras necesidades
  • . Gran comunidad. Este framework está muy extendido y si tenemos un problema podremos encontrar mucha información en Internet.

Descarga y configuración de Bootstrap

Para usar Bootstrap en nuestro proyecto tenemos dos formas:

. Primera opcion: Descargamos Bootstrap desde su página oficial http://getbootstrap.com/ y descargamos JQuery https://jquery.com/. Metemos estos archivos que acabamos de descargar en una carpeta dentro del proyecto en el cual queremos usar Bootstrap. Ahora tenemos que llamar a Bootstrap desde el archivo index.html o en su defecto el archivo donde tenemos todos los estilos por defecto.

 <head> 
  
 	<link href="css/bootstrap.min.css" rel="stylesheet" media="screen"> <! Inicializamos Bootstrap con la ruta en la que se encuentra.–> 
 	<meta name="viewport" content="width=device-width, initial-scale=1"> <!– Con esto garantizamos que se vea correctamente en todos los dispositivos móviles > 
 	
 	<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <!– Llamamos antes a JQuery > 
    	<script src="js/bootstrap.min.js"></script> <!– Llamamos al JavaScript de Bootstrap > 
 </head>

. Segunda opción: CDN. Con este método no tenemos que descargar Bootstrap. Simplemente inclimos el enlace del CDN para que se descargue solo.

 <head>
	  <!-- Latest compiled and minified CSS -->
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

	<!-- Optional theme -->
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
	
	<!-- JQuery -->
	 <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>

	<!-- Latest compiled and minified JavaScript -->
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

</head>

Elementos de Bootstrap

Para usar los elementos de Bootstrap tenemos que usar sus clases dentro de los elementos del html. Aquí los elementos más importantes de Bootstrap

Grid

Estos son los elementos que, personalmente, me parecen más utilies y son los que más utilizo. Bootstrap tiene un sistema para crear columnas, las cuales adaptan su ancho dependiendo del dispositivo, aunque se pueden configurar para el tamaño que quieras en cada pantalla. Para usar este sistema tenemos que ponerle la clase “row” a un elemento div del html. Acabamos de crear la fila de una columna, pero esta vacía. Para meter columnas dentro de las filas tenemos que meter elementos div con la clase “col” La clase col se encarga de hacer saber a bootstrap que el elemento sobre el que se pone va a ser una columna.

<div class="container"><!– Este elemento es un contenedor. Podemos meter elementos dentro de este contenedor para que se les aplique un margen y se centren > 
  <div class="row">
    <div class="col">
      1 of 2
    </div>
    <div class="col">
      1 of 2
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col">
      1 of 3
    </div>
    <div class="col">
      1 of 3
    </div>
  </div>
</div>
1 of 2
1 of 2
1 of 3
1 of 3
1 of 3

El primer row es una fila con 2 columnas de igual tamaño y el segundo row es una fila con 3 columnas iguales. Como ves si queremos crear columnas de igual tamaño basta con meter elementos col dentro de las filas. ¿Qué pasa si queremos crear columnas con un tamaño diferente? Para crearlas tenemos que especificar el tamaño que queremos. Importante: Las filas de Bootstrap tienen un tamaño de 12 unidades, es decir, si creamos columnas más pequeñas no llegarán a cubrir el ancho de la fila, y si las creamos más grandes saltarán a la siguiente fila.

<div class="container">
  <div class="row">
  
    <div class="col-3">
      1 of 3
    </div>
    <div class="col-6"> <!- Esta columna será más ancha que las otras dos ->
      2 of 3 (más grande)
    </div>
    <div class="col-3">
      3 of 3
    </div>
  
  </div>
</div>
1 of 3
2 of 3 (más grande)
3 of 3

También podemos definir especificamente que tamaño queremos que tengan las columnas dependiendo del dispositivo. Para ello existen varias clases en Bootstrap:

  • - xs (para móviles)
  • - sm (para tablets)
  • - md (para ordenadores)
  • - lg (para ordenadores con pantalla más grande)

Por ejemplo, si queremos que una determinada columna ocupe todo el ancho en dispositivos moviles, pero queremos que ocupe menos en ordenadores, tenemos que usar la clase “col-xs-12 col-md-6”

Botones

Para añadir un botón en Bootstrap tenemos que usar la clase “btn”. Podemos usar varios tipos dependiendo del uso que le vayamos a dar. El boton por defecto es “default”

<!-- Botón standart -->
<button type="button" class="btn btn-default">Default</button>

<!-- Botón primario -->
<button type="button" class="btn btn-primary">Primary</button>

<!-- Botón de exito -->
<button type="button" class="btn btn-success">Success</button>

<!-- Botón de información  -->
<button type="button" class="btn btn-info">Info</button>

<!-- Botón de aviso -->
<button type="button" class="btn btn-warning">Warning</button>

<!-- Botón de peligro  -->
<button type="button" class="btn btn-danger">Danger</button>

<!-- Botón con énfasis en un link  -->
<button type="button" class="btn btn-link">Link</button>

Para aumentar o disminuir el tamaño del botón tenemos que añadir la clase .btn-lg, .btn-sm, o .btn-xs dependiendo del tamaño que queramos.

Imágenes

Para conseguir que las imágenes sean responsive solo tenemos que añadir la clase “.img-responsive”. Bootstrap se encargará de aumentar o disminuir el tamaño de la imagen según lo necesite.

Otros elementos

Añadir colores de fondo a un elemento directamente con una clase de Bootstrap

<p class="bg-primary">...</p>
<p class="bg-success">...</p>
<p class="bg-info">...</p>
<p class="bg-warning">...</p>
<p class="bg-danger">...</p>

...

...

...

...

...

Forzar a elementos a que se visualicen o no de una forma muy comoda:

<div class="show">...</div>
<div class="hidden">...</div>

Centrar contenido

<div class="center-block">...</div>

Conclusiones

Bootstrap es un framework muy potente y muy extendido en la actualidad. Tiene multitud de elementos (muchos no los he puesto en este artículo) a nuestra disposición que nos facilitarán enormemente la vida para desarrollar webs responsive adatadas a las nuevas tecnologías. Si quieres seguir aprendiedo acerca de este framework te invito a que busques más información en su página web http://getbootstrap.com/css/