Bootstrap 5: Offcanvas

Πίνακας περιεχομένων

    Εμφάνιση πίνακα περιεχομένων

Εκτός καμβά

Το Offcanvas είναι παρόμοιο με το modal (κρυμμένο από προεπιλογή και εμφανίζεται όταν είναι ενεργοποιημένο), εκτός από το ότι χρησιμοποιείται συχνά ως μενού πλοήγησης στην πλευρική γραμμή.

Heading

Some text lorem ipsum.

Some text lorem ipsum.

Πώς να δημιουργήσετε μια πλευρική γραμμή Offcanvas

Το ακόλουθο παράδειγμα δείχνει πώς να δημιουργήσετε μια πλαϊνή γραμμή εκτός καμβά:

Παράδειγμα

 <!-- 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>

Δοκιμάστε το μόνοι σας →

<!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>

Παράδειγμα Επεξήγηση

Η κλάση .offcanvas δημιουργεί την πλευρική γραμμή offcanvas.

Η κλάση .offcanvas-start τοποθετεί τον offcanvas και τον κάνει πλάτος 400 px. Δείτε παραδείγματα παρακάτω για περισσότερες τάξεις τοποθέτησης.

Η κλάση .offcanvas-title εξασφαλίζει σωστά περιθώρια και ύψος γραμμής.

Στη συνέχεια, προσθέστε το περιεχόμενό σας στην κατηγορία .offcanvas-body.

Για να ανοίξετε την πλαϊνή γραμμή offcanvas, πρέπει να χρησιμοποιήσετε ένα στοιχείο <button> ή ένα στοιχείο <a> που δείχνει το αναγνωριστικό του κοντέινερ .offcanvas (#demo στο παράδειγμά μας).

Για να ανοίξετε την πλαϊνή γραμμή offcanvas με ένα στοιχείο <a>, μπορείτε να υποδείξετε το στοιχείο #demo με το χαρακτηριστικό href , αντί για το χαρακτηριστικό data-bs-target.

Θέση εκτός καμβά

Χρησιμοποιήστε το .offcanvas-start|end|top|bottom για να τοποθετήσετε τον offcanvas αριστερά, δεξιά, επάνω ή κάτω:

Σωστό Παράδειγμα

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

Heading

Some text lorem ipsum.

Some text lorem ipsum.

Δοκιμάστε το μόνοι σας →

<!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>

Κορυφαίο Παράδειγμα

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

Heading

Some text lorem ipsum.

Some text lorem ipsum.

Δοκιμάστε το μόνοι σας →

<!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>

Παράδειγμα κάτω

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

Heading

Some text lorem ipsum.

Some text lorem ipsum.

Δοκιμάστε το μόνοι σας →

<!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>

Αποκριτικό μενού OffCanvas

Μπορείτε επίσης να ελέγξετε πότε θέλετε να αποκρύψετε ή να εμφανίσετε το μενού offcanvas σε διαφορετικά πλάτη οθόνης, με τις κλάσεις .offcanvas-sm|md|lg|xl|xxl:

Παράδειγμα

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

Δοκιμάστε το μόνοι σας →

<!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>

Μενού Dark OffCanvas

Χρησιμοποιήστε την τάξη .text-bg-dark για να δημιουργήσετε ένα σκούρο μενού offcanvas.

Συμβουλή: Έχουμε επίσης προσθέσει την κατηγορία .btn-close-white σε .btn-close, για να δημιουργήσετε ένα λευκό κουμπί κλεισίματος που φαίνεται ωραίο με το σκοτάδι Ιστορικό:

Παράδειγμα

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

Heading

Some text lorem ipsum.

Some text lorem ipsum.

Δοκιμάστε το μόνοι σας →

<!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>