NOMBRE ALUMNO:……………………………………………………………………………………….

CURSO:………………… PARALELO:……………………………. TURNO:………………………….

CARRERA:………………………………………………………………………………………………………..

DOCENTE: LIC. CARLOS SAAVEDRA SALAZAR GESTION: 2020

Manual de Web Responsivo - Bootstrap
Lic. Carlos Saavedra Salazar 2

INDICE
1. DISEÑO WEB RESPONSIVO ....................................................................................... 4
1.1.- ¿Que es el Responsivo Web Design? ................................................................ 4
1.1.1 FRONT-END. –.................................................................................................. 5
1.1.2 BACK-END. – .................................................................................................... 5
1.1.3 FULL STACK. – .................................................................................................. 5
2. BOOTSTRAP. - ........................................................................................................... 5
3 CREAR UN NUEVO ARCHIVO ...................................................................................... 8
3.1 Diseño de Bootstrap 4.- ..................................................................................... 9
4 CREAR UN NUEVO SITIO .......................................................................................... 10
5 GUARDAR UN ARCHIVO ........................................................................................... 11
6 ADMINISTRAR UN SITIO WEB – PARA UN NUEVO ARCHIVO ................................... 14
7 CLASS. - .................................................................................................................... 15
8 CONTENEDORES. - ................................................................................................... 16
9 COLORES – ............................................................................................................... 19
10 TEXTOS. – .............................................................................................................. 23
10.1 Textos en Negrillas ......................................................................................... 23
10.2. Textos en cursiva. .......................................................................................... 23
10.3 Tamaño de textos. - ........................................................................................ 23
10.4 Alineación de textos. - .................................................................................... 23
10.5 Cambiar color a Textos. - ................................................................................ 23
10.6 Textos en Mayúsculas. -.................................................................................. 23
10.7 Textos en Minúsculas. - .................................................................................. 23
11 ENCABEZADOS. -.................................................................................................... 24
12 BOTONES. .............................................................................................................. 26
13. REJILLAS. - ............................................................................................................. 31
13.1 Forma de declarar las filas y columnas ........................................................... 31
Manual de Web Responsivo - Bootstrap
Lic. Carlos Saavedra Salazar 3

14 MOBILE FIRST Y MOBILE LAST. .............................................................................. 33

15 MEDIDAS DE LAS COLUMNAS ................................................................................ 33
15.1 Ocultar Columnas. – ....................................................................................... 39
16 IMÁGENES ............................................................................................................. 40
17 INSERTAR ETIQUETAS EN BOOTSTRAP – ACCESOS DIRECTOS. - ............................ 44
18 HEADER - ENCABEZADO ........................................................................................ 48
19 NAV BAR – BARRA DE NAVEGACION ..................................................................... 49
20 CARRUSEL .............................................................................................................. 52
21 TARJETAS ............................................................................................................... 57
22 FOOTER ................................................................................................................. 59
Manual de Web Responsivo - Bootstrap
Lic. Carlos Saavedra Salazar 4

1. DISEÑO WEB RESPONSIVO

1.1.- ¿Que es el Responsivo Web Design?

Es una nueva propuesta o una nueva técnica para crear páginas web, que puedan ser visualizadas
perfectamente en cualquier tipo de dispositivos ya sea los Celulares, Tablet, Laptop, PC, Smart Tv, etc.
Para crear páginas Web Responsivos se debe trabajar con los Flamework, como ser Bootstrap, etc.

Ejemplo. - Así se visualizará una página responsiva en diferentes dispositivos

Manual de Web Responsivo - Bootstrap
Lic. Carlos Saavedra Salazar 5

1.1.1 FRONT-END. –

Front-End también conocida como lado del Cliente es la parte del sitio Web con la que interactúa el usuario
final es lo que es visible. El software que necesita saber el Front-End son: HTML5 → que es un lenguaje
de enmarcado, CCS3 → que es un lenguaje para poner estilos y JAVASCRIPT → que es un lenguaje de
programación.

1.1.2 BACK-END. –

Back-End también conocida como lado del Servidor es la parte que no puedes ver o es la parte donde se
administra todos los datos de esa página Web, como ser la base de datos y el servidor

1.1.3 FULL STACK. –

Es especialista en Frond-End y Back-End

2. BOOTSTRAP. -
Manual de Web Responsivo - Bootstrap
Lic. Carlos Saavedra Salazar 6
Manual de Web Responsivo - Bootstrap
Lic. Carlos Saavedra Salazar 7

