Bootstrap 5 Kenar Çubuğu

Offcanvas (Kâğıt)

Offcanvas (Kâğıt), modal (varsayılan olarak gizli ve etkinleştirildiğinde görüntülenir) benzerdir, ancak genellikle kenar çubuğu navigasyon menüsü olarak kullanılır.

Offcanvas Kenar Çubuğu Nasıl Oluşturulur

Aşağıdaki örnek, offcanvas kenar çubuğunu nasıl oluşturacağınızı gösterir:

Örnek

<!-- Offcanvas Sidebar -->
<div class="offcanvas offcanvas-start" id="demo">
  <div class="offcanvas-header">
    <h1 class="offcanvas-title">Başlık</h1>
    <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas"></button>
  </div>
  <div class="offcanvas-body">
    <p>Bazı metin. Bazı metin. Bazı metin.</p>
    <p>Bazı metin. Bazı metin. Bazı metin.</p>
    <button class="btn btn-secondary" type="button">Düğme</button>
  </div>
</div>
<!-- Offcanvas kenar çubuğunu açmak için buton -->
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#demo">
  Offcanvas Kenar Çubuğunu Aç
</button>

Kendiniz Deneyin

Örnek Açıklama

.offcanvas sınıfı offcanvas kenar çubuğu oluşturur.

.offcanvas-start sınıfı offcanvas'ı konumlandırır ve genişliğini 400px olarak ayarlar. Daha fazla konumlandırma sınıfı hakkında bilgi için aşağıdaki örnekleri参见.

.offcanvas-title sınıfı kullanarak ekleyin, bu da uygun marj ve satır yüksekliğini sağlar.

Sonra, içeriğinizi .offcanvas-body sınıfında kullanmanız gerekir.

Offcanvas kenar çubuğunu açmak için <button> veya <a> element yönlendirme .offcanvas Konteynerin id'si (örneğin, #demo）。

Kullanmak için <a> element offcanvas kenar çubuğunu açar, href özniteliğini kullanmak yerine data-bs-target Öznitelik yönlendirme #demo.

Offcanvas Konumlandırma

Lütfen .offcanvas-start|end|top|bottom Offcanvas'ı sol, sağ, üst veya alt konumlandırın:

Sağ Taraf Örneği

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

Kendiniz Deneyin

Üst Bölüm Örneği

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

Kendiniz Deneyin

Alt Bölüm Örneği

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

Kendiniz Deneyin