[BootStrap] MiniTutorial Parte 2

Tipografía

Para empezar explicando esto debemos darnos cuenta que tipo de tipografía usamos en nuestro CSS de bootstrap.

Como te puedes dar cuenta Usamos la tipografia Helvenica Neue, Helvetica, Arial, Sans-serif ... Esto quiere decir que si en el ordenador donde estas no existe Helvetica Neue entonces utilizara Helvetica y sino Arial asi sucesivamente. Este tipo de letras la incluyen la mayoria de los computadores de hoy en día.
El tamaño de nuestras letras por defecto es de 14px y el espacio entre ellas es de 20px y un color gris a la fuente. Y los párrafos incluyen un margen abajo de 10px.

Encabezados

Los encabezados tienen un estándar para el tamaño de manera que los niveles van desde h1 hasta h6 cada uno tiene su tamaño, que serian los siguientes:

h1 {
  font-size: 38.5px;
}

h2 {
  font-size: 31.5px;
}

h3 {
  font-size: 24.5px;
}

h4 {
  font-size: 17.5px;
}

h5 {
  font-size: 14px;
}

h6 {
  font-size: 11.9px;
}

Una cosa muy interesante es que si agregas la etiqueta small dentro de un encabezado le da un estilo diferente para empezar por el color y que la fuente no sera mas negrita, pero mejor te lo muestro:

Si te das cuenta los encabezados normales solo agregamos un tamaño a la fuente, negrita y también agregamos algunos párrafos para que te dieras cuenta, como le agrega el margen de 10px abajo. Pero cuando usamos la etiqueta small dentro de un encabezado puedes ver como su color cambia, y además le quita la negrita.

También podemos agregarle la clase .lead a nuestro párrafos de manera que cambiara el tamaño, la separación y negrita...

.lead {
  margin-bottom: 20px;
  font-size: 21px;
  font-weight: 200;
  line-height: 30px;
}

Letras pequeñas

Anteriormente vimos que podíamos usar dentro de los encabezados la etiqueta small que lo que hacia era cambiar el color y quitarle la negrita... en caso de que la uses sola, el tamaño de la letra no estará a su 100% sino solo estará a su 85%.

Negritas

Para utilizar negritas no usaremos la etiqueta b sino utilizaremos la etiqueta strong, de esta manera en nuestro bootstrap.css ya viene definido su estilo como negrita.

Itálicas

Al igual que en negritas en una letra itálica no usaremos la etiqueta i sino utilizaremos em por que sus estilos vienen en bootstrap.css

Clases para alinear el texto

 

En bootstrap existen unas clases para alinear nuestro texto, las cuales son:

.text-left - alinea el texto a la izquierda
.text-right - alinea el texto a la derecha
.text-center - alinea el texto al centro

Clases para dar énfasis a nuestro texto

Estas clases son muy utiles ya que le daran un estilo muy lindo a nuestros mensajes informativos, de error, o que se realizaron correctamente...

.muted - agrega un estilo de un color apagado
.text-warning - agrega un estilo de un color como de advertencia
.text-error - agrega un estilo de un color como de error
.text-info - agrega un estilo de un color como de informativo
.text-success - agrega un estilo de un color como de algo que se ha realizado correctamente

En caso de que uses estas clases en enlaces lo que hace es subir un poquito el volumen del color cuando pasas el ratón encima de ellos.

Abreviaciones

La etiqueta abbr sirve para darle abreviación a una palabra para que salga lo que significa agregamos el atributo title donde iría nuestro texto (en bootstrap se le agrega un borde abajo y cuando pasar el ratón sobre encima de el sale un cursor de ayuda) de lo que significa y usaremos una clase llamada .initialism que lo que hará sera agregar nuestra letra en mayúsculas.

Direcciones (localización)

Para mostrar la dirección de algo usamos la etiqueta address que tiene unos estilos como display:block, margen, tamaño de letra y espacio entre lineas.

Bloque de cita

 

Un bloque de cita se indica para eso mismo para citar alguna palabra que dijo alguien de algo largo solo una parte un bloque, en este caso utilizamos la etiqueta blockquote para ello, en este caso utilizamos small junto a la etiqueta cite para identificar quien es el autor de el texto citado anteriormente.

