Página web con Bootstrap: ¿Cómo hacer y maquetar una página web con Bootstrap gratis?
by Juan Carlos García
21-Oct-2023
(3)
Suscribirme al canal:
Bienvenido, hoy aprenderás a crear una página web con Bootstrap, lo haremos desde cero e iremos paso a paso maquetando esta linda página web.
Te invito a ver el vídeo y sobre todo a suscribirte a mi canal de YouTube para más contenido gratuito.
¡No te puedes perder las nuevas clases 🧐!
Página web con Bootstrap
Página web con Bootstrap: ¿Cómo hacer y maquetar una página web con Bootstrap gratis?
(3)
🧐 Autoevaluación: Página web con Bootstrap
¿Qué es Bootstrap?
¿Cuál es el archivo principal que debes incluir en tu página web para utilizar Bootstrap?
¿Qué clase de Bootstrap debes utilizar para crear un botón?
Tabla de contenido
- 1 Vídeo de Mi primera página web responsiva con Bootstrap
- 2 ¿Qué necesito para crear mi página web con Bootstrap?
- 3 ¿Qué es Bootstrap?
- 4 Porque utilizar Bootstrap en una página web
- 5 ¿Cómo agregar Bootstrap a una página web?
- 6 Puedes utilizar gestores de Paquetes como NPM o YARN
- 7 Ventajas de utilizar Bootstrap
- 8 Desventajas de utilizar Bootstrap
- 9 📌 1. Creando el HTML de nuestra página web
- 10 📌 3. Creando el diseño de nuestra pagina web con CSS
Gracias por tu calificación
(3)
Vídeo de Mi primera página web responsiva con Bootstrap
Aquí tienes el vídeo que resume todo este artículo y que tiene todos los pasos para poder crear tu primera página web, te aconsejo que leas el texto para comprender aun mejor el vídeo. ¿Qué aprenderás en este vídeo? Aquí te dejo los puntos más importantes:
- Un ejemplo de como estructurar tus proyectos
- Aprenderás a maquetar en HTML
- Dar un estilo profesional a tu página a través de hojas de estilos (Style Sheets)
- Creación de Banner animado que sirva de cabecera en tu página
- Como agregar las referencias CSS y JS a tu proyecto
- Descubrirás que agregar Bootstrap y JQuery a tu página es sumamente sencillo para hacer que tu página sea responsiva y se visualice en todos los dispositivos
- Modificar los estilos de Bootstrap para adecuarlo correctamente a tu página
- Podrás insertar un vídeo de YouTube en tu página de una manera simple
- Además, aprenderás como animar los elementos de tú página a través del scroll (Animate On Scroll Library)
Como puedes observar en esta clase aprenderás muchas cosas totalmente gratis así que no olvides suscribirte al canal de YouTube EWebik y activa la campanita para que no te pierdas nuestras próximas clases.
¿Qué necesito para crear mi página web con Bootstrap?
Voy a crear una lista de lo que necesitaremos para crear nuestra página web y las URLs donde los puedes descargar.
Y listo, con estos puntos vas a crear tu primera página web con Bootstrap ¿Estas sorprendido? Pues te voy a desilusionar, si tú eres un desarrollador web que va iniciando esto te vendrá como anillo al dedo para comenzar tu viaje en el desarrollo web.
Sin embargo, si eres un emprendedor y te gustaría ahorrarte unos dólares desarrollando tu propia página web, tengo que decirte que ¡puede lograrlo! Siempre y cuando inicies con una página estática y sigas cada paso en este tutorial ¡No te desesperes!
Comencemos a crear nuestra página, y como esta construida con base en Bootstrap, es importante que lo conozcas, así que veamos conceptos básicos de Bootstrap.
¿Qué es Bootstrap?
Bootstrap es una biblioteca multiplataforma desarrollada por Twitter y es un conjunto de código abierto que proporciona plantillas de diseño para mejorar el estilo y vista de usuario de un sitio web.
Porque utilizar Bootstrap en una página web
Bootstrap nos proporciona una serie de estilos que mejoran ciertos elementos de nuestra página web, lo que nos ahorra mucho tiempo en crear estilos para botones, etiquetas y otros elementos, esto es bueno porque nos podemos centrar en darle personalidad y autenticidad a nuestra página sin tener que estar tocando mucho código CSS.
¿Cómo agregar Bootstrap a una página web?
Es muy fácil agregar los archivos de Bootstrap a nuestro proyecto, según la documentación que proporciona Bootstrap lo podemos hacer por varias formas, por ejemplo:
BootstrapCDN
La forma más sencilla es agregar los link CDN directamente en el head de tu HTML, un CDN son varios servidores conectado entre si con la finalidad de entregar contenidos o recursos de forma rápida.
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</head>Puedes utilizar gestores de Paquetes como NPM o YARN
- npm install bootstrap
- yarn add bootstrap
También puedes utilizar gemas en Ruby
- gem 'bootstrap', '~> 4.3.1'
- etc.
Descargar los archivos de distribución compilados
Solo dirígete al sitio oficial de Bootstrap y descarga los archivos de distribución agrégalos a la carpeta del proyecto.
- Para más información mira el vídeo de esta clase para ver un ejemplo practico de como agregar Bootstrap a un proyecto web.
Ventajas de utilizar Bootstrap
- La ventaja principal de Bootstrap es que nos proporciona una gran cantidad de estilos y componentes listos para utilizarlos en nuestra página web.
- Nos ahorra mucho tiempo de desarrollo, ya que no es necesario crear el código CSS de estilos, solo nos debemos preocupar por adaptarlo a nuestras necesidades.
- Es modular, podemos utilizar solo los componentes y estiles que necesitemos, así reducimos el tamaño de la biblioteca.
- Es completamente gratis.
- Proporciona una serie de iconos gratuitos.
- Es muy fácil de aprender.
Desventajas de utilizar Bootstrap
- Sencillamente es que al ser un elemento creado por un tercero si no haces un respaldo del recurso su creador puede modificarlo o discontinuar la biblioteca, sin embargo, Bootstrap es una biblioteca utilizada por miles de desarrolladores lo que lo hace improbable al menos en el corto plazo que esta librería quede obsoleta.
Gracias por tu calificación
(3)
Gracias por tu calificación
(3)
📌 1. Creando el HTML de nuestra página web
Aquí te dejo el código completo del archivo index.html que creamos en el vídeo.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Diseño de páginas Web</title>
<link rel="stylesheet" href="ext/aos.css">
<link href="https://fonts.googleapis.com/css?family=Cormorant+Garamond" rel="stylesheet">
<link rel="stylesheet" href="img/iconos/css/fontello.css">
<link rel="stylesheet" href="ext/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="css/keyframes.css">
<link rel="stylesheet" href="css/banner.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header>
<nav class="ewk_navbar navbar navbar-expand-lg navbar-light bg-light fixed-top">
<a class="navbar-brand" href="https://ewebik.com.mx/">EWebik</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="https://ewebik.com.mx/">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://ewebik.com.mx/">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="https://ewebik.com.mx/" id="navbarDropdown" role="button" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="https://ewebik.com.mx/">Action</a>
<a class="dropdown-item" href="https://ewebik.com.mx/">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="https://ewebik.com.mx/">Something else here</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="https://ewebik.com.mx/" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
</div>
</nav>
</header>
<section>
<div class="ewk_cont_banner">
<div class="ewk_sobra">
<h1>EWebik</h1>
<p>Diseños elegantes y contemporaneos</p>
<hr />
<div class="ewk_cont_banner_link">
<a class="ewk_banner_link" href="">Proyectos</a>
<a class="ewk_banner_link_1" href="">Licitaciones</a>
<a class="ewk_banner_link_2" href="">Cotización</a>
</div>
</div>
</div>
</section>
<section>
<dvi class="container">
<div class="row ewk_cont_sec_1">
<div class="col-md-9">
<h2><b>EWebik</b></h2>
<p><i>La mejor opción para aprender diseño web</i></p>
<hr />
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</div>
<div class="ewk_cont_sec_1_link col-md-3 text-center">
<a data-aos="fade-up" href="#" class="btn btn-secondary btn-md">Visita nuestra página</a>
</div>
</div>
</dvi>
</section>
<section>
<div class="container">
<div class="row">
<div class="col-md-6">
<h2>Presentación</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus deserunt, nobis quae eos
provident quidem. Quaerat expedita dignissimos perferendis, nihil quo distinctio eius
architecto reprehenderit maiores.</p>
<a href="#"><i class="icon-linkedin"></i></a>
<a href=""><i class="icon-twitter"></i></a>
<a target="_blank" href="https://www.youtube.com/channel/UCGLKAojrhnU3Xtoj6azpUsg"><i class="icon-youtube-play"></i></a>
<a href=""><i class="icon-facebook-squared"></i></a>
</div>
<div class="col-md-6">
<iframe data-aos="fade-down" width="100%" height="315" src="https://www.youtube.com/embed/JEGzNzkpzIU" frameborder="0"
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</div>
</div>
</section>
<section>
<div class="ewk_cont_banner_sec_3">
<div class="container">
<div class="row">
<div class="col-md-4">
<h2>Título de la seccion</h2>
<p>Similique excepturi voluptates placeat ducimus delectus magnam tempore dolore dolorem
quisquam porro modi voluptatum eum saepe dolorum ratione officia sint eos minus</p>
<a class="btn btn-secondary btn-md" href="https://ewebik.com.mx/">Portafolio</a>
</div>
<div class="col-md-8 ewk_cont_img text-center">
<img data-aos="fade-right" src="img/arq5_1.jpg" class="img-fluid" alt="diseño arquitectonico">
</div>
</div>
</div>
</div>
</section>
<section>
<div class="container">
<div class="row text-center">
<div class="col-md-12">
<hr />
<h2>Servicios</h2>
<p>Todo lo encuentras en EWebik</p>
<hr />
</div>
</div>
<div class="row text-center">
<div class="col-md-4">
<a href="index.html">
<img data-aos="fade-left" src="img/arq5_1.jpg" class="img-fluid" alt="diseño arquitectonico">
<h3>Diseño Web</h3>
<p>React JS / Node JS</p>
</a>
</div>
<div class="col-md-4">
<img data-aos="fade-up-right" src="img/arq5_1.jpg" class="img-fluid" alt="diseño arquitectonico">
<h3>Aplicaciones Móviles</h3>
<p>Xamarin / Android</p>
</div>
<div class="col-md-4">
<img data-aos="fade-up-left" src="img/arq5_1.jpg" class="img-fluid" alt="diseño arquitectonico">
<h3>Posicionamiento Web</h3>
<p>SEO / Optimización de código</p>
</div>
</div>
</div>
</section>
<footer>
<div class="ewk_cont_footer">
<div class="container">
<div class="row">
<div class="col-md-3">
<h2>EWebik</h2>
<p>Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</p>
</div>
<div class="col-md-3">
<h2>Categorías</h2>
<a href="#">Inicio</a>
<a href="#">Conocenos</a>
<a href="#">Proyectos</a>
<a href="#">Escribenos</a>
</div>
<div class="col-md-3">
<h2>Recomendado</h2>
<a href="#">
<p>Aprende Diseño web en el 2019, te aseguro no te arrepnteras</p>
<p>Enero 2019</p>
</a>
<hr />
<a href="#">
<p>Visita mi sitio web y siguenos en redes sociales y sobre todo da like a este video</p>
<p>Enero 2019</p>
</a>
</div>
<div class="col-md-3 ewk_cont_img_footer">
<img data-aos="fade-down-right" src="img/arq5_1.jpg" class="img-fluid" alt="diseño arquitectonico">
<h3>EWebik</h3>
<p>Electrónica y Diseño Web</p>
</div>
</div>
</div>
</div>
</footer>
<script src="ext/bootstrap/js/jquery.js"></script>
<script src="ext/bootstrap/js/bootstrap.min.js"></script>
<script src="ext/aos.js"> </script>
<script src="js/index.js"></script>
</body>
</html>
Gracias por tu calificación
(3)
Gracias por tu calificación
(3)
📌 2. Creando el archivo JavaScript index.js
Recuerda que utilizamos librerías externas como Animate On Scroll Library que agregamos como referencia en nuestro HTML
/*********
Autor: EWebik
web: https://ewebik.com
**********/
(function () {
AOS.init();
}());📌 3. Creando el diseño de nuestra pagina web con CSS
- Archivo style.css: esté archivo contiene los estilos generales y más importantes de la página, recuerda que desde el archivo index.html invocamos este archivo para poder leer cada clase de estilos.
/******
Autor: EWebik
web: https://ewebik.com
archivo: style.css
*******/
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Cormorant Garamond', serif;
}
.ewk_navbar {
background-color: rgba(255, 255, 255, 0.7) !important;
}
.ewk_navbar div, .ewk_navbar ul{
background-color: transparent !important;
}
.ewk_cont_sec_1{
padding: 10%;
}
.ewk_cont_sec_1_link{
padding: 5%;
}
.ewk_cont_sec_1_link a{
width: 200px;
}
.ewk_cont_sec_1 hr{
border-top: 1px solid rgba(1, 1,1, 0.3);
}
.ewk_cont_footer{
background-color: rgba(1, 1, 1, 0.7);
padding: 10%;
color: #fff;
margin-top: 100px;
}
.ewk_cont_footer a{
color: #fff;
text-decoration: none;
display: block;
}
.ewk_cont_img_footer{
padding: 5%;
}- Archivo keyframes.css: en este archivos creamos algunas animaciones que le dan una mejor presentación a nuestra página.
@keyframes ewk_keyframes_aparecer_de_arriba {
from {
opacity: 0;
top: -150px;
}
to {
opacity: 1;
top: 0;
}
}
@-webkit-keyframes ewk_keyframes_aparecer_de_arriba {
from {
opacity: 0;
top: -150px;
}
to {
opacity: 1;
top: 0;
}
}- Archivo banner.css: este archivo almacena los estilos que le dan vida al banner principal, si crear otros banners, puedes utilizar este archivo para almacenar us nuevos estilos y así dar orden a tu proyecto.
.ewk_cont_banner{
height: 100vh;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
background-image: url("../img/arq1.jpg");
}
.ewk_sobra{
position: absolute;
left: 50%;
top: 50%;
-ms-transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%,-50%);
padding: 20px;
width: 80%;
text-align: center;
background-color: rgba(0, 0, 0, 0.6);
color: #fff;
margin: auto;
}
.ewk_sobra hr{
border-top: 1px solid #fff;
}
.ewk_sobra h1{
font-size: 8vw;
margin-bottom: 10px;
}
.ewk_sobra p{
font-size: 4vw;
margin-bottom: 10px;
}
.ewk_cont_banner_link{
margin: 15px;
position: relative;
}
.ewk_cont_banner_link a{
position: relative;
display: inline-block;
color: #fff;
text-decoration: none;
border: 1px solid #fff;
padding: 1px;
margin-bottom: 5px;
width: 150px;
}
.ewk_cont_banner_link a:hover{
background-color: #fff;
color: #111;
}
.ewk_banner_link{
opacity: 0;
animation: ewk_keyframes_aparecer_de_arriba 1s;
-webkit-animation: ewk_keyframes_aparecer_de_arriba 1s;
animation-fill-mode: forwards;
}
.ewk_banner_link_1{
opacity: 0;
animation: ewk_keyframes_aparecer_de_arriba 1s;
-webkit-animation: ewk_keyframes_aparecer_de_arriba 1s;
animation-fill-mode: forwards;
animation-delay: 0.5s;
}
.ewk_banner_link_2{
opacity: 0;
animation: ewk_keyframes_aparecer_de_arriba 1s;
-webkit-animation: ewk_keyframes_aparecer_de_arriba 1s;
animation-fill-mode: forwards;
animation-delay: 1s;
}
.ewk_cont_banner_sec_3{
height: 100vh;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
background-image: url("../img/arq2.jpg");
position: relative;
padding: 10%;
margin-top: 200px;
margin-bottom: 100px;
}
.ewk_cont_banner_sec_3 .row{
background-color: rgba(1, 1, 1, 0.7);
color: #fff;
padding: 2%;
}
.ewk_cont_img{
padding: 5%;
}📌 NOTA: Recuerda que solo he puesto aquí los archivos que desarrollamos, los cuales son los mas importantes, los archivos externos como Bootstrap están en el repositorio y en el vídeo te muestro como agregarlos, espero te sean de gran ayuda.
Gracias por tu calificación
(3)
¿Qué te ha parecido esta clase? Espero que te haya gustado, te dejo otra clase donde aprenderás a crear una página web con Bootstrap, pero completa, tiene:
- Página de inicio.
- Área de contacto.
- Base de datos.
- Y una sección para que puedas ir creando tu blog.
Espero que también te guste.
🧐 Autoevaluación: Página web con Bootstrap
¿Qué es Bootstrap?
¿Cuál es el archivo principal que debes incluir en tu página web para utilizar Bootstrap?
¿Qué clase de Bootstrap debes utilizar para crear un botón?
Juan Carlos García
Desarrollador de software / SEO
Durante años he desarrollado plataformas dedicadas al rastreo satelital y varios sitios web que se encuentran en la primera página de Google, y hoy quiero compartir contigo lo que se en tecnologías como: Node JS, PHP, C# y Bases de datos.
Si quieres apoyarme sígueme en mis redes sociales y suscríbete a mi canal de YouTube.