IFCD0110 – CONFECCIÓN Y PUBLICACIÓN DE PÁGINAS WEB. ETSI Minas y Energía - UPM
1
BOOTSTRAP
Bernardo Chenlo
2
TWITTER BOOTSTRAP
el framework más popular
Twitter Bootstrap
• Bootstrap contiene una serie de archivos CSS y
JS que facilitan el desarrollo web.
• Definen una serie de clases y elementos que una
vez aprendidos nos permiten desarrollar con
rapidez de una manera responsive.
• Lo más destacado de Bootstrap es su sistema de
rejilla.
• Responsive grid
Instalando Bootstrap
• Descargar la versión minimizada de Bootstrap
• http://getbootstrap.com/
• Crear una nueva carpeta para el proyecto y descomprimir
Bootstrap dentro
• Crear el index.html
• Viewport responsive
• Enlazar el documento con los CSS de Bootstrap
• css/bootstrap.min.css
• Enlazar al final del documento con jQuery y con
Javascript
• http://code.jquery.com/jquery.js
• js.bootstrap.min.js
Responsive grid
• El contenido de un diseño Bootstrap tiene 12
columnas
• Creamos la estructura indicándoles a los <div> el
número de columnas que van a ocupar.
Responsive grid
• Definimos las filas
• <div class=“row”>
• Definimos las columnas dentro de cada fila con su número
de clase. Tienen que sumar 12.
<div class=“row”>"
<div class=“row”>"
"Ancho total"
<div class=“col-md-12”>"
</div>
</div>"
<div class=“col-md-6”>"
"Mitad izquierda"
</div>"
<div class=“col-md-6”>"
</div>
"Mitad derecha"
</div>"
Ejemplo Bootstrap
• Realizar el siguiente layout con Bootstrap
Responsive grid
• Podemos indicar el número de columnas que ocupará un
elemento para cada tipo de dispositivo.
Dispositivos
muy
pequeños
Dispositivos
pequeños
Dispositivos
medianos
Dispositivos
grandes
Teléfonos
Tablets
Ordenadores Ordenadores
< 768px
.col-xs-
> 768px
.col-sm-
> 992px
.col-md-
< 1200px
.col-lg-
Ejemplo Bootstrap - continuación
• Usando los componentes de
http://getbootstrap.com/components/
• Añadir una cabecera
• Añadir un jumbotron a Main Part
• Añadir un acordeón de contenido a
Sidebar
10
PROYECTO
Página de productos
Empezamos
1. Crear un proyecto vacío llamado productos
2. Descomprimir bootstrap dentro del proyecto
3. Descargar jQuery dentro del proyecto
4. Crear index.html
a. Viewport responsive
b. Enlazar con css/bootstrap.min.css
c. Enlazar con css/style.css
d. Enlazar con js/jquery.min.js
e. Enlazar con js/bootstrap.min.js
5. Descargar las imágenes con las que
trabajaremos
Estructura
• Creamos los elementos HTML5 de la página:
• <body>
• <header >
• <main>
• <footer >
• Podemos copiar snippets de distintos tipos de
componentes desde:
http://getbootstrap.com/components/
Cabecera
• Dentro del header copiamos los componentes:
• Navbar -> Brand image
• Insertamos la url del logo
• Navs - > Pills
• Insertamos los enlaces a las 3 páginas
• Inicio: index.html
• Galería: galeria.html
• Contacto: contacto.html
Pie
• Dentro del footer
• Creamos una fila y la dividimos en dos
columnas iguales:
• Dentro de la primera tendremos un nav con
una lista con los mismos enlaces que en
cabecera
• Dentro de la segunda tendremos el copyright
y una lista con enlaces a 2 redes sociales:
Twitter y Facebook
Contenido
• Dentro del header, a continuación de la
navegación, insertar una fila dividida en dos divs
de 7 y 5 columnas.
• En la columna de la izquierda escribir un slogan
de bienvenida a la tienda seguido de dos
párrafos.
• En la columna de la derecha insertar la imagen
intro.jpg
Contenido
• Dentro del main crear una fila divida en dos partes
de 9 y 3 columnas.
• La primera contiene un párrafo con una llamada a
la acción
• La segunda contiene un botón
• Separador horizontal
• Fila con clase galería que contiene 4 columnas
iguales cada una con una imagen
• Separador horizontal
• Fila con párrafo con testitmonio
• Fila con formulario de subscripción
Contenido
Diseño
final
desktop
Diseño
final
mobile
Crear cuenta
Comentarios de: Bootstrap (0)
No hay comentarios