Téigh ar aghaidh chuig an bpríomhábhar Scipeáil chuig nascleanúint docs
Check
in English

Navbar

Doiciméadú agus samplaí do cheanntásc cumhachtach sofhreagrach nascleanúna Bootstrap, an barra nascleanúna. Áirítear leis tacaíocht do bhrandáil, do loingseoireacht agus tuilleadh, lena n-áirítear tacaíocht dár mbreiseán collapse.

Ar an leathanach seo

Conas a oibríonn sé

Seo an méid a chaithfidh tú a bheith ar eolas agat sula dtosaíonn tú leis an mbarra nascleanúna:

  • Teastaíonn timfhilleadh .navbarle barraí nascleanúna le .navbar-expand{-sm|-md|-lg|-xl|-xxl}haghaidh titim fhreagrach agus ranganna scéime dathanna .
  • Tá Navbars agus a n-ábhar sreabhán de réir réamhshocraithe. Athraigh an coimeádán chun a leithead cothrománach a theorannú ar bhealaí éagsúla.
  • Bain úsáid as ár n- aicmí spásála agus fóntais flex chun spásáil agus ailíniú laistigh de na barraí nascleanúna a rialú.
  • Tá Navbars sofhreagrach de réir réamhshocraithe, ach is féidir leat iad a mhodhnú go héasca chun é sin a athrú. Braitheann iompar sofhreagrach ar ár mbreiseán Collapse JavaScript.
  • Inrochtaineacht a chinntiú trí úsáid a bhaint as <nav>eilimint nó, má úsáidtear eilimint níos cineálaí mar <div>, cuir le role="navigation"gach barra nascleanúna chun é a aithint go soiléir mar réigiún sainchomhartha d'úsáideoirí na dteicneolaíochtaí cúnta.
  • Léirigh an mhír reatha trí úsáid a bhaint as aria-current="page"don leathanach reatha nó aria-current="true"don mhír reatha i sraith.
  • Nua in v5.2.0: Is féidir athróga CSS a úsáid mar théama ar Barraí Nascleanúna a scóiptear go dtí an bunrang .navbar. .navbar-lighttá sé i léig agus .navbar-darkathscríobhadh é chun athróga CSS a shárú in ionad stíleanna breise a chur leis.
Tá éifeacht beochana an chomhpháirt seo ag brath ar prefers-reduced-motioncheist na meán. Féach an rannán tairiscint laghdaithe dár gcáipéisíocht inrochtaineachta .

Ábhar tacaithe

Tagann Navbars le tacaíocht ionsuite do dornán fo-chomhpháirteanna. Roghnaigh ó na cinn seo a leanas de réir mar is gá:

  • .navbar-branddo d'ainm cuideachta, táirge nó tionscadail.
  • .navbar-navle haghaidh loingseoireachta lán-airde agus éadrom (lena n-áirítear tacaíocht le haghaidh anuas).
  • .navbar-togglerle húsáid lenár mbreiseán caolaithe agus le hiompraíochtaí scoránaithe loingseoireachta eile.
  • Fóntais flex agus spásála le haghaidh rialuithe agus gníomhartha de chineál ar bith.
  • .navbar-textchun teaghráin téacs atá lárnaithe go ceartingearach a chur leis.
  • .collapse.navbar-collapsechun ábhar an bharra nascleanúna a ghrúpáil agus a cheilt ag briseadhphointe tuismitheora.
  • Cuir roghnach leis chun inneachar an bharra nascleanúna leathnaithe .navbar-scrolla shocrú max-heightagus a scrollú .

Seo sampla de na fo-chomhpháirteanna go léir atá san áireamh i mbarra nascleanúna sofhreagrach ar théama solais a thiteann go huathoibríoch ag an lgbrisphointe (mór).

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>

Úsáideann an sampla seo ranganna fóntais cúlra ( bg-light) agus spásáil ( me-auto, mb-2, mb-lg-0, ).me-2

Branda