ANTES DE COMENZAR CON EL CURSO CREAR UNA NUEVA

CARPETA PARA TENER TODO ORGANIZADO: LOS ARCHIVOS, LAS
IMÁGENES, VIDEOS, ETC.
1. Crear una carpeta en la unidad E: con el nombre
de → Web-Noche

2. Crear otra carpeta en la unidad E:/ Web-

Noche con el nombre de →página 1
Manual de Web Responsivo - Bootstrap
Lic. Carlos Saavedra Salazar 8

3 CREAR UN NUEVO ARCHIVO

1. Ingresar a Dreamweaver

1. Hacer un clic en ARCHIVO

2. Seleccionar y hacer un clic en NUEVO

3. En tipo de documento seleccionar → </>HTML

4. En Marco → BOOTSTRAP

5. En Titulo de documento escribir un nombre → PRACTICA 1

6. Por último, hacer un clic en → CREAR

 Manual de Web Responsivo - Bootstrap
Lic. Carlos Saavedra Salazar 9

3.1 Diseño de Bootstrap 4.-

1. Estas son las pestañas de las paginas abiertas o framewords

2. Es el enlace al frameword BOOTSTRAP-4
3. Área de trabajo
4. En el final de body está la línea de código de JQUERY → que es una librería de JavaScript,
entonces JQuery trabaja con todos los componentes de JavaScript.
5. También está al final de body la línea de POPER → que nos sirve para enlazar las librerías de
pooper.
6. También está al final de body la línea de BOOTSTRAP → que nos sirve para enlazar las librerías
de Bootstrap.
Manual de Web Responsivo - Bootstrap
Lic. Carlos Saavedra Salazar 10

4 CREAR UN NUEVO SITIO

1. Crear un nuevo sitio web (Para tener organizado sus trabajos),

2. Realizar los cambios en la siguiente ventana:

o Nombre de sitio colocar el nombre de → Bootstrap
o En carpeta del sitio local buscar la carpeta anteriormente creada (ver página 7)
en la ruta → E:\Web-Noche\pagina 1\

aquí

aquí
Manual de Web Responsivo - Bootstrap
Lic. Carlos Saavedra Salazar 11

5 GUARDAR UN ARCHIVO

1. Seleccionar → Archivo
2. Seleccionar → Guardar como
3. En nombre escribir → índex
4. Hacer un clic en → Guardar
 Manual de Web Responsivo - Bootstrap
Lic. Carlos Saavedra Salazar 12

Ahora crearemos nuestra primera página responsivo en Bootstrap, realizar la siguiente página web y
grabar con el nombre → index.html en el sitio → Bootstrap y en la carpeta → página 1
1. Entrar a Dreamweaver
2. Crear un nuevo archivo (ver página 8)
3. Crear un nuevo sitio (ver página 10)
4. Gravar con el nombre de → índex (ver página 11)
 Manual de Web Responsivo - Bootstrap
Lic. Carlos Saavedra Salazar 13

5. Escribir el siguiente código:

1
Manual de Web Responsivo - Bootstrap
Lic. Carlos Saavedra Salazar 14

6 ADMINISTRAR UN SITIO WEB – PARA UN NUEVO ARCHIVO

1. Crear otra carpeta en la unidad E:/ Web-Noche con el nombre de →página 2

2. Administrar un sitio web ya creado anteriormente

3. Realizar doble clic en → Bootstrap

4. Realizar los cambios en la ventana → Configuración del sitio para Bootstrap
5. Hacer un clic en → Guardar y en → Aceptar
6. Hacer un clic en → Listo
Manual de Web Responsivo - Bootstrap
Lic. Carlos Saavedra Salazar 15

7. Crear un nuevo Archivo en blanco (ver página 8)

8. Grabar con el nombre de → index.html en la unidad E: dentro de la carpeta → página 2 (VER
PAGINA 10)

7 CLASS. - El selector CLASS nos permite brindar estilos a nuestros elementos, al igual que el selector
ID, solo que el selector ID tiene la más jerarquía que CLASS
Manual de Web Responsivo - Bootstrap
Lic. Carlos Saavedra Salazar 16

8 CONTENEDORES. -
Manual de Web Responsivo - Bootstrap
Lic. Carlos Saavedra Salazar 17
Manual de Web Responsivo - Bootstrap
Lic. Carlos Saavedra Salazar 18

2
Manual de Web Responsivo - Bootstrap
Lic. Carlos Saavedra Salazar 19

9 COLORES –

3
Manual de Web Responsivo - Bootstrap
Lic. Carlos Saavedra Salazar 20

4
Manual de Web Responsivo - Bootstrap
Lic. Carlos Saavedra Salazar 21

5
Manual de Web Responsivo - Bootstrap
Lic. Carlos Saavedra Salazar 22

6
Manual de Web Responsivo - Bootstrap
Lic. Carlos Saavedra Salazar 23

10 TEXTOS. –

10.1 Textos en Negrillas. - class=” font-weight-bold” ó <b> BOOSTRAP </b>

10.2. Textos en cursiva. - class=” font-italic” ó <i> BOOSTRAP </i>

10.3 Tamaño de textos. -

Tamaños por defectos → class= ”display-1” ó “display-2” ó “display-3” ó “display-4”

Tamaño pequeño → class=”small”

Marcado de textos → class=”mark” (lo sombrea de un color crema)

10.4 Alineación de textos. -

Aliena a la derecha → class=” text-left”

Alinea al centro → class=”text-center”

Aliena a la izquierda→ class=”text-right”

Justificación a ambos lados → class=”justify”

10.5 Cambiar color a Textos. - class=” text-white”

10.6 Textos en Mayúsculas. - class=” text-uppercase”

10.7 Textos en Minúsculas. - class=” text-lowercase”

Manual de Web Responsivo - Bootstrap
Lic. Carlos Saavedra Salazar 24

11 ENCABEZADOS. -
Manual de Web Responsivo - Bootstrap
Lic. Carlos Saavedra Salazar 25

8
Manual de Web Responsivo - Bootstrap
Lic. Carlos Saavedra Salazar 26

12 BOTONES. -

9
Manual de Web Responsivo - Bootstrap
Lic. Carlos Saavedra Salazar 27

10
Manual de Web Responsivo - Bootstrap
Lic. Carlos Saavedra Salazar 28

11
Manual de Web Responsivo - Bootstrap
Lic. Carlos Saavedra Salazar 29

12
Manual de Web Responsivo - Bootstrap
Lic. Carlos Saavedra Salazar 30

13
Manual de Web Responsivo - Bootstrap
Lic. Carlos Saavedra Salazar 31

13. REJILLAS. -

Bootstrap 4 trabaja con Grid o Gidview o rejillas que nos permiten realizar paginas responsivos de una
manera fácil.

Ejemplo. -

13.1 Forma de declarar las filas y columnas

Manual de Web Responsivo - Bootstrap
Lic. Carlos Saavedra Salazar 32

1. Escribir el siguiente código:

14
Manual de Web Responsivo - Bootstrap
Lic. Carlos Saavedra Salazar 33

15

14 MOBILE FIRST Y MOBILE LAST. -

15 MEDIDAS DE LAS COLUMNAS

col-xs Extra Smoll – Muy pequeña Para dispositivos móviles celulares ( < - 575)
col-sm Smoll – pequeña Para dispositivos Smart-phone (576 – 767)
col-md Medium – mediano Para tabletas (768 – 991)
col-lg Large - grande Para Lap topl (992 – 1199)
col-xl Extra - large Para pantallas más grandes como una computadora
o televisor (1200 - >)
Manual de Web Responsivo - Bootstrap
Lic. Carlos Saavedra Salazar 34

Ejemplo. -
Manual de Web Responsivo - Bootstrap
Lic. Carlos Saavedra Salazar 35
Manual de Web Responsivo - Bootstrap
Lic. Carlos Saavedra Salazar 36

Aumentar las siguientes líneas marcadas en el anterior archivo

Manual de Web Responsivo - Bootstrap
Lic. Carlos Saavedra Salazar 37

Aumentar las siguientes líneas marcadas en el anterior archivo

16
Manual de Web Responsivo - Bootstrap
Lic. Carlos Saavedra Salazar 38

17
Manual de Web Responsivo - Bootstrap
Lic. Carlos Saavedra Salazar 39

15.1 Ocultar Columnas. – d-none d-md-block

Realizar la siguiente página web, que el SLIDERBAR- ASIDE se oculte en los tamaños de sx (muy
pequeña) y sm (pequeña)

18
Manual de Web Responsivo - Bootstrap
Lic. Carlos Saavedra Salazar 40

16 IMÁGENES
Manual de Web Responsivo - Bootstrap
Lic. Carlos Saavedra Salazar 41

19
Manual de Web Responsivo - Bootstrap
Lic. Carlos Saavedra Salazar 42
Manual de Web Responsivo - Bootstrap
Lic. Carlos Saavedra Salazar 43