El blockquote si miras atentamente tiene un borde al lado izquierdo, además de un margen para los párrafos dentro de el, si hay dentro de el una etiqueta small lo muestra en bloque y con un color gris.

También puedes usar la clase .pull-right que alinearía hacia la derecha nuestro texto citado...

blockquote.pull-right {
  float: right;
  padding-right: 15px;
  padding-left: 0;
  border-right: 5px solid #eeeeee;
  border-left: 0;
}

Listas ordenadas y  no ordenadas

Si dirán que estamos viendo HTML xD, pues de eso se trata ver como se aplica nuestro CSS a nuestro HTML y los cambios que esta produciendo, no se desesperen si han llegado aqui :P

Las listas ordenadas y no ordenadas no producen mucho efecto solo que como antes habíamos reseteado todo el html entonces bootstrap agrego algunos margenes...

Algo que es muy interesante al crear las listas es que hay dos clases .unstyled que lo que hace es remover el ·  e .inline que lo que hace es mostrarlas en linea.

Estos dos son muy importantes a la hora de poder crear un menu...

Listas de definición

Las listas de definición como su nombre lo dice son para poner algún elemento que quieras definir algo, por ejemplo que es un blogger... donde con la etiqueta dl definimos una lista de definición y con dt el termino de la definicion y con dd la definicion del termino... lo uncio que hace bootstrap en este caso es darle un margen y negrita al termino de la definicion. Otra cosa importante es que tenemos una clase .dl-horizontal que lo que hace es mover horizontalmente el texto de la definicion de manera que se vea mejor formateado.

Código

Hay dos formas de mostrar código con bootstrap utilizando la etiqueta code o también utilizando la etiqueta pre aunque la diferencia mas significativa es que con code el código se muestra en linea agregando un color significativo y con pre se muestra en bloque.

Tablas

Al igual que todas las tablas normales del html podemos tener los siguientes elementos en una tabla:

table - etiqueta que crea la tabla

caption - subtitulo de la tabla

thead - cuerpo de títulos

tbody - cuerpo de la tabla

th -campo de titulo

tr - fila de la tabla

td - campo de la tabla

Con eso dicho hay una clase .table que tiene los estilos básicos para la creación de una tabla.

También tenemos algunas clases para la tabla, de manera que tenga diferentes estilos.

.table-striped - le da color a una fila si y a otra no 1 si y otra no
.table-bordered - le deja a la tabla un borde redondeado
.table-hover - cuando pasas el cursor encima de una fila le da un color de fondo
.table-condensed - no deja separación entre las celdas lo que hace que la fila se vea mas pequeña (condensada)

Veamos un ejemplo utilizando .table-striped:

Recuerda que si no miras mucho la diferencia puedes darle clic a la imagen para verla mas grande.

Otra cosa muy interesante en las tablas es que puedes usar una clase para las filas, las cuales pueden ser las siguientes:

Formularios

Otras de las características muy buenas que incluye bootstrap al igual que las tablas son los formularios que tienen un par de clases la cual puedes crear unos efectos muy lindos.

Como puedes ver ahí en la imagen incluimos algunas clases, pero expliquemos una de las cosas que agrega bootstrap.css en nuestro formulario.

Por ejemplo la etiqueta legend que anteriomente habiamos reseteado ahora contiene un estilo de un borde abajo de un color como gris...

Y los inputs  contienen un color como gris también pero al tomar el foco cambian su color a azul, placeholder es un atributo html que muestra atrás lo que se puede hacer en ese input... (marcador de posición). Además de eso se muestran en bloque de linea y contienen una transición que dura como 2 seg al seleccionar el input de manera que se mire un poco de retraso, otra cosa es que cuando tiene el foco le agrega un box shadow lo que hace que ese color azul se vea como algo único.


.help-block - Es una clase para mostrar ayuda, lo único que hacen en los estilos es darle que se muestre en bloque y su letra algo gris bajo.


.checkbox - Esta clase da un poco de separación por dentro, entre los elementos del checkbox.

.btn - Esta clase de algo de separación, transición, pero algo de lo mas útil es que hace un gradient (inclinación) o una imagen gris con CSS3 es algo muy útil, además de agregar un efecto cuando toma foco.