Is .navbar-brandféidir iad a chur i bhfeidhm ar fhormhór na n-eilimintí, ach is fearr a oibríonn ancaire, mar go bhféadfadh ranganna fóntais nó stíleanna saincheaptha a bheith ag teastáil ó roinnt eilimintí.

Téacs

Cuir do théacs laistigh d’eilimint leis an .navbar-brandrang.

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>

Íomha

Is féidir leat an téacs a chur in ionad an téacs .navbar-brandle <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>

Íomhá agus téacs

Is féidir leat úsáid a bhaint as roinnt fóntais bhreise freisin chun íomhá agus téacs a chur leis ag an am céanna. Tabhair faoi deara an suimiú .d-inline-blockagus .align-text-topar an <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>

Tógann naisc nascleanúna Navbar ar ár .navroghanna lena n-aicme mionathraithe féin agus éilíonn siad úsáid a bhaint as ranganna scorán le haghaidh stíliú sofhreagrach cuí. Fásfaidh an loingseoireacht sna barraí nascleanúna freisin chun an oiread spáis cothrománach agus is féidir a áitiú chun ábhar do bharra nascleanúna a choinneáil ailínithe go daingean.

Cuir an .activerang ar aghaidh .nav-linkchun an leathanach reatha a chur in iúl.

Tabhair faoi deara le do thoil gur chóir duit an aria-currenttréith a chur leis an ngníomh .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>

Agus toisc go n-úsáideann muid ranganna le haghaidh ár n-seolta, is féidir leat an cur chuige liosta-bhunaithe a sheachaint go hiomlán más mian leat.

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>

Is féidir leat anuas a úsáid i do bharra nascleanúna freisin. Teastaíonn eilimint fillte ó bhiachláir anuas le haghaidh suímh, mar sin bí cinnte úsáid a bhaint as eilimintí ar leith agus neadaithe le haghaidh .nav-itemagus .nav-linkmar a thaispeántar thíos.

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>

Foirmeacha

Cuir rialtáin foirmeacha éagsúla agus comhpháirteanna laistigh de bharra nascleanúna:

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>

Leanbh láithreach gnéithe den .navbarúsáid a bhaint as leagan amach solúbtha agus déanfaidh sé réamhshocraithe justify-content: space-between. Bain úsáid as fóntais flex bhreise de réir mar is gá chun an t-iompar seo a choigeartú.

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>

Oibríonn grúpaí ionchuir freisin. Más foirm iomlán é do bharra nascleanúna, nó foirm den chuid is mó, is féidir leat an <form>eilimint a úsáid mar choimeádán agus roinnt HTML a shábháil.

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>

Tacaítear le cnaipí éagsúla mar chuid de na foirmeacha nascleanúna seo freisin. Is meabhrúchán iontach é seo freisin gur féidir fóntais ailíniú ingearach a úsáid chun eilimintí de mhéideanna éagsúla a ailíniú.

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>

Téacs

Is féidir píosaí téacs a bheith i mbarraí nascleanúna le cabhair ó .navbar-text. Coigeartaíonn an rang seo ailíniú ingearach agus spásáil chothrománach le haghaidh teaghráin téacs.

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

Measc agus meaitseáil le comhpháirteanna agus fóntais eile de réir mar is gá.

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>

Scéimeanna datha

Nua in v5.2.0: Tá téamaí Navbar á gcumhachtú anois ag athróga CSS agus .navbar-lighttá sé imithe i léig. Cuirtear athróga CSS i bhfeidhm ar .navbar, réamhshocraithe don chuma “éadrom”, agus is féidir iad a shárú le .navbar-dark.

Tá téamaí Navbar níos éasca ná riamh a bhuíochas le teaglaim Bootstrap d’athróga Sass agus CSS. Is é an réamhshocrú ár “navbar éadrom” le húsáid le dathanna cúlra éadrom, ach is féidir leat iarratas a dhéanamh freisin .navbar-darkar dathanna cúlra dorcha. Ansin, shaincheapadh le .bg-*fóntais.

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

