comment
IRC Chat
play_arrow
Este sitio utiliza cookies propias y de terceros. Si continúa navegando consideramos que acepta el uso de cookies. OK Más Información.

[FRAMEWORK][BootStrap] MiniTutorial Parte 3

  • 0 Respuestas
  • 1509 Vistas

0 Usuarios y 1 Visitante están viendo este tema.

Desconectado arthusu

  • *
  • Underc0der
  • Mensajes: 536
  • Actividad:
    10%
  • Reputación 2
  • Yo solo se que no se nada - Socrátes
    • Ver Perfil
    • Arthusu BLOG
  • Skype: arthusuxD
« en: Noviembre 08, 2013, 12:28:13 pm »
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:
 
 
You are not allowed to view links. Register or Login
You are not allowed to view links. Register or Login

 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
 
 
You are not allowed to view links. Register or Login

 Podemos alinearlo a la derecha .pull-right :
 
 
You are not allowed to view links. Register or Login

 
 Deshabilitar una opcion del menu
 
 
You are not allowed to view links. Register or Login

 Para ello utilizamos la clase .disabled :
 
 
You are not allowed to view links. Register or Login

 Submenu
 
 
You are not allowed to view links. Register or Login

 
 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.
 
 
You are not allowed to view links. Register or Login

 
  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
 
 
You are not allowed to view links. Register or Login

 
 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:
 
 
You are not allowed to view links. Register or Login

 
 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. Register or Login.
 
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:
 
 
You are not allowed to view links. Register or Login
You are not allowed to view links. Register or Login

 
 Boton desplegable con separador (Split)
 
 
You are not allowed to view links. Register or Login
You are not allowed to view links. Register or Login

 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:
 
 
You are not allowed to view links. Register or Login
You are not allowed to view links. Register or Login

  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.
 
 
You are not allowed to view links. Register or Login

 
    Navegación básica comprimida Para usar la navegacion comprimida usamos .nav-pills en lugar de .nav-tabs.
 
 
You are not allowed to view links. Register or Login

 
  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.
 
 
You are not allowed to view links. Register or Login

 
  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.
 
 
You are not allowed to view links. Register or Login

 
 
 
You are not allowed to view links. Register or Login

 
  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.
 
 
You are not allowed to view links. Register or Login
You are not allowed to view links. Register or Login

 
 Para hacer lo mismo con una navegacion comprimida, simplemente intercambiamos .nav-tabs por .nav-pills.
 
 
You are not allowed to view links. Register or Login

 
 
 
 
 
  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.
 
 
You are not allowed to view links. Register or Login

 
 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:
 
 
You are not allowed to view links. Register or Login
You are not allowed to view links. Register or Login
You are not allowed to view links. Register or Login

 
  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.
 
 
You are not allowed to view links. Register or Login

 
 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
 
 
You are not allowed to view links. Register or Login
You are not allowed to view links. Register or Login

 
    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
 
 
You are not allowed to view links. Register or Login

 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:
 
 
You are not allowed to view links. Register or Login

 
 
  Formularios En lugar la clase base de los formularios que vimos en elYou 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.
 
 
You are not allowed to view links. Register or Login

 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.
 
 
You are not allowed to view links. Register or Login

 
 
  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)
 
 
You are not allowed to view links. Register or Login

 
 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)
 
 
You are not allowed to view links. Register or Login

 
 
 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).
 
 
You are not allowed to view links. Register or Login

 
 Responsive Navbar (Barra de navegacion adaptativa)
 
 
You are not allowed to view links. Register or Login

 
 
You are not allowed to view links. Register or Login
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.
 
 
You are not allowed to view links. Register or Login
  Vista desde el navegador sin usar diseño adaptable en firefox

 
 
