Bootstrap 5 Offcanvas

Posted on by Rudeus Greyrat

Bootstrap responsive & Offcanvas es una de las características de Bootstrap para hacer que las páginas web sean más atractivas, además de mejorar la experiencia del usuario.

Offcanvas es un componente de la barra lateral que ayuda a alternar la vista usando Javascript, para aparecer desde el cual la navegación declarada a lo largo de la página se puede hacer usando la funcionalidad de offcanvas.

Componente Offcanvas: Offcanvas contiene un encabezado con un botón de cierre y la parte del cuerpo. Es bueno incluir un botón de cierre o puede proporcionar una fuente explícita para cerrarlo.

 Sintaxis:

<div class="offcanvas offcanvas-start" 
     id="sidebar">
    <div class="offcanvas-header">
         <h1 class="offcanvas-title">
             Heading
         </h1>
        <button type="button" 
                class="btn-close">
        </button>
    </div>
    <div class="offcanvas-body">
        <p>Content Body</p>
    </div>
</div>

Clase de componente Offcanvas:

  • offcanvas : esta clase se usa para crear offcanvas pero oculta el contenido.
  • offcanvas show : esta clase se usa para mostrar el contenido de offcanvas en la ventana gráfica.
  • offcanvas-header : esta clase se utiliza para la sección principal de offcanvas.
  • offcanvas-body : esta clase se usa para agregar contenido a las partes del cuerpo de offcanvas.

Ejemplo : este ejemplo describe el uso de Basic Offcanvas en Bootstrap.

HTML

<!DOCTYPE html>
<html lang="en">
  
<head>
    <title>Bootstrap Offcanvas</title>
    <meta name="viewport" 
          content="width=device-width, 
                   initial-scale=1">
    <link href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" 
          rel="stylesheet">
    <script src=
"https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js">
    </script>
</head>
  
<body>
    <div class="container mt-3">
        <button class="btn btn-primary" 
                type="button" 
                data-bs-toggle="offcanvas" 
                data-bs-target="#offcanvasStart" 
                aria-controls="offcanvasStart">
          Toggle offcanvas
        </button>
        <div class="offcanvas offcanvas-start" 
             tabindex="-1" 
             id="offcanvasStart" 
             aria-labelledby="offcanvasStartLabel">
            <div class="offcanvas-header">
                <h3 id="offcanvasStartLabel">
                  Offcanvas
                 </h3>
                <button type="button" 
                        class="btn-close text-reset" 
                        data-bs-dismiss="offcanvas" 
                        aria-label="Close">
                </button>
            </div>
            <div class="offcanvas-body">
                <h5>
                    Bootstrap is the most popular CSS 
                    Framework for developing responsive
                    and mobile-first websites.
                </h5> 
            </div>
        </div>
        <center>
            <h3>
              Welcome to GeeksforGeeks
              Welcome to GeeksforGeeks
             </h3>
            <h4>
              A computer science portal for geeks.
             </h4>
            <h3>
              Welcome to GeeksforGeeks 
              Welcome to GeeksforGeeks
              </h3>
            <h4>
              A computer science portal for geeks.
              </h4>
            <h3>
              Welcome to GeeksforGeeks 
              Welcome to GeeksforGeeks
              </h3>
        </center>
    </div>
</body>
  
</html>

Salida :

Ubicación fuera del lienzo: la ubicación fuera del lienzo se puede usar para colocar el fuera del lienzo de varias maneras, como arriba, abajo, a la derecha y al inicio de la ventana gráfica. No hay una ubicación predeterminada para los componentes fuera del lienzo.

Sintaxis:

<div class="offcanvas offcanvas-start" 
     id="offcanvasStart" >
</div>
<div class="offcanvas offcanvas-top"  
     id="offcanvasTop" >
</div>
<div class="offcanvas offcanvas-end"      
     id="offcanvasRight" >
</div>
<div class="offcanvas offcanvas-bottom"
     id="offcanvasBottom">
</div>

