Desarrollado por Mark Otto y Jacob Thornton, Bootstrap es un marco CSS receptivo gratuito y de código abierto que se utiliza para el desarrollo web front-end. Aunque Bootstrap 5 Alpha es la versión más reciente de Bootstrap lanzada el 16 de junio de 2020, todavía se encuentra en la fase de desarrollo y, por lo tanto, la mayoría de los desarrolladores continúan usando Bootstrap 4. Bootstrap es un marco CSS que se enfoca en simplificar el desarrollo de la web. paginas Se utiliza principalmente para crear una interfaz interactiva para los usuarios. Bootstrap se incluye con una serie de diseños, componentes y utilidades. La columna es parte del diseño de la cuadrícula en Bootstrap. El sistema de cuadrícula en Bootstrap 4 es dinámico y fluido. El diseño de la cuadrícula tiene 12 columnas y, dado que el sistema de cuadrícula se basa en flexbox, es totalmente receptivo. Una barra lateral es otro componente de Bootstrap. Las barras laterales permiten la navegación lateral. Las barras laterales pueden ser del lado izquierdo o del lado derecho según el requisito. En este artículo, demostraremos las barras laterales del lado izquierdo junto con las columnas una debajo de la otra.
Primer enfoque: en el primer enfoque, demostraremos una barra lateral que siempre está abierta y fija en el lado izquierdo de la página. El código contiene filas y columnas anidadas para obtener el resultado deseado.
HTML
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href= "https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity= "sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous"> </head> <body> <!-- Main container holds the entire content --> <div class=container> <!-- Row --> <div class="row"> <!-- This div takes 3 out of 12 columns in the grid --> <div class="col-3" style="background-color: #DEFFFB"> <!--This row contains the col which shows the column heading--> <div class="row"> <!-- this div takes 12 out of 12 columns in the grid --> <div class="col" style="text-align: center; font-weight: bold; font-size: 25px; color: green">Menu </div> </div> <!-- This row contains the menu items--> <div class="row"> <div class="col" style="text-align: center; padding: 15px;"> <a href="#">Link 1</a><br> <br> <a href="#">Link 2</a><br><br> <a href="#">Link 3</a> </div> </div> </div> <!--This column takes 9 out of 12 columns available--> <div class="col-9"> <div class="row" style="height: 50px"> <div class="col" style="text-align: center; background-color: green; font-weight: bold; font-size: 25px; color: white">Page Content </div> </div> <!--This row contains the first column--> <div class="row"> <div class="col" style="background-color: lightgreen;"> 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> <!--This row contains the second column--> <div class="row"> <div class="col" style="background-color: #E6FFE3 ;"> 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> </div> </div> </body> </html>
Producción
Segundo enfoque:En este método, la barra lateral no permanece abierta siempre. La barra lateral es plegable y el contenido de la página se mueve hacia la derecha cuando se abre la barra lateral. Este diseño permite que el contenido principal ocupe todo el espacio de la página web y el panel de navegación se abre solo cuando es necesario. Esto marca una gestión eficiente del espacio. En este método, la barra lateral se oculta cuando se carga la página. Cuando el usuario hace clic en el botón de hamburguesa, se activa la función javascript side_open() y se abre la barra lateral. La barra lateral está visible ahora y tiene un botón para cerrarla. Cuando se hace clic en el botón de cerrar, se activa la función javascript side_close() y se cierra la barra lateral. En el estado abierto, la barra lateral ocupa el 25 % del ancho de la página, mientras que en el estado cerrado ocupa el 0 % del ancho de la página. Por lo tanto, las dos columnas se ajustan en consecuencia.
HTML
<!-- Write HTML code here -->
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href=
"https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
integrity=
"sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z"
crossorigin="anonymous">
<!-- JS, Popper.js, jquery and
jQuery autocomplete -->
<script src=
"https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity=
"sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous">
</script>
<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>
<script src=
"https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"
integrity=
"sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV"
crossorigin="anonymous">
</script>
</head>
<body>
<!--Main container that contains the
main content-->
<div class="container">
<!--Main row -->
<div class="row">
<!--Display is set to none so that it
remains hidden when page loads-->
<div class="col-3" id="mySidebar" style="display: none;
background-color: #fbdeff;">
<!--Button is used to close the sidebar-->
<button onclick="side_close()">
Close ×
</button>
<!--Menu items-->
<h1>Menu</h1>
<a href="#">Link 1</a>
<br/>
<br/>
<a href="#">Link 2</a>
<br/>
<br/>
<a href="#">Link 3</a>
</div>
<!-- Main page content -->
<div class="col-9" id="main">
<!-- Button used to open the sidebar -->
<button id="openNav" onclick="side_open()">☰</button>
<div class="row" style="background-color: #c2ff95;">
<div class="col">
<h1>Page Content</h1>
</div>
</div>
<div class="row" style="background-color: #deffe2;">
<div class="col">
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 class="row" style="background-color: #b8b7f9;">
<div class="col">
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>
</div>
</div>
<!-- JavaScript functions to control the sidebar-->
<script>
// JavaScript functions to open the sidebar
function side_open() {
/* Sidebar takes 25% of the total width
of main container in open state */
document.getElementById(
"mySidebar").style.width = "25%";
document.getElementById(
"mySidebar").style.display = "block";
document.getElementById(
"openNav").style.display = "none";
}
// JavaScript functions to close the sidebar
function side_close() {
// Sidebar takes 0% of the total width
// of main container in open state
document.getElementById(
"main").style.marginLeft = "0%";
// Visibility is hidden
document.getElementById(
"mySidebar").style.display = "none";
document.getElementById(
"openNav").style.display = "inline-block";
}
</script>
</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