Neidio i'r prif gynnwys Neidio i lywio dogfennau
Check
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.
  • Newydd yn v5.2.0: Gellir thema bariau llywio â newidynnau CSS sydd wedi'u cwmpasu i'r .navbardosbarth sylfaenol. .navbar-lightwedi'i anghymeradwyo ac .navbar-darkwedi'i ailysgrifennu i ddiystyru newidynnau CSS yn lle ychwanegu arddulliau ychwanegol.
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).

html 
<nav class="navbar navbar-expand-lg 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="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Dropdown
          </a>
          <ul class="dropdown-menu">
            <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" role="search">
        <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 ( me-auto, mb-2, mb-lg-0, me-2) 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.

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

<!-- As a heading -->
<nav class="navbar 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>.

html 
<nav class="navbar bg-light">
  <div class="container">
    <a class="navbar-brand" href="#">
      <img src="/docs/5.2/assets/brand/bootstrap-logo.svg" alt="Bootstrap" 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>.

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

html 
<nav class="navbar navbar-expand-lg 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.

html 
<nav class="navbar navbar-expand-lg 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.

html 
<nav class="navbar navbar-expand-lg 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="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Dropdown link
          </a>
          <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>
        </li>
      </ul>
    </div>
  </div>
</nav>

Ffurflenni

Rhowch wahanol reolyddion ffurf a chydrannau o fewn bar llywio:

html 
<nav class="navbar bg-light">
  <div class="container-fluid">
    <form class="d-flex" role="search">
      <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.

html 
<nav class="navbar bg-light">
  <div class="container-fluid">
    <a class="navbar-brand">Navbar</a>
    <form class="d-flex" role="search">
      <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.

html 
<nav class="navbar 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.

html 
<nav class="navbar 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.

html 
<nav class="navbar 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.

html 
<nav class="navbar navbar-expand-lg 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

Newydd yn v5.2.0: Mae thema Navbar bellach yn cael ei bweru gan newidynnau CSS ac .navbar-lightwedi'i anghymeradwyo. Mae newidynnau CSS yn cael eu cymhwyso i .navbar, yn rhagosodedig i'r ymddangosiad "ysgafn", a gellir eu diystyru gyda .navbar-dark.

Mae themâu Navbar yn haws nag erioed diolch i gyfuniad Bootstrap o newidynnau Sass a CSS. Y rhagosodiad yw ein “bar llywio ysgafn” i'w ddefnyddio gyda lliwiau cefndir golau, ond gallwch hefyd wneud cais .navbar-darkam liwiau 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" 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 .

html 
<div class="container">
  <nav class="navbar navbar-expand-lg 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.

html 
<nav class="navbar navbar-expand-lg 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'r sefydlog i'r brig, yn sefydlog i'r gwaelod, wedi'i lynu i'r brig (sgrolio gyda'r dudalen nes iddi gyrraedd y brig, yna aros yno), neu wedi'i glynu i'r gwaelod (sgrolio gyda'r dudalen nes iddi gyrraedd y gwaelod, 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.

html 
<nav class="navbar bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Default</a>
  </div>
</nav>
html 
<nav class="navbar fixed-top bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Fixed top</a>
  </div>
</nav>
html 
<nav class="navbar fixed-bottom bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Fixed bottom</a>
  </div>
</nav>
html 
<nav class="navbar sticky-top bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Sticky top</a>
  </div>
</nav>
html 
<nav class="navbar sticky-bottom bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Sticky bottom</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.

html 
<nav class="navbar navbar-expand-lg 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="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Link
          </a>
          <ul class="dropdown-menu">
            <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" role="search">
        <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:

html 
<nav class="navbar navbar-expand-lg 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" role="search">
        <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:

html 
<nav class="navbar navbar-expand-lg 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" role="search">
        <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:

html 
<nav class="navbar navbar-expand-lg 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" role="search">
        <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 chi eisiau defnyddio'r ategyn cwympo i sbarduno elfen cynhwysydd ar gyfer cynnwys sydd yn strwythurol yn eistedd y tu allan i'r .navbar. Oherwydd bod ein ategyn yn gweithio ar y ida data-bs-targetparu, mae hynny'n hawdd ei wneud!

html 
<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 drôr oddi ar gynfas gyda'r gydran oddi ar y cynfas . 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.

html 
<nav class="navbar 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" 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="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
              Dropdown
            </a>
            <ul class="dropdown-menu">
              <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" role="search">
          <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-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>

Wrth ddefnyddio offcanvas mewn bar llywio tywyll, byddwch yn ymwybodol efallai y bydd angen i chi gael cefndir tywyll ar y cynnwys oddi ar y cynfas er mwyn atal y testun rhag mynd yn annarllenadwy. Yn yr enghraifft isod, rydym yn ychwanegu .navbar-darkac .bg-darkat y .navbar, .text-bg-darki'r .offcanvas, .dropdown-menu-darki .dropdown-menu, ac .btn-close-whiteat .btn-closear gyfer steilio cywir gydag oddi ar gynfas tywyll.