20
Manual de Web Responsivo - Bootstrap
Lic. Carlos Saavedra Salazar 44

17 INSERTAR ETIQUETAS EN BOOTSTRAP – ACCESOS DIRECTOS. -

Manual de Web Responsivo - Bootstrap
Lic. Carlos Saavedra Salazar 45

1. Crear una nueva carpeta llamada → página 6 en → E:/Web-Noche

2. Administrar el sitio Bootstrap y realizar los cambios necesarios: (Ver página 14)
3. Crear un nuevo Archivo en blanco (Ver página 8)
4. Grabarlo con el nombre de → index.html en → E:/Web-Noche/pagina 6 (Ver página 10)
5. Hacer un clic en → Insertar
6. Hacer un clic en → y seleccionar →
7. Hacer un clic en → Container-fluid
8. Hacer un clic en el espacio vacío
9. Hacer un clic en → Grid Row with colum
10. Hacer un clic en → Anidar
11. Hacer un clic en → Aceptar

7 5

8
9

10 11
Manual de Web Responsivo - Bootstrap
Lic. Carlos Saavedra Salazar 46

12. Nuestra página se vera de la siguiente manera:

13. Realizar los siguientes cambios:

21
Manual de Web Responsivo - Bootstrap
Lic. Carlos Saavedra Salazar 47

Realizar la siguiente Pagina

1. Crear una nueva carpeta llamada → página 7 en → E:/Web-Noche

2. Administrar el sitio Bootstrap y realizar los cambios necesarios: (Ver página 15)
3. Crear un nuevo Archivo en blanco (Ver página 7)
4. Grabarlo con el nombre de → index.html en → E:/Web-Noche/pagina 7
Manual de Web Responsivo - Bootstrap
Lic. Carlos Saavedra Salazar 48

18 HEADER - ENCABEZADO

Realizar la Cabecera (Header) de nuestra Página Web

Realizar lo siguiente:

22
Manual de Web Responsivo - Bootstrap
Lic. Carlos Saavedra Salazar 49

19 NAV BAR – BARRA DE NAVEGACION

Realizar la Barra de Navegación (Nav-Bar) de nuestra Página Web

1. Hacer un clic en → Container-fluid

2. Hacer otro clic en el lugar blanco
3. Hacer otro clic en → Navbar
1
4. Hacer un clic en → Anidar

3
4
Manual de Web Responsivo - Bootstrap
Lic. Carlos Saavedra Salazar 50

5. Realizar los siguientes cambios

Manual de Web Responsivo - Bootstrap
Lic. Carlos Saavedra Salazar 51

6. Para activar los menús de los links borrar lo siguiente

23
Manual de Web Responsivo - Bootstrap
Lic. Carlos Saavedra Salazar 52

20 CARRUSEL – Es una representación de diapositivas para recorrer los elementos

Realizaremos el siguiente nivel donde se encuentran nuestro carrusel ya reformateado,

donde se visualizará imágenes en movimiento

1. Hacer un clic en → nav-bar

2. Hacer otro clic en → Container-fluid
3. Hacer otro clic en → Después

2
3

1
Manual de Web Responsivo - Bootstrap
Lic. Carlos Saavedra Salazar 53

4. Hacer otro clic en el lugar blanco

5. Hacer otro clic en → Carrusel
6. Hacer un clic en → Anidar

5
4 6

7. En el siguiente código cambiar y aumentar lo siguiente:

Manual de Web Responsivo - Bootstrap
Lic. Carlos Saavedra Salazar 54
Manual de Web Responsivo - Bootstrap
Lic. Carlos Saavedra Salazar 55
Manual de Web Responsivo - Bootstrap
Lic. Carlos Saavedra Salazar 56

24
Manual de Web Responsivo - Bootstrap
Lic. Carlos Saavedra Salazar 57

21 TARJETAS Una tarjeta en Bootstrap 4 es una caja con bordes con algo de relleno alrededor de su
contenido. Incluye opciones para encabezados, pies de página, contenido, colores, etc .

Realizaremos el siguiente nivel donde se encuentran nuestras tarjetas de información

25
Manual de Web Responsivo - Bootstrap
Lic. Carlos Saavedra Salazar 58
Manual de Web Responsivo - Bootstrap
Lic. Carlos Saavedra Salazar 59

22 FOOTER También conocido como PIE DE PAGINA

Crearemos nuestro pie de página es donde lleva información relevante de la dirección,

teléfono o los derechos reservados del dueño de pagina
Manual de Web Responsivo - Bootstrap
Lic. Carlos Saavedra Salazar 60

26