in English

Navbar

Dogfennaeth ac enghreifftiau ar gyfer pennyn llywio ymatebol, pwerus Bootstrap, y bar llywio. Yn cynnwys cefnogaeth ar gyfer brandio, llywio, a mwy, gan gynnwys cefnogaeth i'n ategyn cwympo.

Ar y dudalen hon

Sut mae'n gweithio

Dyma beth sydd angen i chi ei wybod cyn dechrau ar y bar llywio:

Mae angen lapio .navbarâ barrau llywio ar gyfer cwympiadau .navbar-expand{-sm|-md|-lg|-xl|-xxl}ymatebol a dosbarthiadau cynllun lliw .
Mae Navbars a'u cynnwys yn hylif yn ddiofyn. Newidiwch y cynhwysydd i gyfyngu ar eu lled llorweddol mewn gwahanol ffyrdd.
Defnyddiwch ein dosbarthiadau bylchiad a fflecs ar gyfer rheoli bylchau ac aliniad o fewn barrau llywio.
Mae Navbars yn ymatebol yn ddiofyn, ond gallwch chi eu haddasu'n hawdd i newid hynny. Mae ymddygiad ymatebol yn dibynnu ar ein ategyn Collapse JavaScript.
Sicrhau hygyrchedd trwy ddefnyddio <nav>elfen neu, os ydych yn defnyddio elfen fwy generig fel <div>, ychwanegu a role="navigation"at bob navbar i'w nodi'n benodol fel rhanbarth tirnod ar gyfer defnyddwyr technolegau cynorthwyol.
Nodwch yr eitem gyfredol trwy ddefnyddio aria-current="page"ar gyfer y dudalen gyfredol neu aria-current="true"ar gyfer yr eitem gyfredol mewn set.

Mae effaith animeiddio'r gydran hon yn dibynnu ar prefers-reduced-motionymholiad y cyfryngau. Gweler adran cynnig gostyngol ein dogfennaeth hygyrchedd .

Cynnwys a gefnogir

Mae Navbars yn dod â chefnogaeth adeiledig ar gyfer llond llaw o is-gydrannau. Dewiswch o'r canlynol yn ôl yr angen:

.navbar-brandar gyfer eich cwmni, cynnyrch, neu enw prosiect.
.navbar-navar gyfer llywio uchder llawn ac ysgafn (gan gynnwys cefnogaeth ar gyfer cwymplenni).
.navbar-toggleri'w ddefnyddio gyda'n ategyn cwympo ac ymddygiadau toggling llywio eraill.
Cyfleustodau hyblyg a bylchu ar gyfer unrhyw reolaethau a gweithredoedd ffurf.
.navbar-textar gyfer ychwanegu llinynnau fertigol o destun.
.collapse.navbar-collapsear gyfer grwpio a chuddio cynnwys y bar llywio yn ôl torbwynt rhiant.
Ychwanegu opsiwn .navbar-scrolli osod max-heighta sgrolio cynnwys bar llywio estynedig .

Dyma enghraifft o'r holl is-gydrannau sydd wedi'u cynnwys mewn bar llywio ymatebol ar thema golau sy'n cwympo'n awtomatig yn y torbwynt lg(mawr).

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav me-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Dropdown
          </a>
          <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
            <li><a class="dropdown-item" href="#">Action</a></li>
            <li><a class="dropdown-item" href="#">Another action</a></li>
            <li><hr class="dropdown-divider"></li>
            <li><a class="dropdown-item" href="#">Something else here</a></li>
          </ul>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled">Disabled</a>
        </li>
      </ul>
      <form class="d-flex">
        <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-success" type="submit">Search</button>
      </form>
    </div>
  </div>
</nav>

Mae'r enghraifft hon yn defnyddio cefndir ( bg-light) a bylchiad ( my-2, my-lg-0, me-sm-0, my-sm-0) dosbarthiadau cyfleustodau.

Brand

Gellir .navbar-brandcymhwyso'r rhain i'r rhan fwyaf o elfennau, ond mae angor yn gweithio orau, oherwydd efallai y bydd angen dosbarthiadau cyfleustodau neu arddulliau arferol ar rai elfennau.

