bootstrap 3
TRANSCRIPT
![Page 1: Bootstrap 3](https://reader034.vdocuments.site/reader034/viewer/2022042518/55a785471a28abbe7a8b46b9/html5/thumbnails/1.jpg)
Tecnologías Web de Cliente
Bootstrap
![Page 3: Bootstrap 3](https://reader034.vdocuments.site/reader034/viewer/2022042518/55a785471a28abbe7a8b46b9/html5/thumbnails/3.jpg)
1.Principios Para qué vale
3
![Page 4: Bootstrap 3](https://reader034.vdocuments.site/reader034/viewer/2022042518/55a785471a28abbe7a8b46b9/html5/thumbnails/4.jpg)
Framework HTML CSS y JS
Componentes para realizar webs multidispositivo de forma rápida y con calidad
4
![Page 5: Bootstrap 3](https://reader034.vdocuments.site/reader034/viewer/2022042518/55a785471a28abbe7a8b46b9/html5/thumbnails/5.jpg)
‘’
5
“[A] super small group of developers and I got together to design and build a new internal tool and saw an opportunity to do something more. Through that process, we saw ourselves build something much more substantial than another internal tool. Months later, we ended up with an early version of Bootstrap as a way to document and share common design patterns and assets within the company”
Mark Otto, 2011, Creador de Bootstrap
![Page 6: Bootstrap 3](https://reader034.vdocuments.site/reader034/viewer/2022042518/55a785471a28abbe7a8b46b9/html5/thumbnails/6.jpg)
‘’
6
Bootstrap: the most popular HTML, CSS,
and JS framework for developing responsive,
mobile first projects on the web.
![Page 7: Bootstrap 3](https://reader034.vdocuments.site/reader034/viewer/2022042518/55a785471a28abbe7a8b46b9/html5/thumbnails/7.jpg)
7
![Page 8: Bootstrap 3](https://reader034.vdocuments.site/reader034/viewer/2022042518/55a785471a28abbe7a8b46b9/html5/thumbnails/8.jpg)
Bootstrap
8
![Page 9: Bootstrap 3](https://reader034.vdocuments.site/reader034/viewer/2022042518/55a785471a28abbe7a8b46b9/html5/thumbnails/9.jpg)
Alternativas a Bootstrap
9
Foundation Semantic UI
http://foundation.zurb.com http://semantic-ui.com/
![Page 10: Bootstrap 3](https://reader034.vdocuments.site/reader034/viewer/2022042518/55a785471a28abbe7a8b46b9/html5/thumbnails/10.jpg)
10
¿Qué incluye Bootstrap?
CSS Iconos(fonts)
JavaScriptsobre jQuery
![Page 11: Bootstrap 3](https://reader034.vdocuments.site/reader034/viewer/2022042518/55a785471a28abbe7a8b46b9/html5/thumbnails/11.jpg)
Cosas que hay que saber de Bootstrap
FrameworkBootstrap ha sido desarrollado por Twitter y liberado con licencia MIT
GridBootstrap se basa en una rejilla (grid) de 12 columnas
Primero móviBootstrap sigue el enfoque “mobile-first design”: diseñamos para móviles y mejoramos para escritorio
FrameworkUn framework nos da una base que extendemos para construir aplicaciones. Bootstrap proporciona CSS, JS, iconos y componentes
LessEl fuente de Bootstrap usa Less, un lenguaje de estilos dinámico (con variables o mixins), que se puede compilar a CSS
ReferenciasHay disponibles temas y herramientas visuales para personalizar o crear interfaces con bootstrap
11
![Page 12: Bootstrap 3](https://reader034.vdocuments.site/reader034/viewer/2022042518/55a785471a28abbe7a8b46b9/html5/thumbnails/12.jpg)
Degradación Gradual y Mejora progresiva
12
![Page 13: Bootstrap 3](https://reader034.vdocuments.site/reader034/viewer/2022042518/55a785471a28abbe7a8b46b9/html5/thumbnails/13.jpg)
Degradación Gradual y Mejora progresiva
13
![Page 14: Bootstrap 3](https://reader034.vdocuments.site/reader034/viewer/2022042518/55a785471a28abbe7a8b46b9/html5/thumbnails/14.jpg)
Degradación Gradual y Mejora progresiva
14
![Page 15: Bootstrap 3](https://reader034.vdocuments.site/reader034/viewer/2022042518/55a785471a28abbe7a8b46b9/html5/thumbnails/15.jpg)
Diseño adaptable
15
http://brettjankord.com/2013/01/30/you-keep-using-that-word-i-do-not-think-it-means-what-you-think-it-means/
![Page 16: Bootstrap 3](https://reader034.vdocuments.site/reader034/viewer/2022042518/55a785471a28abbe7a8b46b9/html5/thumbnails/16.jpg)
2.Primeros pasos
Cómo instalar BS3, plantillas y ejemplos
16
![Page 17: Bootstrap 3](https://reader034.vdocuments.site/reader034/viewer/2022042518/55a785471a28abbe7a8b46b9/html5/thumbnails/17.jpg)
17
![Page 18: Bootstrap 3](https://reader034.vdocuments.site/reader034/viewer/2022042518/55a785471a28abbe7a8b46b9/html5/thumbnails/18.jpg)
Versión compilada
18
▣ bootstrap.css □ obligatorio - BS3 listo
para usar▣ bootstrap-theme.css
□ opcional, añade efecto 3D
▣ *.map□ para depurar en
Chrome y enlazar less y css
▣ *.min.css□ versión comprimida
![Page 19: Bootstrap 3](https://reader034.vdocuments.site/reader034/viewer/2022042518/55a785471a28abbe7a8b46b9/html5/thumbnails/19.jpg)
Versión fuente
▣ incluye less▣ al compilarlo
generamos css
19
![Page 20: Bootstrap 3](https://reader034.vdocuments.site/reader034/viewer/2022042518/55a785471a28abbe7a8b46b9/html5/thumbnails/20.jpg)
Versión CDN (sin descarga)
20
![Page 21: Bootstrap 3](https://reader034.vdocuments.site/reader034/viewer/2022042518/55a785471a28abbe7a8b46b9/html5/thumbnails/21.jpg)
Plantilla básica
21
HTML5
![Page 22: Bootstrap 3](https://reader034.vdocuments.site/reader034/viewer/2022042518/55a785471a28abbe7a8b46b9/html5/thumbnails/22.jpg)
Ojo: usa viewport
22Fuente: http://m5designstudio.com/2013/orlando-web-design/bootstrap-responsive-layout/
![Page 23: Bootstrap 3](https://reader034.vdocuments.site/reader034/viewer/2022042518/55a785471a28abbe7a8b46b9/html5/thumbnails/23.jpg)
Plantillas del framework
23
http://getbootstrap.com/getting-started/
![Page 24: Bootstrap 3](https://reader034.vdocuments.site/reader034/viewer/2022042518/55a785471a28abbe7a8b46b9/html5/thumbnails/24.jpg)
Plantillas con barras de navegación
24
http://getbootstrap.com/getting-started/
![Page 25: Bootstrap 3](https://reader034.vdocuments.site/reader034/viewer/2022042518/55a785471a28abbe7a8b46b9/html5/thumbnails/25.jpg)
Componentes
25
![Page 26: Bootstrap 3](https://reader034.vdocuments.site/reader034/viewer/2022042518/55a785471a28abbe7a8b46b9/html5/thumbnails/26.jpg)
Componentes
26
![Page 27: Bootstrap 3](https://reader034.vdocuments.site/reader034/viewer/2022042518/55a785471a28abbe7a8b46b9/html5/thumbnails/27.jpg)
container y container-fluid
27
▣ Necesitamos envolver la rejilla en elemento□ .container: contenedor fijo y adaptable□ .container-fluid: contenedor fluid y adaptable
![Page 28: Bootstrap 3](https://reader034.vdocuments.site/reader034/viewer/2022042518/55a785471a28abbe7a8b46b9/html5/thumbnails/28.jpg)
28
![Page 29: Bootstrap 3](https://reader034.vdocuments.site/reader034/viewer/2022042518/55a785471a28abbe7a8b46b9/html5/thumbnails/29.jpg)
Resultado
29
![Page 30: Bootstrap 3](https://reader034.vdocuments.site/reader034/viewer/2022042518/55a785471a28abbe7a8b46b9/html5/thumbnails/30.jpg)
3.Diseño basado
en rejillaQué es y cómo usar la rejilla (grid) en diseño
30
![Page 31: Bootstrap 3](https://reader034.vdocuments.site/reader034/viewer/2022042518/55a785471a28abbe7a8b46b9/html5/thumbnails/31.jpg)
¿Qué web te parece mejor?
31
![Page 32: Bootstrap 3](https://reader034.vdocuments.site/reader034/viewer/2022042518/55a785471a28abbe7a8b46b9/html5/thumbnails/32.jpg)
32
![Page 33: Bootstrap 3](https://reader034.vdocuments.site/reader034/viewer/2022042518/55a785471a28abbe7a8b46b9/html5/thumbnails/33.jpg)
Diseño basado en rejilla
33
Qué es▣ Esqueleto de la
página web▣ Permite organizar
los elementos (textos, gráficos, ….)
▣ Son las líneas invisibles en que colocamos los elementos
Tipos de grid▣ Manuscrito▣ Columna▣ Modular▣ Jerárquico▣ Adaptable
(responsive)
![Page 34: Bootstrap 3](https://reader034.vdocuments.site/reader034/viewer/2022042518/55a785471a28abbe7a8b46b9/html5/thumbnails/34.jpg)
Tipos de grid (I)
Manuscrito Columna
34Fuente: http://www.vanseodesign.com/web-design/grid-types/
![Page 35: Bootstrap 3](https://reader034.vdocuments.site/reader034/viewer/2022042518/55a785471a28abbe7a8b46b9/html5/thumbnails/35.jpg)
Tipos de grid (II)
Modular Jerárquico
35
![Page 36: Bootstrap 3](https://reader034.vdocuments.site/reader034/viewer/2022042518/55a785471a28abbe7a8b46b9/html5/thumbnails/36.jpg)
Anatomía de una rejilla (grid)
36
Margen (margin) Medianil (gutter)(para filas o columnas)
Columna Rejilla o retícula (grid)
![Page 37: Bootstrap 3](https://reader034.vdocuments.site/reader034/viewer/2022042518/55a785471a28abbe7a8b46b9/html5/thumbnails/37.jpg)
Ejemplo: Mondrian
37Fuente: http://designshack.net/articles/css/5-really-useful-responsive-web-design-patterns/
![Page 38: Bootstrap 3](https://reader034.vdocuments.site/reader034/viewer/2022042518/55a785471a28abbe7a8b46b9/html5/thumbnails/38.jpg)
Ejemplo: galería
38
![Page 39: Bootstrap 3](https://reader034.vdocuments.site/reader034/viewer/2022042518/55a785471a28abbe7a8b46b9/html5/thumbnails/39.jpg)
Ejemplo: elementos destacados
39
![Page 40: Bootstrap 3](https://reader034.vdocuments.site/reader034/viewer/2022042518/55a785471a28abbe7a8b46b9/html5/thumbnails/40.jpg)
4.La rejilla de Bootstrap 3
Qué es y cómo usar la rejilla de Bootstrap 3
40
![Page 41: Bootstrap 3](https://reader034.vdocuments.site/reader034/viewer/2022042518/55a785471a28abbe7a8b46b9/html5/thumbnails/41.jpg)
Rejilla BS3
41
▣ Dentro de etiqueta container o container-fluid
▣ Ponemos filas (row) y dentro columnas (col-xx-size)
▣ 1 fila, 12 columnas▣ “Mobile-first” - el
dispositivo por defecto es el más pequeño (xs)
▣ Medianiles (gutter) con padding
▣ Las clases de la rejilla se aplican a los dispositivos de mayor tamaño si no se sobreescriben□ Ej. si defino col-md-
X se aplica a lg si no defino col-lg-X
▣ Si defino más de 12 columnas, las que no caben pasan a la siguiente fila
![Page 42: Bootstrap 3](https://reader034.vdocuments.site/reader034/viewer/2022042518/55a785471a28abbe7a8b46b9/html5/thumbnails/42.jpg)
Dispositivos de BS3
42
![Page 43: Bootstrap 3](https://reader034.vdocuments.site/reader034/viewer/2022042518/55a785471a28abbe7a8b46b9/html5/thumbnails/43.jpg)
43
![Page 44: Bootstrap 3](https://reader034.vdocuments.site/reader034/viewer/2022042518/55a785471a28abbe7a8b46b9/html5/thumbnails/44.jpg)
Plantilla básica con xs (por defecto)
44
![Page 45: Bootstrap 3](https://reader034.vdocuments.site/reader034/viewer/2022042518/55a785471a28abbe7a8b46b9/html5/thumbnails/45.jpg)
Resultado: misma rejilla para todos
45
![Page 46: Bootstrap 3](https://reader034.vdocuments.site/reader034/viewer/2022042518/55a785471a28abbe7a8b46b9/html5/thumbnails/46.jpg)
Apilado xs; horizontal resto (sm, …)
46
![Page 47: Bootstrap 3](https://reader034.vdocuments.site/reader034/viewer/2022042518/55a785471a28abbe7a8b46b9/html5/thumbnails/47.jpg)
Rejillas BS3
47
![Page 48: Bootstrap 3](https://reader034.vdocuments.site/reader034/viewer/2022042518/55a785471a28abbe7a8b46b9/html5/thumbnails/48.jpg)
Ejemplo Punto ruptura
48Fuente: http://fearlessflyer.com/exploring-the-bootstrap-3-0-grid-system/
![Page 49: Bootstrap 3](https://reader034.vdocuments.site/reader034/viewer/2022042518/55a785471a28abbe7a8b46b9/html5/thumbnails/49.jpg)
.col-xs-*
49
Fuente: http://www.zeninvader.com/css/bootstrap-3-grid-system-explained
![Page 50: Bootstrap 3](https://reader034.vdocuments.site/reader034/viewer/2022042518/55a785471a28abbe7a8b46b9/html5/thumbnails/50.jpg)
.col-sm-*
50
Fuente: http://www.zeninvader.com/css/bootstrap-3-grid-system-explained
![Page 51: Bootstrap 3](https://reader034.vdocuments.site/reader034/viewer/2022042518/55a785471a28abbe7a8b46b9/html5/thumbnails/51.jpg)
.col-md-*
51
Fuente: http://www.zeninvader.com/css/bootstrap-3-grid-system-explained
![Page 52: Bootstrap 3](https://reader034.vdocuments.site/reader034/viewer/2022042518/55a785471a28abbe7a8b46b9/html5/thumbnails/52.jpg)
.col-lg-*
52
Fuente: http://www.zeninvader.com/css/bootstrap-3-grid-system-explained
![Page 53: Bootstrap 3](https://reader034.vdocuments.site/reader034/viewer/2022042518/55a785471a28abbe7a8b46b9/html5/thumbnails/53.jpg)
Mezcla
53
Fuente: http://www.zeninvader.com/css/bootstrap-3-grid-system-explained
.col-xs-6 .col-sm-8 .col-md-5 .col-lg-2
.col-xs-6 .col-sm-4 .col-md-7 .col-lg-10
![Page 54: Bootstrap 3](https://reader034.vdocuments.site/reader034/viewer/2022042518/55a785471a28abbe7a8b46b9/html5/thumbnails/54.jpg)
Mezcla apilada
54
Fuente: http://www.zeninvader.com/css/bootstrap-3-grid-system-explained
.col-xs-9 .col-sm-12
.col-md-4 .col-lg-5.col-xs-6 .col-sm-6 .col-md-9 .col-lg-7
![Page 55: Bootstrap 3](https://reader034.vdocuments.site/reader034/viewer/2022042518/55a785471a28abbe7a8b46b9/html5/thumbnails/55.jpg)
Mezcla anidado
55
Fuente: http://www.zeninvader.com/css/bootstrap-3-grid-system-explained
![Page 56: Bootstrap 3](https://reader034.vdocuments.site/reader034/viewer/2022042518/55a785471a28abbe7a8b46b9/html5/thumbnails/56.jpg)
Anidar columnas
56
![Page 57: Bootstrap 3](https://reader034.vdocuments.site/reader034/viewer/2022042518/55a785471a28abbe7a8b46b9/html5/thumbnails/57.jpg)
Desplazar columnas (offset)
57
![Page 58: Bootstrap 3](https://reader034.vdocuments.site/reader034/viewer/2022042518/55a785471a28abbe7a8b46b9/html5/thumbnails/58.jpg)
Reordenar columnas de forma manual
58
Push 3 (mover 3 a la dcha)Pull 3 (mover 3 a la izda)
![Page 59: Bootstrap 3](https://reader034.vdocuments.site/reader034/viewer/2022042518/55a785471a28abbe7a8b46b9/html5/thumbnails/59.jpg)
5.Estilos CSS base
Estilos CSS básicos que nos da BS3
59
![Page 60: Bootstrap 3](https://reader034.vdocuments.site/reader034/viewer/2022042518/55a785471a28abbe7a8b46b9/html5/thumbnails/60.jpg)
Tipografía
60
![Page 61: Bootstrap 3](https://reader034.vdocuments.site/reader034/viewer/2022042518/55a785471a28abbe7a8b46b9/html5/thumbnails/61.jpg)
Ej. estilos predefinidos
61
![Page 62: Bootstrap 3](https://reader034.vdocuments.site/reader034/viewer/2022042518/55a785471a28abbe7a8b46b9/html5/thumbnails/62.jpg)
Tablas
62
![Page 63: Bootstrap 3](https://reader034.vdocuments.site/reader034/viewer/2022042518/55a785471a28abbe7a8b46b9/html5/thumbnails/63.jpg)
Formularios
63
![Page 64: Bootstrap 3](https://reader034.vdocuments.site/reader034/viewer/2022042518/55a785471a28abbe7a8b46b9/html5/thumbnails/64.jpg)
Imágenes
64
![Page 65: Bootstrap 3](https://reader034.vdocuments.site/reader034/viewer/2022042518/55a785471a28abbe7a8b46b9/html5/thumbnails/65.jpg)
Botones
65
![Page 66: Bootstrap 3](https://reader034.vdocuments.site/reader034/viewer/2022042518/55a785471a28abbe7a8b46b9/html5/thumbnails/66.jpg)
6.Componentes
Componentes reutilizables
66
![Page 67: Bootstrap 3](https://reader034.vdocuments.site/reader034/viewer/2022042518/55a785471a28abbe7a8b46b9/html5/thumbnails/67.jpg)
Labels
67
![Page 68: Bootstrap 3](https://reader034.vdocuments.site/reader034/viewer/2022042518/55a785471a28abbe7a8b46b9/html5/thumbnails/68.jpg)
68
Dropdown, Button groups, Button dropdown
Fuente: http://bootstrapuikit.com/Documentación: http://getbootstrap.com/components/
![Page 69: Bootstrap 3](https://reader034.vdocuments.site/reader034/viewer/2022042518/55a785471a28abbe7a8b46b9/html5/thumbnails/69.jpg)
Glyphicons
69
![Page 70: Bootstrap 3](https://reader034.vdocuments.site/reader034/viewer/2022042518/55a785471a28abbe7a8b46b9/html5/thumbnails/70.jpg)
Nav (Tabs, Pills), Breadcrumb, Badges, List group, NavBar
70
![Page 71: Bootstrap 3](https://reader034.vdocuments.site/reader034/viewer/2022042518/55a785471a28abbe7a8b46b9/html5/thumbnails/71.jpg)
Input groups
71
![Page 72: Bootstrap 3](https://reader034.vdocuments.site/reader034/viewer/2022042518/55a785471a28abbe7a8b46b9/html5/thumbnails/72.jpg)
Jumbotron
72
![Page 73: Bootstrap 3](https://reader034.vdocuments.site/reader034/viewer/2022042518/55a785471a28abbe7a8b46b9/html5/thumbnails/73.jpg)
Pagination, Progress bar
73
![Page 74: Bootstrap 3](https://reader034.vdocuments.site/reader034/viewer/2022042518/55a785471a28abbe7a8b46b9/html5/thumbnails/74.jpg)
Thumbnail
74
![Page 75: Bootstrap 3](https://reader034.vdocuments.site/reader034/viewer/2022042518/55a785471a28abbe7a8b46b9/html5/thumbnails/75.jpg)
Media object
75
Fuente: http://www.tutorialspark.com/twitterBootstrap/TwitterBootstrap_MediaObjects.php
![Page 76: Bootstrap 3](https://reader034.vdocuments.site/reader034/viewer/2022042518/55a785471a28abbe7a8b46b9/html5/thumbnails/76.jpg)
Panel, Well
76
![Page 77: Bootstrap 3](https://reader034.vdocuments.site/reader034/viewer/2022042518/55a785471a28abbe7a8b46b9/html5/thumbnails/77.jpg)
Alerts
77
![Page 78: Bootstrap 3](https://reader034.vdocuments.site/reader034/viewer/2022042518/55a785471a28abbe7a8b46b9/html5/thumbnails/78.jpg)
Ejemplo
78
Pruebabs3-template:html5bs3-containerbs3-page-headerbs3-panel:headinglorem20bs3-panel:footer
![Page 79: Bootstrap 3](https://reader034.vdocuments.site/reader034/viewer/2022042518/55a785471a28abbe7a8b46b9/html5/thumbnails/79.jpg)
7.Componentes
JS
Componentes jQuery ya integrados en BS3
79
![Page 80: Bootstrap 3](https://reader034.vdocuments.site/reader034/viewer/2022042518/55a785471a28abbe7a8b46b9/html5/thumbnails/80.jpg)
Componentes JS
▣ Tenemos que definir un marcado HTML y…▣ .. activarlos con jQuery o con marcado HTML
(atributos data-)▣ Tenemos
□ ventanas modales□ carrusel de imágenes□ menús□ …□ Más en http://getbootstrap.com/javascript/
80
![Page 81: Bootstrap 3](https://reader034.vdocuments.site/reader034/viewer/2022042518/55a785471a28abbe7a8b46b9/html5/thumbnails/81.jpg)
Ejemplo: desplegable (dropdown)
81
![Page 82: Bootstrap 3](https://reader034.vdocuments.site/reader034/viewer/2022042518/55a785471a28abbe7a8b46b9/html5/thumbnails/82.jpg)
Opción 1. Marcado HTML
82
▣ data-target: hace que los enlaces no cambien de página
▣ data-toggle: evento desplegar menú
![Page 83: Bootstrap 3](https://reader034.vdocuments.site/reader034/viewer/2022042518/55a785471a28abbe7a8b46b9/html5/thumbnails/83.jpg)
Opción 1 con “flechita” (caret)
83
![Page 84: Bootstrap 3](https://reader034.vdocuments.site/reader034/viewer/2022042518/55a785471a28abbe7a8b46b9/html5/thumbnails/84.jpg)
Opción 1 con glyphicon
84
![Page 85: Bootstrap 3](https://reader034.vdocuments.site/reader034/viewer/2022042518/55a785471a28abbe7a8b46b9/html5/thumbnails/85.jpg)
Opción 2. Uso de jQuery
85
![Page 86: Bootstrap 3](https://reader034.vdocuments.site/reader034/viewer/2022042518/55a785471a28abbe7a8b46b9/html5/thumbnails/86.jpg)
JavaScript
86
Con jQuery podemos controlar eventos de BS3.
![Page 87: Bootstrap 3](https://reader034.vdocuments.site/reader034/viewer/2022042518/55a785471a28abbe7a8b46b9/html5/thumbnails/87.jpg)
8.Cómo
personalizarlo
Cómo seleccionar nodos HTML en las reglas CSS
87
![Page 88: Bootstrap 3](https://reader034.vdocuments.site/reader034/viewer/2022042518/55a785471a28abbe7a8b46b9/html5/thumbnails/88.jpg)
Cómo extender bootstrap
▣ Técnica sobreescribir propiedades css□ ¡Nunca modificar bootstrap.css!
▣ Opción 1: usar la versión compilada de BS3□ Modificamos el CSS
▣ Opción 2: usar la versión fuente de BS3□ Hacer cambios en less o CSS□ Si tocamos el less, se compila□ Puede ser difícil
▣ En ambos casos, también podemos partir de una plantilla o tema prediseñado o de las plantillas de BS3
88
![Page 89: Bootstrap 3](https://reader034.vdocuments.site/reader034/viewer/2022042518/55a785471a28abbe7a8b46b9/html5/thumbnails/89.jpg)
Generar bootstrap personalizado
▣ Podemos bajar fuente de bootstrap, cambiarlo con less, y generar la versión o…
▣ Asistente en http://getbootstrap.com/customize/
▣ Podemos□ Importar una configuración previa□ Adaptar cada variable□ Descargar nuestro bootstrap
89
![Page 90: Bootstrap 3](https://reader034.vdocuments.site/reader034/viewer/2022042518/55a785471a28abbe7a8b46b9/html5/thumbnails/90.jpg)
Incluir estilo propio
▣ Nunca modificad directamente bootstrap
90http://bootstrapbay.com/blog/customize-bootstrap/
![Page 91: Bootstrap 3](https://reader034.vdocuments.site/reader034/viewer/2022042518/55a785471a28abbe7a8b46b9/html5/thumbnails/91.jpg)
9.Extensiones y
temas
Cómo aplicar CSS y HTML para realizar una web
91
![Page 92: Bootstrap 3](https://reader034.vdocuments.site/reader034/viewer/2022042518/55a785471a28abbe7a8b46b9/html5/thumbnails/92.jpg)
Temas y Plantillas
▣ Plantillas□ Nuevos tipos de páginas: comercio, administración,
...▣ Temas
□ Nuevo diseño con plantilla y componentes de Bootstrap
▣ Plantilla y Tema□ Nuevos tipos con nuevos diseños
92
![Page 94: Bootstrap 3](https://reader034.vdocuments.site/reader034/viewer/2022042518/55a785471a28abbe7a8b46b9/html5/thumbnails/94.jpg)
Sitios para temas y plantillas
▣ Gratuitos: □ http://bootswatch.com/ □ http://bootstrapzero.com/□ http://startbootstrap.com/
▣ Comerciales□ https://wrapbootstrap.com
94
![Page 95: Bootstrap 3](https://reader034.vdocuments.site/reader034/viewer/2022042518/55a785471a28abbe7a8b46b9/html5/thumbnails/95.jpg)
10.Less
Preprocesador de CSS
95
![Page 96: Bootstrap 3](https://reader034.vdocuments.site/reader034/viewer/2022042518/55a785471a28abbe7a8b46b9/html5/thumbnails/96.jpg)
96
Transpilador Compilator de fuente a
fuente
http://en.wikipedia.org/wiki/Source-to-source_compiler
![Page 97: Bootstrap 3](https://reader034.vdocuments.site/reader034/viewer/2022042518/55a785471a28abbe7a8b46b9/html5/thumbnails/97.jpg)
Less
▣ Preprocesador de CSS▣ Permite definir
□ variables con operaciones□ mixins, funciones, reglas anidadas□ espacios de nombres e importar, ...
▣ Página: http://lesscss.org▣ Compilador en línea
□ http://winless.org/online-less-compiler ▣ Chrome DevTools permite trabajar con
preprocesadores□ https://developer.chrome.
com/devtools/docs/css-preprocessors
97
¡Fuera del temario!
![Page 98: Bootstrap 3](https://reader034.vdocuments.site/reader034/viewer/2022042518/55a785471a28abbe7a8b46b9/html5/thumbnails/98.jpg)
Less variables
98
lessc
![Page 99: Bootstrap 3](https://reader034.vdocuments.site/reader034/viewer/2022042518/55a785471a28abbe7a8b46b9/html5/thumbnails/99.jpg)
Less mixins
99
![Page 100: Bootstrap 3](https://reader034.vdocuments.site/reader034/viewer/2022042518/55a785471a28abbe7a8b46b9/html5/thumbnails/100.jpg)
Less mixins paramétricos (I)
100
![Page 101: Bootstrap 3](https://reader034.vdocuments.site/reader034/viewer/2022042518/55a785471a28abbe7a8b46b9/html5/thumbnails/101.jpg)
Less mixins paramétricos (II)
101
![Page 102: Bootstrap 3](https://reader034.vdocuments.site/reader034/viewer/2022042518/55a785471a28abbe7a8b46b9/html5/thumbnails/102.jpg)
Less. Reglas anidadas
102
![Page 103: Bootstrap 3](https://reader034.vdocuments.site/reader034/viewer/2022042518/55a785471a28abbe7a8b46b9/html5/thumbnails/103.jpg)
Less. Funciones
103
![Page 104: Bootstrap 3](https://reader034.vdocuments.site/reader034/viewer/2022042518/55a785471a28abbe7a8b46b9/html5/thumbnails/104.jpg)
Less
104
▣ Instalar less□ sudo apt-get install node-less
▣ Ejecutar lessc□ lessc styles.less > styles.css
![Page 105: Bootstrap 3](https://reader034.vdocuments.site/reader034/viewer/2022042518/55a785471a28abbe7a8b46b9/html5/thumbnails/105.jpg)
Less en phpStorm
105
![Page 106: Bootstrap 3](https://reader034.vdocuments.site/reader034/viewer/2022042518/55a785471a28abbe7a8b46b9/html5/thumbnails/106.jpg)
11.Conclusiones
Qué hemos aprendido
106
![Page 107: Bootstrap 3](https://reader034.vdocuments.site/reader034/viewer/2022042518/55a785471a28abbe7a8b46b9/html5/thumbnails/107.jpg)
107
BS3 simplifica la creación de interfaces adaptables y fácilmente mantenibles con nuevos temas
![Page 108: Bootstrap 3](https://reader034.vdocuments.site/reader034/viewer/2022042518/55a785471a28abbe7a8b46b9/html5/thumbnails/108.jpg)
Fallos habituales
108
▣ Usar marcado HTML diferente para dispositivos diferentes con hidden-sm o visible-sm. □ Se incrementa el tamaño global de la página HTML□ Mejor usar la rejilla para redimensionar.
▣ Usar BS3 para aplicaciones móviles hechas con tecnologías web. Mejor usar otros frameworks más ligeros como Ratchet (de los desarrolladores de BS3)□ http://goratchet.com/
![Page 110: Bootstrap 3](https://reader034.vdocuments.site/reader034/viewer/2022042518/55a785471a28abbe7a8b46b9/html5/thumbnails/110.jpg)
Referencias
▣ Jump Start Bootstrap□ http://proquest.safaribooksonline.
com/book/web-design-and-development/9781457174346
▣ Learning Bootstrap□ http://proquest.safaribooksonline.
com/book/web-development/9781782161844
110
![Page 111: Bootstrap 3](https://reader034.vdocuments.site/reader034/viewer/2022042518/55a785471a28abbe7a8b46b9/html5/thumbnails/111.jpg)
Recursos
▣ Bootstrap 3□ http://getbootstrap.com/
▣ Bootstrap Resources□ http://startbootstrap.com/bootstrap-resources/
▣ Showcases□ http://builtwithbootstrap.com/
▣ Temas gratuitos□ http://startbootstrap.com/bootstrap-
resources/#free-themes
111
![Page 112: Bootstrap 3](https://reader034.vdocuments.site/reader034/viewer/2022042518/55a785471a28abbe7a8b46b9/html5/thumbnails/112.jpg)
Créditos
Gracias a todos los que han publicado estos recursos de forma gratuita:▣ Minicons de Webalys▣ Plantilla de la presentación de SlidesCarnival▣ Fotos de Unsplash y Wix
112