You are not allowed to view links. Register or Login
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.
You are not allowed to view links. Register or Login
   
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.
You are not allowed to view links. Register or Login
   
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.
You are not allowed to view links. Register or Login
   

 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.
 
  You are not allowed to view links. Register or Login  You are not allowed to view links. Register or Login
 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.
 
  You are not allowed to view links. Register or Login
 
 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.
 
    You are not allowed to view links. Register or Login
 
  Etiquetas Las etiquetas son geniales para ofrecer cuentas, consejos u otro tipo de estructura en la pagina.
 
  You are not allowed to view links. Register or Login
  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.
 
  You are not allowed to view links. Register or Login
  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:
 
  You are not allowed to view links. Register or Login
 
    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:
 
  You are not allowed to view links. Register or Login

    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.
 
 
You are not allowed to view links. Register or Login

 
 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.
 
You are not allowed to view links. Register or Login
You are not allowed to view links. Register or Login
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
 
 
You are not allowed to view links. Register or Login

 
 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.
 
 
You are not allowed to view links. Register or Login

 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.
 
 
You are not allowed to view links. Register or Login

 
 
You are not allowed to view links. Register or Login
  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%.
 
 
You are not allowed to view links. Register or Login

 
 Para crear una barra de progreso con rayas. Solamente agregamos la clase .progress-striped en el <div> que la contiene:
 
 
You are not allowed to view links. Register or Login

 
 Como la version barra de progreso con rayas, tu puedes animar las rayas, lo que hace que se vea mejor.
 
 
 
You are not allowed to view links. Register or Login

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:
You are not allowed to view links. Register or Login
 
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. You are not allowed to view links. Register or Logincomparte 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.
You are not allowed to view links. Register or Login
 
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>:
You are not allowed to view links. Register or Login
You are not allowed to view links. Register or Login
 
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.
You are not allowed to view links. Register or Login
You are not allowed to view links. Register or Login
 
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.
You are not allowed to view links. Register or Login
You are not allowed to view links. Register or Login
 

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.
You are not allowed to view links. Register or Login
 
Clases de ayuda  Estas son algunas de las clases de ayuda que pueden venir muy bien.
You are not allowed to view links. Register or Login
   
Alineamiento a la izquierda
Para hacer flotar un elemento a la izquierda use la clase .pull-left:
You are not allowed to view links. Register or Login
   
Alineamiento a la derecha
Para hacer flotar un elemento a la derecha use la clase .pull-right:
You are not allowed to view links. Register or Login
 
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.
You are not allowed to view links. Register or Login
Imagen sin clearfix
 
You are not allowed to view links. Register or Login
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
 

  Referencias  You are not allowed to view links. Register or Login 
You are not allowed to view links. Register or Login
« Última modificación: Mayo 27, 2014, 11:18:04 pm por Destructor.cs »

 

¿Te gustó el post? COMPARTILO!



Curso Desarrollo Web con Spring 4 [Aprender desarrollo web Spring Framework]

Iniciado por Mr.Kratos

Respuestas: 0
Vistas: 50
Último mensaje Julio 30, 2018, 08:07:05 pm
por Mr.Kratos
Themosis Framework, para desarrolladores WordPress

Iniciado por graphixx

Respuestas: 0
Vistas: 1004
Último mensaje Enero 16, 2016, 11:38:28 pm
por graphixx
Curso Bootstrap 4: El Curso Completo, Práctico y Desde Cero

Iniciado por Mr.Kratos

Respuestas: 0
Vistas: 97
Último mensaje Julio 30, 2018, 05:29:54 pm
por Mr.Kratos
Curso [Desarrollo Web con Bootstrap 3] [Diseña y maqueta una web][Multi]

Iniciado por Mr.Kratos

Respuestas: 0
Vistas: 81
Último mensaje Julio 20, 2018, 03:34:58 pm
por Mr.Kratos
[FRAMEWORK][BootStrap] MiniTutorial Parte 1

Iniciado por arthusu

Respuestas: 0
Vistas: 1248
Último mensaje Octubre 01, 2013, 07:24:26 am
por arthusu