Bootstrap (parte 1): Introducción e instalación.

Redes sociales

Bootstrap es el framework más papular para desarollar proyectos responsive con HTML, CSS y JS.

Logo Bootstrap

¿Qué es un framework?

Una framework es un marco de trabajo, un conjunto de bibliotecas orientadas a la reutilización de componentes de software para el desarrollo rápido de aplicaciones. En esta categoría se incluye Bootstrap.

Las principales ventajas de la utilización de un framework son:

  1. El desarrollo rápido de aplicaciones. Los componentes incluidos en un framework constituyen una capa que libera al programador de la escritura de código de bajo nivel.
  2.  La reutilización de componentes software.
  3.  El uso y la programación de componentes que siguen una política de diseño uniforme.

Las desventajas de los frameworks son:

  1. La dependencia del código fuente de una aplicación con respecto al framework. Si se desea cambiar de framework, la mayor parte del código debe reescribirse.
  2. La demanda de grandes cantidades de recursos computacionales debido a que la característica de reutilización de los frameworks tiende a generalizar la funcionalidad de los mismos. El resultado es que en muchos casos se incluyen características que no van a utilizarse, provocando una sobrecarga de recursos que se hace más grande en cuanto más amplio es el campo de reutilización.

¿Qué es un diseño responsive, responsivo o adapatable?

El diseño web adaptable o responsivo, conocido por las siglas RWD (del inglés, Responsive Web Design) es una técnica de diseño cuya filosofía es adaptar la apariencia de las páginas web al dispositivo que se esté utilizando para visualizarlas. En la actulidad las páginas web se visualizan desde multitud de tipos de dispositivos como PCs, portátiles, tablets, smartphones, libros electrónicos,… Incluso, en de cada tipo, cada dispositivo tiene sus características propias: Tamaño de pantalla, resolución,… Esta tecnología pretende que con un solo diseño web, tengamos una visualización adecuada para cualquier dispositivo.

¿Qué es Bootstrap?

Bootstrap proporciona un entorno de trabajo para un desarollo web rápido y fácil. Cualquier persona con conocimientos básicos de HTML, CSS y Java Script puede desarrollar sitios web que se adapten a todos los dispositivos con un estilo profesional.

Bootstrap escala, fácil y eficientemente, sus sitios web y aplicaciones, utilizando un único código HTML, para visualizarlos correctamente, desde smartphones y tablets hasta ordenadores de sobremesa.

Con Bootstrap obtendrá decenas de componentes HTML y CSS personalizados, e impresionates plugins jQuery.

Componentes Bootstrap

Miles de sitios web se construyen en la actualidad con Bootstrap. Aquí puede ver algunos ejemplos



Descargar Bootstrap

Para descargar Bootstrap, acceda a http://getbootstrap.com/getting-started/#download

Descargar Bootstrap

Hay tres opciones para descargar Bootstrap:

1. Bootstrap: para el diseño de nuestro sitio.
2. Source code (código fuente): para descargarnos el código fuente y la documentación, para compilarlo y configurarlo posteriormente.
3. Sass: Para compilar Bootstrap con Less y Sass, para realizar proyectos en Rails, Compass o Sass-only

Nosotros descargaremos desde la primera opción: Bootstrap, haciendo clic en el botón: Download Bootstrap. Se descargará en nuestro ordenador un archivo de nombre: bootstrap-3.3.4-dist.zip, que guarderemos, por ejemplo, en una carpeta de nombre: curso-bootstrap.

Enlazar Bootstrap con una página web

1. Dentro de la carpeta curso-bootstrap, vamos a crear una subcarpeta, que vamos a llamar, por ejemplo, practica-1.

2. Descoprimimos el archivo bootstrap-3.3.4-dist.zip, que hemos guardado en la carpeta curso-bootstrap. Observemos como se crea una carpeta de nombre: bootstrap-3.3.4-dist, en su interior encontraremos tres carpetas: css, fonts y js.
3. Copiamos las tres carpetas: css, fonts y js en la carpeta practica-1.

Las carpetas fonts, css y js

A continuación vamos a crear una página web y vamos a enlazar su contenido con Bootstrap:

4. En la carpeta practica-1 vamos a crear un archivo de nombre index.html, con el siguiente contenido:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Pr&aacute;ctica-1 Bootstrap</title>
</head>
<body>
<h1> Este es un encabezamiento de nivel 1</h1>
<p>
Lorem ipsum dolor sit amet, splendide prodesset ad has, ei ullum 
repudiare adolescens usu.
</p>
<button>bot&oacute;n</button>
</body>
</html>

