Source

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.

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}haghaidh titim fhreagrach agus ranganna scéime dathanna .
  • Tá na barraí nascleanúna agus a bhfuil iontu sreabhán de réir réamhshocraithe. Bain úsáid as coimeádáin roghnacha chun a leithead cothrománach a theorannú.
  • 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.
  • Cuirtear barraí nascleanúna i bhfolach de réir réamhshocraithe agus iad á bpriontáil. Cuir iallach iad a phriontáil ach iad a chur .d-printleis an .navbar. Féach ar an rang fóntais taispeána .
  • 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.

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 .

Léigh ar aghaidh le haghaidh sampla agus liosta de na fo-chomhpháirteanna tacaithe.

Á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.
  • .form-inlinemaidir le haon chineál rialuithe agus gníomhartha.
  • .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.

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

Úsáideann an sampla seo dathanna ( bg-light) agus spásáil ( my-2, my-lg-0, mr-sm-0, my-sm-0) ranganna áirgiúlachta.

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

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

.navbar-brandIs dócha go mbeidh stíleanna nó fóntais saincheaptha de dhíth chun méid ceart a chur le híomhánna . Seo roinnt samplaí le léiriú.

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

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ánaigh 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.

Is féidir stáit ghníomhacha — le .active—a chur in iúl gur féidir an leathanach reatha a chur i bhfeidhm go díreach ar .nav-links nó ar a neastuismitheoirí .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>

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

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

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

Foirmeacha

Cuir rialtáin foirmeacha éagsúla agus comhpháirteanna laistigh de bharra nascleanúna le .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>

Gnéithe leanaí láithreach in .navbarúsáid leagan amach solúbtha agus beidh réamhshocraithe go justify-content: space-between. Bain úsáid as fóntais flex breise de réir mar is gá chun an t-iompar seo a choigeartú.

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

Oibríonn grúpaí ionchuir freisin:

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

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

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">
  <span class="navbar-text">
    Navbar text with an inline element
  </span>
</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">
  <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>

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 in a .containerchun é a lárú ar leathanach nó ceann a chur leis chun a bhfuil i mbarra navbarra seasta nó statach a lárú amháin .

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

Nuair atá an coimeádán laistigh de do bharra nascleanúna, baintear a stuáil chothrománach ag brisphointí níos ísle ná do .navbar-expand{-sm|-md|-lg|-xl}rang sonraithe. Cinntíonn sé seo nach bhfuilimid ag dúbailt ar an stuáil gan ghá ar phoirt amhairc níos ísle nuair a thiteann do bharra nascleanúna.

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

Iompar sofhreagrach

Is féidir le barraí nascleanúna úsáid a bhaint as .navbar-toggler, .navbar-collapse, agus .navbar-expand{-sm|-md|-lg|-xl}ranganna le hathrú nuair 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ántar sa bhriseadhphointe is ísle:

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

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

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

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

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

Ábhar seachtrach

Uaireanta is mian leat an breiseán collapse a úsáid chun ábhar i bhfolach a spreagadh áit eile ar an leathanach. Toisc go n-oibríonn ár mbreiseán ar an idagus data-targetmeaitseáil, is furasta é sin a dhéanamh!

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