[FRAMEWORK][BootStrap] MiniTutorial Parte 3

Componentes de diseño
Bootstrap provee algunos componentes pero estos necesitan otros complementos separados como son los javascript de bootstrap el jquery, etc... y esto lo podemos personalizar.

  Menú Desplegable
Podemos crear un menú desplegable básico de la siguiente manera:

Expliquemos un poco primero creamos nuestro menu con la clase .dropdown-menu que es para crear el menu desplegable, le damos un rol de menu con el atributo role, aqui viene una parte importante le ponemos display:block ya que en las propiedades del dropdown-menu tiene display:none por lo que le debemos de dar un atributo display:block ... ponemos una posicion static ya que por defecto tiene absolute y le damos algunos margenes y tamaño, usamos el atributo aria-labelledBy para indicar una relacion con widgets, groups y labels.
    Opciones Agregandolo a un Div (Capa)

Tenemos algunas opciones que le podemos agregar a estos menus, empezando por ejemplo: agregando en un div con la clase .dropdown el menu anterior.

De manera que de algo de margen y posicion relativa.

Alinear a la derecha

Podemos alinearlo a la derecha .pull-right :


Deshabilitar una opcion del menu

Para ello utilizamos la clase .disabled :

Submenu


Para crear un submenu solo agregamos la clase .dropdown-submenu dentro de una lista y asi podemos crear otra lista con los items para el submenu.


  Grupos de botones Los grupos de botones permiten que multiples botones se alineen juntos, por lo cual debemos usar una capa (div) con su clase .btn-group


barra de herramientas

si tienes multiples botones puedes agregar fuera de la clase .btn-group la clase .btn-toolbar diciendo asi que es una agrupacion de una barra de herramientas, como en el siguiente ejemplo:


Como te puedes dar cuenta estamos usando las clases para hacer referencia a los sprites, si no te acuerdas de esto puedes ver el You are not allowed to view links. You are not allowed to view links. Register or Login or You are not allowed to view links. Register or Login.


Como ves en este caso nuestra clase .btn-group se muestra inline-block por lo que para poder hacer que se muestre por ejemplo, de manera vertical usariamos la clase .btn-group-vertical de manera que quede verticalmente nuestra barra de herramientas.
    Botones desplegables
Para agregar un boton simplemente envuelves el boton y el menu desplegable con .btn-group. Tambien puedes usar .caret para actuar como un indicador de que el boton es un boton desplegable:


Boton desplegable con separador (Split)

La diferencia es que le dejamos un boton vacio para que agregue la flecha hacia abajo viendose un poco mas formal.

Puedes usar las clases para hacer mas pequeños los botones como son: .btn-mini, .btn-small, .btn-large.

Tambien puedes usar la clase .dropup para que en lugar de abrir la flecha hacia abajo sea hacia arriba:

  Elementos de navegación Bootstrap provee diferentes opciones para los estilos para los elementos de navegacion. Todos comparten el mismo marcado y la clase base .nav.

Boostrap tambien provee una clase de ayuda, .active. En principio agrega distincion entre el elemento actual y los elementos aparte del resto de los elementos de navegacion. Tu puedes agregar esta clase para los links principales o los links de la pagina actualmente activos.

  Navegación tabular Para crear unas fichas en el menu, comenzamos basicamente con una lista desordenada con la clase base .nav y agregando .nav-tabs.


    Navegación básica comprimida Para usar la navegacion comprimida usamos .nav-pills en lugar de .nav-tabs.


  Clase deshabilitar Para cada clase .nav, tu puedes agregar la clase .disabled, y se creara un link con estilo gris tambien puedes deshabilitar el estado :hover.


  Navegación apilada Ambas clases .nav-tabs y nav-pills son horizontales por defecto. Por ello aparece el apilamiento vertical, solo agregamos la clase .nav-stacked.




  Navegación Desplegable La navegacion desplegable comparte una sintaxis similar con los botones desplegables. Por defecto, tu tienes una lista de enlaces trabajando en conjunto con algunos atributos que disparan una lista desordenada con la clase .dropdown-menu.