Testun

Ychwanegwch eich testun o fewn elfen gyda'r .navbar-branddosbarth.

<!-- As a link -->
<nav class="navbar navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
  </div>
</nav>

<!-- As a heading -->
<nav class="navbar navbar-light bg-light">
  <div class="container-fluid">
    <span class="navbar-brand mb-0 h1">Navbar</span>
  </div>
</nav>

Delwedd

Gallwch ddisodli'r testun o fewn y .navbar-brandgyda <img>.

<nav class="navbar navbar-light bg-light">
  <div class="container">
    <a class="navbar-brand" href="#">
      <img src="/docs/5.1/assets/brand/bootstrap-logo.svg" alt="" width="30" height="24">
    </a>
  </div>
</nav>

Delwedd a thestun

Gallwch hefyd ddefnyddio rhai cyfleustodau ychwanegol i ychwanegu delwedd a thestun ar yr un pryd. Sylwch ar ychwanegu .d-inline-blockac .align-text-topar y <img>.

<nav class="navbar navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">
      <img src="/docs/5.1/assets/brand/bootstrap-logo.svg" alt="" width="30" height="24" class="d-inline-block align-text-top">
      Bootstrap
    </a>
  </div>
</nav>

Nav

Mae dolenni llywio Navbar yn adeiladu ar ein hopsiynau .navgyda'u dosbarth addasu eu hunain ac yn gofyn am ddefnyddio dosbarthiadau toggler ar gyfer steilio ymatebol priodol. Bydd llywio mewn barrau llywio hefyd yn tyfu i feddiannu cymaint o le llorweddol â phosibl i gadw cynnwys eich bar llywio wedi'i alinio'n ddiogel.

Ychwanegwch y .activedosbarth .nav-linki nodi'r dudalen gyfredol.

Sylwch y dylech hefyd ychwanegu'r aria-currentpriodoledd ar y gweithredol .nav-link.

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Features</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Pricing</a>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled">Disabled</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

Ac oherwydd ein bod yn defnyddio dosbarthiadau ar gyfer ein llywio, gallwch osgoi'r dull seiliedig ar restr yn gyfan gwbl os dymunwch.

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
      <div class="navbar-nav">
        <a class="nav-link active" aria-current="page" href="#">Home</a>
        <a class="nav-link" href="#">Features</a>
        <a class="nav-link" href="#">Pricing</a>
        <a class="nav-link disabled">Disabled</a>
      </div>
    </div>
  </div>
</nav>

Gallwch hefyd ddefnyddio cwymplenni yn eich bar llywio. Mae angen elfen lapio ar fwydlenni cwymplen ar gyfer lleoli, felly gwnewch yn siŵr eich bod chi'n defnyddio elfennau ar wahân ac wedi'u nythu ar gyfer .nav-itemac .nav-linkfel y dangosir isod.

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNavDropdown">
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Features</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Pricing</a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Dropdown link
          </a>
          <ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
            <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>
        </li>
      </ul>
    </div>
  </div>
</nav>

Ffurflenni

Rhowch wahanol reolyddion ffurf a chydrannau o fewn bar llywio:

<nav class="navbar navbar-light bg-light">
  <div class="container-fluid">
    <form class="d-flex">
      <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success" type="submit">Search</button>
    </form>
  </div>
</nav>

Elfennau plentyn ar unwaith o .navbargynllun fflecs defnydd a bydd yn ddiofyn i justify-content: space-between. Defnyddiwch gyfleustodau hyblyg ychwanegol yn ôl yr angen i addasu'r ymddygiad hwn.

<nav class="navbar navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand">Navbar</a>
    <form class="d-flex">
      <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success" type="submit">Search</button>
    </form>
  </div>
</nav>

Mae grwpiau mewnbwn yn gweithio hefyd. Os yw'ch bar llywio yn ffurf gyfan, neu'n ffurflen yn bennaf, gallwch ddefnyddio'r <form>elfen fel y cynhwysydd ac arbed rhywfaint o HTML.

<nav class="navbar navbar-light bg-light">
  <form class="container-fluid">
    <div class="input-group">
      <span class="input-group-text" id="basic-addon1">@</span>
      <input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
    </div>
  </form>