Coimeádáin

Cé nach bhfuil sé ag teastáil, is féidir leat barra nascleanúna a fhilleadh ar leathanach .containerchun é a lárú – ach tabhair faoi deara go bhfuil coimeádán istigh fós ag teastáil. Nó is féidir leat coimeádán a chur taobh istigh den .navbarchun an t-ábhar atá i mbarra navbarra seasta nó statach a lárú amháin .

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>

Úsáid aon cheann de na coimeádáin sofhreagracha chun leithead an ábhair i do bharra nascleanúna a athrú.

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

Socrúchán

Bain úsáid as ár bhfóntais suímh chun barraí nascleanúna a chur i suíomhanna neamhstatacha. Roghnaigh ó seasta go barr, seasta go bun, greamaithe go dtí an barr (scrollaigh leis an leathanach go dtí go sroicheann sé an barr, fanann ansin ann), nó stickied go bun (scrollaigh leis an leathanach go dtí go sroicheann sé an bun, fanann ansin ann).

Úsáideann barraí nascleanúna seasta position: fixed, rud a chiallaíonn go bhfuil siad tarraingthe ó ghnáthshreabhadh an DOM agus d'fhéadfadh go mbeadh CSS saincheaptha de dhíth orthu (m.sh., padding-topar an <body>) chun forluí le heilimintí eile a chosc.

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>

Scrollaigh

Cuir .navbar-nav-scrollle .navbar-nav(nó le fo-chomhpháirt an bharra nascleanúna eile) chun scrollú ingearach a chumasú laistigh d'inneachar inscorraithe de bharra nascleanúna tite. De réir réamhshocraithe, tosaíonn an scrollú ag 75vh(nó 75% d’airde an amhairc), ach is féidir é sin a shárú leis an maoin saincheaptha CSS áitiúil --bs-navbar-heightnó stíleanna saincheaptha. Ag poirt amhairc níos mó nuair a leathnófar an barra nascleanúna, beidh ábhar le feiceáil mar a dhéanann sé i mbarra nascleanúna réamhshocraithe.

Tabhair faoi deara le do thoil go bhfuil míbhuntáiste féideartha ag baint leis an iompar seo overflow--when setting overflow-y: auto(riachtanach chun an t-ábhar a scrollú anseo), overflow-xis ionann é agus auto, a bhéarfaidh roinnt ábhar cothrománach.

Seo sampla navbar ag baint úsáide as .navbar-nav-scrollle style="--bs-scroll-height: 100px;", le roinnt fóntais corrlaigh breise le haghaidh an spásáil is fearr.

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>

Iompar sofhreagrach

Is féidir le barraí nascleanúna .navbar-toggler, .navbar-collapse, agus .navbar-expand{-sm|-md|-lg|-xl|-xxl}ranganna a úsáid le fáil amach cén uair a thiteann a n-inneachar taobh thiar de chnaipe. I gcomhcheangal le fóntais eile, is féidir leat a roghnú go héasca cathain is ceart gnéithe áirithe a thaispeáint nó a cheilt.

Maidir le barraí nascleanúna nach dtiteann riamh, cuir an .navbar-expandrang ar an mbarra nascleanúna. Maidir le barraí nascleanúna a thiteann i gcónaí, ná cuir .navbar-expandrang ar bith leis.

Toggler

Tá scoránóirí Navbar ailínithe ar chlé de réir réamhshocraithe, ach má leanann siad eilimint dearthár cosúil le .navbar-brand, déanfar iad a ailíniú go huathoibríoch leis an bhfad ar dheis. Má dhéantar do mharcáil a aisiompú, déanfar socrúchán an scoránaigh a aisiompú. Seo thíos samplaí de stíleanna éagsúla scoránaigh.

Gan aon .navbar-brandtaispeáint ag an brisphointe is lú:

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>