Para hacer lo mismo con una navegacion comprimida, simplemente intercambiamos .nav-tabs por .nav-pills.






  Lista de navegación Las listas de navegacion son utiles cuando tu necesitas mostrar un grupo de enlaces. Este tipo de elementos es comun cuando creas un panel de administrador.  Un ejemplo, tu puedes crear todos los enlaces de las paginas mas comunes. Al igual que todas las listas vistas hasta ahora, las listas de navegacion tambien no ordenadas con la clase .nav y para agregar el estilo en especifico de lista de navegacion agregamos .nav-list.


Como puedes ver con la clase .nav-header en un elemento de la lista podemos crear nuestro encabezado en la lista de navegacion.
Y tambien con la clase .divider en un elemento de la lista podemos crear un divisor en la lista de navegacion.

  Navegación por fichas Tu no solo puedes crear una navegacion por fichas usando el complemento de javascript y la clase .tabbable, tu puedes agregar interaccion par abrir diferentes ventanas con diferentes contenidos. Para crear una navegacion con pestañas o fichas, nosotros usamos .tab-pane como identificador unico para cada pestaña, y el contenido lo envolvemos con .tab-content:


  Posicionamiento de las fichas Las pestañas o fichas son completamente posicionables, tu puedes ponerlas abajo o arriba y lo veras como resultado en el contenido.


Como ves usamos la clase .tabs-below, si quisieramos otro posicionamiento de los tabs (fichas o pestañas) podriamos agregar cualquiera de estas clases:

.tabs-left - las fichas se posicionan a la izquierda
.tabs-right  - las fichas se posicionan a la derecha


    Barra de navegación La barra de navegacion es una de las mejores caracteristicas que tiene bootstrap, incluye estilos para el nombre del sitio y navegacion basica. Puede ser extendida agregando controles de formulario especificos y dropdowns (menus desplegables), este seguro de que la barra de navegacion restringe el ancho del contenido de la pagina, esta puede ser colocada dentro de un div .span12 o .container.

barra de navegación básica

Notas la clase .brand en el codigo. Este te da un texto con un poco de brillo, negrita y un tamaño personalizado. Se utiliza para los titulos en la barra de menu.

  Enlaces en la barra de navegación
Para agregar enlaces en la barra de navegacion, simplemente agregas una lista no ordenada con la clase .nav. Si tu quieres agregar un divisor a los enlaces, tu puedes agregar una lista vacia con la clase .divider-vertical:



  Formularios En lugar la clase base de los formularios que vimos en elYou are not allowed to view links. You are not allowed to view links. Register or Login or You are not allowed to view links. Register or Login
de los formularios usaremos la clase .navbar-form esto asegura que los margenes coincidan para una barra de navegacion. Como nota puedes poner el posicionamiento usando las clases .pull-right y .pull-left.

El formulario anterior es un formulario basico en una barra de navegacion.

Para agregar esquinas redondeadas, como los campos de entrada que se miran en los dispositivos iOS, usamos la clase .navbar-search en lugar de la clase .navbar-form.



  Barra de navegación variaciones en el menú
La barra de navegacion de bootstrap puede ser dinamica. Por defecto, esta posicionada como elemento en bloque basandose en el HTML. Con algunas clases de ayuda, podemos posicionarla arriba o abajo de la pagina, o puede ser que cuando tenga la barra de scroll este estatico en la pagina.

barra de navegación fijada arriba

Si tu quieres una barra de navegacion fijada arriba, agrega .navbar-fixed-top junto la .navbar. Para prevenir que la barra de navegacion quede sentado sobre otro elemento del cuerpo agregamos 40px de padding (separacion) en el body (cuerpo)


barra de navegación fijada abajo

para fijar debajo de la pagina, simplemente agregas la clase .fixed-navbar-bottom junto la clase .navbar. Para prevenir que la barra de navegacion quede sentado sobre otro elemento del cuerpo agregamos 40px de padding (separacion) en el body (cuerpo)



Barra de navegación estática arriba

Para crear una barra de navegacion con scrolls en la pagina, agregamos la clase .navbar-static-top. Esta clase no requiere agregar padding (separacion) en el body (cuerpo).


Responsive Navbar (Barra de navegacion adaptativa)


Como el resto de bootstrap, la barra de navegacion puede mostrarse totalmente responsive (adaptativa). Para agregar caracteristicas adaptativas. El contenido que quieres que sea colapsado (mostrado) debe envolverse en un DIV con la clase .nav-collapse.El colapso es naturalmente activado por el boton con la clase .btn-navbar el cual tiene dos elementos data- . El primero data-toggle llama al javascript para decirle lo que hara el boton, y el segundo data-target indica que elemento se cambia. 3 etiquetas Spans con la clase .icon-bar. Cambiara los elementos que estan en el div .nav-collapse. Para que esta caracteristica funciones deben estar incluidos los archivos bootstrap-responsive.css, collapse.js o completamente el archivo bootstrap.js.



    Miniaturas Una gran cantidad de sitios necesita una manera de exponer imagenes en una cuadricula y bootstrap tiene una manera facil de hacer esto. Para crear una imagen miniatura, añadimos en la etiqueta <a> la clase .thumbnail alrededor de una imagen esto añade 4px de padding (relleno) y un borde gris. Cuando pasas el puntero encima un resplandor de animacion describe la imagen.


Ahora has creado una imagen miniatura basica, tu puedes agregar cabeceras, botones y mas para mostrar, solo cambia la etiqueta <a> que tiene la clase .thumbnail a un <div>. Dentro del <div> puedes agregar lo que tu necesites. Desde este <div> puedes agregar el tamaño por span... (span1,span2,span3....) Si quieres agrupar multiples imagenes, coloca una lista no ordenada y cada item de la lista estara flotando a la izquierda.
Como puedes ver usamos la clase .thumbnails para hacer un grupo de imagenes en miniatura...

  Alertas Las alertas proveen un estilo para mensajes a los usuarios. Para crear una alerta por defecto en un <div> agregamos la clase .alert


Para cerrar la alerta tu usas el boton que contiene el atributo data-dismiss="alert". Los navegadores en celulares con opera o safari requieren un enlace para ser cerrado href="#".

Si tu necesitas escribir un mensaje largo en la alerta, tu deberias usar la clase .alert-block. Esto provee mas padding arriba y abajo en el contenido de la alerta, que es particularmente util para las lineas de varias paginas de contenido.

Este tambien contiene otros tres colores opcionales para mostrar para ayudar a proveer un mas semantico metodo para la alerta.

Estos son agregados usando cualquiera de estas clases: .alert-error, .alert-success, o alert-info.


Barra de progreso El propósito de la barra de progreso es hacer ver que los activos están cargando, en curso, o que hay una acción que tiene relación con los elementos de la pagina. Personalmente, yo pienso que estos elementos son solo un ejercicio en la estructura y tiene un pequeño proposito mas alla que en el bootstrap framework. Dicho esto, miles de gente usan bootstrap y como cada uno de ellos tienen una buena razon para usar barras de progeso. Por naturaleza estos son elementos estaticos que necesitan de javascript para prober alguna interaccion con el usuario. Por defecto, la barra de progreso contiene un color gris de fondo que al ir aumentando se muestra azul. Para crear una en un <div> agregamos la clase .progress y dentro agregamos otro <div> vacio con la clase .bar y le agregamos un estilo con el porcentaje style="60%"; indicando que la barra de progreso esta al 60%.


Para crear una barra de progreso con rayas. Solamente agregamos la clase .progress-striped en el <div> que la contiene:


Como la version barra de progreso con rayas, tu puedes animar las rayas, lo que hace que se vea mejor.