PDF de programación - Bootstrap

Imágen de pdf Bootstrap

Bootstrapgráfica de visualizaciones

Publicado el 9 de Mayo del 2018
371 visualizaciones desde el 9 de Mayo del 2018
2,1 MB
20 paginas
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
  • Links de descarga
http://lwp-l.com/pdf11005

Comentarios de: Bootstrap (0)


No hay comentarios
 

Comentar...

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