Bootstrap es un marco CSS de código abierto utilizado por los desarrolladores frontend para hacer diseños web interactivos. La versión más reciente de Bootstrap es Bootstrap 5 alpha, que tiene numerosas funciones adicionales. Sin embargo, Bootstrap 5 todavía se encuentra en una fase de desarrollo constante y, por lo tanto, la mayoría de los desarrolladores web todavía usan Bootstrap 4. Bootstrap 4 también ofrece una amplia gama de componentes, utilidades y diseños. Las barras de navegación y las barras laterales se encuentran entre los otros componentes. Si bien Bootstrap 4 tiene clases de barra de navegación predefinidas con una amplia gama de características, no hay una clase predefinida dedicada para una barra lateral. Por lo tanto, las barras laterales son principalmente divisiones personalizadas. Puede haber diferentes diseños al usar la barra de navegación superior con una barra de navegación izquierda. Tanto el diseño se demuestra en este artículo.
Primer enfoque: el primer enfoque trata con el diseño que tiene la barra lateral justo debajo de la barra de navegación superior. Todo el cuerpo se divide en dos partes: la barra de navegación superior y el contenedor debajo. El contenedor debajo de la barra de navegación superior contiene la división de la barra lateral junto con la división del contenido principal de la página web. Este contenedor contiene una fila que a su vez comprende dos columnas. La primera columna acomoda la barra lateral y la segunda columna contiene el contenido principal.
HTML
<!DOCTYPE html>
<html>
<head>
<!-- import bootstrap cdn-->
<link rel="stylesheet" href=
"https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
integrity=
"sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z"
crossorigin="anonymous">
<!-- import jquery cdn -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity=
"sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous">
</script>
<!-- import popper.js cdn -->
<script src=
"https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"
integrity=
"sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN"
crossorigin="anonymous">
</script>
<!-- import javascript cdn -->
<script src=
"https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"
integrity=
"sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV"
crossorigin="anonymous">
</script>
<!-- CSS stylesheet -->
<style type="text/css">
html,
body {
height: 100%;
}
#green {
height: 100%;
background: green;
text-align: center;
color: black;
}
</style>
</head>
<body>
<!-- top navbar -->
<nav class="navbar navbar-expand-lg
navbar-light bg-primary">
<a class="navbar-brand" href="#">Navbar</a>
<!-- hamburger button that toggles the navbar-->
<button class="navbar-toggler" type="button"
data-toggle="collapse" data-target="#navbarNavAltMarkup"
aria-controls="navbarNavAltMarkup" aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon">
</span>
</button>
<!-- navbar links -->
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav">
<a class="nav-item nav-link
active" href="#">
Home
</a>
<a class="nav-item nav-link" href="#">Features</a>
<a class="nav-item nav-link" href="#">Price</a>
<a class="nav-item nav-link" href="#">About</a>
</div>
</div>
</nav>
<!-- This container contains the sidebar
and main content of the page -->
<!-- h-100 takes the full height of the body-->
<div class="container-fluid h-100">
<div class="row h-100">
<div class="col-2" id="green">
<h4>Sidebar</h4>
<!-- Navigation links in sidebar-->
<a href="#">Link 1</a>
<br/>
<br/>
<a href="#">Link 2</a>
<br/>
<br/>
<a href="#">Link 3</a>
<br/>
<br/>
<a href="#">Link 4</a>
<br/>
<br/>
</div>
<!--Contains the main content
of the webpage-->
<div class="col-10" style="text-align: justify;">
Bootstrap is a free and open-source
tool collection for creating responsive
websites and web applications. It
is the most popular HTML, CSS, and
JavaScript framework for developing
responsive, mobile-first web sites.
</div>
</div>
</div>
</body>
</html>
Producción:
Segundo enfoque: el segundo enfoque muestra un diseño en el que la barra de navegación ocupa solo el ancho sobrante del cuerpo después de que la barra lateral haya ocupado el espacio requerido. El cuerpo de la página HTML consta de una fila que consta de dos columnas. La primera columna col-2 se usa para mostrar la barra lateral. La segunda columna col-10 se usa para mostrar la barra de navegación. La segunda columna también consta del contenido principal de la página web justo debajo de la barra de navegación. La barra de navegación es plegable, es decir. cuando el ancho de la pantalla se reduce, se colapsa y se puede ver usando el ícono de la hamburguesa.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Topnav with sidebar</title>
<!-- Import bootstrap cdn -->
<link rel="stylesheet" href=
"https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
integrity=
"sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z"
crossorigin="anonymous">
<!-- Import jquery cdn -->
<script src=
"https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity=
"sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous">
</script>
<!-- Import popper.js cdn -->
<script src=
"https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"
integrity=
"sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN"
crossorigin="anonymous">
</script>
<!-- Import javascript cdn -->
<script src=
"https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"
integrity=
"sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV"
crossorigin="anonymous">
</script>
<!-- CSS stylesheet -->
<style type="text/css">
html,
body {
height: 100%;
}
#green {
height: 100%;
background: green;
text-align: center;
color: black;
padding: 15px;
}
</style>
</head>
<body>
<!-- h-100 takes the full height of the body-->
<div class="container-fluid h-100">
<!-- h-100 takes the full height
of the container-->
<div class="row h-100">
<div class="col-2" id="green">
<h4>Sidebar</h4>
<!-- Navigation links in sidebar-->
<a href="#">Link 1</a><br />
<br />
<a href="#">Link 2</a><br />
<br />
<a href="#">Link 3</a><br />
<br />
<a href="#">Link 4</a><br />
<br />
</div>
<div class="col-10" style="padding: 0;">
<!-- Top navbar -->
<nav class="navbar navbar-expand-lg
navbar-light bg-primary">
<a class="navbar-brand" href="#">Navbar</a>
<!-- Hamburger button that toggles the navbar-->
<button class="navbar-toggler" type="button"
data-toggle="collapse"
data-target="#navbarNavAltMarkup"
aria-controls="navbarNavAltMarkup"
aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<!-- navbar links -->
<div class="collapse navbar-collapse"
id="navbarNavAltMarkup">
<div class="navbar-nav">
<a class="nav-item nav-link
active" href="#">
Home
</a>
<a class="nav-item nav-link" href="#">Features</a>
<a class="nav-item nav-link" href="#">Price</a>
<a class="nav-item nav-link" href="#">About</a>
</div>
</div>
</nav>
<!-- Contains the main content of the webpage-->
<p style="padding: 15px; text-align: justify;">
Bootstrap is a free and open-source
tool collection for creating responsive
websites and web applications.
It is the most popular HTML, CSS, and
JavaScript framework for developing
responsive, mobile-first web sites.
</p>
</div>
</div>
</div>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por Shreyasi_Chakraborty y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA