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 minitutorial #2 de bootstrap.
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 el minitutorial parte 2de 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)
Vista desde el navegador sin usar diseño adaptable en firefox
Vista con el navegador con diseño adaptable firefox
Como puedes ver al adaptarse nuestro barra de navegacion tenemos que usar el boton de arriba el cual creamos para que se colapsara y nos mostrara el menu...
Barra de navegacion color invertido
Para invertir el color de la barra a negro y el texto en blanco simplemente agregamos .navbar-inverse a la clase .navbar.
Camino de navegacion
El camino de navegacion es una buena forma de mostrar la jerarquia del sitio. En el caso de los blogs un camino de navegacion puede mostrar los datos que son publicados en determinadas fechas, categorias. Los caminos de navegacion en bootstrap son simplemente una lista sin ordenadar con la clase .breadcrumb.
Tambien podemos añadir la clase de ayuda .divider con un pequeño texto. El cual puede ser barra diagonal (/), flechas (->) o el divisor que tu eligas.
Paginación
Bootstrap maneja la paginacion como muchos otros elementos de una interfaz, una lista no ordenada, envuelta con un DIV que identifique el elemento. En un formulario basico, agregamos .pagination como DIV (capa) padre creando una lista de enlaces. Cada elemento tiene un estilo adicional usando la clase .disabled o .active.
En adicion de la clase .active o .disabled para los item, tu puedes agregar .pagination-centered en el DIV (capa) padre. Para centrar el contenido del DIV. Si tu quisieras alinear a la derecha el DIV podrias usar la clase .pagination-right. Para el tamaño en adicion del tamaño normal hay otros tres tamaños que puedes aplicar en el DIV principal: .pagination-large, .pagination-small y pagination-mini.
Paginar
Si tu necesitas agregar enlaces mas alla del texto el paginar puede resultar muy bien. Como los enlaces de paginacion, la estructura es una lista no ordenada dentro del DIV principal. Por defecto los enlaces estan centrados.
Para alinear los enlaces a la izquierda o a la derecha solo es necesario usar las clases .previous y .next en los items > LI, tambien puedes usar la clase .disabled dentro de un ITEM para que tome otro estilo como si ya no hubiera mas paginas que ver en Anterior por ejemplo.
Etiquetas
Las etiquetas son geniales para ofrecer cuentas, consejos u otro tipo de estructura en la pagina.
Simbolo o Insignia
Los simbolos o insignias son similares a las etiquetas, la diferencia de esto es que las esquinas son mas redondeadas. Los colores de el simbolo o la insignia refleja algunas clases de las etiquetas.
Elementos tipográficos
En adicion de los botones, etiquetas, formularios, tablas y tabs, bootstrap tiene algunos elementos para una plantilla basica.Hero Unit
Hero Unit es una gran area de contenido que aumenta el tamaño de las cabeceras y añade un monton de margen para el contenido de la pagina.
Para utilizar Hero Unit basta con crear un DIV (capa) con la clase .hero-unit ademas de un <H1> mas grande el font-weight es reducido a 200:
Encabezado de pagina
El encabezado de pagina es una pequeña funcion para añadir espacio apropiado alrededor de los titulos de una pagina. Esto es particularmente util en una pagina como un BLOG por ejemplo, donde puedes tener varios titulos de entrada y necesitas agregar una distincion en cada uno de ellos. Para utilizar un encabezado de pagina, solo hay que poner dentro de un DIV la clase .page-header:
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.
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.
En adicion en la barra azul de progreso, estan las opciones verde, amarillo y rojo usando las clases .bar-success, bar-warning y bar-danger. Las barras de progreso pueden ser apiladas:
Objetos multimedia
Cuando nos fijamos en sitios sociales como twitter, facebook y otros, y quitas la parte donde esta formateado la linea del tiempo, veras el objeto multimedia. Impulsado por la comunidad bootstrap basado en los principios de la comunidad oocss (Object Oriented CSS), el objetivo del objeto de medios es hacer que el codigo para el desarrollo de estos bloques de informacion sea drasticamente menor. Nicole Sullivan-Hass comparte algunos objetos multimedia similares a los que estan en bootstrap. El objeto multimedia esta diseñado para ahorrar cientos de lineas de codigo por lo que es facil de personalizar.
Bootstrap deja el diseño y formato en ti, pero proporciona una forma sencilla de ponerse en marcha.
Al igual que otras herramientas de Bootstrap, el objetivo de los objetos multimedia (estructura ligera, facil extensibilidad) se logra mediante la aplicacion de clases para una simple estructura. hay dos formas para el objeto multimedia: .media y .media-list. Si estas preparando una lista donde los elementos (items) seran parte de una lista no ordenada, es recomendable usar .media-list y si no es asi basta con agregar la clase .media en un <DIV>:
En la imagen anterior puedes ver el uso del objecto media con la clase .media en un DIV
Para usar media-list cambiariamos el contenedor <div> a un <ul> dejandole la clase media-list. Desde que agregas un media-list tu puedes agregar elementos dentro de elementos, dejando por ejemplo donde comentan un responder que seria un elemento dentro de otro elemento.
Misceláneo (Componentes de utilidad ligera)
Hay algunos componentes mas que cubriremos en este capitulo. Algunos de ellos son layout-based (basado en el diseño) y unos pocos clases de ayuda production-based (basados en la produccion). El primero de ellos son los wells (hundido).
Wells (hundido)
Un well es un contenedor <div> que hace que el cotenido aparezca hundido en la pagina. Se puede utilizar en los blogs para la meta de informacion de un post como son: autor, fecha y categorias. Para crear un well (hundimiento) simplemente envuelve el contenido con un <div> que contenga la clase .well.
Hay dos clases adicionales que se pueden usar en conjunto con la clase .well las cuales son .well-small y .well-large. Esto afecta el padding (separacion por dentro) y crea el .well (hundimiento) mas largo o mas pequeño dependiendo de la clase que se use en conjunto.
Clases de ayuda
Estas son algunas de las clases de ayuda que pueden venir muy bien.
Alineamiento a la izquierda
Para hacer flotar un elemento a la izquierda use la clase .pull-left:
Alineamiento a la derecha
Para hacer flotar un elemento a la derecha use la clase .pull-right:
Clearfix
Para borrar el float (flotador, alineamiento) de cualquier elemento, utilizaremos la clase .clearfix. Cuando se tienen dos elementos de diferentes tamaños que se flotaban uno junto a otro, es necesario forzar los siguientes elementos en el codigo abajo o para borrar el contenido anterior. Para realizar esta accion solo es necesario agregar la clase .clearfix en un <div> vacio.
Imagen sin clearfix
Imagen con clearfix
Aqui finalizamos la tercera parte de bootstrap espero que se hayan divertido practicando, nos vemos en la cuarta parte, espero al final de las partes hacer un proyecto facil donde veamos todo lo aprendido, salu2 :P
quisiera saber si hay alguna manera de mostrar una alerta desde un boton, como las ventanas modales
ResponderEliminarLo que buscas esta en la siguiente parte: http://arthusu.blogspot.mx/2014/01/bootstrap-minitutorial-parte-4.html
Eliminar