Le hainm branda léirithe ar chlé agus scoránóir ar dheis:

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>

Le scoránóir ar chlé agus ainm branda ar dheis:

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>

Ábhar seachtrach

Uaireanta is mian leat an breiseán collapse a úsáid chun eilimint coimeádán a spreagadh le haghaidh ábhar a shuíonn go struchtúrach lasmuigh den .navbar. Toisc go n-oibríonn ár mbreiseán ar an idagus data-bs-targetmeaitseáil, is furasta é sin a dhéanamh!

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>

Nuair a dhéanann tú é seo, molaimid JavaScript breise a chur san áireamh chun an fócas a bhogadh go ríomhchláraithe chuig an gcoimeádán nuair a osclaítear é. Seachas sin, is dócha go mbeidh deacracht ag úsáideoirí méarchláir agus úsáideoirí teicneolaíochtaí cúnta an t-ábhar nua-nochta a aimsiú - go háirithe má thagann an coimeádán a osclaíodh roimh an scorán i struchtúr an doiciméid. Molaimid freisin a chinntiú go bhfuil an tréith ag an scoránóir aria-controls, ag díriú ar idan gcoimeádán ábhair. Go teoiriciúil, ligeann sé seo d’úsáideoirí na teicneolaíochta cúnta léim go díreach ón scoradán go dtí an coimeádán a rialaíonn sé – ach tá an tacaíocht dó seo sách achrannach faoi láthair.

Lasmuigh den chanbhás

Trasfhoirmigh do bharra nascleanúna atá ag dul i méid agus ag titim isteach i drawer lasmuigh den chanbhás leis an gcomhpháirt seachbhabháis . Leathnaímid an dá stíleanna réamhshocraithe offcanvas agus úsáidimid ár .navbar-expand-*ranganna chun barra taoibh loingseoireachta dinimiciúil agus solúbtha a chruthú.

.navbar-expand-*Sa sampla thíos, fág an rang ar fad ar lár chun barra nascleanúna lasmuigh den chanbhás a chruthú a thiteann i gcónaí trasna gach brisphointe .

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>

Chun barra nascleanúna lasmuigh den chanbhás a chruthú a leathnaíonn isteach i ngnáthbharra nascleanúna ag brisphointe ar leith cosúil le lg, úsáid .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>

Agus offcanvas á n-úsáid i mbarra nascleanúna dorcha, tabhair faoi deara go mb’fhéidir go mbeadh ort cúlra dorcha a bheith agat ar ábhar an chanbhás ionas nach mbeidh an téacs doléite. Sa sampla thíos, cuirimid .navbar-darkagus .bg-darkleis an .navbar, .text-bg-darkleis an , leis an .offcanvas, .dropdown-menu-darkgo .dropdown-menu, agus .btn-close-whitele .btn-closehaghaidh styling cuí le seachchanbhás dorcha.

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

Athróga

Curtha leis in v5.2.0

Mar chuid de chur chuige athróg CSS Bootstrap atá ag teacht chun cinn, úsáideann barraí nascleanúna athróga áitiúla CSS anois le .navbarhaghaidh saincheaptha feabhsaithe fíor-ama. Socraítear luachanna na n-athróg CSS trí Sass, mar sin tacaítear le saincheaptha Sass fós freisin.

  --#{$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};

Tá roinnt athróg CSS breise i láthair freisin 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);

Is féidir saincheapadh trí athróga CSS a fheiceáil ar an .navbar-darkrang ina sáraítear luachanna sonracha gan roghnóirí CSS dúblacha a chur leis.

  --#{$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)};

Athróga Sass

Athróga do gach barra nascleanúna:

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

Athróga le haghaidh an barra nascleanúna dorcha :

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

Lúb Sass

Comhcheanglaítear ranganna forleathnúcháin/laghdaithe (m.sh., .navbar-expand-lg) leis an $breakpointsléarscáil agus gintear iad trí lúb i 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;
          }
        }
      }
    }
  }
}