Bootstrap 5: Offcanvas

Obsah

Offcanvas

Offcanvas je podobný modalům (ve výchozím nastavení skrytý a zobrazený při aktivaci), až na to, že se často používá jako postranní navigační nabídka.

Some text lorem ipsum.

Jak vytvořit postranní panel Offcanvas

Následující příklad ukazuje, jak vytvořit postranní panel mimo plátno:

Příklad

 <!-- Offcanvas Sidebar -->
<div class="offcanvas offcanvas-start" 
  id="demo">
  <div 
  class="offcanvas-header">
    <h1 
  class="offcanvas-title">Heading</h1>
    <button 
  type="button" class="btn-close text-reset" 
  data-bs-dismiss="offcanvas"></button>
  </div>
  <div 
  class="offcanvas-body">
    <p>Some text lorem ipsum.</p>
    
  <p>Some text lorem ipsum.</p>
    <button class="btn 
  btn-secondary" type="button">A Button</button>
  </div>
</div>
  
<!-- Button to open the offcanvas sidebar -->
<button class="btn 
  btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#demo">
  Open Offcanvas Sidebar
</button>

Zkuste to sami →

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="offcanvas offcanvas-start" id="demo">
  <div class="offcanvas-header">
    <h1 class="offcanvas-title">Heading</h1>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas"></button>
  </div>
  <div class="offcanvas-body">
    <p>Some text lorem ipsum.</p>
    <p>Some text lorem ipsum.</p>
    <p>Some text lorem ipsum.</p>
    <button class="btn btn-secondary" type="button">A Button</button>
  </div>
</div>

<div class="container-fluid mt-3">
  <h3>Offcanvas Sidebar</h3>
  <p>Offcanvas is similar to modals, except that it is often used as a sidebar.</p>
  <button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#demo">
    Open Offcanvas Sidebar
  </button>
</div>

</body>
</html>

Příklad vysvětlen

Třída .offcanvas vytváří postranní panel offcanvas.

Třída .offcanvas-start umístí offcanvas a zvětší jej na šířku 400 pixelů. Viz příklady níže pro více tříd polohování.

Třída .offcanvas-title zajišťuje správné okraje a výšku řádku.

Poté přidejte svůj obsah do třídy .offcanvas-body.