Clase de colocación fuera del lienzo:

  • offcanvas-start: esta clase se usa para colocar offcanvas en el lado izquierdo de la ventana gráfica.
  • offcanvas-end: esta clase se usa para colocar offcanvas en el lado derecho de la ventana gráfica.
  • offcanvas-top : esta clase se usa para colocar offcanvas en la parte superior de la ventana gráfica.
  • offcanvas-bottom : esta clase se usa para colocar offcanvas en la parte inferior de la ventana gráfica.

Ejemplo : en este ejemplo, demostraremos la ubicación fuera del lienzo en la ventana gráfica.

HTML

<!DOCTYPE html>
<html lang="en">
  
<head>
    <title>
      Bootstrap Offcanvas
      </title>
    <meta name="viewport" 
          content="width=device-width, 
                   initial-scale=1">
    <link href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" 
          rel="stylesheet">
    <script src=
"https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js">
    </script>
</head>
  
<body>
    <div class="container mt-3">
        <button class="btn btn-primary" 
                type="button" 
                data-bs-toggle="offcanvas" 
                data-bs-target="#offcanvasStart" 
                aria-controls="offcanvasStart">
          Toggle left offcanvas
        </button>
        <div class="offcanvas offcanvas-start" 
             tabindex="-1" 
             id="offcanvasStart" 
             aria-labelledby="offcanvasStartLabel">
            <div class="offcanvas-header">
                <h3 id="offcanvasStartLabel">
                  Offcanvas left
                  </h3>
                <button type="button" 
                         class="btn-close text-reset" 
                         data-bs-dismiss="offcanvas" 
                         aria-label="Close">
                </button>
            </div>
            <div class="offcanvas-body">
                <h5>
                    Bootstrap is the most popular CSS 
                    Framework for developing responsive 
                    and mobile-first websites.
                </h5>
            </div>
        </div>
        <button class="btn btn-primary" 
                type="button" 
                data-bs-toggle="offcanvas" 
                data-bs-target="#offcanvasRight" 
                aria-controls="offcanvasRight">
          Toggle right offcanvas
        </button>
        <div class="offcanvas offcanvas-end" 
             tabindex="-1" 
             id="offcanvasRight" 
             aria-labelledby="offcanvasRightLabel">
            <div class="offcanvas-header">
                <h3 id="offcanvasRightLabel">
                  Offcanvas right
                  </h3>
                <button type="button" 
                        class="btn-close text-reset" 
                        data-bs-dismiss="offcanvas" 
                        aria-label="Close">
                </button>
            </div>
            <div class="offcanvas-body">
                <h5>
                    Bootstrap is the most popular CSS 
                    Framework for developing responsive 
                    and mobile-first websites.
                </h5>
            </div>
        </div>
        <button class="btn btn-primary" 
                type="button" 
                data-bs-toggle="offcanvas"
                data-bs-target="#offcanvasTop" 
                aria-controls="offcanvasTop">
          Toggle top offcanvas
        </button>
        <div class="offcanvas offcanvas-top" 
             tabindex="-1" 
             id="offcanvasTop" 
             aria-labelledby="offcanvasTopLabel">
            <div class="offcanvas-header">
                <h3 id="offcanvasTopLabel">
                  Offcanvas top
                 </h3>
                <button type="button" 
                        class="btn-close text-reset" 
                        data-bs-dismiss="offcanvas" 
                        aria-label="Close">
                </button>
            </div>
            <div class="offcanvas-body">
                <h5>
                    Bootstrap is the most popular CSS 
                    Framework for developing responsive 
                    and mobile-first websites.
                </h5>
            </div>
        </div>
        <button class="btn btn-primary" 
                type="button" 
                data-bs-toggle="offcanvas"
                data-bs-target="#offcanvasBottom" 
                aria-controls="offcanvasBottom">
          Toggle bottom offcanvas
        </button>
        <div class="offcanvas offcanvas-bottom"
             tabindex="-1" 
             id="offcanvasBottom" 
             aria-labelledby="offcanvasBottomLabel">
            <div class="offcanvas-header">
                <h3 class="offcanvas-title" 
                    id="offcanvasBottomLabel">
                  Offcanvas bottom
                </h3>
                <button type="button" 
                        class="btn-close text-reset" 
                        data-bs-dismiss="offcanvas" 
                        aria-label="Close">
                </button>
            </div>
            <div class="offcanvas-body small">
                <h5>
                    Bootstrap is the most popular CSS 
                    Framework for developing responsive 
                    and mobile-first websites.
                </h5> 
            </div>
        </div>
        <br>
        <center>
            <h3>
              Welcome to GeeksforGeeks
              Welcome to GeeksforGeeks
             </h3>
            <h4>
              A computer science portal for geeks.
             </h4>
            <h3>
              Welcome to GeeksforGeeks 
              Welcome to GeeksforGeeks
              </h3>
            <h4>
              A computer science portal for geeks.
              </h4>
            <h3>
              Welcome to GeeksforGeeks 
              Welcome to GeeksforGeeks
              </h3>
        </center>
    </div>
