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, 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 ranganna spásála agus fleisc - áiseanna 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.

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

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

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

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.

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

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

Íomha

Is féidir leat an téacs a chur in ionad an téacs .navbar-brandle <img>.

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

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

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

Nav

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.

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

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.

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

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.

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

Foirmeacha

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

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

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

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

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.

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

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

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

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.

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

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

Scéimeanna datha

Ní raibh sé riamh níos éasca an barra nascleanúna a théamh a bhuíochas leis an meascán de ranganna téamaí agus background-colorfóntais. Roghnaigh ó .navbar-lightlena n-úsáid le dathanna cúlra éadrom, nó .navbar-darkle haghaidh 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 navbar-light" 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 .

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

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

<nav class="navbar navbar-expand-lg navbar-light 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, nó greamaithe go dtí an barr (scrollaigh leis an leathanach go dtí go sroicheann sé an barr, 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.

Tabhair faoi deara freisin go n- .sticky-topúsáideann position: sticky, nach bhfuil tacaíocht iomlán i ngach brabhsálaí .

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

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

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

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

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.

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

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

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

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

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

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

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

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

Collapsed content

Toggleable via the navbar brand.

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

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 mbreiseán offcanvas. 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 .

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

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

Sass

Athróga

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

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

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

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

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

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

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

Lúb

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: $navbar-nav-link-padding-x;
            padding-left: $navbar-nav-link-padding-x;
          }
        }

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

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

        .navbar-toggler {
          display: none;
        }

        .offcanvas-header {
          display: none;
        }

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

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