PDF de programación - Bootstrap

Imágen de pdf Bootstrap

Bootstrapgráfica de visualizaciones

estrellaestrellaestrellaestrellaestrella(1)
Publicado el 12 de Octubre del 2018
1.145 visualizaciones desde el 12 de Octubre del 2018. Una media de 35 por semana
315,6 KB
41 paginas
Creado hace 1a (31/01/2018)
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
  • Links de descarga
http://lwp-l.com/pdf13853

Comentarios de: Bootstrap (1)

Mauro
31 de Mayo del 2019
estrellaestrellaestrellaestrellaestrella
Excelente manual! Sintético y bien ejemplificado sobre el funcionamiento de Bootstrap y sus prestaciones más destacadas. Los ejemplos usados son muy buenos y claros.
Responder

Comentar...

Nombre
Correo (no se visualiza en la web)
Valoración
Comentarios
Es necesario revisar y aceptar las políticas de privacidad

Revisar política de publicidad