in English

Navbar

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

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.

Tha buaidh beothalachd na co-phàirt seo an urra ri prefers-reduced-motionceist nam meadhanan. Faic an earrann gluasad lùghdaichte de na sgrìobhainnean ruigsinneachd againn .

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="#" role="button" data-toggle="dropdown" aria-expanded="false">
          Dropdown
        </a>
        <div class="dropdown-menu">
          <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">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.6/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.6/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">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-link active" href="#">Home <span class="sr-only">(current)</span></a>
      <a class="nav-link" href="#">Features</a>
      <a class="nav-link" href="#">Pricing</a>
      <a class="nav-link disabled">Disabled</a>
    </div>
  </div>
</nav>

Faodaidh tu cuideachd dropdowns a chleachdadh anns a’ bhàr seòlaidh 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="#" role="button" data-toggle="dropdown" aria-expanded="false">
          Dropdown link
        </a>
        <div class="dropdown-menu">
          <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>

Bidh clann sa bhad a’ .navbarcleachdadh cruth sùbailte agus bidh iad bunaiteach gu justify-content: space-between. Cleachd goireasan sùbailte a bharrachd mar a dh’ fheumar gus an giùlan seo atharrachadh.

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

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-seòlaidh a phasgadh ann an a .containergus a mheadhan air duilleag. No faodaidh tu soitheach a chuir a-steach .navbardon ionad gus susbaint bàr-seòlaidh mullach stèidhichte no statach a-mhàin .

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

Sgrolaich

Cuir .navbar-nav-scrollri .navbar-collapse(no fo-phàirt navbar eile) gus scrollaidh dìreach a chomasachadh taobh a-staigh susbaint toggle ann am bàr-seòlaidh a thuit. Gu gnàthach, bidh scrollaidh a’ tòiseachadh aig 75vh(no 75% de dh’ àirde an t-seallaidh), ach faodaidh tu sin a thoirt thairis le stoidhlichean in-loidhne no àbhaisteach. Aig puirt-seallaidh nas motha nuair a thèid am bàr seòlaidh a leudachadh, nochdaidh susbaint mar a tha e ann am bàr seòlaidh bunaiteach.

Thoir an aire gu bheil an giùlan seo a’ tighinn le tarraing air ais a dh’ fhaodadh a bhith ann - nuair a tha overflowsuidheachadh overflow-y: auto(feumar an susbaint a sgrùdadh an seo), overflow-xco-ionann ri auto, a bheir bàrr air susbaint chòmhnard.

Seo eisimpleir navbar a’ cleachdadh .navbar-nav-scrollle style="max-height: 100px;", le cuid de ghoireasan iomaill a bharrachd airson am farsaingeachd as fheàrr.

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar scroll</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-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 mr-auto my-2 my-lg-0 navbar-nav-scroll" style="max-height: 100px;">
      <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="#" role="button" data-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">
      <input class="form-control mr-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success" type="submit">Search</button>
    </form>
  </div>
</nav>

Giùlan freagairteach

Faodaidh Navbars .navbar-toggler, .navbar-collapse, agus .navbar-expand{-sm|-md|-lg|-xl}clasaichean a chleachdadh gus faighinn a-mach cuin 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 aig an ìre briseadh as lugha:

<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">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">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">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 eileamaid soithich a bhrosnachadh airson susbaint a tha gu structarail na shuidhe taobh a-muigh an fhaidhle .navbar. Leis gu bheil am plugan againn ag obair air idagus a’ data-targetmaidseadh, tha sin furasta a dhèanamh!

Susbaint air a dhol sìos

Faodar a ghluasad tro bhrand navbar.

<div class="fixed-top">
  <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>

Nuair a nì thu seo, tha sinn a’ moladh JavaScript a bharrachd a thoirt a-steach gus am fòcas a ghluasad gu prògramach chun ghobhar nuair a thèid fhosgladh. Rud eile, tha coltas ann gum bi ùine chruaidh aig luchd-cleachdaidh meur-chlàr agus luchd-cleachdaidh theicneòlasan cuideachaidh an t-susbaint ùr fhoillseachadh - gu sònraichte ma thig an soitheach a chaidh fhosgladh ron toggler ann an structar na sgrìobhainn. Tha sinn cuideachd a’ moladh dèanamh cinnteach gu bheil aria-controlsbuadhan aig an toggler, a’ comharrachadh meud an idt-soithich susbaint. Ann an teòiridh, leigidh seo le luchd-cleachdaidh teicneòlas cuideachaidh leum gu dìreach bhon toggler chun inneal a tha e a’ cumail smachd - ach tha taic airson seo gu math neo-chunbhalach an-dràsta.