</body>
</html>

Producción:

Fondo fuera del lienzo: la opción de fondo especifica que el fondo fuera del lienzo tiene una superposición oscura (el color de fondo de la página actual). Por defecto, el fondo está activo. Utilice el atributo data-bs-backdrop y establezca su valor en falso para inactivar el fondo.

Sintaxis:

<div class="offcanvas offcanvas-start"
     data-bs-scroll="true" 
     data-bs-backdrop="false"> 
        Content 
</div>

Ejemplo 1: En este ejemplo, demostraremos offcanvas con la opción predeterminada. Por defecto, la opción de fondo está activa y el desplazamiento está inactivo.

HTML

<!DOCTYPE html>
<html lang="en">
  
<head>
    <title>Bootstrap Sidebar</title>
    <meta charset="utf-8">
    <meta name="viewport" 
         content="width=device-width,
                  initial-scale=1">
    <link href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" 
         rel="stylesheet">
    <script src=
"https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js">
    </script>
</head>
  
<body>
    <div class="offcanvas offcanvas-start" 
         tabindex="-1" 
         id="sidebar" 
         aria-labelledby="offcanvasStartLabel">
        <div class="offcanvas-header">
            <h1 id="offcanvasStartLabel">
                GeeksforGeeks
            </h1>
            <button type="button" 
                    class="btn-close text-reset"
                    data-bs-dismiss="offcanvas" 
                    aria-label="Close">
            </button>
        </div>
        <div class="offcanvas-body">
            <h5>
                Scrolling is inactive (default)
            </h5>
            <h5>
                backdrop is active (default)
            </h5>
            <br>
            <h5>
                <p>
                    Bootstrap is the most popular CSS 
                    Framework for developing responsive 
                    and mobile-first websites.
                </p>
            </h5> 
        </div>
    </div>
    <div class="container mt-3">
        <button class="btn btn-primary" 
                type="button" 
                data-bs-toggle="offcanvas" 
                data-bs-target="#sidebar" 
                aria-controls="offcanvasStart">
            Offcanvas Sidebar
        </button>
          
        <center>
            <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20220129032254/geeks.png" 
                 alt="GFG" 
                 width="600" 
                 height="400">
            <br>
            <h3>
              Welcome to GeeksforGeeks
              Welcome to GeeksforGeeks
             </h3>
            <h4>
              A computer science portal for geeks.
             </h4>
            <h3>
              Welcome to GeeksforGeeks 
              Welcome to GeeksforGeeks
              </h3>
            <h4>
              A computer science portal for geeks.
              </h4>
            <h3>
              Welcome to GeeksforGeeks 
              Welcome to GeeksforGeeks
              </h3>
            <br> 
            <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20220129032254/geeks.png" 
                 alt="GFG" 
                 width="600" 
                 height="400">
            <br> 
        </center>
    </div>
</body>
</html>

Producción:

 

Ejemplo 2: En este ejemplo, demostraremos offcanvas con un fondo inactivo. Utilice el atributo data-bs-backdrop y establezca su valor en falso para inactivar el fondo.

HTML

<!DOCTYPE html>
<html lang="en">
  
