Introducción Bootstrap.docx

¿ Que es Bootstrap ? Bootstrap es un framework Responsive Design desarrollado por Mark Otto y Jacbod Thornton de Twitter y esta diseñado para ayudar a diseñadores y desarrolladores en el proceso de creación de sitios web y aplicaciones de una manera rápida y fácil controlando la parte front de los sitios. Bootstrap es uno de los proyectos de código abierto que ha causado gran impacto en los diseñadores web del mundo en los últimos años y muestra de eso lo podemos ver en GitHub, donde aun sustenta el primer lugar como el proyecto mas popular de este repositorio donde los mas grande del mundo del diseño y desarrollo web implementan sus grandes y novedosos proyectos. Bootstrap 3 se construyo basado y pensado para la web móvil “mobile-first approach” o enfoque móvil de primera, donde se prioriza la web moderna, la web que se puede ver correctamente en cualquier dispositivo, desde pantallas pequeñas con poca resolución hasta dispositivos con resoluciones grandes y pantallas de gran tamaño. ¿Por qué usar Bootstrap? 1. Tendremos una Web responsive, se vera bien en todos los dispositivos y ayudara al posicionamiento en buscadores. 2. Cómodo, tendremos gran cantidad de funcionalidades creadas. 3. La velocidad de carga de la web es rápida y también ayuda al posicionamiento. 4. Compatibilidad con la mayoría de navegadores. 5. En constante desarrollo, tiene una gran comunidad detrás y el framework va mejorando cada vez mas. Como instalar Bootstrap Para poder instalar iremos a la web oficial http://getbootstrap.com y le damos a Download, hay tendremos tres opciones de descarga.

1.Descargar el código compilado, es la ideal para comenzar a trabajar con Bootstrap. 2.Descargar código fuente, contiene todo los archivos originales de Bootstrap, para poder usarlo necesitas compilarlo. 3.Descargar código fuente en Sass, ésta versión del código fuente esta convertida a Sass para facilitar la implementación con aplicaciones como Ruby Si no queremos tener en nuestro servidor los archivos de Bootstrap, podemos utilizar el CDN disponible para ello. Para el que no lo sepa, un CDN es un conjunto de servidores ubicados en diferentes puntos de una red que contienen copias locales de ciertos contenidos, en este caso, los archivos de Bootstrap. Con esto conseguimos mejorar la carga de nuestra web. En este tutorial trabajaremos por la opción 1, una vez que lo hemos descargado, descomprimimos el framework en la carpeta de nuestro nuevo proyecto, la estructura de la carpeta debería de quedar así:

Estructura básica de Bootstrap

Elementos NAVS Aplica la clase .nav para crear un elemento de navegación y después aplica la clase .nav-tabs para mostrar sus enlaces en forma de pestaña. Ejemplo:

Así se ve este ejemplo en tu navegador:

Navegación con botones Aplicando la clase .nav-pills al mismo código HTML del ejemplo anterior, los enlaces se muestran como botones ("pills" en inglés) en vez de como pestañas. Ejemplo:

• Inicio
• Perfil
• Mensajes

Así se ve este ejemplo en tu navegador:

Navegación Justificada Bootstrap 3 también permite crear elementos de navegación que ocupan toda la anchura del elemento en el que se encuentran y en los que todos sus enlaces tienen la misma anchura. Para ello, añade la clase .nav-justified al elemento de navegación. Ten en cuenta que este comportamiento sólo es posible para los dispositivos con una anchura superior a 768px. En el resto de dispositivos, el elemento de navegación se muestra verticalmente. Ejemplo:

• Inicio
• Perfil
• Mensajes

• Inicio
• Perfil
• Mensajes

Deshabilitando enlaces Aplica la clase .disable a cualquier enlace del elemento de navegación para mostrarlo de color gris y sin que cambie de color al pasar el ratón por encima suyo.

• Enlace activo
• Enlace activo
• Enlace deshabilitado

Barras de navegación Las barras de navegación son componentes adaptados al diseño web responsive y que se utilizan como elemento principal de navegación tanto en las aplicaciones como en los sitios web. En los dispositivos móviles se muestran inicialmente minimizadas y al pulsar sobre ellas, se despliegan todas sus opciones. Si la anchura del dispositivo aumenta hasta un nivel suficiente, las barras de navegación muestran todos sus contenidos horizontalmente.

