Hla mus rau cov ntsiab lus tseem ceeb Hla mus rau docs navigation
Check
in English

Offcanvas

Tsim cov sidebars zais rau hauv koj qhov project rau navigation, lub tawb nqa khoom, thiab ntau ntxiv nrog ob peb chav kawm thiab peb JavaScript plugin.

Ntawm nplooj ntawv no

Nws ua haujlwm li cas

Offcanvas yog ib qho sidebar tivthaiv uas tuaj yeem toggled ntawm JavaScript kom tshwm los ntawm sab laug, sab xis, sab saum toj, lossis hauv qab ntug ntawm qhov chaw saib. Cov nyees khawm lossis cov thauj tog rau nkoj yog siv los ua cov cim uas txuas rau cov ntsiab lus tshwj xeeb uas koj hloov mus, thiab datacov cwj pwm yog siv los hu peb JavaScript.

  • Offcanvas qhia qee yam ntawm tib JavaScript code li modals. Conceptually, lawv zoo sib xws, tab sis lawv yog cais plugins.
  • Ib yam li ntawd, qee qhov Sass hloov pauv rau offcanvas cov qauv thiab qhov ntev yog tau txais los ntawm cov qauv hloov pauv.
  • Thaum pom, offcanvas suav nrog lub neej ntawd keeb kwm yav dhau uas tuaj yeem raug nyem los nkaum lub offcanvas.
  • Zoo ib yam li modals, tsuas yog ib qho offcanvas tuaj yeem pom ib zaug.

Tau taub hau! Muab CSS ua haujlwm li cas rau cov animations, koj siv tsis tau marginlossis translatentawm ib .offcanvaslub ntsiab lus. Hloov chaw, siv cov chav kawm ua ib qho kev nthuav dav ntawm cov ntaub qhwv.

Cov nyhuv animation ntawm cov khoom siv no yog nyob ntawm cov prefers-reduced-motionlus nug xov xwm. Saib qhov txo qis ntawm peb cov ntaub ntawv nkag mus tau .

Piv txwv

Offcanvas Cheebtsam

Hauv qab no yog ib qho piv txwv offcanvas uas tau qhia los ntawm lub neej ntawd (ntawm .showntawm .offcanvas). Offcanvas suav nrog kev txhawb nqa rau lub taub hau nrog lub pob kaw thiab ib qho kev xaiv lub cev rau qee qhov pib padding. Peb xav kom koj suav nrog offcanvas headers nrog tso tawm qhov kev txiav txim thaum twg los tau, los yog muab ib qho kev txiav txim tawm meej meej.

Offcanvas
Cov ntsiab lus rau offcanvas mus ntawm no. Koj tuaj yeem tso ib qho ntawm Bootstrap tivthaiv lossis cov ntsiab lus kev cai ntawm no.
html 
<div class="offcanvas offcanvas-start show" tabindex="-1" id="offcanvas" aria-labelledby="offcanvasLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="offcanvasLabel">Offcanvas</h5>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    Content for the offcanvas goes here. You can place just about any Bootstrap component or custom elements here.
  </div>
</div>

Nyob demo

Siv cov nyees khawm hauv qab no los qhia thiab zais ib qho offcanvas keeb ntawm JavaScript uas toggles .showchav kawm ntawm ib lub caij nrog .offcanvaschav kawm.

  • .offcanvashides cov ntsiab lus (default)
  • .offcanvas.showqhia cov ntsiab lus

Koj tuaj yeem siv qhov txuas nrog tus hrefcwj pwm, lossis khawm nrog tus data-bs-targetcwj pwm. Hauv ob qho xwm txheej, qhov data-bs-toggle="offcanvas"yuav tsum tau ua.

Txuas nrog href
Offcanvas
Qee cov ntawv ua qhov chaw. Hauv lub neej tiag tiag koj tuaj yeem muaj cov ntsiab lus koj tau xaiv. Zoo li, ntawv, duab, npe, thiab lwm yam.
html 
<a class="btn btn-primary" data-bs-toggle="offcanvas" href="#offcanvasExample" role="button" aria-controls="offcanvasExample">
  Link with href
</a>
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasExample" aria-controls="offcanvasExample">
  Button with data-bs-target
</button>