Formularios opcionales capas

Espero que se acuerden del primer minitutorial de bootstrap donde comentabamos algo acerca de las capas; si leen esto y no han leido lo otro lo entenderan pero se relacionan al verlo.

Formulario de búsqueda

Como su nombre lo dice solo es un formulario para que su estilo gracias a las clases usadas sea como uno de búsqueda y podamos usarlo para nuestra programación back-end, para alguna búsqueda en la base de datos, por ejemplo.

.search-query - lo que hace es redondear los inputs
.form-search - hace que los inputs se muestren inline-block
.input-medium - Le da al input un tamaño de 150px

Formularios en linea

Cuando digo formulario en linea me refiero que los formularios se muestran uno de detrás de otro de manera que están en linea, y no en bloque...

como pueden ver lo único nuevo acá es la clase .form-inline que lo que hace es mostrar el formulario de manera que este en linea como dije anteriormente...
se muestra en una sola linea y lo puedes ver en la imagen anterior.

Formularios horizontales

  Aquí puedes ver los estilos de cada uno de las clases que estamos usando:

Como ves no es nada difícil de interpretar solo vemos que los elementos se acomodan como deben de ser. Gracias a las clases aplicadas.

Controles de formularios soportados

Bootstrap soporta los controles mas usados, como son:
input, textarea, checkbox, radio y select.
Y no solo esos sino que además también soporta los controles de HTML5:
datetime, datetime-local, date, month, time, week, number, email, url, search, tel y color.

input

El input text es el mas usado, una de las características de estos es que incluye un resplandor azul al obtener el foco o estar activo.

textarea

El textarea es uno de los mas usados, ya que se usa para cuando necesitas escribir múltiples lineas, no cambia mucho los estilos.

Checkbox y botones de radio

Con checkbox y botones de radio tu puedes elegir una opcion dentro de la lista de opciones, cuando creas checkbox puedes seleccionar varias opciones en una lista, pero cuando creas un boton de radio puedes seleccionar solo 1 opcion dentro de toda la lista.

Como puedes ver en la imagen anterior, usamos algunas clases en los labels, como son la clase .checkbox que habiamos visto mas atras y la clase .radio, estas clases lo unico que hacen es darle margen y hacer que se muestren en bloque...

Otra cosa es que por ejemplo podríamos usar la clase .inline para formar una fila de checkbox de los cuales elegir varias opciones.

selects

Los selects son cuando quieres poner demasiadas o varias opciones, lo puedes usar, pero si quieres usar y seleccionar mas de 1 sola opción necesitas utilizar el atributo multiple.

Controles de formulario extendidos

Ademas de los formularios comunes, bootstrap te ofrece unos complementos para los formularios.

Campos de entrada adjunto y antepuesto

.add-on - agrega un pequeño estilo parecido al del boton (.btn)
.input-prepend - junto a la clase add-on decide agregándolo al principio el pequeño botón (el estilo)
.input-append  -  junto a la clase add-on decide agregándolo al final el pequeño botón (el estilo)


Si ves la imagen de arriba el @ y el .00 son los que estan en la clase add-on y acada uno de ellos estan en sus capas que tienen sus clases input-prepend e input-append.

De hecho puedes combinarlos tanto como quieras:

Tamaño de los controles del formulario

En bootstrap podemos usar unas clases que nos darán un tamaño predeterminado para los inputs de manera que le podemos dar un mejor estilo o el tamaño que gustemos a cada input.

no creo que sea necesario explicar como se usa la clase en un input pero por si acaso: <input class="acavalaclase" />

No solo podemos usar estas clases, no se si te acuerdas del sistema cuadricula? de la primera parte de bootstrap, bueno pues usaremos las mismas clases solo que se aplican a inputs y textarea... y a cada una tiene su tamaño...

Como puedes ver .span12 es el mayor y .span1 el menor puedes ver la imagen de arriba como referencia. No solo puedes usarlo en inputs sino tambien en selects,textarea,etc.

Texto que no puede ser editado

Una forma de dar un estilo donde tendrías un input con un texto que no puede ser editado es usando la clase .uneditable-input. Con el cual si pasas el ratón encima de el se pondrá una flechita de stop (alto,para) indicando que no puede ser editado.