Dependiendo del contenido de tu barra de navegación, puede ser necesario modificar el punto a partir del cual se muestra horizontal en vez de minimizada. Para ello, modifica el valor de la variable @grid-float-breakpoint en tu archivo LESS o añade tu propia media query en el archivo CSS.

Asi se debe apreciar en el navegador

Barra de navegación invertida El estilo por defecto de las barras de navegación no queda muy bien en las páginas con fondo oscuro. Por eso Bootstrap 3 define un estilo alternativo muy oscuro que se activa aplicando la clase .navbar-inverse a la barra de navegación. Ejemplo: Así se ve este ejemplo en tu navegador:

Scrollspy El plug-in Scrollspy se utiliza para actualizar automáticamente los enlaces en una lista de navegación basada en la posición de desplazamiento.

Paginadores El paginador por defecto de Bootstrap 3 está basado en el del sitio Rdio y queda bien tanto para las aplicaciones como para los sitios web. Como el paginador es bastante grande, el usuario nunca lo pierde de vista. Además su diseño escala bien a un gran número de páginas y sus enlaces son fáciles de pinchar. Ejemplo:

• «
• 1
• 2
• 3
• 4
• 5



• »

Enlaces activos y enlaces deshabilitados El aspecto de los enlaces del paginador se puede modificar para adaptarlo a tus necesidades. Aplica la clase .disabled a los enlaces que no se puedan pinchar y aplica la clase .active al enlace que corresponde a la página en la que se encuentra el usuario. Ejemplo:

• «
• 1 <span class="sr-only">(página actual)
...

6.9.4. Paginador simple El paginador simple de Bootstrap 3 es ideal para sitios web sencillos como blogs o revistas. Este paginador solamente muestra dos enlaces para ir a la página Anterior o Siguiente de los resultados. Ejemplo:

• Anterior
• Siguiente

Etiquetas Añade cualquiera de las siguientes clases CSS específicas para modificar el tipo de etiqueta que se muestra. Ejemplo: <span class="label label-default">Por defecto <span class="label label-primary">Principal <span class="label label-success">Éxito

<span class="label label-info">Información <span class="label label-warning">Aviso <span class="label label-danger">Peligro

Así se ve este ejemplo en tu navegador:

Jumbotron Se trata de un componente para mostrar contenidos de forma muy destacada. Si no lo encierras dentro de un elemento .container, ocupa toda la anchura del dispositivo. Si lo encierras dentro de un .container, solamente ocupará la anchura del contenedor y mostrará esquinas redondeadas. Ejemplo:

FORMULARIOS Los formularios son uno de los elementos más importantes de los sitios y aplicaciones web. Por eso Bootstrap 3 permite diseñar formularios con aspectos muy variados y define decenas de estilos para todos los campos de formulario.

Formularios en Linea Para que el formulario ocupe el menor espacio posible, añade la clase .forminline para que las etiquetas se muestren a la izquierda de cada campo del formulario. Ejemplo:

Formularios horizontales Bootstrap 3 también permite alinear los elementos y los campos de formulario mediante las clases CSS utilizadas para definir las rejillas de los layouts. Para ello, añade la clase .form-horizontalal formulario. Además, como esta clase modifica la clase .form-group para que se comporte como la fila de una rejilla, no es necesario que añadas en el formulario elementos con la clase .row.

Inputs Los campos de tipo son los más numerosos, ya que con HTML5 la lista se ha ampliado atext, password, datetime, datetimelocal, date, month, time, week, number, email, url, search, tel, ycolor. Ejemplo: Así se ve este ejemplo en tu navegador:

Ejemplo

Textarea Utiliza este control para escribir textos largos, modificando el valor del atributo rows para ajustarlo al número de líneas que prefieras. Ejemplo: Así se ve este ejemplo en tu navegador:

Checkboxes y radio buttons Los checkboxes permiten elegir una o más opciones dentro de una lista, mientras que los radio buttons permiten elegir una sola opción entre varias.

Checkboxes y radio buttons en línea Si prefieres mostrar los checkboxes y los radio buttons en línea para que ocupen menos espacio, utiliza las clases CSS .checkbox-inline o .radio-inline. Ejemplo: 1 2 3

Listas desplegables Para mostrar una lista desplegada, añade el atributo múltiple. Ejemplo:

