Kifungu cha Kifungu cha Bootstrap 5

Mambo ya kusunifu:

Offcanvas (pamba)

Kwa sababu hizi ni offcanvas inayofanana na modal (inaonyesha wa kuzingatia na inapakia kama inaendelea), ingawa inatumiwa kama sidebar ya menu ya navigation.

Matokeo hii inaonyesha hapa hivi kwa kumaliza offcanvas 侧边栏：

matokeo

<!-- Offcanvas Sidebar -->
<div class="offcanvas offcanvas-start" id="demo">
  <div class="offcanvas-header">
    <h1 class="offcanvas-title">kichwa</h1>
    <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas">
  </div>
  <div class="offcanvas-body">
    <p>masababu. masababu. masababu.</p>
    <p>masababu. masababu. masababu.</p>
    <button class="btn btn-secondary" type="button">msahara</button>
  </div>
</div>
<!-- Button to open the offcanvas sidebar -->
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#demo">
  Fungua Sidebar ya Offcanvas
</button>

Jifunze kwenye mifumo

Mafanikio ya Mfano

.offcanvas inaongea sidebar ya offcanvas.

.offcanvas-start inaangalia offcanvas, na inapanga upeo wa kina kwa 400px. Kwa mafanikio ya kinaangalia zaidi, tazama mifano inayofuata.

.offcanvas-title inaonyesha muda wa kimaeneo na ukubwa wa muda wa mawili. Kwa mafanikio ya kinaangalia, tazama mifano inayofuata.

Kisha, tukiongeza matokeo yako kwenye .offcanvas-body kati.

Kutumia offcanvas sidebar, inafaa kuwa na <button> au <a> inaangalia .offcanvas kituo cha kifaa cha id (kwa mivumbuzo yetu hii ni #demo）。

Kutumia <a> Kitu kinachezwa offcanvas inayofungua sidebar, inaweza kutumia kipimo ya href hata data-bs-target Inaangalia kituo #demo.

Offcanvas Inaangalia

Tumie .offcanvas-start|end|top|bottom Inaangalia offcanvas kwenye kulia, kulia, kimaeneo au chumbi:

Mifano ya Kulia

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

Jifunze kwenye mifumo

Mifano ya Kimaeneo

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

Jifunze kwenye mifumo

Mifano ya Chumbi

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

Jifunze kwenye mifumo