Este documento proporciona una introducción a Bootstrap y explica 30 clases útiles de Bootstrap para aplicar diseño y maquetado web de manera fácil. Explica clases para contenido, botones, imágenes, parrafos, tablas, formularios y menús, con ejemplos de código para cada una. El objetivo es ayudar a los lectores a aprender y aplicar Bootstrap de forma práctica para crear sus propios sitios web.

1. ESCUELA SUPERIOR FRANCISCANA ESPECIALIZADA
ESFE/AGAPE
CLASES BÁSICAS DE
BOOTSTRAP
Bootstrap para niños
Luis Alonso Guzmán Espinoza
ALUMNO ESFE/AGAPE CICLO II
Jonathan William Cheverria Molina
DOCENTE ESFE/AGAPE CICLO II

2. 1http://codigocrack.blogspot.com/
TABLA DE CONTENIDO:
CONOSCAMOS EL FRAMEWORK DE DISEÑO BOOTSTRAP ............................ 2
VEAMOS LA PRACTICA ........................................................................................ 2
CREACION DEL DOCUMENTO............................................................................. 3
AGREGADO DE BOOTSTRAP CDN...................................................................... 4
TREINTA CLASES PARA APLICAR DISEÑO CON BOOTSTRAP ........................ 5
CONTENIDOS Y PARRAFOS ................................................................................ 5
BOTONES............................................................................................................. 10
IMÁGENES ........................................................................................................... 16
PARRAFOS........................................................................................................... 20
TABLAS ................................................................................................................ 25
FROMULARIOS.................................................................................................... 29
MENUS ................................................................................................................. 30

3. 2http://codigocrack.blogspot.com/
CONOSCAMOS EL FRAMEWORK DE DISEÑO BOOTSTRAP
Te has hecho alguna vez preguntas como: ¿qué es un
framework?, ¿para qué sirven las framework? o incluso
te has preguntado ¿en qué me beneficia el uso de una
framework para el desarrollo de páginas web? Pues a
través de este escrito podrás conocer treinta clases de
Bootstrap con la cual podrás practicar diseño y
maquetado de tu propio sitio web de una manera súper
fácil la cual incluirá procesos ilustrativos en la aplicación
de esta framework.
Debes de tener en cuenta que, para crear tu sitio web y tu diseño con esta
framework tienes que poseer conocimientos previos de HTML, CSS y
JAVASCRIPT para que encuentres fácil el desarrollo web. Como ya te pude
comentar como está diseñado Bootstrap ahora te explicare que un framework es
un ambiente de trabajo que facilita ciertos aspectos al momento de crear ya sea
diseño, funcionamiento o atajos para optimizar el desarrollo de software.
Cada etiqueta HTML posee un estilo dentro de Bootstrap el cual es aplicado
mediante clases dentro de ellas.
VEAMOS LA PRACTICA
A continuación, te mostrare como utilizar Bootstrap a través de la famosa
CDN que podemos encontrar en el sitio http://getbootstrap.com/getting-started/

4. 3http://codigocrack.blogspot.com/
CREACION DEL DOCUMENTO
Para iniciar la parte práctica te invito a que elijas un editor de texto y crees
tú documento index.html, le aplicas su estructura básica y lo guardas en el lugar
de tu preferencia, en mi caso para explicarte utilizare Sublime Text 3.

5. 4http://codigocrack.blogspot.com/
AGREGADO DE BOOTSTRAP CDN
Como ya tenemos nuestro documento HTML creado, nos ubicaremos abajo
de la etiqueta de cierre </title> y pegamos ahí el código CDN que nos genera
la página de Bootstrap como se muestra a continuación.
Este conjunto de links corresponden a la famosa Bootstrap CDN, esto
quiere decir que para utilizar esta framework de diseño podemos obtner de
manera remota (internet) nuestra hoja de estilos y nuestro archivos JavaScript.
Toma en cuenta que esta forma es opcional ya que tambien puedes
descargar el paquete de archivos de Bootstrap y llamarlos desde la carpeta de
CSS y JS como normalmente la mayoria de programadores lo hace como buena
practica de programación.
Los primeros dos links correponden a archivos css o comunmente
conocidos como hoja de estilos, mientras que el ultimo correponde a un script JS
con el cual se pueden aplicar efectos modales (ventanas flotantes y más).
1
2
3

