• Author / Uploaded
• jose

Citation preview

---

Desarrollo de aplicaciones web

Diseño de interfaces web

curso 2017-2018

UD3 PARTE4 Componentes bootstrap

UD3 COMPONENTES BOOTSTRAP 1.Introducción

2

2 Un fichero mínimo

2

3 Instalación

3

4 Primeros pasos

4

5 Componentes Bootstrap 5.1 Paneles 5.2 Wells 5.3 Botones y toolbars 5.4 Toolbars 5.5 Glyphicons 5.6 Barra de navegación 5.7 Badges 5.8 Jumbotrom 5.9 Breadcrumbs 5.10 Paginación

5 5 7 8 10 14 15 17 18 19 19

6 Bootstrap 4

22

1 de 23

Desarrollo de aplicaciones web

Diseño de interfaces web

curso 2017-2018

UD3 PARTE4 Componentes bootstrap

1.Introducción Bootstrap es un framework HTML, CSS y JavaScript que permite aplicar diseño a páginas de manera simple, elegante y lo más importante, responsive. Lograr un buen diseño y que además funciones en todas los dispositivos y navegadores existentes es una ardua tarea por mucho que los lenguajes sean estándar. Bootstrap fue desarrollado y liberado por Twitter, su uso se ha extendido rápidamente y se pueden ahorrar muchas horas de trabajo pesado y frustrante ajustando estilos. Lo que se obtiene con Bootstrap es básicamente una hoja de estilos cuyas clases CSS se puede aplicar en una página. Además se pueden incluir componentes JavaScript desarrollados sobre jQuery listos para ser utilizados. Si trabajas con Bootstrap se deben tratar de utilizar las propias clases y recursos que ofrece, en lugar de tratar de duplicar o crear nuevos estilos para poder beneficiarse al máximo de esta herramienta. En cualquier caso, siempre se podrán adaptar o extender según las necesidades específicas.

2 Un fichero mínimo Si se meten los ficheros de Bootstrap en una carpeta llamada bs, nuestra página HTML quedaría así:



Bootstrap Sample



Bootstrap Panels

Example panels: blank, info, warning, success, danger

This is a panel header

6 de 23

Desarrollo de aplicaciones web

Diseño de interfaces web

curso 2017-2018

UD3 PARTE4 Componentes bootstrap

And this is panel body. Panels have variants like panel-warning, panel-info, panel-success, panel-danger,... this just a panel-success type panel

Panel Types

Name	Type
Info	Blue color panel
Success	Green color panel
Warning	Yellow color panel
Danger	Red color panel

Total: 4 types





5.2 Wells https://www.w3schools.com/bootstrap/bootstrap_wells.asp Son similares a los paneles pero mucho más sencillos, ya que no tiene cabecera.Este sería el aspecto de un par de wells

Código 7 de 23

Desarrollo de aplicaciones web

Diseño de interfaces web

curso 2017-2018

UD3 PARTE4 Componentes bootstrap



Bootstrap Wells





5.3 Botones y toolbars https://www.w3schools.com/bootstrap/bootstrap_buttons.asp Aplicando Bootstrap aa la etiqueta HTML se consiguen botones simples y atractivos.

8 de 23

Desarrollo de aplicaciones web

Diseño de interfaces web

curso 2017-2018

UD3 PARTE4 Componentes bootstrap



Bootstrap Buttons sample



Bootstrap Buttons sample

Simple group

Yes Cancel

A toolbar

10 de 23

Desarrollo de aplicaciones web

Diseño de interfaces web

curso 2017-2018

UD3 PARTE4 Componentes bootstrap

















Botones verticales Otra variante interesante que podemos aplicar a los botones es la verticalidad

Basta con usar la clase btngroup-vertical

11 de 23

Desarrollo de aplicaciones web

Diseño de interfaces web

curso 2017-2018

UD3 PARTE4 Componentes bootstrap

Botón Dropdown https://www.w3schools.com/bootstrap/bootstrap_dropdowns.asp Básicamente es lo mismo que un dropdown pero usando botones



Bootstrap Button Dropdown sample



Actividad Crea una página web aplicando Bootstrap con una tabla y botones con estas características. Una tabla con cabecera y 6 columnas: 1. Id 2. Name 3. Price 4. Columna para el botón Detail 5. Columna para el botón Update 6. Columna para el botón Delete 0

13 de 23

Desarrollo de aplicaciones web

Diseño de interfaces web

curso 2017-2018