<head>
    <title>Bootstrap Offcanvas</title>
    <meta name="viewport" 
          content="width=device-width, 
                   initial-scale=1">
    <link href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" 
          rel="stylesheet">
    <script src=
"https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js">
    </script>
</head>
  
<body>
    <div class="offcanvas offcanvas-start" 
         data-bs-backdrop="false" 
         tabindex="-1" 
         id="sidebar" 
         aria-labelledby="offcanvasStartLabel">
        <div class="offcanvas-header">
            <h1 id="offcanvasStartLabel">
              GeeksforGeeks
              </h1>
            <button type="button" 
                    class="btn-close text-reset" 
                    data-bs-dismiss="offcanvas" 
                    aria-label="Close">
            </button>
        </div>
        <div class="offcanvas-body">
            <h5>
              Scrolling is inactive (default)
              </h5>
            <h5>
              backdrop is inactive
              </h5>
            <br>
            <h5>
                <p>
                    Bootstrap is the most popular CSS 
                    Framework for developing responsive 
                    and mobile-first websites.
                </p>
            </h5> 
        </div>
    </div>
    <div class="container mt-3">
        <button class="btn btn-primary" 
                type="button" 
                data-bs-toggle="offcanvas" 
                data-bs-target="#sidebar" 
                aria-controls="offcanvasStart">
          Offcanvas Sidebar
        </button>
        <center> 
            <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20220129032254/geeks.png" 
                 alt="GFG"
                 width="600" 
                 height="400">
            <br>
            <h3>
              Welcome to GeeksforGeeks
              Welcome to GeeksforGeeks
             </h3>
            <h4>
              A computer science portal for geeks.
             </h4>
            <h3>
              Welcome to GeeksforGeeks 
              Welcome to GeeksforGeeks
              </h3>
            <h4>
              A computer science portal for geeks.
              </h4>
            <h3>
              Welcome to GeeksforGeeks 
              Welcome to GeeksforGeeks
              </h3>
            <br> 
            <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20220129032254/geeks.png" 
                 alt="GFG"
                 width="600" 
                 height="400">
            <br> 
        </center>
    </div>
</body>
</html>

Producción:

 

Desplazamiento de fondo: está inactivo de forma predeterminada, lo que significa que el contenido de fondo no se puede desplazar. Utilice el atributo data-bs-scroll y establezca su valor en verdadero para activar el desplazamiento de fondo.

Ejemplo 3 : En este ejemplo, haremos una demostración fuera del lienzo con desplazamiento y fondo.

HTML

<!DOCTYPE html>
<html lang="en">
  
<head>
    <title>Bootstrap Offcanvas</title>
    <meta name="viewport" 
          content="width=device-width, 
                   initial-scale=1">
    <link href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" 
          rel="stylesheet">
    <script src=
"https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js">
    </script>
</head>
  
<body>
    <div class="offcanvas offcanvas-start" 
         data-bs-scroll="true" 
         tabindex="-1" 
         id="sidebar" 
         aria-labelledby="offcanvasStartLabel">
        <div class="offcanvas-header">
            <h1 id="offcanvasStartLabel">
                  GeeksforGeeks
             </h1>
            <button type="button" 
                    class="btn-close text-reset" 
                    data-bs-dismiss="offcanvas" 
                    aria-label="Close">
            </button>
        </div>
        <div class="offcanvas-body">
            <h5>
              Scrolling is active 
              </h5>
            <h5>
              backdrop is active 
              </h5>
            <br>
            <h5>
                <p>
                    Bootstrap is the most popular CSS Framework
                    for developing responsive and mobile-first 
                    websites.
                </p>
            </h5> 
        </div>
    </div>
    <div class="container mt-3">
        <button class="btn btn-primary"
                type="button" 
                data-bs-toggle="offcanvas"
                data-bs-target="#sidebar" 
                aria-controls="offcanvasStart">
          Offcanvas Sidebar
        </button>
  
        <center> 
            <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20220129032254/geeks.png" 
                 alt="GFG" 
                 width="600" 
                 height="400">
            <br>
            <h3>
              Welcome to GeeksforGeeks
              Welcome to GeeksforGeeks
             </h3>
            <h4>
              A computer science portal for geeks.
             </h4>
            <h3>
              Welcome to GeeksforGeeks 
              Welcome to GeeksforGeeks
              </h3>
            <h4>
              A computer science portal for geeks.
              </h4>
            <h3>
              Welcome to GeeksforGeeks 
              Welcome to GeeksforGeeks
              </h3>
            <br> 
            <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20220129032254/geeks.png" 
                 alt="GFG"
                 width="600" 
                 height="400">
            <br> 
            </center>
    </div>
