Este documento proporciona una introducción a Bootstrap, el popular framework de código abierto para el desarrollo de sitios web y aplicaciones web. Explica los principios básicos de Bootstrap, incluida su rejilla de 12 columnas y enfoque "mobile-first". También describe varios componentes clave como etiquetas, desplegables, barras de navegación y formularios que se pueden utilizar para crear interfaces adaptables. Finalmente, cubre temas como la personalización de Bootstrap y el uso del preprocesador CSS subyacente Less.
4. Framework
HTML CSS y JS
Componentes para realizar webs
multidispositivo de forma rápida y con calidad
4
5. ‘’
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
11. Cosas que hay que saber de Bootstrap
Framework
Bootstrap ha sido
desarrollado por Twitter y
liberado con licencia MIT
Grid
Bootstrap se basa en una
rejilla (grid) de 12 columnas
Primero móvi
Bootstrap sigue el enfoque
“mobile-first design”:
diseñamos para móviles y
mejoramos para escritorio
Framework
Un framework nos da una
base que extendemos para
construir aplicaciones.
Bootstrap proporciona CSS,
JS, iconos y componentes
Less
El fuente de Bootstrap usa
Less, un lenguaje de estilos
dinámico (con variables o
mixins), que se puede
compilar a CSS
Referencias
Hay disponibles temas y
herramientas visuales para
personalizar o crear interfaces
con bootstrap
11
18. 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
27. container y container-fluid
27
▣ Necesitamos envolver la rejilla en elemento
□ .container: contenedor fijo y adaptable
□ .container-fluid: contenedor fluid y adaptable
33. 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)
34. Tipos de grid (I)
Manuscrito Columna
34Fuente: http://www.vanseodesign.com/web-design/grid-types/
41. 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
80. 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
88. 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
89. 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
90. Incluir estilo propio
▣ Nunca modificad directamente bootstrap
90http://bootstrapbay.com/blog/customize-bootstrap/
92. 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
97. 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!
107. 107
BS3 simplifica la creación de interfaces adaptables y
fácilmente mantenibles con nuevos temas
108. 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/
112. 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