Source

Navbar

Sgrìobhainnean agus eisimpleirean airson bann-cinn seòlaidh cumhachdach, freagairteach Bootstrap, an navbar. A’ toirt a-steach taic airson branndadh, seòladh, agus barrachd, a’ toirt a-steach taic don plugan tuiteam againn.

Mar a tha e ag obair

Seo na dh’ fheumas tu a bhith eòlach mus tòisich thu leis a’ bhàr nav:

Feumaidh navbars còmhdach .navbarle .navbar-expand{-sm|-md|-lg|-xl}airson tuiteam freagairteach agus clasaichean sgeama dathan .
Tha navbars agus an susbaint siùbhlach gu bunaiteach. Cleachd soithichean roghainneil gus an leud còmhnard a chuingealachadh.
Cleachd na clasaichean farsaingeachd agus goireas sùbailte againn airson smachd a chumail air farsaingeachd agus co-thaobhadh taobh a-staigh na bàraichean seòlaidh.
Tha navbars freagairteach gu bunaiteach, ach is urrainn dhut an atharrachadh gu furasta gus sin atharrachadh. Tha giùlan ciallach an urra ris a’ plugan Collapse JavaScript againn.
Tha navbars falaichte gu bunaiteach nuair a bhios iad a’ clò-bhualadh. Thoir air an clò-bhualadh le bhith gan cur .d-printris an .navbar. Faic an clas goireas taisbeanaidh .
Dèan cinnteach gum bi ruigsinneachd ann le bhith a’ cleachdadh <nav>eileamaid no, ma tha thu a’ cleachdadh eileamaid nas gnèitheach leithid <div>, cuir a ris role="navigation"a h-uile bàr seòlaidh gus a chomharrachadh gu soilleir mar sgìre shònraichte airson luchd-cleachdaidh teicneòlasan cuideachaidh.

Leugh air adhart airson eisimpleir agus liosta de na fo-phàirtean le taic.

Susbaint le taic

Bidh Navbars a’ tighinn le taic togte airson dòrlach de fo-phàirtean. Tagh bho na leanas mar a dh 'fheumar:

.navbar-brandairson do chompanaidh, toradh no ainm pròiseict.
.navbar-navairson seòladh làn-àirde agus aotrom (a’ toirt a-steach taic airson dropdowns).
.navbar-togglerairson a chleachdadh leis a’ plugan tuiteam againn agus giùlan toggling seòlaidh eile.
.form-inlineairson smachdan agus gnìomhan cruth sam bith.
.navbar-textairson sreathan teacsa le fòcas dìreach a chur ris.
.collapse.navbar-collapseairson a bhith a’ cruinneachadh agus a’ falach susbaint navbar le briseadh pàrant.