</body>
</html>

Producción:

 

Offcanvas con menú desplegable: Offcanvas facilita el menú desplegable que contiene la lista de opciones que solo se revelarán cuando un usuario interactúe con el menú.

Sintaxis:

<div class="offcanvas-body>
    <ul class="dropdown-menu">
        <li>
            <a class="dropdown-item" 
               href="#">
               element 1
            </a>
        </li>
        <li>
            <a class="dropdown-item" 
               href="#">element 2
            </a>
        </li>
    </ul>
</div>

Clases usadas:

  • menú desplegable : esta clase se utiliza para crear un menú desplegable.
  • dropdown-item : esta clase se usa para enumerar elementos desplegables.

Ejemplo: En este ejemplo, demostraremos offcanvas con el menú desplegable.

HTML

<!DOCTYPE html>
<html lang="en">
  
<head>
    <title>Bootstrap Sidebar</title>
    <meta charset="utf-8">
    <meta name="viewport" 
          content="width=device-width, 
                   initial-scale=1">
    <link href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
         rel="stylesheet">
    <script src=
"https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js">
    </script>
</head>
  
<body>
    <div class="container mt-3">
        <button class="btn btn-primary" 
                type="button" 
                data-bs-toggle="offcanvas" 
                data-bs-target="#offcanvasExample" 
                aria-controls="offcanvasExample"> 
                Offcanvas with dropdown menu 
        </button>
        <div class="offcanvas offcanvas-start"
             tabindex="-1" 
             id="offcanvasExample" 
             aria-labelledby="offcanvasExampleLabel">
            <div class="offcanvas-header">
                <h1 class="offcanvas-title" 
                    id="offcanvasExampleLabel">
                    GeeksforGeeks
                </h1>
                <button type="button" 
                        class="btn-close text-reset" 
                        data-bs-dismiss="offcanvas"
                        aria-label="Close">
      
                </button>
            </div>
            <div class="offcanvas-body">
                <div>
                    <h5>
                        Bootstrap is the most popular 
                        CSS Framework for developing
                        responsive and mobile-first 
                        websites.
                    </h5> 
                </div>
                <br>
                <div class="dropdown mt-3">
                    <button class="btn btn-secondary dropdown-toggle"
                            type="button" 
                            id="dropdownMenuButton"
                            data-bs-toggle="dropdown">
                        Dropdown Menu 
                    </button>
                    <ul class="dropdown-menu" 
                        aria-labelledby="dropdownMenuButton">
                        <li>
                            <a class="dropdown-item" 
                               href="#">HTML
                            </a>
                        </li>
                        <li>
                            <a class="dropdown-item" 
                               href="#">CSS
                            </a>
                        </li>
                        <li>
                            <a class="dropdown-item" 
                               href="#">JAVASCRIPT
                            </a>
                        </li>
                        <li>
                            <a class="dropdown-item" 
                               href="#">BOOTSTRAP
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
      
        <br>
        <center>
            <h3>
              Welcome to GeeksforGeeks
              Welcome to GeeksforGeeks
             </h3>
            <h4>
              A computer science portal for geeks.
             </h4>
            <h3>
              Welcome to GeeksforGeeks 
              Welcome to GeeksforGeeks
              </h3>
            <h4>
              A computer science portal for geeks.
              </h4>
            <h3>
              Welcome to GeeksforGeeks 
              Welcome to GeeksforGeeks
              </h3>
        </center>
    </div>
</body>
</html>

Producción:

 