Chcete-li otevřít postranní panel offcanvas, musíte použít prvek <button> nebo <a>, který ukazuje na ID kontejneru .offcanvas (v našem příkladu #demo).

Chcete-li otevřít postranní panel offcanvas s prvkem <a>, přejděte na #demo pomocí atributu href místo atributu data-bs-target.

Pozice mimo plátno

Pomocí .offcanvas-start|end|top|bottom umístěte offcanvas doleva, doprava, nahoru nebo dolů:

Správný příklad

<div class="offcanvas offcanvas-end" id="demo">

Some text lorem ipsum.

Zkuste to sami →

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="offcanvas offcanvas-end" id="demo">
  <div class="offcanvas-header">
    <h1 class="offcanvas-title">Heading</h1>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas"></button>
  </div>
  <div class="offcanvas-body">
    <p>Some text lorem ipsum.</p>
    <p>Some text lorem ipsum.</p>
    <p>Some text lorem ipsum.</p>
    <button class="btn btn-secondary" type="button">A Button</button>
  </div>
</div>

<div class="container-fluid mt-3">
  <h3>Right Offcanvas</h3>
  <p>The .offcanvas-end class positions the offcanvas to the right of the page.</p>
  <button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#demo">
    Toggle Right Offcanvas
  </button>
</div>

</body>
</html>

Nahoru Příklad

<div class="offcanvas offcanvas-top" id="demo">

Some text lorem ipsum.

Zkuste to sami →

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="offcanvas offcanvas-top" id="demo">
  <div class="offcanvas-header">
    <h1 class="offcanvas-title">Heading</h1>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas"></button>
  </div>
  <div class="offcanvas-body">
    <p>Some text lorem ipsum.</p>
    <button class="btn btn-secondary" type="button">A Button</button>
  </div>
</div>

<div class="container-fluid mt-3">
  <h3>Top Offcanvas</h3>
  <p>The .offcanvas-top class positions the offcanvas at the top of the page.</p>
  <button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#demo">
    Toggle Top Offcanvas
  </button>
</div>

</body>
</html>

Spodní příklad

   <div class="offcanvas offcanvas-bottom" id="demo">

Some text lorem ipsum.

Zkuste to sami →

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="offcanvas offcanvas-bottom" id="demo">
  <div class="offcanvas-header">
    <h1 class="offcanvas-title">Heading</h1>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas"></button>
  </div>
  <div class="offcanvas-body">
    <p>Some text lorem ipsum.</p>
    <button class="btn btn-secondary" type="button">A Button</button>
  </div>
</div>

<div class="container-fluid mt-3">
  <h3>Bottom Offcanvas</h3>
  <p>The .offcanvas-bottom class positions the offcanvas at the bottom of the page.</p>
  <button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#demo">
    Toggle Bottom Offcanvas
  </button>
</div>

</body>
</html>

Responzivní nabídka OffCanvas

Pomocí tříd .offcanvas-sm|md|lg|xl|xxl můžete také určit, kdy chcete skrýt nebo zobrazit nabídku offcanvas na různých šířkách obrazovky:

Příklad

 <div class="offcanvas offcanvas-start offcanvas-lg" id="demo">

Zkuste to sami →

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="offcanvas offcanvas-start offcanvas-lg" id="demo">
  <div class="offcanvas-header">
    <h1 class="offcanvas-title">Heading</h1>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas"></button>
  </div>
  <div class="offcanvas-body">
    <p>Some text lorem ipsum.</p>
    <p>Some text lorem ipsum.</p>
    <p>Some text lorem ipsum.</p>
    <button class="btn btn-secondary" type="button">A Button</button>
  </div>
</div>

<div class="container-fluid mt-3">
  <h3>Responsive Offcanvas Menu</h3>
  <p>You can also hide or show the offcanvas menu on different screen widths, with the .offcanvas-sm|md|lg|xl|xxl classes.</p>
  <p>In this example, we hide the offcanvas menu on screens larger than 991px wide. Note that we also hide the button that opens the offcanvas (d-lg-none).</p>
  <p class="text-bg-danger">Resize the browser window to see the result.</p>
  <button class="btn btn-primary d-lg-none" type="button" data-bs-toggle="offcanvas" data-bs-target="#demo">
    Open Offcanvas Sidebar
  </button>
</div>

</body>
</html>

Nabídka Dark OffCanvas

Pomocí třídy .text-bg-dark vytvořte tmavé nabídka mimo plátno.

Tip: Přidali jsme také třídu .btn-close-white do .btn-close pro vytvoření bílého tlačítka pro zavření, které vypadá hezky ve tmě Pozadí:

Příklad

<div class="offcanvas offcanvas-end" id="demo">
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvas"></button>

Some text lorem ipsum.

Zkuste to sami →

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="offcanvas offcanvas-start text-bg-dark" id="demo">
  <div class="offcanvas-header">
    <h1 class="offcanvas-title">Heading</h1>
    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvas"></button>
  </div>
  <div class="offcanvas-body">
    <p>Some text lorem ipsum.</p>
    <p>Some text lorem ipsum.</p>
    <p>Some text lorem ipsum.</p>
    <button class="btn btn-secondary" type="button">A Button</button>
  </div>
</div>

<div class="container-fluid mt-3">
  <h3>Dark Offcanvas Sidebar</h3>
  <p>Use the .text-bg-dark class to create a dark offcanvas menu.</p>
  <p><strong>Tip:</strong> We have also added the .btn-close-white class to .btn-close, to create a white close button that looks nice with the dark background:</p>
  <button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#demo">
    Open Offcanvas Sidebar
  </button>
</div>

</body>
</html>