6. 5http://codigocrack.blogspot.com/
TREINTA CLASES PARA APLICAR DISEÑO CON BOOTSTRAP
CONTENIDOS Y PARRAFOS
1. container
Esta clase permite que a través de la etiqueta HTML <div> se pueda crear un
contenedor para crear un conjunto de columnas dentro de ella.
Como no disponemos de más objetos dentro de nuestro <div> no nos
aparecerá nada en el navegador si corremos nuestro archivo index.html

7. 6http://codigocrack.blogspot.com/
2. row
Esta clase se aplica en la mayoría de los casos dentro del div con la clase
container, la cual indica que dentro del contenedor (div con la clase container)
habrá una fila (clase row).
3. col-md-*
Como ya expliqué que la clase container es un contenedor de filas y
columnas, es momento que conozcas que estas en Bootstrap no se les conoce
como columnas sino como rejillas ya que esta framework secciona tu
navegador en doce columnas, por lo cual se utilizan de la siguiente forma.
Como puedes ver cada col-md-1 corresponde a una columna o una rejilla,
ahora te invito a que trates de hacer una fila que tenga dos columnas y que cada
una sea de seis rejillas.

8. 7http://codigocrack.blogspot.com/
Resultado:
Como puedes ver en este ejemplo a cada col-md-* le coloque el numero 6
ya que sé que la pantalla de mi navegador está dividida en 12 sejillas; entonces
como solo necesitaba 2 columnas, lo que hice fue dividir el total entre las sejillas
que necesito de esta forma 12 / 2= 6. Como puedes ver me dice que cada col-md
tendrá 6.

9. 8http://codigocrack.blogspot.com/
4. Container-fuid
Como puedes ver la clase container por defecto te coloca un margen entre
derecha e izquierda, sino te parece puedes aplicar esta clase y mira lo que ocurre.
Como puedes ver el margen que anteriormente te aplicaba, con esta clase
ha desaparecido y te ha colocado los dos párrafos en la pantalla desde el punto
cero de la izquierda hasta el punto cero de la derecha.