Campos de formulario estáticos En ocasiones puede ser necesario mostrar texto al lado de un elemento en un formulario horizontal. Para ello, añade el texto mediante un

con la clase .form-control-static. Esta técnica es útil por ejemplo para mostrar el valor de los campos de formulario no editables. Ejemplo:

Deshabilitando grupos de campos de formulario Además de deshabilitar campos individuales, también es posible añadir el atributodisabled a un elemento

para deshabilitar cualquier campo de formulario que se encuentre en su interior.

Estados de validación Bootstrap 3 define varios estilos para indicar el estado de la validación de cada campo del formulario: .has-warning para las advertencias, .has-error para los errores y .has-success para cuando el valor es correcto. Lo mejor es que estas clases se pueden aplicar a cualquier elemento que contenga una de las tres siguientes clases: .control-label,.form-control y .help-block.

Cambiando la altura Aumenta o disminuye la altura de los campos de formulario para que coincidan con la altura de los botones y así queden mejor. Ejemplo:

Cambiando la anchura La forma más sencilla de controlar la anchura de los campos de formulario consiste en encerrarlos en otros elementos y aplicar las clases utilizadas para definir las rejillas de los layouts. Ejemplo:

Mensajes de ayuda Utiliza la clase help-block para mostrar los mensajes de ayuda de los campos del formulario. Ejemplo:

<span class="help-block">Un texto de ayuda que ocupa dos líneas porque es muy largo, pero aún así se ve bien gracias a los estilos de Bootstrap. Así se ve este ejemplo en tu navegador:

Botones Crea diferentes tipos de botones con ayuda de cualquiera de las clases CSS definidas por Bootstrap 3. Ejemplo:

Botones de diferente tamaño Cuando necesites crear botones más grandes o más pequeños que el tamaño estándar, utiliza las clases .btn-lg (grande), .btn-sm (pequeño) y .btn-xs (extra pequeño). Ejemplo:

Botones activados En ocasiones puede ser útil mostrar un botón con el aspecto de haber sido presionado, es decir, con un color de borde y un color de fondo un poco más oscuro y una sombra que imite la presión del botón. Los elementos consiguen este efecto mediante la pseudo-clase :active y los elementos mediante la clase .active. Activando los elementos Como se utiliza la pseudo-clase :active, no es necesario que hagas nada. No obstante, si quieres forzar a que el botón muestre el aspecto presionado, añade la clase .active. Ejemplo: button type="button" class="btn btn-primary btn-lg active">Botón principal Botón

Añade la clase .active a cualquier elemento para hacer que parezca presionado. Ejemplo: Enlace principal Enlace Así se ve este ejemplo en tu navegador:

Añade el atributo disabled para elementos . Ejemplo:

dar

un

aspecto

desactivado

a

los

Botón pri ncipal Botón

Etiquetas para botones Gracias a los estilos de Bootstrap 3, puedes utilizar cualquiera de las siguientes etiquetas para mostrar botones: , e . Ejemplo:

Actividad propuesta Desarrolle un sistema de información para la gestión de fotomultas de la ciudad de Cali. Para la implementación del mismo, es necesario utilizar HTML5, Bootstrap y PHP (Orientado a conexión básica en BD o mediante servicios RestFul). Se deben tener en cuenta los siguientes aspectos 1. El sistema debe contar con un menú de opciones para realizar las siguientes operaciones por parte del administrador: Gestión de la información, Gestión de la comunicación y Gestión de la localización. 2. En la gestión de la información, se debe definir un menú con opciones para insertar, consultar, modificar y eliminar usuarios, vehículos y multas. Para ello debe basarse en el siguiente modelo relacional:

3. En la gestión de la comunicación es necesario implementar una funcionalidad con HTML5 que permita visualizar por medio de Streaming (Transmisión de video en tiempo real) el soporte técnico de los funcionarios con los clientes 4. En la gestión de localización, se debe cargar información de tres puntos de atención para quejas y reclamos por medio de marcadores en la api de Google maps. En dichos marcadores, es necesario agregar elementos del tipo infowindow que permita desplegar información de interés del sitio referenciado. 5. El usuario podrá acceder al servicio de gestión de usuarios, solo para verificar por medio de su cedula si tiene multas pendientes, en caso de que esto ocurra, podrá verificar en la opción gestión de localización los puntos de atención en caja o podrá visualizar por medio de Streaming la información multimedial del proceso de atención en caja.