Offcanvas con menú vertical: Offcanvas proporciona un menú vertical para elegir entre las opciones, que se revelarán cuando los usuarios interactúen con el menú.

Sintaxis:

<ul class="navbar-nav">
    <li class="nav-item">
        <a class="nav-link" 
           href="#">
           list Item 1
        </a>
    </li>
</ul>

Clases usadas:

  • navbar-nav : esta clase se usa para crear un menú vertical.
  • nav-link : esta clase se usa para agregar elementos al menú vertical.

Ejemplo: En este ejemplo, demostraremos offcanvas con un menú vertical.

HTML

<!DOCTYPE html>
<html lang="en">
  
<head>
    <title>Bootstrap Offcanvas</title>
    <meta name="viewport" 
          content="width=device-width, 
                   initial-scale=1">
    <link href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" 
          rel="stylesheet">
    <script src=
"https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js">
    </script>
</head>
  
<body>
    <div class="container mt-3">
        <div class="offcanvas offcanvas-start"
             tabindex="-1" 
             id="offcanvasExample" 
             aria-labelledby="offcanvasExampleLabel">
            <div class="offcanvas-header">
                <h1 class="offcanvas-title" 
                    id="offcanvasExampleLabel">
                  GeeksforGeeks
                </h1>
                <button type="button"
                        class="btn-close text-reset" 
                        data-bs-dismiss="offcanvas" 
                        aria-label="Close">
                </button>
            </div>
            <div class="offcanvas-body">
                <h5>
                    Bootstrap is the most popular CSS 
                    Framework for developing responsive 
                    and mobile-first websites.
                </h5>
                <br>
                <nav class="navbar bg-light">
                    <div class="container-fluid">
                        <ul class="navbar-nav">
                            <li class="nav-item"> 
                                <a class="nav-link" 
                                   href="#">
                                  Link 1
                                </a> 
                            </li>
                            <li class="nav-item"> 
                                <a class="nav-link" 
                                   href="#">
                                  Link 2
                                </a> 
                            </li>
                            <li class="nav-item"> 
                                <a class="nav-link" 
                                   href="#">
                                  Link 3
                                </a> 
                            </li>
                            <li class="nav-item"> 
                                <a class="nav-link" 
                                   href="#">
                                  Link 4
                                </a> 
                            </li>
                        </ul>
                    </div>
                </nav>
            </div>
        </div>
        <button class="btn btn-primary" 
                type="button" 
                data-bs-toggle="offcanvas" 
                data-bs-target="#offcanvasExample" 
                aria-controls="offcanvasExample"> 
          Offcanvas with vertical menu 
        </button>
        <br>
        <center>
            <h3>
              Welcome to GeeksforGeeks
              Welcome to GeeksforGeeks
             </h3>
            <h4>
              A computer science portal for geeks.
             </h4>
            <h3>
              Welcome to GeeksforGeeks 
              Welcome to GeeksforGeeks
              </h3>
            <h4>
              A computer science portal for geeks.
              </h4>
            <h3>
              Welcome to GeeksforGeeks 
              Welcome to GeeksforGeeks
              </h3>
        </center>
    </div>
</body>
</html>

Producción:

 

Accesibilidad usando variables Sass:

Las variables Sass son las variables que se utilizan en lugar del valor del atributo. Aquí algunas variables sass están dadas por el modelo bootstrap. puede usar esta variable para mejorar el estilo de offcanvas.

  • $offcanvas-padding-y : $modal-inner-padding ;
  • $offcanvas-padding-x : $modal-inner-padding ;
  • $offcanvas-bg-color : $modal-content-bg ;
  • $offcanvas-color : $modal-content-color ;
  • $offcanvas-ancho-horizontal: 400px;
  • $offcanvas-border-color : $modal-content-border-color ;
  • $offcanvas-border-width : $modal-content-border-width ;
  • $offcanvas-box-shadow: $modal-content-box-shadow-xs;

Uso fuera del lienzo:

  • A través de atributos de datos

Sintaxis:

<a class="btn btn-primary" 
   data-bs-toggle="offcanvas" 
   aria-controls="offcanvasStart">
</a>