10. 9http://codigocrack.blogspot.com/
5. Lead
Esta clase se aplica a la etiqueta <p> para hacer un tipo de escritura atractiva
(más grande de lo normal
¿Puedes ver la diferencia? Si te fijas detenidamente en el código te podrás dar
cuenta que la etiqueta <p> de la primera columna le aplique la clase lead y a la
segunda no, por esa razón nos creó un párrafo más atractivo a la izquierda.

11. 10http://codigocrack.blogspot.com/
BOTONES
Si puedes ver, así como hay estilos para contenidos y sejillas, de igual
manera hay estilos para botones.
6. Btn
Esta clase se coloca sobre la etiqueta <button> y produce un efecto de botón
como que si fuera una app de escritorio.
Como puedes ver el efecto se le coloco al botón de la derecha y al de la izquierda,
lo hago de esta manera ya que es un ejemplo básico de esta explicación de
Bootstrap.

12. 11http://codigocrack.blogspot.com/
7. btn-primary
Esta clase permite que nuestros botones tomen un estilo color azul mate y se
complementa con la clase anterior (btn) de la siguiente manera:
Como puedes ver al botón de la izquierda le colocamos la clase, por la cual
tomo ese estilo color azul mate, ahora puedes crear tus propios botones con la
clase btn-primary.

13. 12http://codigocrack.blogspot.com/
8. btn-success
Esta clase permite que nuestros botones tomen un estilo color verde mate y se
complementa con la clase (btn) de la siguiente manera:

14. 13http://codigocrack.blogspot.com/
9. btn-warning
Esta clase permite que nuestros botones tomen un estilo color naranja mate y
se complementa con la clase (btn) de la siguiente manera:

15. 14http://codigocrack.blogspot.com/
10.btn-danger
Esta clase permite que nuestros botones tomen un estilo color rojo mate y se
complementa con la clase (btn) de la siguiente manera:

16. 15http://codigocrack.blogspot.com/
11.btn-default
Esta clase permite que nuestros botones tomen un estilo clásico, este se
complementa con la clase (btn) de la siguiente manera:

17. 16http://codigocrack.blogspot.com/
IMÁGENES
A continuación, te mostrare algunos estilos que ofrece Bootstrap para la
inserción de imágenes en tu app web.
12. img-responsive
Esta clase permite que nuestras imágenes tomen un estilo responsivo, esto
quiere decir que la imagen se acoplara perfectamente a cualquier dispositivo.
Pantalla de PC.
SmartPhone

18. 17http://codigocrack.blogspot.com/
13.img-rounded
Esta clase se apoya de la clase anterior (img-responsive) y permite que
nuestras imágenes tomen un estilo con esquinas redondeadas.

19. 18http://codigocrack.blogspot.com/
14.img-circle
Esta clase se apoya de la clase img-responsive y permite que nuestras
imágenes tomen un estilo circular.

20. 19http://codigocrack.blogspot.com/
15. img-thumbnail
Esta clase se apoya de la clase img-responsive y permite que nuestras
imágenes adquieran un borde.

21. 20http://codigocrack.blogspot.com/
PARRAFOS
16.bg-pimary
Esta clase te permitirá colocarles a tus párrafos un estilo azul mate similar al de
los botones que te mostré anteriormente.

22. 21http://codigocrack.blogspot.com/
17.bg-success
Esta clase te permitirá colocarles a tus párrafos un estilo verde mate similar al
de los botones que te mostré anteriormente.

23. 22http://codigocrack.blogspot.com/
18.bg-warning
Esta clase te permitirá colocarles a tus párrafos un estilo naranja mate similar
al de los botones que ya te mostré.

24. 23http://codigocrack.blogspot.com/
19.bg-danger
Esta clase te permitirá colocarles a tus párrafos un estilo rojo mate similar al de
los botones que ya te mostré.

25. 24http://codigocrack.blogspot.com/
20.bg-info
Esta clase te permitirá colocarles a tus párrafos un estilo celeste mate similar al
de los botones que ya te mostré.

26. 25http://codigocrack.blogspot.com/
TABLAS
21.table
Esta clase te permite darle un estilo estético a tu tabla, tal y como se muestra
en pantalla.

27. 26http://codigocrack.blogspot.com/
22. table-striped
Esta se apoya de la clase table y marca de con color una fila si y otra no de la
manera siguiente:

28. 27http://codigocrack.blogspot.com/
23.table-bordered
Esta se apoya de la clase table y marca borde en la tabla de la manera
siguiente:

29. 28http://codigocrack.blogspot.com/
24.table-hover
Esta se apoya de la clase table y marca las filas de la tabla al pasar el cursor
sobre ellas de la manera siguiente:

30. 29http://codigocrack.blogspot.com/
FROMULARIOS
25.form-control
Aplica formato estético a cada caja de texto. A continuación, te mostrare como
se aplica.

31. 30http://codigocrack.blogspot.com/
MENUS
26.nav
Esta clase aplica propiedades específicas para la creación del menú de
nuestras páginas web.

32. 31http://codigocrack.blogspot.com/
27.nav-tabs
Esta se apoya de la etiqueta nav y coloca en menú de una forma horizontal.

33. 32http://codigocrack.blogspot.com/
28. active
Esta se aplica a la etiqueta <li> y selecciona la opción como principal.
29. navbar-inverse

34. 33http://codigocrack.blogspot.com/
Esta se apoya de la etiqueta <ul> y su función es colocarle un tono oscuro al
menú.
30. navbar-default

35. 34http://codigocrack.blogspot.com/
Esta se apoya de la etiqueta <ul> y su función es colocarle un tono gris claro al
menú.