Plantilla inicial de Bootstrap 4 (starter template)

4 comentarios / Bootstrap 4, css, HTML, Sin categoría, web / Por

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.

Plantilla inicial de Boostrap 4 (starter template)

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.

Estoy aquí para ayudarte 🤝💻

Estoy aquí para ayudarte en todo lo que necesites. Si requieres alguna modificación en lo presentado en este post, deseas asistencia con tu tarea, proyecto o precisas desarrollar un software a medida, no dudes en contactarme. Estoy comprometido a brindarte el apoyo necesario para que logres tus objetivos. Mi correo es parzibyte(arroba)gmail.com, estoy como@parzibyte en Telegram o en mi página de contacto

No te pierdas ninguno de mis posts 🚀🔔

Suscríbete a mi canal de Telegram para recibir una notificación cuando escriba un nuevo tutorial de programación.

4 comentarios en “Plantilla inicial de Bootstrap 4 (starter template)”

  1. Pingback: Node.js y PostgreSQL - Ejemplo de conexión - Parzibyte's blog

  2. Pingback: Conexión Node.js y MySQL con Express - Parzibyte's blog

  3. Pingback: Menú responsivo de Bootstrap 4 sin dependencias - Parzibyte's blog

  4. Pingback: Conectar PHP y SQL Server usando PDO - CRUD de ejemplo - Parzibyte's blog

Dejar un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *