¿Cómo poner dos columnas una debajo de la otra en la barra lateral en Bootstrap?

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

Deja una respuesta

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