Manual Bootstrap PDF

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
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
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

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. -
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
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

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.
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í
5 GUARDAR UN ARCHIVO
1. Seleccionar → Archivo
2. Seleccionar → Guardar como
3. En nombre escribir → índex
4. Hacer un clic en → Guardar
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)
5. Escribir el siguiente código:
1
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
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
8 CONTENEDORES. -
2
9 COLORES –
3
4
5
6
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”

11 ENCABEZADOS. -
8
12 BOTONES. -
9
10
11
12
13
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

1. Escribir el siguiente código:
14
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 - >)
Ejemplo. -
Aumentar las siguientes líneas marcadas en el anterior archivo

Aumentar las siguientes líneas marcadas en el anterior archivo
16
17
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
16 IMÁGENES
19
20
17 INSERTAR ETIQUETAS EN BOOTSTRAP – ACCESOS DIRECTOS. -

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
12. Nuestra página se vera de la siguiente manera:
13. Realizar los siguientes cambios:
21
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
18 HEADER - ENCABEZADO
Realizar la Cabecera (Header) de nuestra Página Web
Realizar lo siguiente:
22
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
3
4
5. Realizar los siguientes cambios

6. Para activar los menús de los links borrar lo siguiente
23
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
4. Hacer otro clic en el lugar blanco

5. Hacer otro clic en → Carrusel
5
4 6
7. En el siguiente código cambiar y aumentar lo siguiente:

24
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
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
26

Manual Bootstrap PDF

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Manual Bootstrap PDF

Cargado por

Copyright:

Formatos disponibles

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

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

DOCENTE: LIC. CARLOS SAAVEDRA SALAZAR GESTION: 2020

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

1. DISEÑO WEB RESPONSIVO

1.1.- ¿Que es el Responsivo Web Design?

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

1.1.3 FULL STACK. –

Es especialista en Frond-End y Back-End

ANTES DE COMENZAR CON EL CURSO CREAR UNA NUEVA

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

3 CREAR UN NUEVO ARCHIVO

1. Hacer un clic en ARCHIVO

2. Seleccionar y hacer un clic en NUEVO

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

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

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

3.1 Diseño de Bootstrap 4.-

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

4 CREAR UN NUEVO SITIO

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

2. Realizar los cambios en la siguiente ventana:

5. Escribir el siguiente código:

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

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

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”

13.1 Forma de declarar las filas y columnas

1. Escribir el siguiente código:

14 MOBILE FIRST Y MOBILE LAST. -

15 MEDIDAS DE LAS COLUMNAS

Aumentar las siguientes líneas marcadas en el anterior archivo

Aumentar las siguientes líneas marcadas en el anterior archivo

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

17 INSERTAR ETIQUETAS EN BOOTSTRAP – ACCESOS DIRECTOS. -

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

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

13. Realizar los siguientes cambios:

Realizar la siguiente Pagina

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

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

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

5. Realizar los siguientes cambios

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

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

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