<div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasExample" aria-labelledby="offcanvasExampleLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="offcanvasExampleLabel">Offcanvas</h5>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    <div>
      Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.
    </div>
    <div class="dropdown mt-3">
      <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown">
        Dropdown button
      </button>
      <ul class="dropdown-menu">
        <li><a class="dropdown-item" href="#">Action</a></li>
        <li><a class="dropdown-item" href="#">Another action</a></li>
        <li><a class="dropdown-item" href="#">Something else here</a></li>
      </ul>
    </div>
  </div>
</div>

Lub cev scrolling

Scrolling lub <body>caij yog neeg xiam thaum lub offcanvas thiab nws cov backdrop pom. Siv tus data-bs-scrollcwj pwm los pab kom <body>scrolling.

Offcanvas nrog lub cev scrolling

Sim scrolling tus so ntawm nplooj ntawv kom pom qhov kev xaiv no hauv kev nqis tes ua.

html 
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasScrolling" aria-controls="offcanvasScrolling">Enable body scrolling</button>

<div class="offcanvas offcanvas-start" data-bs-scroll="true" data-bs-backdrop="false" tabindex="-1" id="offcanvasScrolling" aria-labelledby="offcanvasScrollingLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="offcanvasScrollingLabel">Offcanvas with body scrolling</h5>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    <p>Try scrolling the rest of the page to see this option in action.</p>
  </div>
</div>

Lub cev scrolling thiab backdrop

Koj tseem tuaj yeem pab <body>scrolling nrog ib qho kev pom backdrop.

Backdrop nrog scrolling

Sim scrolling tus so ntawm nplooj ntawv kom pom qhov kev xaiv no hauv kev nqis tes ua.

html 
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasWithBothOptions" aria-controls="offcanvasWithBothOptions">Enable both scrolling & backdrop</button>

<div class="offcanvas offcanvas-start" data-bs-scroll="true" tabindex="-1" id="offcanvasWithBothOptions" aria-labelledby="offcanvasWithBothOptionsLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="offcanvasWithBothOptionsLabel">Backdrop with scrolling</h5>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    <p>Try scrolling the rest of the page to see this option in action.</p>
  </div>
</div>

Static backdrop

Thaum backdrop teem rau zoo li qub, lub offcanvas yuav tsis kaw thaum nias sab nraum nws.

Offcanvas
Kuv yuav tsis kaw yog koj nias sab nraum kuv.
html 
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#staticBackdrop" aria-controls="staticBackdrop">
  Toggle static offcanvas
</button>

<div class="offcanvas offcanvas-start" data-bs-backdrop="static" tabindex="-1" id="staticBackdrop" aria-labelledby="staticBackdropLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="staticBackdropLabel">Offcanvas</h5>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    <div>
      I will not close if you click outside of me.
    </div>
  </div>
</div>

Tsaus offcanvas

Ntxiv hauv v5.2.0

Hloov cov tsos ntawm offcanvases nrog cov khoom siv kom zoo dua qub rau cov ntsiab lus sib txawv xws li navbars tsaus. Ntawm no peb ntxiv .text-bg-darkrau .offcanvasthiab .btn-close-whiterau .btn-closekom tsim nyog styling nrog tsaus offcanvas. Yog tias koj muaj dropdowns hauv, xav txog ntxiv .dropdown-menu-darkrau .dropdown-menu.

Offcanvas

Muab cov ntsiab lus offcanvas ntawm no.

html 
<div class="offcanvas offcanvas-start show text-bg-dark" tabindex="-1" id="offcanvasDark" aria-labelledby="offcanvasDarkLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="offcanvasDarkLabel">Offcanvas</h5>
    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvasDark" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    <p>Place offcanvas content here.</p>
  </div>
</div>

Teb

Ntxiv hauv v5.2.0

Responsive offcanvas classes nkaum cov ntsiab lus sab nraum qhov chaw saib los ntawm qhov chaw nres thiab nqes. Nyob rau hauv tas li ntawd mus breakpoint, cov ntsiab lus nyob rau hauv yuav coj li qub. Piv txwv li, .offcanvas-lghides cov ntsiab lus nyob rau hauv ib qho offcanvas hauv qab lub lgbreakpoint, tab sis qhia cov ntsiab lus saum lub lgbreakpoint.

Resize koj tus browser kom pom cov lus teb offcanvas toggle.
Teb offcanvas

Qhov no yog cov ntsiab lus hauv ib qho .offcanvas-lg.