</nav>

Cefnogir botymau amrywiol fel rhan o'r ffurflenni bar llywio hyn hefyd. Mae hyn hefyd yn atgoffa wych y gellir defnyddio cyfleustodau aliniad fertigol i alinio elfennau o wahanol feintiau.

<nav class="navbar navbar-light bg-light">
  <form class="container-fluid justify-content-start">
    <button class="btn btn-outline-success me-2" type="button">Main button</button>
    <button class="btn btn-sm btn-outline-secondary" type="button">Smaller button</button>
  </form>
</nav>

Testun

Gall barrau llywio gynnwys darnau o destun gyda chymorth .navbar-text. Mae'r dosbarth hwn yn addasu aliniad fertigol a bylchau llorweddol ar gyfer llinynnau testun.

<nav class="navbar navbar-light bg-light">
  <div class="container-fluid">
    <span class="navbar-text">
      Navbar text with an inline element
    </span>
  </div>
</nav>

Cymysgu a chyfateb â chydrannau a chyfleustodau eraill yn ôl yr angen.

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar w/ text</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarText">
      <ul class="navbar-nav me-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Features</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Pricing</a>
        </li>
      </ul>
      <span class="navbar-text">
        Navbar text with an inline element
      </span>
    </div>
  </div>
</nav>

Cynlluniau lliw

Nid yw thema'r bar llywio erioed wedi bod yn haws diolch i'r cyfuniad o ddosbarthiadau thema a background-colorchyfleustodau. Dewiswch o'r rhain .navbar-lighti'w defnyddio gyda lliwiau cefndir golau, neu .navbar-darkar gyfer lliwiau cefndir tywyll. Yna, addasu gyda .bg-*chyfleustodau.

<nav class="navbar navbar-dark bg-dark">
  <!-- Navbar content -->
</nav>

<nav class="navbar navbar-dark bg-primary">
  <!-- Navbar content -->
</nav>

<nav class="navbar navbar-light" style="background-color: #e3f2fd;">
  <!-- Navbar content -->
</nav>

Cynwysyddion

Er nad oes ei angen, gallwch lapio bar llywio mewn a .containeri'w ganoli ar dudalen - er sylwch fod angen cynhwysydd mewnol o hyd. Neu gallwch ychwanegu cynhwysydd y tu mewn .navbari'r canoli cynnwys bar llywio sefydlog neu sefydlog yn unig .

<div class="container">
  <nav class="navbar navbar-expand-lg navbar-light bg-light">
    <div class="container-fluid">
      <a class="navbar-brand" href="#">Navbar</a>
    </div>
  </nav>
</div>

Defnyddiwch unrhyw un o'r cynwysyddion ymatebol i newid pa mor eang y mae'r cynnwys yn eich bar llywio yn cael ei gyflwyno.

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-md">
    <a class="navbar-brand" href="#">Navbar</a>
  </div>
</nav>

Lleoliad

Defnyddiwch ein cyfleustodau safle i osod barrau llywio mewn safleoedd ansefydlog. Dewiswch o sefydlog i'r brig, sefydlog i'r gwaelod, neu stickied i'r brig (sgroliwch gyda'r dudalen nes ei fod yn cyrraedd y brig, yna aros yno). Mae bariau llywio sefydlog yn defnyddio position: fixed, sy'n golygu eu bod yn cael eu tynnu o lif arferol y DOM ac efallai y bydd angen CSS arferol (ee, padding-topar y <body>) arnynt i atal gorgyffwrdd ag elfennau eraill.

Sylwch hefyd fod .sticky-topdefnyddiau position: sticky, nad ydynt yn cael eu cefnogi'n llawn ym mhob porwr .

<nav class="navbar navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Default</a>
  </div>
</nav>

<nav class="navbar fixed-top navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Fixed top</a>
  </div>
</nav>

<nav class="navbar fixed-bottom navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Fixed bottom</a>
  </div>
</nav>

<nav class="navbar sticky-top navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Sticky top</a>
  </div>
</nav>

Sgrolio