Seo eisimpleir de na fo-phàirtean gu lèir a tha air an toirt a-steach do bhàr seòlaidh freagairteach le cuspair solais a thuiteas gu fèin-ghluasadach aig an lgàite brisidh (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="#">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>

Bidh an eisimpleir seo a’ cleachdadh dathan ( bg-light) agus farsaingeachd ( my-2, my-lg-0, mr-sm-0, my-sm-0) clasaichean goireis.

Brand

Faodar .navbar-brandan cur an sàs anns a’ mhòr-chuid de na h-eileamaidean, ach tha acair ag obair as fheàrr oir is dòcha gu feum cuid de na h-eileamaidean clasaichean goireis no stoidhlichean àbhaisteach.

<!-- 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-brandTha e coltach gum bi feum an-còmhnaidh air stoidhlichean àbhaisteach no goireasan airson meud ceart a chuir ri ìomhaighean . Seo eisimpleirean airson sealltainn.

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

Nav

Bidh ceanglaichean seòlaidh Navbar a’ togail air na .navroghainnean againn leis a’ chlas atharrachaidh aca fhèin agus feumaidh iad clasaichean toggler a chleachdadh airson stoidhle freagairteach ceart. Bidh seòladh ann am bàraichean seòlaidh cuideachd a’ fàs gus a bhith a’ gabhail thairis na h-uimhir de dh’ àite còmhnard ’s as urrainn gus susbaint do bhàr-seòlaidh a chumail ceangailte gu tèarainte.

Stàitean gnìomhach - le .active- gus sealltainn gum faodar an duilleag gnàthach a chuir gu dìreach ri .nav-links no am pàrantan dlùth .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="#">Disabled</a>
      </li>
    </ul>
  </div>
</nav>

Agus leis gu bheil sinn a’ cleachdadh chlasaichean airson ar seòladairean, faodaidh tu an dòigh-obrach stèidhichte air liosta a sheachnadh gu tur ma thogras tu.

<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="#">Disabled</a>
    </div>
  </div>
</nav>

Faodaidh tu cuideachd dropdowns a chleachdadh anns an navbar nav agad. Feumaidh clàir tuiteam-sìos eileamaid còmhdaich airson a shuidheachadh, mar sin bi cinnteach gun cleachd thu eileamaidean fa leth agus neadachaidh airson .nav-itemagus .nav-linkmar a chithear gu h-ìosal.

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

Foirmean

Cuir diofar smachdan cruth agus co-phàirtean taobh a-staigh bàr nav 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>

Co-thaobhadh susbaint na foirmean in-loidhne agad le goireasan mar a dh’ fheumar.

<nav class="navbar navbar-light bg-light justify-content-between">
  <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>

Bidh buidhnean cuir a-steach ag obair cuideachd:

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

Tha grunn phutanan a’ faighinn taic mar phàirt de na foirmean navbar sin cuideachd. Tha seo cuideachd na dheagh chuimhneachan gum faodar goireasan co-thaobhadh dìreach a chleachdadh gus eileamaidean de dhiofar mheudan a cho-thaobhadh.

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

Teacs

Faodaidh pìosan teacsa a bhith ann an Navbars le cuideachadh bho .navbar-text. Bidh an clas seo ag atharrachadh co-thaobhadh dìreach agus farsaingeachd chòmhnard airson sreathan teacsa.

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

Measgaich agus maids le co-phàirtean agus goireasan eile mar a dh’ fheumar.

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

Sgeama dathan

Cha robh e a-riamh cho furasta a bhith ag obair air a’ bhàr nav le taing don mheasgachadh de chlasaichean cuspaireil agus background-colorgoireasan. Tagh bho .navbar-lightairson a chleachdadh le dathan cùl-raon aotrom, no .navbar-darkairson dathan cùl-raoin dorcha. An uairsin, gnàthaich le .bg-*goireasan.

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

Gabhadairean

Ged nach eil feum air, faodaidh tu bàr nav a phasgadh ann an a .containergus a mheadhan air duilleag no fear a chuir a-staigh gus dìreach na tha ann am bàr-seòlaidh mullach stèidhichte no statach a chuir sa mheadhan .

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

Nuair a tha an soitheach taobh a-staigh do bhàr-seòlaidh, thèid am pleadhag chòmhnard a thoirt air falbh aig puingean brisidh nas ìsle na an .navbar-expand{-sm|-md|-lg|-xl}clas ainmichte agad. Bidh seo a’ dèanamh cinnteach nach bi sinn a’ dùblachadh pleadhadh gun fheum air puirt-seallaidh nas ìsle nuair a thuiteas am bàr seòlaidh agad.

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

Suidheachadh

Cleachd na goireasan suidheachaidh againn gus navbars a chuir ann an suidheachaidhean neo-statach. Tagh bho bhith stèidhichte gu mullach, stèidhichte aig a’ bhonn, no steigte chun mhullach (sgrolaich leis an duilleag gus an ruig e am mullach, an uairsin fuirich ann). Bidh navbars stèidhichte a’ cleachdadh position: fixed, a’ ciallachadh gu bheil iad air an tarraing bho shruth àbhaisteach an DOM agus is dòcha gu feum iad CSS àbhaisteach (me, padding-topair an <body>) gus casg a chuir air tar-tharraing le eileamaidean eile.

Thoir an aire cuideachd gu bheil .sticky-topcleachdadh position: sticky, nach eil a’ faighinn làn thaic anns a h-uile brobhsair .

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

Giùlan freagairteach

Faodaidh Navbars .navbar-toggler, .navbar-collapse, agus .navbar-expand{-sm|-md|-lg|-xl}clasaichean a chleachdadh gus atharrachadh nuair a thuiteas an susbaint aca air cùl putan. Còmhla ri goireasan eile, faodaidh tu gu furasta taghadh cuin a sheallas tu no a chuireas tu am falach eileamaidean sònraichte.

Airson navbars nach tuit gu bràth, cuir a’ .navbar-expandchlas air a’ bhàr nav. Airson navbars a bhios an-còmhnaidh a 'tuiteam, na cuir .navbar-expandclas sam bith ris.

Togbhail

Tha toglaichean Navbar air an co-thaobhadh ris an taobh chlì a ghnàth, ach ma leanas iad eileamaid sibling mar a .navbar-brand, bidh iad gu fèin-obrachail air an co-thaobhadh ris an fhìor làimh dheis. Ma chuireas tu do chomharradh air ais cuiridh sin cùl ri suidheachadh an toggler. Gu h-ìosal tha eisimpleirean de dhiofar stoidhlichean toggle.

Gun a bhith .navbar-brandair a shealltainn anns a 'phuing briseadh as ì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="#">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 ainm branda air an taobh chlì agus toggler air an làimh 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="#">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 toggler air an taobh chlì agus ainm branda air an làimh 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="#">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>

Susbaint bhon taobh a-muigh

Aig amannan bidh thu airson am plugan tuiteam a chleachdadh gus susbaint falaichte a bhrosnachadh ann an àiteachan eile air an duilleag. Leis gu bheil am plugan againn ag obair air idagus a’ data-targetmaidseadh, tha sin furasta a dhèanamh!

Collapsed content

Toggleable via the navbar brand.

<div class="pos-f-t">
  <div class="collapse" id="navbarToggleExternalContent">
    <div class="bg-dark p-4">
      <h4 class="text-white">Collapsed content</h4>
      <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>