html 
<button class="btn btn-primary d-lg-none" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasResponsive" aria-controls="offcanvasResponsive">Toggle offcanvas</button>

<div class="alert alert-info d-none d-lg-block">Resize your browser to show the responsive offcanvas toggle.</div>

<div class="offcanvas-lg offcanvas-end" tabindex="-1" id="offcanvasResponsive" aria-labelledby="offcanvasResponsiveLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="offcanvasResponsiveLabel">Responsive offcanvas</h5>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" data-bs-target="#offcanvasResponsive" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    <p class="mb-0">This is content within an <code>.offcanvas-lg</code>.</p>
  </div>
</div>

Cov chav kawm offcanvas teb muaj nyob thoob plaws rau txhua qhov chaw tawg.

  • .offcanvas
  • .offcanvas-sm
  • .offcanvas-md
  • .offcanvas-lg
  • .offcanvas-xl
  • .offcanvas-xxl

Qhov chaw

Tsis muaj qhov chaw nyob rau hauv offcanvas Cheebtsam, yog li koj yuav tsum ntxiv ib qho ntawm cov chav kawm hloov kho hauv qab no.

  • .offcanvas-startqhov chaw offcanvas nyob rau sab laug ntawm qhov chaw saib (pom saum toj no)
  • .offcanvas-endtso offcanvas rau sab xis ntawm qhov chaw saib
  • .offcanvas-topmuab qhov chaw offcanvas rau sab saum toj ntawm qhov chaw saib
  • .offcanvas-bottomtso offcanvas rau hauv qab ntawm qhov chaw saib

Sim cov piv txwv saum toj, txoj cai, thiab hauv qab hauv qab no.

Offcanvas sab saum toj
...
html 
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasTop" aria-controls="offcanvasTop">Toggle top offcanvas</button>

<div class="offcanvas offcanvas-top" tabindex="-1" id="offcanvasTop" aria-labelledby="offcanvasTopLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="offcanvasTopLabel">Offcanvas top</h5>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    ...
  </div>
</div>
Offcanvas txoj cai
...
html 
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasRight" aria-controls="offcanvasRight">Toggle right offcanvas</button>

<div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasRight" aria-labelledby="offcanvasRightLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="offcanvasRightLabel">Offcanvas right</h5>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    ...
  </div>
</div>
Offcanvas hauv qab
...
html 
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasBottom" aria-controls="offcanvasBottom">Toggle bottom offcanvas</button>

<div class="offcanvas offcanvas-bottom" tabindex="-1" id="offcanvasBottom" aria-labelledby="offcanvasBottomLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="offcanvasBottomLabel">Offcanvas bottom</h5>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body small">
    ...
  </div>
</div>

Kev siv tau

Txij li thaum lub offcanvas vaj huam sib luag yog conceptually ib modal dialog, nco ntsoov ntxiv aria-labelledby="..."- referencing lub offcanvas title-rau .offcanvas. Nco ntsoov tias koj tsis tas yuav ntxiv role="dialog"vim peb twb ntxiv nws ntawm JavaScript.

CSS

Hloov pauv

Ntxiv hauv v5.2.0

Raws li ib feem ntawm Bootstrap qhov hloov pauv CSS hloov pauv mus kom ze, offcanvas tam sim no siv cov CSS hauv zos hloov pauv rau .offcanvaskev txhim kho lub sijhawm hloov kho. Cov txiaj ntsig rau CSS qhov sib txawv tau teeb tsa ntawm Sass, yog li Sass customization tseem txhawb nqa, ib yam nkaus.

  --#{$prefix}offcanvas-zindex: #{$zindex-offcanvas};
  --#{$prefix}offcanvas-width: #{$offcanvas-horizontal-width};
  --#{$prefix}offcanvas-height: #{$offcanvas-vertical-height};
  --#{$prefix}offcanvas-padding-x: #{$offcanvas-padding-x};
  --#{$prefix}offcanvas-padding-y: #{$offcanvas-padding-y};
  --#{$prefix}offcanvas-color: #{$offcanvas-color};
  --#{$prefix}offcanvas-bg: #{$offcanvas-bg-color};
  --#{$prefix}offcanvas-border-width: #{$offcanvas-border-width};
  --#{$prefix}offcanvas-border-color: #{$offcanvas-border-color};
  --#{$prefix}offcanvas-box-shadow: #{$offcanvas-box-shadow};

Sass variables

$offcanvas-padding-y:               $modal-inner-padding;
$offcanvas-padding-x:               $modal-inner-padding;
$offcanvas-horizontal-width:        400px;
$offcanvas-vertical-height:         30vh;
$offcanvas-transition-duration:     .3s;
$offcanvas-border-color:            $modal-content-border-color;
$offcanvas-border-width:            $modal-content-border-width;
$offcanvas-title-line-height:       $modal-title-line-height;
$offcanvas-bg-color:                $modal-content-bg;
$offcanvas-color:                   $modal-content-color;
$offcanvas-box-shadow:              $modal-content-box-shadow-xs;
$offcanvas-backdrop-bg:             $modal-backdrop-bg;
$offcanvas-backdrop-opacity:        $modal-backdrop-opacity;

Kev siv

Lub offcanvas plugin siv ob peb chav kawm thiab cov cwj pwm los tswj qhov hnyav nqa:

  • .offcanvaszais cov ntsiab lus
  • .offcanvas.showqhia cov ntsiab lus
  • .offcanvas-startnkaum lub offcanvas ntawm sab laug
  • .offcanvas-endnkaum lub offcanvas ntawm sab xis
  • .offcanvas-tophides lub offcanvas rau saum
  • .offcanvas-bottomhides lub offcanvas nyob rau hauv qab

Ntxiv lub khawm tso tawm nrog tus data-bs-dismiss="offcanvas"cwj pwm, uas ua rau JavaScript ua haujlwm. Nco ntsoov siv lub <button>caij nrog nws rau kev coj tus cwj pwm zoo thoob plaws txhua yam khoom siv.

Los ntawm cov ntaub ntawv attributes

Toggle

Ntxiv data-bs-toggle="offcanvas"thiab ib data-bs-targetlossis hrefrau lub caij kom tau txais kev tswj hwm ntawm ib lub caij offcanvas. Tus data-bs-targetcwj pwm lees txais CSS xaiv los siv cov offcanvas rau. Nco ntsoov ntxiv cov chav kawm offcanvasrau lub caij offcanvas. Yog tias koj xav kom nws qhib lub neej ntawd, ntxiv cov chav kawm ntxiv show.

Tso tseg

Kev tshem tawm tuaj yeem ua tiav nrog tus datacwj pwm ntawm lub pob nyob rau hauv lub offcanvas raws li qhia hauv qab no:

<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>

los yog ntawm ib lub pob sab nraum lub offcanvas siv data-bs-targetraws li qhia hauv qab no:

<button type="button" class="btn-close" data-bs-dismiss="offcanvas" data-bs-target="#my-offcanvas" aria-label="Close"></button>
Thaum ob txoj hauv kev los tshem tawm ib qho offcanvas tau txais kev txhawb nqa, nco ntsoov tias kev tshem tawm sab nraud ntawm lub offcanvas tsis phim ARIA Authoring Practices Guide dialog (modal) pattern . Ua qhov no ntawm koj tus kheej txaus ntshai.

Ntawm JavaScript

Qhib manually nrog:

const offcanvasElementList = document.querySelectorAll('.offcanvas')
const offcanvasList = [...offcanvasElementList].map(offcanvasEl => new bootstrap.Offcanvas(offcanvasEl))

Kev xaiv

Raws li kev xaiv tuaj yeem dhau los ntawm cov ntaub ntawv tus cwj pwm lossis JavaScript, koj tuaj yeem ntxiv ib qho kev xaiv npe rau data-bs-, xws li hauv data-bs-animation="{value}". Nco ntsoov hloov cov ntaub ntawv ntawm lub npe xaiv los ntawm " camelCase " mus rau " kebab-case " thaum dhau cov kev xaiv ntawm cov ntaub ntawv cwj pwm. Piv txwv li, siv data-bs-custom-class="beautifier"es tsis txhob data-bs-customClass="beautifier".

Raws li ntawm Bootstrap 5.2.0, tag nrho cov khoom txhawb nqa qhov kev sim khaws tseg cov ntaub ntawv tus cwj pwm data-bs-configuas tuaj yeem ua tsev yooj yim kev teeb tsa raws li JSON txoj hlua. Thaum ib qho khoom muaj data-bs-config='{"delay":0, "title":123}'thiab data-bs-title="456"tus cwj pwm, tus titlenqi kawg yuav yog 456thiab cov ntaub ntawv sib cais yuav dhau los ntawm cov txiaj ntsig tau muab rau data-bs-config. Ntxiv mus, cov ntaub ntawv uas twb muaj lawm muaj peev xwm ua tsev JSON qhov tseem ceeb xws li data-bs-delay='{"show":0,"hide":150}'.

