Bootstrap 4 (y su versión anterior, la 3) es el framework CSS más usado en el desarrollo web (por ejemplo, el sistema de cotizaciones lo usa).
Como desarrolladores, necesitamos una plantilla de donde partir. Una plantilla básica o una starter template de Bootstrap para cargarla y tomarla como base para nuestros proyectos.
Me di a la tarea de crear una y traducirla, para tomarla como base al desarrollar con Bootstrap 4.
Bootstrap 4: plantilla de arranque
Sin más que agregar, dejo a continuación el código de la plantilla.
Cabe mencionar que si no necesitas las funcionalidades de jQuery y solo necesitas el diseño, no debes cargar los scripts de JavaScript.
El código HTML queda como se ve a continuación:
<!doctype html>
<html lang="es">
<!--
Plantilla inicial de Bootstrap 4
@author parzibyte
Visita: parzibyte.me/blog
-->
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="Plantilla básica para Bootstrap">
<meta name="author" content="Parzibyte">
<title>Plantilla inicial para Boostrap</title>
<!-- Cargar el CSS de Boostrap-->
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<!-- Cargar estilos propios -->
<link href="style.css" rel="stylesheet">
</head>
<body>
<!-- Definición del menú -->
<nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
<a class="navbar-brand" target="_blank" href="//parzibyte.me/blog">By Parzibyte</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#miNavbar" aria-controls="miNavbar" aria-expanded="false" aria-label="Mostrar u ocultar menú">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="miNavbar">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Inicio</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Enlace</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="menuDesplegable" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Menú desplegable</a>
<div class="dropdown-menu" aria-labelledby="menuDesplegable">
<a class="dropdown-item" href="#">Enlace</a>
<a class="dropdown-item" href="#">Otro enlace</a>
</div>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="text" placeholder="Búsqueda" aria-label="Búsqueda">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Buscar</button>
</form>
</div>
</nav>
<!-- Termina la definición del menú -->
<main role="main" class="container">
<div class="row">
<!-- Aquí pon las col-x necesarias, comienza tu contenido, etcétera -->
<div class="col-12">
<h1>Plantilla de arranque para Boostrap</h1>
<a href="//parzibyte.me/blog" target="_blank">By Parzibyte</a>
<br>
<a href="https://parzibyte.me/blog/2019/05/09/plantilla-inicial-bootstrap-4-starter-template/" target="_blank">Ver código fuente</a>
</div>
<div class="col-6">
<p>Columna de col-6</p>
</div>
<div class="col-6">
<p>Columna de col-6</p>
</div>
<div class="col-4">
<p>Columna de col-4</p>
</div>
<div class="col-4">
<p>Columna de col-4</p>
</div>
<div class="col-4">
<p>Columna de col-4</p>
</div>
<div class="col-3">
<p>Columna de col-3</p>
</div>
<div class="col-3">
<p>Columna de col-3</p>
</div>
<div class="col-3">
<p>Columna de col-3</p>
</div>
<div class="col-3">
<p>Columna de col-3</p>
</div>
</div>
</main>
<!-- Cargar jQuery y librerías JS necesarias. Si solo quieres el diseño, no las cargues -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>El estilo CSS:
/*
Nota: si no usas el navbar, el siguiente código
no es necesario
*/
body{
padding-top: 70px;
}La plantilla es totalmente responsiva, y he agregado un estilo para que el contenido se baje, dejando un espacio para el navbar.
Pingback: Node.js y PostgreSQL - Ejemplo de conexión - Parzibyte's blog
Pingback: Conexión Node.js y MySQL con Express - Parzibyte's blog
Pingback: Menú responsivo de Bootstrap 4 sin dependencias - Parzibyte's blog
Pingback: Conectar PHP y SQL Server usando PDO - CRUD de ejemplo - Parzibyte's blog