Source

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.

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}ymatebol a dosbarthiadau cynllun lliw .
  • Mae Navbars a'u cynnwys yn hylif yn ddiofyn. Defnyddiwch gynwysyddion dewisol i gyfyngu ar eu lled llorweddol.
  • 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.
  • Mae barrau llywio yn cael eu cuddio yn ddiofyn wrth argraffu. Gorfodwch nhw i gael eu hargraffu drwy ychwanegu .d-printat y .navbar. Gweler y dosbarth cyfleustodau arddangos .
  • 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.

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

Darllenwch ymlaen am enghraifft a rhestr o is-gydrannau a gefnogir.

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.
  • .form-inlinear gyfer unrhyw ffurf o reolaethau a gweithredoedd.
  • .navbar-textar gyfer ychwanegu llinynnau fertigol o destun.
  • .collapse.navbar-collapsear gyfer grwpio a chuddio cynnwys y bar llywio yn ôl torbwynt rhiant.

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">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-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 mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></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-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>

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

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.

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

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

Mae'n debygol y bydd angen arddulliau neu gyfleustodau arferol bob amser i ychwanegu delweddau at y .navbar-brandmaint cywir. Dyma rai enghreifftiau i ddangos.

<!-- Just an image -->
<nav class="navbar navbar-light bg-light">
  <a class="navbar-brand" href="#">
    <img src="/docs/4.4/assets/brand/bootstrap-solid.svg" width="30" height="30" alt="">
  </a>
</nav>
<!-- Image and text -->
<nav class="navbar navbar-light bg-light">
  <a class="navbar-brand" href="#">
    <img src="/docs/4.4/assets/brand/bootstrap-solid.svg" width="30" height="30" class="d-inline-block align-top" alt="">
    Bootstrap
  </a>
</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.

Cyflyrau gweithredol - gyda .active- i ddangos y gellir cymhwyso'r dudalen gyfredol yn uniongyrchol i .nav-links neu eu rhiant agos .nav-item.

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-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 active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></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" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
      </li>
    </ul>
  </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">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-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-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
      <a class="nav-item nav-link" href="#">Features</a>
      <a class="nav-item nav-link" href="#">Pricing</a>
      <a class="nav-item nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
    </div>
  </div>
</nav>

Gallwch hefyd ddefnyddio cwymplenni yn eich navbar nav. 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">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-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 active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></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-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown link
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>
    </ul>
  </div>
</nav>

Ffurflenni

Rhowch wahanol reolyddion ffurf a chydrannau o fewn bar llywio gyda .form-inline.

<nav class="navbar navbar-light bg-light">
  <form class="form-inline">
    <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
    <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
  </form>
</nav>

Plant ar unwaith elfennau yn .navbardefnyddio cynllun fflecs a bydd diofyn 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">
  <a class="navbar-brand">Navbar</a>
  <form class="form-inline">
    <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
    <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
  </form>
</nav>

Mae grwpiau mewnbwn yn gweithio hefyd:

<nav class="navbar navbar-light bg-light">
  <form class="form-inline">
    <div class="input-group">
      <div class="input-group-prepend">
        <span class="input-group-text" id="basic-addon1">@</span>
      </div>
      <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="form-inline">
    <button class="btn btn-outline-success" 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">
  <span class="navbar-text">
    Navbar text with an inline element
  </span>
</nav>

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

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar w/ text</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-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 mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></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>
</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 neu ychwanegu un y tu mewn i ganol cynnwys bar llywio pen sefydlog neu statig yn unig .

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

Pan fydd y cynhwysydd o fewn eich bar llywio, caiff ei badin llorweddol ei dynnu mewn mannau torri sy'n is na'ch .navbar-expand{-sm|-md|-lg|-xl}dosbarth penodedig. Mae hyn yn sicrhau nad ydym yn dyblu'r padin yn ddiangen ar borthladdoedd is pan fydd eich bar llywio wedi cwympo.

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

Ymddygiadau ymatebol

Gall Navbars ddefnyddio .navbar-toggler, .navbar-collapse, a .navbar-expand{-sm|-md|-lg|-xl}dosbarthiadau i newid pan fydd 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 yn y torbwynt isaf:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-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 mr-auto mt-2 mt-lg-0">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </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">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-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 mr-auto mt-2 mt-lg-0">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>

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

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-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 mr-auto mt-2 mt-lg-0">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>

Cynnwys allanol

Weithiau rydych chi am ddefnyddio'r ategyn cwympo i sbarduno cynnwys cudd mewn mannau eraill ar y dudalen. Oherwydd bod ein ategyn yn gweithio ar y ida data-targetparu, mae hynny'n hawdd ei wneud!

<div class="pos-f-t">
  <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">
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
  </nav>
</div>