Creando Aplicaciones Web con Bootstrap

¿QUÉ ES BOOTSTRAP?

Bootstrap es un framework JS+HTML5+CSS3, desarrollado por twitter que permite crear interfaces web muy vistosas, y con diseño responsivo, es decir, conseguirás que tu página se adapte perfectamente a cualquier dispositivo en la que la abras.

¿POR QUÉ BOOTSTRAP?

Aunque bootstrap ofrece una gama de posibilidades bastante amplia, permitiéndote desarrollar interfaces web bastante elaboradas y complejas, destaca porque sus diseños son simples, limpios y sobretodo intuitivos, haciéndolos poco pesados lo cual reduce considerablemente el tiempo de carga y la adaptación a todos los dispositivos.

Además de esto, tienes muchísimas opciones customizables por defecto, que son simplemente perfectas para el diseño web. Botones, tablas, formularios, tipografías...

Otra gran ventaja es su sistema de cuadrículas (grid), el cual te facilitará muchísimo la distribución de tu página web (1 columna, 2 columnas, 3 columnas, etc...)

¿QUE NECESITO?

Lo ideal es tener algo de conocimiento de PHP, HTML5, JS, y CSS3 si vas a diseñar una web simple, y de mySQLi si vas a trabajar con una web dinámica en la que necesitemos integración de usuarios e interacción con estos. Pero, intentaré hacer una guía básica de como diseñar un frontal web paso a paso para los que estéis empezando en esos lenguajes.

MANOS A LA OBRA

Para aplicar bootstrap a nuestro proyectos web lo que debemos hacer es lo siguente:

1. Descargar de la pagina oficial Bootstrap

2. Descomprimir y agregar las carpetas y archivos a nuestro proyecto

3. Agregar la siguiente linea en el HEAD de nuestra pagina

 <link href="css/bootstrap.min.css" rel="stylesheet">

la ruta puede variar setgun como hayamos copiado los archivos.

4. Comenzamos a crear botones, formularios etc y solo debemos aplicar las clases de bootstrap, ejemplo:

<button type="button" class="btn btn-primary">Primary</button>

donde estamos aplicando la clase btn-primary de nuestro archivo css de bootstrap

Des esta forma podemos ir aplicando estilos de bootstrap a todos los elementos de nuestro proyecto.

Les dejo un vídeo donde se explica mejor..