Formulario de acciones

El formulario de acciones es un formulario como su nombre lo dice que podriamos poner acciones tales como Cancelar, Enviar, Guardar, Reestablecer...

.form-actions - da unas separaciones, margenes, color de fondo, borde, y otra cosa es que muestra el contenido en table...

.btn-primary - da ese efecto de azul al botón lo mismo cuando le pasas el botón encima, gracias a esta clase el botón cambia y es la manera de decir que podría ser un botón primario que se diferencia de los demás.

Texto de ayuda

.help-inline - muestra un texto de ayuda en linea (me refiero a su formato) es decir, en una sola linea

.help-block - muestra un texto de ayuda en bloque

Campo de entrada desabilitado

El atributo disabled podemos ver como le da un color y el cursor cambia su forma de manera que indica que ese input no puede ser cambiado.

Entradas de validación

Este tipo de cosas aunque no lo creas son de las mas usadas en una pagina web, como antes vimos con el texto también podía tomar diferentes color dependiendo de la situación (error,warning,info,success) es lo mismo con los inputs.

La mayoria de las cosas ya las habiamos visto, los divs esos agrupan cada input, y le aplicamos su clase dependiendo del estado hay un color.
No solo podemos aplicar un estado de esta manera podriamos usar alguna pseudoclase del css, por ejemplo:

Como puedes ver en el ejemplo, cuando el email esta mal el input lo muestra en rojo, pero cuando esta bien lo muestra en azul. Esto tambien lo podemos modificar nosotros mismos que tal si quisieramos un verde cuando este bien?

agregamos nuestro propio estilo, y listo.

Botones

Las siguientes clases no solo pueden ser aplicadas en los botones sino tambien en los enlaces.

Como puedes ver solo es cuestion de aplicar estas clases, a nuestro boton con lo cual le daremos unos efectos muy vistosos, como los que estan viendo, algunos que se usan para indicar una determinada accion.

Tamaño de los botones

Al igual que en los inputs podemos darle unas clases para modificar el tamaño de nuestros botones (buttons).

Como puedes ver en la imagen tenemos diferentes clases para los tamaños.

.btn-large - para un boton largo
.btn-small - para un boton pequeño
.btn-mini - para un boton mas pequeño

Otra cosa que podemos hacer con los botones es mostrarlos en bloque, usando la clase .btn-block con lo cual toma todo el ancho de la pagina:

Deshabilitar botón (estilos)

Veamos como cambian los estilos cuando usamos la clase .disabled

Como puedes ver lo que mas se nota es como agrega la opacidad al boton.

Imágenes

Otra de las cosas que dan mucho efecto son las clases de las imagenes:

.img-rounded - agrega un border radius de 6px en cada esquina
.img-circle - redondea completamente una imagen
.img-polaroid - agrega un pequeño borde con el cual parece un cuadro

Iconos

Bootstrap tiene 140 iconos en un sprite, sino sabes que son los sprites puedes ver este tema:
http://arthusu.blogspot.mx/2013/09/css-sprites-en-imagen-w3schools.html

Estos iconos han sido proporcionados por: http://glyphicons.com/

una manera de utilizar estos iconos son con las clases que vienen a su lado...
para ello usamos la etiqueta i...

Como puedes ver usamos una clase .btn-toolbar es una barra de herramientas de botones, la cual da algunos margenes. y .btn-group con la cual agrupamos los enlaces de los botones la cual tambien incluye unos margenes.
Lo importante en estos casos es como agregamos los iconos usando la etiqueta i.

Navegación

.nav y nav-list - da unos margenes para que se vea como una lista de navegacion
.active - hace que el enlace se vea con fondo azul como que esta activo
i class="clasedelicono" - le pone el icono como una imagen sprite


Hasta aqui ha llegado la segunda parte de este minitutorial nos vemos en la tercera parte espero traerle un poco mas de sorpresas, muchos diran estamos aprendiendo HTML y CSS a la ves, pues eso es algo que podria decirse correcto en si, bootstrap lo unico que hace es facilitarnos todo este proceso.

Version PDF Online

Descargar PDF

Referencias:

http://getbootstrap.com