Ychwanegu .navbar-nav-scrollat .navbar-nav(neu is-gydran bar llywio arall) i alluogi sgrolio fertigol o fewn cynnwys togladwy bar llywio sydd wedi cwympo. Yn ddiofyn, mae sgrolio yn cychwyn ar 75vh(neu 75% o uchder y porth golygfa), ond gallwch chi ddiystyru hynny gyda'r eiddo personol CSS lleol --bs-navbar-heightneu arddulliau arferol. Mewn pyrth gwylio mwy pan fydd y bar llywio wedi'i ehangu, bydd cynnwys yn ymddangos fel y mae mewn bar llywio rhagosodedig.

Sylwch fod yr ymddygiad hwn yn dod ag anfantais bosibl o overflow—wrth osod overflow-y: auto(mae angen sgrolio'r cynnwys yma), overflow-xyn cyfateb i auto, a fydd yn cnwd rhywfaint o gynnwys llorweddol.

Dyma enghraifft navbar yn defnyddio .navbar-nav-scrollgyda style="--bs-scroll-height: 100px;", gyda rhai cyfleustodau ymyl ychwanegol ar gyfer y gofod gorau posibl.

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar scroll</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarScroll" aria-controls="navbarScroll" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarScroll">
      <ul class="navbar-nav me-auto my-2 my-lg-0 navbar-nav-scroll" style="--bs-scroll-height: 100px;">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="navbarScrollingDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Link
          </a>
          <ul class="dropdown-menu" aria-labelledby="navbarScrollingDropdown">
            <li><a class="dropdown-item" href="#">Action</a></li>
            <li><a class="dropdown-item" href="#">Another action</a></li>
            <li><hr class="dropdown-divider"></li>
            <li><a class="dropdown-item" href="#">Something else here</a></li>
          </ul>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled">Link</a>
        </li>
      </ul>
      <form class="d-flex">
        <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-success" type="submit">Search</button>
      </form>
    </div>
  </div>
</nav>

Ymddygiadau ymatebol

Gall Navbars ddefnyddio .navbar-toggler, .navbar-collapse, a .navbar-expand{-sm|-md|-lg|-xl|-xxl}dosbarthiadau i benderfynu pryd mae eu cynnwys yn cwympo y tu ôl i fotwm. Ar y cyd â chyfleustodau eraill, gallwch chi ddewis yn hawdd pryd i ddangos neu guddio elfennau penodol.

Ar gyfer bariau llywio nad ydynt byth yn cwympo, ychwanegwch y .navbar-expanddosbarth ar y bar llywio. Ar gyfer barrau llywio sydd bob amser yn cwympo, peidiwch ag ychwanegu unrhyw .navbar-expandddosbarth.

Toglor

Mae toglwyr Navbar wedi'u halinio i'r chwith yn ddiofyn, ond pe baent yn dilyn elfen brawd neu chwaer fel .navbar-brand, byddant yn cael eu halinio'n awtomatig i'r dde eithaf. Bydd gwrthdroi eich marcio yn gwrthdroi lleoliad y togler. Isod mae enghreifftiau o wahanol arddulliau togl.

Heb unrhyw .navbar-brandddangos ar y torbwynt lleiaf:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarTogglerDemo01">
      <a class="navbar-brand" href="#">Hidden brand</a>
      <ul class="navbar-nav me-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled">Disabled</a>
        </li>
      </ul>
      <form class="d-flex">
        <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-success" type="submit">Search</button>
      </form>
    </div>
  </div>
</nav>

Gydag enw brand i'w weld ar y chwith a toggler ar y dde:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarTogglerDemo02">
      <ul class="navbar-nav me-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled">Disabled</a>
        </li>
      </ul>
      <form class="d-flex">
        <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-success" type="submit">Search</button>
      </form>
    </div>
  </div>
</nav>

Gyda toggler ar y chwith ac enw brand ar y dde:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo03" aria-controls="navbarTogglerDemo03" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <a class="navbar-brand" href="#">Navbar</a>
    <div class="collapse navbar-collapse" id="navbarTogglerDemo03">
      <ul class="navbar-nav me-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled">Disabled</a>
        </li>
      </ul>
      <form class="d-flex">
        <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-success" type="submit">Search</button>
      </form>
    </div>
  </div>
</nav>

Cynnwys allanol

Weithiau byddwch am ddefnyddio'r ategyn cwympo i sbarduno elfen cynhwysydd ar gyfer cynnwys sydd yn strwythurol y tu allan i'r .navbar. Oherwydd bod ein ategyn yn gweithio ar y ida data-bs-targetparu, mae hynny'n hawdd ei wneud!

Collapsed content

Toggleable via the navbar brand.

<div class="collapse" id="navbarToggleExternalContent">
  <div class="bg-dark p-4">
    <h5 class="text-white h4">Collapsed content</h5>
    <span class="text-muted">Toggleable via the navbar brand.</span>
  </div>
</div>
<nav class="navbar navbar-dark bg-dark">
  <div class="container-fluid">
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
  </div>
</nav>

Pan fyddwch chi'n gwneud hyn, rydym yn argymell cynnwys JavaScript ychwanegol i symud y ffocws yn rhaglennol i'r cynhwysydd pan fydd yn cael ei agor. Fel arall, mae'n debygol y bydd defnyddwyr bysellfwrdd a defnyddwyr technolegau cynorthwyol yn cael amser caled i ddod o hyd i'r cynnwys sydd newydd ei ddatgelu - yn enwedig os yw'r cynhwysydd a agorwyd yn dod cyn y toggler yn strwythur y ddogfen. Rydym hefyd yn argymell gwneud yn siŵr bod gan y toggler y aria-controlspriodoledd, gan bwyntio at y idcynhwysydd cynnwys. Mewn egwyddor, mae hyn yn caniatáu i ddefnyddwyr technoleg gynorthwyol neidio'n uniongyrchol o'r toggler i'r cynhwysydd y mae'n ei reoli - ond mae cefnogaeth i hyn yn eithaf anghyson ar hyn o bryd.

Offcanvas

Trawsnewidiwch eich bar llywio sy'n ehangu ac yn cwympo yn ddrôr oddi ar gynfas gyda'r ategyn offcanvas. Rydym yn ymestyn y ddau arddull rhagosodedig oddi ar y canfas ac yn defnyddio ein .navbar-expand-*dosbarthiadau i greu bar ochr llywio deinamig a hyblyg.

Yn yr enghraifft isod, i greu bar llywio oddi ar y cynfas sydd bob amser wedi cwympo ar draws pob torbwynt, hepgorer y .navbar-expand-*dosbarth yn gyfan gwbl.

<nav class="navbar navbar-light bg-light fixed-top">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Offcanvas navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasNavbar" aria-controls="offcanvasNavbar">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasNavbar" aria-labelledby="offcanvasNavbarLabel">
      <div class="offcanvas-header">
        <h5 class="offcanvas-title" id="offcanvasNavbarLabel">Offcanvas</h5>
        <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
      </div>
      <div class="offcanvas-body">
        <ul class="navbar-nav justify-content-end flex-grow-1 pe-3">
          <li class="nav-item">
            <a class="nav-link active" aria-current="page" href="#">Home</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Link</a>
          </li>
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" id="offcanvasNavbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
              Dropdown
            </a>
            <ul class="dropdown-menu" aria-labelledby="offcanvasNavbarDropdown">
              <li><a class="dropdown-item" href="#">Action</a></li>
              <li><a class="dropdown-item" href="#">Another action</a></li>
              <li>
                <hr class="dropdown-divider">
              </li>
              <li><a class="dropdown-item" href="#">Something else here</a></li>
            </ul>
          </li>
        </ul>
        <form class="d-flex">
          <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
          <button class="btn btn-outline-success" type="submit">Search</button>
        </form>
      </div>
    </div>
  </div>
</nav>

I greu bar llywio oddi ar y cynfas sy'n ehangu i mewn i far llywio arferol ar dorbwynt penodol fel lg, defnyddiwch .navbar-expand-lg.

<nav class="navbar navbar-light navbar-expand-lg bg-light fixed-top">
  <a class="navbar-brand" href="#">Offcanvas navbar</a>
  <button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#navbarOffcanvasLg" aria-controls="navbarOffcanvasLg">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="offcanvas offcanvas-end" tabindex="-1" id="navbarOffcanvasLg" aria-labelledby="navbarOffcanvasLgLabel">
    ...
  </div>
</nav>

Sass

Newidynnau

$navbar-padding-y:                  $spacer * .5;
$navbar-padding-x:                  null;

$navbar-nav-link-padding-x:         .5rem;

$navbar-brand-font-size:            $font-size-lg;
// Compute the navbar-brand padding-y so the navbar-brand will have the same height as navbar-text and nav-link
$nav-link-height:                   $font-size-base * $line-height-base + $nav-link-padding-y * 2;
$navbar-brand-height:               $navbar-brand-font-size * $line-height-base;
$navbar-brand-padding-y:            ($nav-link-height - $navbar-brand-height) * .5;
$navbar-brand-margin-end:           1rem;

$navbar-toggler-padding-y:          .25rem;
$navbar-toggler-padding-x:          .75rem;
$navbar-toggler-font-size:          $font-size-lg;
$navbar-toggler-border-radius:      $btn-border-radius;
$navbar-toggler-focus-width:        $btn-focus-width;
$navbar-toggler-transition:         box-shadow .15s ease-in-out;

$navbar-dark-color:                 rgba($white, .55);
$navbar-dark-hover-color:           rgba($white, .75);
$navbar-dark-active-color:          $white;
$navbar-dark-disabled-color:        rgba($white, .25);
$navbar-dark-toggler-icon-bg:       url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path stroke='#{$navbar-dark-color}' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>");
$navbar-dark-toggler-border-color:  rgba($white, .1);

$navbar-light-color:                rgba($black, .55);
$navbar-light-hover-color:          rgba($black, .7);
$navbar-light-active-color:         rgba($black, .9);
$navbar-light-disabled-color:       rgba($black, .3);
$navbar-light-toggler-icon-bg:      url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path stroke='#{$navbar-light-color}' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>");
$navbar-light-toggler-border-color: rgba($black, .1);

$navbar-light-brand-color:                $navbar-light-active-color;
$navbar-light-brand-hover-color:          $navbar-light-active-color;
$navbar-dark-brand-color:                 $navbar-dark-active-color;
$navbar-dark-brand-hover-color:           $navbar-dark-active-color;

Dolen

Mae dosbarthiadau ehangu/llewygu bar llywio ymatebol (ee, .navbar-expand-lg) yn cael eu cyfuno â'r $breakpointsmap a'u cynhyrchu trwy ddolen yn scss/_navbar.scss.

// Generate series of `.navbar-expand-*` responsive classes for configuring
// where your navbar collapses.
.navbar-expand {
  @each $breakpoint in map-keys($grid-breakpoints) {
    $next: breakpoint-next($breakpoint, $grid-breakpoints);
    $infix: breakpoint-infix($next, $grid-breakpoints);

    // stylelint-disable-next-line scss/selector-no-union-class-name
    &#{$infix} {
      @include media-breakpoint-up($next) {
        flex-wrap: nowrap;
        justify-content: flex-start;

        .navbar-nav {
          flex-direction: row;

          .dropdown-menu {
            position: absolute;
          }

          .nav-link {
            padding-right: $navbar-nav-link-padding-x;
            padding-left: $navbar-nav-link-padding-x;
          }
        }

        .navbar-nav-scroll {
          overflow: visible;
        }

        .navbar-collapse {
          display: flex !important; // stylelint-disable-line declaration-no-important
          flex-basis: auto;
        }

        .navbar-toggler {
          display: none;
        }

        .offcanvas-header {
          display: none;
        }

        .offcanvas {
          position: inherit;
          bottom: 0;
          z-index: 1000;
          flex-grow: 1;
          visibility: visible !important; // stylelint-disable-line declaration-no-important
          background-color: transparent;
          border-right: 0;
          border-left: 0;
          @include transition(none);
          transform: none;
        }
        .offcanvas-top,
        .offcanvas-bottom {
          height: auto;
          border-top: 0;
          border-bottom: 0;
        }

        .offcanvas-body {
          display: flex;
          flex-grow: 0;
          padding: 0;
          overflow-y: visible;
        }
      }
    }
  }
}