html 
<nav class="navbar navbar-dark bg-dark fixed-top">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Offcanvas dark navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasDarkNavbar" aria-controls="offcanvasDarkNavbar">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="offcanvas offcanvas-end text-bg-dark" tabindex="-1" id="offcanvasDarkNavbar" aria-labelledby="offcanvasDarkNavbarLabel">
      <div class="offcanvas-header">
        <h5 class="offcanvas-title" id="offcanvasDarkNavbarLabel">Dark offcanvas</h5>
        <button type="button" class="btn-close btn-close-white" 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="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
              Dropdown
            </a>
            <ul class="dropdown-menu dropdown-menu-dark">
              <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" role="search">
          <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
          <button class="btn btn-success" type="submit">Search</button>
        </form>
      </div>
    </div>
  </div>
</nav>

CSS

Newidynnau

Ychwanegwyd yn v5.2.0

Fel rhan o ddull newidynnau CSS esblygol Bootstrap, mae navbars bellach yn defnyddio newidynnau CSS lleol ymlaen ar .navbargyfer addasu amser real gwell. Mae gwerthoedd ar gyfer y newidynnau CSS yn cael eu gosod trwy Sass, felly mae addasu Sass yn dal i gael ei gefnogi hefyd.

  --#{$prefix}navbar-padding-x: #{if($navbar-padding-x == null, 0, $navbar-padding-x)};
  --#{$prefix}navbar-padding-y: #{$navbar-padding-y};
  --#{$prefix}navbar-color: #{$navbar-light-color};
  --#{$prefix}navbar-hover-color: #{$navbar-light-hover-color};
  --#{$prefix}navbar-disabled-color: #{$navbar-light-disabled-color};
  --#{$prefix}navbar-active-color: #{$navbar-light-active-color};
  --#{$prefix}navbar-brand-padding-y: #{$navbar-brand-padding-y};
  --#{$prefix}navbar-brand-margin-end: #{$navbar-brand-margin-end};
  --#{$prefix}navbar-brand-font-size: #{$navbar-brand-font-size};
  --#{$prefix}navbar-brand-color: #{$navbar-light-brand-color};
  --#{$prefix}navbar-brand-hover-color: #{$navbar-light-brand-hover-color};
  --#{$prefix}navbar-nav-link-padding-x: #{$navbar-nav-link-padding-x};
  --#{$prefix}navbar-toggler-padding-y: #{$navbar-toggler-padding-y};
  --#{$prefix}navbar-toggler-padding-x: #{$navbar-toggler-padding-x};
  --#{$prefix}navbar-toggler-font-size: #{$navbar-toggler-font-size};
  --#{$prefix}navbar-toggler-icon-bg: #{escape-svg($navbar-light-toggler-icon-bg)};
  --#{$prefix}navbar-toggler-border-color: #{$navbar-light-toggler-border-color};
  --#{$prefix}navbar-toggler-border-radius: #{$navbar-toggler-border-radius};
  --#{$prefix}navbar-toggler-focus-width: #{$navbar-toggler-focus-width};
  --#{$prefix}navbar-toggler-transition: #{$navbar-toggler-transition};

Mae rhai newidynnau CSS ychwanegol hefyd yn bresennol ar .navbar-nav:

  --#{$prefix}nav-link-padding-x: 0;
  --#{$prefix}nav-link-padding-y: #{$nav-link-padding-y};
  @include rfs($nav-link-font-size, --#{$prefix}nav-link-font-size);
  --#{$prefix}nav-link-font-weight: #{$nav-link-font-weight};
  --#{$prefix}nav-link-color: var(--#{$prefix}navbar-color);
  --#{$prefix}nav-link-hover-color: var(--#{$prefix}navbar-hover-color);
  --#{$prefix}nav-link-disabled-color: var(--#{$prefix}navbar-disabled-color);

Gellir gweld addasu trwy newidynnau CSS ar y .navbar-darkdosbarth lle rydym yn diystyru gwerthoedd penodol heb ychwanegu dewiswyr CSS dyblyg.

  --#{$prefix}navbar-color: #{$navbar-dark-color};
  --#{$prefix}navbar-hover-color: #{$navbar-dark-hover-color};
  --#{$prefix}navbar-disabled-color: #{$navbar-dark-disabled-color};
  --#{$prefix}navbar-active-color: #{$navbar-dark-active-color};
  --#{$prefix}navbar-brand-color: #{$navbar-dark-brand-color};
  --#{$prefix}navbar-brand-hover-color: #{$navbar-dark-brand-hover-color};
  --#{$prefix}navbar-toggler-border-color: #{$navbar-dark-toggler-border-color};
  --#{$prefix}navbar-toggler-icon-bg: #{escape-svg($navbar-dark-toggler-icon-bg)};

Newidynnau Sass

Newidynnau ar gyfer pob bar llywio:

$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-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;

Newidynnau ar gyfer y bar llywio tywyll :

$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-dark-brand-color:           $navbar-dark-active-color;
$navbar-dark-brand-hover-color:     $navbar-dark-active-color;

Dolen Sass

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: var(--#{$prefix}navbar-nav-link-padding-x);
            padding-left: var(--#{$prefix}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 {
          // stylelint-disable declaration-no-important
          position: static;
          z-index: auto;
          flex-grow: 1;
          width: auto !important;
          height: auto !important;
          visibility: visible !important;
          background-color: transparent !important;
          border: 0 !important;
          transform: none !important;
          @include box-shadow(none);
          @include transition(none);
          // stylelint-enable declaration-no-important

          .offcanvas-header {
            display: none;
          }

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