Clases usadas:

  • offcanvas : esta clase se usa para crear offcanvas pero oculta el contenido.

A través de JavaScript:

Sintaxis :

var offcanvasElementList = 
    [].slice.call(document.querySelectorAll('.offcanvas'))
var offcanvasList =
     offcanvasElementList.map(function (offcanvasEl) {
return new bootstrap.Offcanvas(offcanvasEl) })
  • Vía Opción:
    • Fondo : su valor predeterminado es verdadero. Puede ver el efecto del fondo en el cuerpo mientras Offcanvas está abierto. Como ya se muestra en los ejemplos anteriores.
    • Desplazamiento : Su valor por defecto es falso. Puede permitir el desplazamiento del cuerpo mientras offcanvas está abierto. Como ya se muestra en los ejemplos anteriores.
  • A través de eventos:
    • show.bs.offcanvas : este evento se activa inmediatamente cuando se llama al método de instancia de demostración.
    • se muestra.bs.offcanvas : este evento se activa cuando un elemento offcanvas se hace visible para el usuario.
    • hide.bs.offcanvas : este evento se activa inmediatamente cuando se llama al método hide.
    • hidden.bs.offcanvas : este evento se activa cuando un elemento offcanvas se ha ocultado al usuario.
  • Vía método:
    • toggle() : este método alterna un elemento fuera del lienzo para que se muestre u oculte. Vuelve a la persona que llama antes de que el elemento offcanvas se haya mostrado u ocultado.
    • show(): este método muestra un elemento fuera del lienzo. Vuelve a la persona que llama antes de que se haya mostrado realmente el elemento offcanvas.
    • Hide() : Oculta un elemento fuera del lienzo. Vuelve a la persona que llama antes de que el elemento offcanvas se haya ocultado.

Ejemplo: En este ejemplo, demostraremos el uso de offcanvas desde el atributo href y el atributo data-bs-target.

HTML

<!DOCTYPE html>
<html lang="en">
  
<head>
    <title>Bootstrap Offcanvas</title>
    <meta name="viewport" 
          content="width=device-width, 
                   initial-scale=1">
    <link href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" 
          rel="stylesheet">
    <script src=
"https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js">
    </script>
</head>
  
<body>
    <div class="container mt-3"> 
        <a class="btn btn-primary" 
           data-bs-toggle="offcanvas" 
           href="#offcanvasStart" 
           role="button" 
           aria-controls="offcanvasStart">
          Link with href
        </a>
        <button class="btn btn-primary" 
                type="button" 
                data-bs-toggle="offcanvas" 
                data-bs-target="#offcanvasStart" 
                aria-controls="offcanvasStart">
          Button with data-bs-target
        </button>
        <div class="offcanvas offcanvas-start" 
             tabindex="-1" 
             id="offcanvasStart" 
             aria-labelledby="offcanvasStartLabel">
            <div class="offcanvas-header">
                <h1 id="offcanvasStartLabel">
                  GeeksforGeeks
                  </h1>
                <button type="button" 
                        class="btn-close text-reset" 
                        data-bs-dismiss="offcanvas" 
                        aria-label="Close">
      
                </button>
            </div>
            <div class="offcanvas-body">
                <h5>
                    Bootstrap is the most popular 
                    CSS Framework for developing 
                    responsive and mobile-first 
                    websites.
                </h5>
            </div>
        </div>
        <br>
        <center>
            <h3>
              Welcome to GeeksforGeeks
              Welcome to GeeksforGeeks
             </h3>
            <h4>
              A computer science portal for geeks.
             </h4>
            <h3>
              Welcome to GeeksforGeeks 
              Welcome to GeeksforGeeks
              </h3>
            <h4>
              A computer science portal for geeks.
              </h4>
            <h3>
              Welcome to GeeksforGeeks 
              Welcome to GeeksforGeeks
              </h3>
        </center>
    </div>
</body>
</html>

Producción:

 

Referencia : https://getbootstrap.com/docs/5.0/components/offcanvas/

Publicación traducida automáticamente

Artículo escrito por sahilsulakhe3 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 *