UD3 PARTE4 Componentes bootstrap

5.5 Glyphicons

Bootstrap ofrece por defecto los glyphicon que son un conjunto de iconos empaquetados en forma de fuente que además de un diseño sencillo y elegante se escalan para cualquier dispositivo. Para crearlos basta con usar una etiqueta span que generará un icono que se ajusta al maño de fuente del contexto. https://www.w3schools.com/bootstrap/bootstrap_ref_comp_glyphs.asp Este sería un ejemplo sencillo:



Glyphicons sample

• Enlace #1
• Enlace #2
• 
  
  Menú #1
  
  
  • Acción #1
  • Acción #2
  • Acción #3
  • Acción #4
  • Acción #5

Enviar

• Enlace #3
• 
  
  Menú #2
  
  
  • Acción #1
  • Acción #2
  • Acción #3
  • Acción #4


16 de 23

Desarrollo de aplicaciones web

Diseño de interfaces web

curso 2017-2018

UD3 PARTE4 Componentes bootstrap

En el caso de que el navegador no pueda mostrar toda la barra, el menú se contrae y aparece el icono de la hamburguesa, un habitual en las pantallas más reducidas como los móviles:

5.7 Badges

Los badges en el contexto de Bootstrap son pequeños números enmarcados en un círculo que tradicionalmente indican un contador: elementos en un carro de la compra, mensajes pendientes etc.



Bootstrap Badge sample



Bootstrap Jumbotrons

18 de 23

Desarrollo de aplicaciones web

Diseño de interfaces web

curso 2017-2018

UD3 PARTE4 Componentes bootstrap

Big panels for important messages

Wellcome to my Web Start Journey



5.9 Breadcrumbs Las migas de pan o breadcrumbs son elementos muy habituales para aportar usabilidad a las página. Permiten al usuario situarse y navegar entre categorías



Breadcrumbs in Bootsrap



Bootstrap SAM IS GAY Pagination

Pagination combined with some data

Tools for the web



20 de 23

Desarrollo de aplicaciones web

Diseño de interfaces web

curso 2017-2018

UD3 PARTE4 Componentes bootstrap

Name	Type
JavaScript	The language of choice for the Web
CSS	The cascading style sheets
HTML5	The building blocks of the Web
Less	CSS Preproccessor

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

• ← Previous
• Next →

Actividad 2 Debajo de la tabla crea dos elementos adicionales: 1. Unos controles de numeración que combinen flechas y números 2. Un toolbar con dos grupos de colores (aplica una paleta de colores al primer grupo)

21 de 23

Desarrollo de aplicaciones web

Diseño de interfaces web

curso 2017-2018

UD3 PARTE4 Componentes bootstrap

6 Bootstrap 4 La versión cuatro de Boostrap lleva un tiempo en estado alfa pero, como es obvio. sustituyendo a la versión que se ha descrito. Si bien se mantienen los elementos es Bootstrap como el sistema de grids y la mayoría de sus componentes, se van a producir cambios que conviene tener en cuenta. Componentes que desaparecen Existe un conjunto de componentes y clases que dejan de existir en la última versión de Bootstrap: ❖ Componente panel ❖ Componente well ❖ Componente thumbnail Componentes que aparecen Algunos de los componentes que desaparecen se resumen en un único componente, otros son renovaciones de los ya existentes. ❖ Componente card, sustituyendo a panel, well y thumbnail ❖ Soporte para flexbox, el sistema de grid estándar de CSS3 No hay iconos de serie Los glyphicons ya no vienen soportados de serie en Bootstrapv4. No obstante, eso no impide que se puedan instalarlos aparte o que se puedan utilizar cualquier otro juego de iconos. Preprocesamiento de CSS con Sass

22 de 23

Desarrollo de aplicaciones web

Diseño de interfaces web

curso 2017-2018

UD3 PARTE4 Componentes bootstrap

En la versión 4 ya no se utiliza Less como herramienta para el desarrollo de las hojas de estilo, así que si se precisa personalizar el código fuente de Bootstrap debemos editar ficheros en formato Sass. Otros cambios ❖ Se simplifica la barra de navegación o nav-bar. ❖ Se deja de dar soporte a Internet Explorer 8. ❖ Se han reescrito los plugins JavaScript conforme al estándar EcmaScript 6 . En esta página hay una referencia más detallada de los cambios de la versión 3 a la 4 mucho más específica: http://v4-alpha.getbootstrap.com/migration/

23 de 23