Hola Mundo con Bootstrap

24/Sep/2013 Bootstrap , 2 Comentarios

¿Qué es Bootstrap?

Bootstrap es un framework desarrollado por Twitter que facilita la construcción de aplicaciones que utilicen el patrón responsive design mediante tecnologías HTML5, CSS3 y Javascript.

En la web de Bootstrap puedes encontrar múltiple información sobre este framework, ejemplos de uso de sus componentes,...

Características de Bootstrap

Algunas de las características que podemos encontrar en Bootstrap son:

  • Desarrollo de aplicaciones Responsive Design
  • Soporte HTML5 y CSS3
  • Permite desarrollo de aplicaciones para escritorio y móvil
  • Soporte multi-navegador, incluido Internet Explorer
  • Permite definir diferentes layouts
  • Avanzado sistema Layout de grid
  • Amplio conjunto de componentes para el desarrollo
  • Posibilidad de compilar el framework con diferentes valores
  • ...

Hola Mundo con Bootstrap

Para desarrollar nuestra aplicación Hola Mundo con Bootstrap lo primero que tenemos que hacer es descargarnos el framework. Lo bueno de Bootstrap es que podemos configurarnos que queremos descargarnos.

A día de hoy, septiembre 2013, tenemos disponible la versión del framework Bootstrap 3.0

Existe una alternativa si no quieres descargarte el framework de Bootstrap que es utilizarlo directamente desde los CDN en http://netdna.bootstrapcdn.com/bootstrap/3.0.0/

Para utilizar Bootstrap tenemos que conocer y utilizar tres archivos:

  • css/bootstrap.min.css, la hojas de estilo del framework.
  • js/bootstrap.min.js, el módulo javascript.
  • css/bootstrap-theme.min.css, el tema a utilizar.

Así que cargaremos estos archivos en nuestra página:

  1. <link rel="stylesheet" href="css/bootstrap.min.css">
  2. <link rel="stylesheet" href="css/bootstrap-theme.min.css">
  3. <script src="js/bootstrap.min.js"></script>

Es muy importante saber que para que funciones Bootstrap es necesario que utilicemos jQuery, así que deberemos de cargar también jQuery:

  1. <script src="http://code.jquery.com/jquery.js"></script>

Lo siguiente será configurar el viewport para la visualización basada en "responsive design" de la página. En el viewport indicamos que el ancho es el ancho del dispositivo y no se realizaría zoom, indicando initial-scale=1.0

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

Con esto ya tendríamos configurada nuestra página del Hola Mundo con Bootstrap.

Difunde el Conocimiento

Si te ha gustado el artículo o te ha sido de utilidad, no dejes de compartirlo con tus amigos en las redes sociales... Te estaremos muy agradecidos. :-D

¿Algo que nos quieras comentar?

Déjanos tu comentario, no te preocupes que tu email no será publicado

*

*