Desde App Rental Online queremos dar a conocer BootStrap, uno de los frameworks para desarrollo web que mas ha dado que hablar en los últimos tiempos con la intención de que todos podáis realizar proyectos web de una forma sencilla y sin conocimientos avanzados en HTML y CSS.
Para ello vamos a publicar una serie de artículos con la intención de llegar a tener al final un Tutorial paso a paso de BootStrap para que puedas realizar tus propios sitios web.
El artículo de hoy se basará en tener un conocimiento generalizado de lo que es este maravilloso framework.
Estará divido en las siguientes partes:
- ¿Qué es BootStrap?
- Características importantes de BootStrap
- Descargar BootStrap
- Contenido del framework BootStrap
¿Qué es BootStrap?
BootStrap, para aquellos que no lo conozcan, es un framework javascript open-source para ayudar a construir interfases de usuario como un sitio web. Es una combinación de HTML, CSS y código Javascript aunque también soporta HTML5 y CSS3. Una de las características más importantes que tiene es que BootStrap es un framework con diseño adaptativo, es decir, Responsive Web Design.
Ha sido desarrolado por el equipo de Twitter con lo que podemos tener la suficiente confianza en el código y para que veas el potencial que tiene, Joomla 3.0 lo incluye por defecto en su instalación.
Características importantes de BootStrap
Entre las características que cabe destacar de este poderoso Framework son:
- Fácil y sencillo: Con tan solo un fichero CSS y otro Javascript podemos comenzar a utilizarlo.
- Se basa en los últimos estándares.
- La curva de aprendizaje es baja, no hacen falta conocimientos avanzados para poder utilizarlo
- Compatible con todos los navegadores más importantes.
- Arquitectura basada en LESS
- Utiliza un reset CSS basado en Normalize.css
- Responsive Web Design: Tal y como hemos comentado antes,es un framework con diseño adaptativo con lo que se adapta a los distintos dispositivos.
Como veis es un framework muy completo y con el que podemos tener resultados espectaculares.
Descargar BootStrap
Hay distintas formas de descargar BootStrap para comenzar a utilizarlo dependiendo del tipo de público, es decir, del nivel de conocimiento técnico.
- Descargar código compilado: Es la manera más fácil de empezar con este framework. Para descargar esta versión accede a getBootstrap.com
- Descargar código fuente: Es un pack que contiene todos los archivos Less y Javascript originales, pero es necesario tener un compilador de Less y algo de configuración. La última versión de este paquete lo tenéis en github.com/twbs/bootstrap/releases
- Descargar código fuente en formato SASS: Es muy parecida a la anterior y fue creada básicamnte para integrar BootStrap con Ruby On Rails, Compass o cualquier otro proyecto que esté basado en SASS. PAra descargar la última versión de este paquete tenéis que acceder a github.com/twbs/bootstrap-sass/releases
Otra forma con la que podemos trabajar con BootStrap y sin necesidad de descarga es con la CDN de NetDNA. Esta empresa aloja en sus servidores copia de los archivos necesarios (CSS y Javascript) de BootStrap. Al igual que podemos hacer con la CDN de jQuery, lo únco que tendremos que hacer es una referencia mediante enlaces en la cabecera de nuestro sitio web.
[php] rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap-theme.min.css"> [/php]
Algo que tenemos que tener muy en cuenta a la hora de utilizar BootStrap es que todos los plugins JavaScript de BootStrap necesitan la librería jQuery para su funcionamiento, así que tendréis que incluirlo en vuestras librerías o bien hacer referencia a algún CDN como por ejemplo los de Google, Microsoft o el propio de jQuery:
[php] // From Google API// From Microsoft// From jQuery// Minified version// Source version [/php]
Contenido del framework BootStrap
BootStrap se compone de distintos archivos que nos ayudan a poder codificar de una manera sencilla un sitio web sin necesidad de grandes conocimientos. Eso sí, dependiendo del tipo de instalación que hayamos elegido variará la estructura de directorios. Por tanto vamos a mostrar como quedarían los directorios según el tipo de instalación:
Estructura de directorios de la versión compilada de BootStrap
Una vez descromprimido los archivos descargados de este paquete podrás ver la siguiente estructura de directorios y archivos:
En este pack tenemos dos variantes de los archivos. Por un lado los archivos compilados con formato bootstrap.* y por otro los compilados y comprimidos con formato bootstrap.min.*.
Estructura de directorios de la versión original de BootStrap
Aquí encontraremos, además de las versiones compiladas de los CSS y Javascript, las versiones originales de esos mismos archivos y la documentación.
El directorio «dist» contienen los mismos archivos que la versión anterior pero compilados. En el directorio «docs» tenemos el código fuente de la documentación así como ejemplos que se incluyen en el directorio «examples«.
Ya hemos dado nuestros primeros pasos en cuanto al conocimiento de BootStrap. En los próximos artículos empezaremos con el código creando nuestra primera página con BootStrap.
