Bootstrap
Escuela T´ecnica Superior de Ingenier´ıa de Telecomunicaci´on
Universidad Rey Juan Carlos
gsyc-profes (arroba) gsyc.urjc.es
Febrero de 2018
GSyC - 2018
Bootstrap
1
Derivado a partir de material de
Jes´us M. Gonz´alez-Barahona y Gregorio Robles.
El original est´a disponible en
http://cursosweb.github.io
Algunos derechos reservados.
Este trabajo se distribuye bajo la licencia
Creative Commons Attribution Share-Alike 4.0
GSyC - 2018
Bootstrap
2
¿Qu´e es Bootstrap?
Bootstrap
Caracter´ısticas
Bootstrap es un framework libre para desarrollo web
Desarrollado inicialmente en 2011 por ingenieros de Twitter
Incluye plantillas HTML y CSS con tipograf´ıas, formas,
botones, cuadros, barras de navegaci´on, carruseles de
im´agenes y muchas otras
Tambi´en existe la posibilidad de utilizar plugins de JavaScript
Aunque su preferencia es mobile first, permite crear dise˜nos
que se ven bien en m´ultiples dispositivos (responsive design)
Orientado a programadores, no a dise˜nadores gr´aficos
Es posiblemente la herramienta m´as popular para este fin,
aunque hay alternativas como Foundation
GSyC - 2018
Bootstrap
3
Caracter´ısticas de Bootstrap
Bootstrap
Caracter´ısticas
Ventajas
Resulta sencillo y r´apido escribir p´aginas con muy buen
aspecto
Se adapta a distintos dispositivos (responsive design)
Proporciona un dise˜no consistente
Es compatible con los navegadores modernos
Es software libre
Inconvenientes
Al ser una herramienta muy popular, las p´aginas web que no
est´en personalizadas quedan iguales que las de todo el mundo
Alternativas como Foundation pueden resultar m´as
convenientes para personalizar los estilos
GSyC - 2018
Bootstrap
4
Ficheros de Bootstrap
Bootstrap
Caracter´ısticas
bootstrap/
|--- css/
|
|
|
|
|
|
|--- js/
|
|
|--- fonts/
|--- bootstrap.css
|--- bootstrap.css.map
|--- bootstrap.min.css
|--- bootstrap-theme.css
|--- bootstrap-theme.css.map
|--- bootstrap-theme.min.css
|--- bootstrap.js
|--- bootstrap.min.js
|--- glyphicons-halflings-regular.eot
|--- glyphicons-halflings-regular.svg
|--- glyphicons-halflings-regular.ttf
|--- glyphicons-halflings-regular.woff
|--- glyphicons-halflings-regular.woff2
GSyC - 2018
Bootstrap
5
Holamundo en Bootstrap
Bootstrap
Caracter´ısticas
<meta charset="utf-8">
<title>Hola mundo en bootstrap</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js">
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
<!DOCTYPE html>
<html lang="es-ES">
<head>
<script
</script>
<script
</script>
</head>
<body>
<h1>
</h1>
</div>
</body>
</html>
<div class="container">
Hola, bootstrap
GSyC - 2018
Bootstrap
6
Bootstrap en CDN
Bootstrap
Caracter´ısticas
Con un CDN (Content Delivery Network) no hace falta tener
Bootstrap en nuestros archivos. Adem´as, si un usuario ya ha
descargado esas URLs, probablemente las tenga ya en la
cach´e del navegador (con el consiguiente ahorro de tiempo).
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet"
href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<!-- Latest compiled JavaScript -->
<script
src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
</script>
GSyC - 2018
Bootstrap
7
Viewport
Bootstrap
Caracter´ısticas
Para dise˜nar webs en dispositivos m´oviles, es importante tener claro
qu´e es el viewport y c´omo se comporta en este tipo de dispositivos
Viewport es la zona visible de una p´agina web. En los
navegadores tradicionales de escritorio, coincide con la
ventana del navegador
Supongamos una p´agina web grande y compleja, como la
portada de un peri´odico. La p´agina no cabr´a en la ventana del
navegador, el usuario usar´a las barras de scroll para mover el
viewport sobre el documento.
Al redimensionar la ventana, cambiar´a el tama˜no del viewport
Cambiar el tama˜no del viewport reposiciona el texto y todos
los elementos: las l´ıneas se truncan, las im´ages se recolocan,
etc
Viewport es un rect´angulo donde se compone un fragmento (tal
vez completo) de la p´agina web para presentarla al usuario
GSyC - 2018
Bootstrap
8
Bootstrap
Caracter´ısticas
Con la aparici´on de los navegadores en tel´efonos m´oviles, esto
cambia
El ´area visible de un m´ovil es demasiado peque˜na, componer
una p´agina web tradicional en ese viewport quedar´ıa mal
Ejemplo: https://tinyurl.com/y7e77lvw
Adem´as, en un navegador para m´ovil, no hay barras de scroll,
ni ventanas
GSyC - 2018
Bootstrap
9
Bootstrap
Caracter´ısticas
Para solucionar este problema (en las p´aginas tradicionales), se usa
un viewport virtual, mayor que el viewport ordinario (la pantalla)
Lo introduce Apple para Safari en iOS, luego pasa a ser
est´andar
El ancho del viewport virtual es razonablemente grande, por
ejemplo 980 pixeles en el navegador safari para iPhone
El navegador compone la p´agina sobre este viewport virtual,
ya no hacen falta barras desplazamiento horizontal
El usuario arrastra el viewport (la pantalla, m´as peque˜na)
sobre el viewport virtual, para que le muestre una zona u otra
del documento. Tambi´en se le puede permitir hacer zoom
GSyC - 2018
Bootstrap
10
P´aginas responsive
Bootstrap
Caracter´ısticas
Una p´agina web moderna con un minimo de calidad se entiende
que tiene que ser responsive
La p´agina se adapta al tama˜no de la pantalla (escritorio,
tablet, m´ovil), sin necesidad de barras de desplazamiento
horizontal
El dise˜no responsive tal y como lo conocemos en la actualidad
se basa en el uso de un grid. En espa˜nol se traduce por
cuadr´ıcula o rejilla
En estas p´aginas ya no hace falta un viewport virtual, porque
la p´agina est´a dise˜nada para adaptarse al viewport ordinario
(la pantalla peque˜na)
GSyC - 2018
Bootstrap
11
Bootstrap
Caracter´ısticas
La misma cuadr´ıcula de 12 elementos se presenta de forma distinta
en un ordenador
En un tablet
En un m´ovil
XXX
XXX
XX
XX
XX
X
X
X
X
X
X
GSyC - 2018
Bootstrap
12
Responsive design
Bootstrap
Caracter´ısticas
GSyC - 2018
Foto: https://image-store.slidesharecdn.com/420d15aa-cbf0-4ded-ac42-fcf728610bc1-original.jpeg
Bootstrap
13
Bootlint
Bootstrap
Caracter´ısticas
Herramienta que detecta algunos errores comunes el HTML
de dise˜nos Bootstrap
Comprueba que las instancias de componentes Bootstrap han
sido correctamente estructurados
Analiza tambi´en la inclusi´on de ciertas etiquetas < meta >, la
declaraci´on DOCTYPE HTML5, etc.
Supone que el HTML es correcto, as´ı que deber´ıamos usar
previamente alguna herramienta como el W3C validator o
similar
P´agina web: https://github.com/twbs/bootlint
GSyC - 2018
Bootstrap
14
Bootstrap
Caracter´ısticas
Instalaci´on:
apt-get install nodejs-legacy
npm install -g bootlint
bootlint mostrar´a un warning
missing X-UA-Compatible <meta> tag that disables
old IE compatibility modes
Internet Explorer 6 (a˜nos 2001-2008) fue un navegador muy
usado, que no segu´ıa las normas HTML
Durante alg´un tiempo pudo ser recomendable que quien usase
HTML est´andar (y no HTML IE 6), lo indicara con
<meta http-equiv="X-UA-Compatible" content="IE=edge">
En la actualidad, a˜nadir esta indicaci´on se considera obsoleto.
Podemos ignorar este warning de bootlint
GSyC - 2018
Bootstrap
15
Mobile first
Bootstrap
Caracter´ısticas
Con una propiedad de etiqueta meta, podemos indicar la
escala inicial del viewport
Como las p´aginas con bootstrap son responsive es habitual
especificar que el viewport virtual coincida con el ancho de la
pantalla, esto es, con el viewport ordinario
<meta name="viewport" content="width=device-width, initial-scale=1">
Tambi´en se puede inhabilitar el zoom en dispositivos m´oviles
con user-scalable=no
Los usuarios s´olo podr´an hacer scroll y tendr´a una apariencia
nativa.
Usar con precauci´on. No vale para todas las aplicaciones
<meta name="viewport" content="width=device-width, initial-scale=1,
maximum-scale=1, user-scalable=no">
GSyC - 2018
Bootstrap
16
Contenedores
Bootstrap
Rejilla de Bootstrap
Todos los elementos de Bootstrap deben estar dentro de un
elemento contenedor
Para un contenedor responsivo de tama˜no fijo, se usa
.container
<div class="container">
...
</div>
Si se desea un contenedor con el ancho total (del viewport),
se ha de usar .container-fluid
<div class="container-fluid">
...
</div>
Los contenedores no se pueden anidar
Bootstrap
GSyC - 2018
17
El sistema de rejilla (I)
Bootstrap
Rejilla de Bootstrap
El dise˜no de p´aginas basado en rejilla se realiza mediante filas y
columnas donde se colocan los contenidos. As´ı funciona la rejilla de
Bootstrap:
Filas, dentro un contenedor, agrupan horizontalmente varias
columnas, que son las que tienen contenido
La pantalla se divide en 12 columnas
Las columnas definen su anchura especificando cu´antas
columnas de la fila ocupan
Hay clases CSS (como por ejemplo .row y .col-xs-4) para crear
rejillas r´apidamente
Hay padding entre columnas. En la primera y ´ultima columnas,
las filas (elementos .row) aplican m´argenes negativos
GSyC - 2018
Bootstrap
18
El sistema de rejilla (II)
Bootstrap
Rejilla de Bootstrap
GSyC - 2018
Bootstrap
19
Responsive design en Bootstrap
Bootstrap
Rejilla de Bootstrap
M´oviles y escritorio:
M´ovil, tableta y escritorio:
GSyC - 2018
Bootstrap
20
El sistema de rejilla (III)
Bootstrap
Rejilla de Bootstrap
Dicho de otro modo
El ancho de cada columna se mide en casillas
La pantalla ocupa un ancho total de 12 casillas, que
repartimos entre el n´umero de columnas que deseemos
Si el viewport (la pantalla) es lo bastante ancho, las columnas
se muestran en su disposici´on ordinaria, esto es, cada una al
lado de la otra
Si el viewport es demasido peque˜no, entonces las cas
Crear cuenta
Comentarios de: Bootstrap (1)