Observe como el archivo index.html, debe de guardarse en la carpeta practica-1 junto a las carpetas css, fonts y js.

carpetas fonts, css, js y archivo index

Una vez guardado el archivo index.html, hacemos un doble clic sobre él para que se cargue en el navegador. Obtendremos algo similar a lo siguiente:

Imagen de la página index.html

Si observamos el contenido de la carpta css, veremos, que hay varios archivos. ¡No nos agobiemos!, de estos, los archivos .map, no nos son de utilidad. Los que nos interesan son los archivos: bootstrap.css, bootstrap.min.css, bootstrap-theme.css y bootstrap-theme.min.css, y de estos cuatro sólo emplearemos los .mim.css. En realidad el bootstrap.css y el bootstrap.min.css, son iguales, sólo que el .min, se encuentra comprimido o minimizado, para que pese menos y las páginas se carguen algo más rápidas. Ocurre lo mismo con los archivos bootstrap-theme.css y bootstrap-theme.min.css.

Para enlazar Bootstrap, debemos modificar el archivo index.html y añadirle, el código de color azul:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Pr&aacute;ctica-1 Bootstrap</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<h1> Este es un encabezamiento de nivel 1</h1>
<p>
Lorem ipsum dolor sit amet, splendide prodesset ad has, ei ullum
repudiare adolescens usu.
</p>
<button class="btn btn-primary">bot&oacute;n</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
  • La etiqueta <meta name=”viewport”… es necesaria para que las páginas se vean correctamente en los dispositivos móviles.
  • Con <link href=”css/bootstrap.min.css” rel=”stylesheet”> enlazamos con la hoja de estilos de Bootstrap.
  • <script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js”></script> enlaza con jQuery. Es necesario, ya que los componentes java script de Bootstrap hacen uso de jQuery.
  • En la etiqueta <button> añadimos la clase: class=”btn btn-primary”
  •  Con <script src=”js/bootstrap.min.js”></script> cargamos los componentes java script de Bootstrap.

Si guardamos y hacemos un doble clic sobre el archivo index.html para que se ejecute en el navegador, obtendremos lo siguiente:

[imgen de la página index.html]

Observe como el aspecto de las fuentes y el botón han cambiado, lo que demuestra que hemos enlazado Bootstrap a nuestro index.html.

Otra forma de enlazar Bootstraps

Una forma más rápida y sencilla de enlazar Bootstrap, sin necesidad de descargarnos el framework, es hacerlo utilizando CDN. El Bootstrap CDN podemos encontrarlo en la página de descarga: http://getbootstrap.com/getting-started/#download, justo debajo de los botones de descarga.

Descargar CDN

 

Para ello, copiamos el código CDN y lo pegamos en la página index.html inicial, sin olvidarnos de agregar el enlace a jQuery. Debe de quedar así:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>PrPr&aacute;cticactica-1 Bootstrap</title>

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>

</head>
<body>
<h1> Este es un encabezamiento de nivel 1</h1>
<p>
Lorem ipsum dolor sit amet, splendide prodesset ad has, ei ullumrepudiare adolescens usu.
</p>
<button class="btn btn-primary">bot&oacute;n</button>
</body>
</html>

Yo le aconsejo, que los enlaces correspondientes a jquery.min.js y a bootstrap.min.js, aunque pueden colocarse en la zona <head> de la página web, los saque de ahí y los coloque, justo, antes de la etiqueta </body>. De esta forma, la página se cargará un poco más rápido. El código debe quedar así:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>PrPr&aacute;cticactica-1 Bootstrap</title>

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">

</head>
<body>
<h1> Este es un encabezamiento de nivel 1</h1>
<p>
Lorem ipsum dolor sit amet, splendide prodesset ad has, ei ullum repudiare adolescens usu.
</p>
<button class="btn btn-primary">bot&oacute;n</button>

<!-- Latest compiled and minified JavaScript -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>

</body>
</html>

Utilizar el CDN, tiene la gran ventaja que no hay que descargar el Bootstrap, sino que, simplemente añadiendo el código a la página web enlazaremos rápida y fácilmente. El inconveniente, es que no podremos personalizar Bootstrap ya que no podremos editar los estilos y java scripts incluidos para adaptarlos a nuestras necesidades, Además, cuando las páginas se visualicen en el navegador, no sólo deberán descargarse del servidor en el que se encuentran, sino también del servidor en el que está alojado el CDN, con lo que la navegación pude ralentizarse ligeramente.



Redes sociales

2 Comentarios

  1. Pingback: 15 temas Bootstrap para WordPress gratis - Webdisenia

  2. Pingback: HTML para principiantes (parte 21) Diseño web responsivo - Webdisenia

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.