TECNOLOGIA WEB 1 – TEW-200
BOOTSTRAP
1. CONCEPTO
Es un framework de plantillas web prediseñadas en la versión 4, es una librería desarrollada
por Twitter que simplifica el proceso de maquetación de páginas web según estándares del
diseño web. Provee un conjunto de librerías CSS y Javascript con plantillas listas a utilizar
para crear interfaces de usuario rápidas agradables y atractivas.
Entre los componentes o plantillas que provee podemos mencionar: grid, cards,
fonts, navbar, form, modal, image gallery, etc. Básicamente son bloques de
código HTML5, css y Javascript que solo se añaden a una página web en edición según
las necesidades.
2. DESCARGAR BOOTSTRAP
Descarga los archivos compilados para trabajar en local offline o
sin Internet.
[Link]
NOTA.- Algunos componentes como Modal y Navbar requieren
de javascript para funcionar.
Por lo tanto debemos descargar por aparte los dos
archivos [Link] y [Link]
Hacemos clic en el primer enlace, aparecerá un grupos
de texto guardamos con el botón derecho.
Ing. Yana Chejo Pascual
TECNOLOGIA WEB 1 – TEW-200
Copiamos el CDN, abrimos en nueva pestaña, aparecerá
un grupo de texto y lo guardamos con el botón derecho.
3. INTEGRAR LIBRERIAS DE BOOTSTRAP 4 EN UN PROYECTO
Como ya tenemos a la mano las carpetas css y js, el siguiente paso es llevarlas hasta el
proyecto (carpeta),
4. VINCULAR ARCHIVOS CSS Y JS EN UN DOCUMENTO HTML
Crear un nuevo documento [Link] y vincular la libreria [Link] en el head con
la etiqueta link e ingresar la ruta del archivo en el href, seguidamente ingresar las demás
librerias js en etiquetas script con la ruta de archivo en el src segun corresponde al final
del body
Ing. Yana Chejo Pascual
TECNOLOGIA WEB 1 – TEW-200
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1,shrink-to-fit=no">
<title>Utilizando bootstrap 4</title>
<!-----Vinculación de archivo css bootstrap 4 ------>
<link rel="stylesheet" href="css/[Link]">
</head>
<body>
<!----Vinculación de archivos javascript bootstrap 4 ---->
<script src="js/[Link]"></script>
<script src="js/[Link]"></script>
<script src="js/[Link]"></script>
</body>
</html>
5. EJEMPLO 1.
A continuación realizamos un ejemplo de funcionamiento del Framework con un
componente navbar.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1,
shrink-to-fit=no">
<title>Ejemplo 1</title>
<!-------Vinculacion de archivo css Bootstrap 4 --------->
<link rel="stylesheet" href="css/[Link]">
</head>
<body>
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>
<button type="button" class="btn btn-link">Link</button>
<!-------Vinculacion de archivos Javascript Bootstrap 4 ------->
<script src="js/[Link]"></script>
Ing. Yana Chejo Pascual
TECNOLOGIA WEB 1 – TEW-200
<script src="js/[Link]"></script>
<script src="js/[Link]"></script>
</body>
</html>
Ing. Yana Chejo Pascual