Lub npe Hom Default Kev piav qhia
backdrop boolean los yog txoj hluastatic true Siv lub nraub qaum ntawm lub cev thaum offcanvas qhib. Xwb, qhia meej staticrau ib qho backdrop uas tsis kaw lub offcanvas thaum nias.
keyboard boolean true Kaw lub offcanvas thaum khiav khiav yog nias.
scroll boolean false Cia lub cev scrolling thaum offcanvas qhib.

Cov txheej txheem

Asynchronous txoj kev thiab kev hloov

Txhua txoj kev API yog asynchronous thiab pib hloov pauv . Lawv rov qab mus rau tus neeg hu xov tooj sai li sai tau thaum qhov kev hloov pauv pib tab sis ua ntej nws xaus . Tsis tas li ntawd, ib txoj kev hu rau ib qho kev hloov pauv yuav raug tsis quav ntsej .

Saib peb cov ntaub ntawv JavaScript kom paub ntau ntxiv .

Qhib koj cov ntsiab lus raws li lub hauv paus offcanvas. Txais ib qho kev xaiv xaiv object.

Koj tuaj yeem tsim ib qho offcanvas piv txwv nrog tus tsim, piv txwv li:

const bsOffcanvas = new bootstrap.Offcanvas('#myOffcanvas')
Txoj kev Kev piav qhia
getInstance Txoj kev zoo li qub uas tso cai rau koj kom tau txais qhov piv txwv offcanvas txuam nrog DOM lub caij.
getOrCreateInstance Txoj kev zoo li qub uas tso cai rau koj kom tau txais qhov piv txwv offcanvas txuam nrog DOM lub caij, lossis tsim ib qho tshiab yog tias nws tsis tau pib.
hide Hide ib qho offcanvas keeb. Rov qab mus rau tus neeg hu ua ntej lub caij offcanvas tau muab zais tiag tiag (piv txwv li ua ntej qhov hidden.bs.offcanvasxwm txheej tshwm sim).
show Qhia ib qho offcanvas keeb. Rov qab mus rau tus neeg hu ua ntej lub caij offcanvas tau tshwm sim tiag tiag (piv txwv li ua ntej qhov shown.bs.offcanvasxwm txheej tshwm sim).
toggle Toggles lub caij offcanvas los qhia lossis zais. Rov qab mus rau tus neeg hu ua ntej lub caij offcanvas tau tshwm sim los yog muab zais (piv txwv li ua ntej qhov shown.bs.offcanvaskev hidden.bs.offcanvastshwm sim tshwm sim).

Cov xwm txheej

Bootstrap's offcanvas chav kawm nthuav tawm ob peb txheej xwm rau hooking rau hauv offcanvas functionality.

Hom xwm txheej Kev piav qhia
hide.bs.offcanvas Qhov kev tshwm sim no raug rho tawm haujlwm tam sim ntawd thaum hidehu ua txoj kev.
hidden.bs.offcanvas Qhov kev tshwm sim no raug rho tawm haujlwm thaum lub caij offcanvas tau muab zais los ntawm tus neeg siv (yuav tos rau CSS kev hloov pauv kom tiav).
hidePrevented.bs.offcanvas Qhov kev tshwm sim no raug rho tawm haujlwm thaum lub offcanvas tshwm sim, nws cov keeb kwm yav dhau yog staticthiab ib qho nias sab nraum lub offcanvas yog ua. Qhov kev tshwm sim kuj raug rho tawm haujlwm thaum tus yuam sij khiav tawm thiab qhov keyboardkev xaiv tau teem rau false.
show.bs.offcanvas Qhov xwm txheej no tua hluav taws tam sim ntawd thaum showhu ua piv txwv.
shown.bs.offcanvas Qhov kev tshwm sim no raug rho tawm haujlwm thaum lub caij offcanvas tau pom rau tus neeg siv (yuav tos rau CSS kev hloov pauv kom tiav). 
const myOffcanvas = document.getElementById('myOffcanvas')
myOffcanvas.addEventListener('hidden.bs.offcanvas', event => {
  // do something...
})