Bootstrap 5 Offcanvas

Offcanvas（帆布）

Offcanvas 类似于模态（默认隐藏并在激活时显示），不同之处在于它通常用作侧边栏导航菜单。

如何创建 Offcanvas 侧边栏

下例展示如何创建 offcanvas 侧边栏：

实例

<!-- Offcanvas Sidebar -->
<div class="offcanvas offcanvas-start" id="demo">
  <div class="offcanvas-header">
    <h1 class="offcanvas-title">标题</h1>
    <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas"></button>
<div class="offcanvas-body"> <p>一些文本。一些文本。一些文本。</p> <p>一些文本。一些文本。一些文本。</p> <button class="btn btn-secondary" type="button">按钮</button>
</div> <!-- Button to open the offcanvas sidebar --> <button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#demo"> Buksan ang Offcanvas Sidebar

Subukan ang Mga Sarili

</button>

.offcanvas Mga Halimbawa sa Pagpaliwanag

klaseng ito ay gumagawa ng offcanvas sidebar. .offcanvas-start

klaseng ito ay naglalagay ng offcanvas at nagtatakda ng lapad na 400px. Para sa mas maraming klase paglalagay, tingnan ang mga halimbawa sa ibaba. .offcanvas-title

klaseng ito upang matiyak ang tamang marhin at letner. Pagkatapos, idagdag ang iyong nilalaman sa .offcanvas-body

klaseng ito. Kung mayroon kang pakakailangang bubuksan ang offcanvas sidebar, dapat mong gamitin ang <button> <a> Elemento na bubuksan ang offcanvas sidebar, o .offcanvas Id ng Container (sa aming halimbawa ay #demo）。

Kung mayroon kang pakakailangang gamitin <a> Elemento na bubuksan ang offcanvas sidebar, maaari mong gamitin ang attribute href sa halip ng data-bs-target Ating Puna #demo.

Offcanvas Paglalagay

Gamitin ang .offcanvas-start|end|top|bottom Ilagay ang offcanvas sa kanan, kaliwa, itaas o ibaba:

Mga Halimbawa sa Kanan

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

Subukan ang Mga Sarili

Mga Halimbawa sa Itaas

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

Subukan ang Mga Sarili

Mga Halimbawa sa Ilang Pahina

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

Subukan ang Mga Sarili