in English

Navbar

Nga tuhinga me nga tauira mo te pane whakaterenga kaha a Bootstrap, te pae whakaterenga. Kei roto ko te tautoko mo te waitohu, te whakatere, me etahi atu, tae atu ki te tautoko mo to tatou mono tiango.

I tenei wharangi

Pehea te mahi

Anei nga mea e tika ana kia mohio koe i mua i te tiimata i te pae whakatere:

Ko nga Navbars e hiahia ana ki te takai .navbarme nga karaehe kaupapa.navbar-expand{-sm|-md|-lg|-xl|-xxl} tiango aro me nga karaehe.
Navbars me o ratou ihirangi he wai ma te taunoa. Hurihia te ipu hei whakawhāiti i te whanui whakapae ma nga huarahi rereke.
Whakamahia a maatau akomanga whaipainga mokowhiti me te ngawari mo te whakahaere i te mokowā me te tirohanga i roto i nga pae whakatere.
Ko nga Navbars he whakautu taunoa, engari ka taea e koe te whakarereke i a raatau ki te whakarereke i tera. Ko te whanonga urupare kei runga i ta maatau mono Tiango JavaScript.
Whakaritea te urunga ma te whakamahi i tetahi <nav>huānga, ki te whakamahi ranei i tetahi huānga nui ake penei i te <div>, taapirihia he role="navigation"ki ia pae whakatere kia tino mohio ai hei rohe tohu whenua mo nga kaiwhakamahi hangarau awhina.
Tohua te tuemi o naianei ma te whakamahi aria-current="page"mo te wharangi o naianei, aria-current="true"mo te taonga o naianei ranei i roto i te huinga.
Hou i roto i te v5.2.0: Navbars Ka taea te hanga kaupapa ki nga taurangi CSS e horahia ana ki te .navbarakomanga turanga. .navbar-lightkua whakakorehia, .navbar-darkkua tuhia ano ki te whakakore i nga taurangi CSS hei utu mo te taapiri i etahi atu momo.

Ko te awe hākoritanga o tēnei wāhanga e whakawhirinaki ana ki te prefers-reduced-motionuiui pāpāho. Tirohia te waahanga motini whakaheke o a maatau tuhinga whakaurunga .

Ihirangi tautoko

Ka tae mai nga Navbars me te tautoko i hangaia mo etahi waahanga iti. Whiriwhiria mai i nga mea e whai ake nei ina hiahiatia:

.navbar-brandmo to kamupene, hua, ingoa kaupapa ranei.
.navbar-navmo te whakaterenga teitei me te maamaa (tae atu ki te tautoko mo nga takaiho).
.navbar-togglerhei whakamahi me to tatou mono tiango me etahi atu whanonga takahuri whakatere .
Nga taputapu whakaheke me te mokowhiti mo nga momo mana me nga mahi.
.navbar-textmo te taapiri i nga aho poutū o te kuputuhi.
.collapse.navbar-collapsemo te whakarōpū me te huna i nga ihirangi pae whakatere ma te waahi wehenga matua.
Tāpirihia he kōwhiringa .navbar-scrollki te tautuhi max-heightme te panuku i te ihirangi pae whakatere kua whakawhānuihia .

Anei he tauira o nga waahanga-iti katoa kei roto i te pae whakaterenga-a-marama ka tiango aunoa i te lgwaahi (nui).

html

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

Ka whakamahia e tenei tauira nga papamuri ( bg-light) me te mokowhiti ( me-auto, mb-2, mb-lg-0, me-2) akomanga whaipainga.

Waitohu

Ka .navbar-brandtaea te tono ki te nuinga o nga huānga, engari he pai te mahi o te punga, na te mea ka hiahia etahi o nga huānga ki nga karaehe whaipainga, ki nga momo ritenga ranei.

Kuputuhi

Tāpirihia to kuputuhi ki roto i tetahi huānga me te .navbar-brandakomanga.

html

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

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

Whakaahua

Ka taea e koe te whakakapi i te kuputuhi i roto i te .navbar-brandki te <img>.

html

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

Whakaahua me te tuhinga

Ka taea hoki e koe te whakamahi i etahi taputapu taapiri hei taapiri i tetahi ahua me te tuhinga i te wa ano. Tuhia te taapiri o te .d-inline-blockme .align-text-toprunga i te <img>.

html

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

Nav

Ko nga hononga whakatere Navbar e hanga ana i runga i o maatau .navwhiringa me o raatau ake karaehe whakarereke, me te whakamahi i nga karaehe takahuri mo te whakaahua tika. Ka tipu ano te whakaterenga i roto i nga pae whakatere ki te noho i te mokowā whakapae kia noho tika ai to ihirangi pae whakatere.

Tāpirihia te .activeakomanga .nav-linkhei tohu i te wharangi o naianei.

Kia mahara me taapiri ano te aria-currenthuanga ki te hohe .nav-link.

html

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

A, na te mea ka whakamahia e matou nga karaehe mo o maatau whakatere, ka taea e koe te karo i te huarahi e pa ana ki te raarangi mena ka pai koe.

html

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

Ka taea hoki e koe te whakamahi i nga takaiho i to pae whakatere. Ko nga tahua takaiho e hiahia ana he huānga takai mo te tuunga, no reira kia mohio koe ki te whakamahi i nga huānga motuhake me te kohanga mo .nav-item, .nav-linkme te whakaatu i raro nei.

html

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

Puka

Whakanohoia nga momo mana me nga waahanga ki roto i te pae whakatere:

html

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

Ko nga huānga tamariki tonu o te .navbarwhakamahi tahora ngawari ka taunoa ki justify-content: space-between. Whakamahia etahi atu taputapu ngawari ina hiahiatia hei whakatika i tenei whanonga.

html

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

Ka mahi ano nga roopu whakauru. Mena he ahua katoa to pae whakatere, he puka te nuinga ranei, ka taea e koe te whakamahi i te <form>huānga hei ipu me te tiaki i etahi HTML.

html

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

He maha nga patene e tautokohia ana hei waahanga o enei puka navbar. He whakamaumahara pai tenei ka taea te whakamahi i nga taputapu tirohanga poutū ki te whakahāngai i nga huānga o te rahi.

html

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

Kuputuhi

Kei roto pea i nga Navbars etahi moka kuputuhi me te awhina o .navbar-text. Ka whakatikahia e tenei akomanga te tirohanga poutū me te mokowhiti whakapae mo nga aho o te kuputuhi.

html

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

Whakaranuhia me te whakakotahi ki etahi atu waahanga me nga taputapu ka hiahiatia.

html

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

Kaupapa tae

Hou i roto i te v5.2.0: Ko te kaupapa Navbar kua whakakahangia e nga taurangi CSS, .navbar-lightkua whakakorehia. Ka whakamahia nga taurangi CSS ki te .navbar, ka taunoa ki te ahua "marama", ka taea te whakakore ki te .navbar-dark.

He maamaa ake nga kaupapa Navbar na te whakakotahitanga a Bootstrap o nga taurangi Sass me CSS. Ko te taunoa ko to tatou "marama navbar" mo te whakamahi me nga tae papamuri marama, engari ka taea ano e koe te tono .navbar-darkmo nga tae papamuri pouri. Na, whakarite me nga .bg-*taputapu.

<nav class="navbar navbar-dark bg-dark">
  <!-- Navbar content -->
</nav>

<nav class="navbar navbar-dark bg-primary">
  <!-- Navbar content -->
</nav>

<nav class="navbar" style="background-color: #e3f2fd;">
  <!-- Navbar content -->
</nav>

Nga ipu

Ahakoa karekau e hiahiatia, ka taea e koe te takai i te pae whakatere ki roto .containeri tetahi wharangi kia whakakotahitia ki te wharangi–ahakoa me mahara tonu kei te hiahiatia he ipu o roto. Ka taea ranei e koe te taapiri i tetahi ipu ki roto .navbarki te whakauru noa i nga ihirangi o te pae whakaterenga o runga pumau ranei .

html

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

Whakamahia tetahi o nga ipu aro ki te whakarereke i te whanui o nga ihirangi kei roto i to pae whakatere.

html

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

Whakanoho

Whakamahia a maatau taputapu tuunga hei tuu i nga pae whakatere ki nga waahi kore-pateko. Kōwhiria mai i te pūmau ki runga, ka mau ki raro, ka piri ki runga (panuku me te wharangi kia eke ki runga, ka noho ki reira), ka piri ranei ki raro (panuku me te wharangi kia tae ki raro, ka noho i reira).

Ka whakamahia e nga navbars position: fixed, te tikanga ka toia mai i te rere noa o te DOM me te hiahia CSS ritenga (hei tauira, padding-topi runga i te <body>) kia kore ai e inaki ki etahi atu huānga.

html

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

html

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

html

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

html

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

html

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

Panuku

Tāpirihia .navbar-nav-scrollki tetahi .navbar-nav(tetahi atu waahanga-iti ranei) kia taea ai te panuku poutū i roto i nga ihirangi ka taea te takahuri o te pae whakaterenga kua tiango. Ma te taunoa, ka whana te panuku ki roto i te 75vh(75% ranei o te teitei tauranga tirohanga), engari ka taea e koe te whakakore i tera me nga rawa ritenga CSS rohe --bs-navbar-height, momo ritenga ranei. I nga tauranga tirohanga nui ake ina whakaroahia te paewhakatua, ka puta nga ihirangi penei i te pae whakaterenga taunoa.

Kia mahara ko tenei whanonga ka tae mai me te ngoikoretanga o te overflow—ka tautuhi overflow-y: auto(he mea tika kia panuku te ihirangi ki konei), overflow-xhe rite ki te auto, ka tapahia etahi ihirangi whakapae.

Anei tetahi tauira navbar e whakamahi ana .navbar-nav-scrollme te style="--bs-scroll-height: 100px;", me etahi taputapu taapiri taapiri mo te mokowhiti tino pai.

html

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

Nga whanonga urupare

Ka taea e nga Navbars te whakamahi i te .navbar-toggler, .navbar-collapse, me .navbar-expand{-sm|-md|-lg|-xl|-xxl}nga karaehe ki te whakatau i te wa e tiango ai o raatau ihirangi ki muri i te paatene. Ma te whakakotahi me etahi atu taputapu, ka taea e koe te whiriwhiri i te wa e whakaatu ai, e huna ana ranei i etahi waahanga.

Mo nga pae whakatere e kore e tiango, taapirihia te .navbar-expandkaraehe ki te pae whakatere. Mo nga pae whakatere ka tiango i nga wa katoa, kaua e taapirihia he .navbar-expandkaraehe.

Kaihurihuri

Ko nga kaihurihuri Navbar kua tiaro-maui ma te taunoa, engari mena ka whai ratou i tetahi huānga teina penei i te .navbar-brand, ka tiaaro aunoa ki te taha matau. Ma te whakahuri i to tohu ka whakataka te tuunga o te kaihurihuri. Kei raro nei nga tauira o nga momo takahuri rereke.

Ki te kore e .navbar-brandwhakaatuhia i te waahi pakaru iti rawa:

html

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

Me te ingoa tohu kei te taha maui me te takahuri kei te taha matau:

html

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

Me te takahuri kei te taha maui me te ingoa waitohu kei te taha matau:

html

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

Ihirangi o waho

I etahi wa ka hiahia koe ki te whakamahi i te mono tiango hei whakaoho i tetahi huānga ipu mo nga ihirangi e noho ana ki waho o te .navbar. Na te mea e mahi ana ta maatau mono i runga i te idme data-bs-targette taurite, he ngawari te mahi!

Ihirangi tiango

Ka taea te huri ma te tohu navbar.

html

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

Ina mahi koe i tenei, ka tūtohu kia whakaurua etahi atu JavaScript hei nuku i te arotahi ki te ipu ina whakatuwheratia. Ki te kore, ka uaua nga kaiwhakamahi papapātuhi me nga kaiwhakamahi hangarau awhina ki te rapu i nga ihirangi hou - ina koa ka tae mai te ipu i whakatuwherahia ki mua i te takahuri i te hanganga o te tuhinga. Ka tūtohu ano matou kia mohio kei te takahuri te aria-controlshuanga, tohu ki te ido te ipu ihirangi. I roto i te ariā, ma tenei ka taea e nga kaiwhakamahi hangarau awhina te peke tika mai i te takahuri ki te ipu e whakahaeretia ana e ia–engari ko te tautoko mo tenei he tino pahekeheke.

Kowekeweke

Hurihia to pae toronga e toro ana, e tiango ana ki roto i te pouaka taratara me te waahanga offcanvas . Ka whakawhānuihia e matou nga momo ahua taunoa o waho me te whakamahi i o maatau .navbar-expand-*karaehe ki te hanga i tetahi paetaha whakatere hihiri me te ngawari.

I roto i te tauira i raro nei, ki te hanga i tetahi pae whakaterenga o waho e tiango ana puta noa i nga waahi wehenga katoa, waiho .navbar-expand-*katoatia te karaehe.

html

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

Hei waihanga i te pae whakaterenga o waho ka toro atu ki roto i te pae whakaterenga noa i te waahi wehenga motuhake penei lg, whakamahia .navbar-expand-lg.

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

I te wa e whakamahi ana i te offcanvas i roto i te pae whakatere pouri, kia mohio koe ka hiahia koe ki te whai i te papamuri pouri i runga i te ihirangi offcanvas kia kore ai te tuhinga e kore e taea te panui. I roto i te tauira i raro nei, ka taapirihia e matou .navbar-darkme .bg-darkte .navbar, .text-bg-darkki te .offcanvas, .dropdown-menu-darkki te .dropdown-menu, me .btn-close-whitete ki .btn-closemo te hanga tika me te kanapa pouri.

html

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

CSS

Taurangi

Kua taapirihia ki te v5.2.0

Hei waahanga o te huarahi rerekee CSS a Bootstrap, ka whakamahia e nga navbars nga taurangi CSS a-rohe .navbarmo te whakapai ake i nga whakaritenga-waa. Ko nga uara mo nga taurangi CSS ka whakatauhia ma te Sass, no reira kei te tautoko tonu te whakaritenga Sass.

  --#{$prefix}navbar-padding-x: #{if($navbar-padding-x == null, 0, $navbar-padding-x)};
  --#{$prefix}navbar-padding-y: #{$navbar-padding-y};
  --#{$prefix}navbar-color: #{$navbar-light-color};
  --#{$prefix}navbar-hover-color: #{$navbar-light-hover-color};
  --#{$prefix}navbar-disabled-color: #{$navbar-light-disabled-color};
  --#{$prefix}navbar-active-color: #{$navbar-light-active-color};
  --#{$prefix}navbar-brand-padding-y: #{$navbar-brand-padding-y};
  --#{$prefix}navbar-brand-margin-end: #{$navbar-brand-margin-end};
  --#{$prefix}navbar-brand-font-size: #{$navbar-brand-font-size};
  --#{$prefix}navbar-brand-color: #{$navbar-light-brand-color};
  --#{$prefix}navbar-brand-hover-color: #{$navbar-light-brand-hover-color};
  --#{$prefix}navbar-nav-link-padding-x: #{$navbar-nav-link-padding-x};
  --#{$prefix}navbar-toggler-padding-y: #{$navbar-toggler-padding-y};
  --#{$prefix}navbar-toggler-padding-x: #{$navbar-toggler-padding-x};
  --#{$prefix}navbar-toggler-font-size: #{$navbar-toggler-font-size};
  --#{$prefix}navbar-toggler-icon-bg: #{escape-svg($navbar-light-toggler-icon-bg)};
  --#{$prefix}navbar-toggler-border-color: #{$navbar-light-toggler-border-color};
  --#{$prefix}navbar-toggler-border-radius: #{$navbar-toggler-border-radius};
  --#{$prefix}navbar-toggler-focus-width: #{$navbar-toggler-focus-width};
  --#{$prefix}navbar-toggler-transition: #{$navbar-toggler-transition};

Ko etahi atu taurangi CSS kei runga ano .navbar-nav:

  --#{$prefix}nav-link-padding-x: 0;
  --#{$prefix}nav-link-padding-y: #{$nav-link-padding-y};
  @include rfs($nav-link-font-size, --#{$prefix}nav-link-font-size);
  --#{$prefix}nav-link-font-weight: #{$nav-link-font-weight};
  --#{$prefix}nav-link-color: var(--#{$prefix}navbar-color);
  --#{$prefix}nav-link-hover-color: var(--#{$prefix}navbar-hover-color);
  --#{$prefix}nav-link-disabled-color: var(--#{$prefix}navbar-disabled-color);

Ka kitea te whakaritenga ma nga taurangi CSS i runga i te .navbar-darkkaraehe ka takahia e tatou nga uara motuhake me te kore e taapiri i nga kaiwhiriwhiri CSS takirua.

  --#{$prefix}navbar-color: #{$navbar-dark-color};
  --#{$prefix}navbar-hover-color: #{$navbar-dark-hover-color};
  --#{$prefix}navbar-disabled-color: #{$navbar-dark-disabled-color};
  --#{$prefix}navbar-active-color: #{$navbar-dark-active-color};
  --#{$prefix}navbar-brand-color: #{$navbar-dark-brand-color};
  --#{$prefix}navbar-brand-hover-color: #{$navbar-dark-brand-hover-color};
  --#{$prefix}navbar-toggler-border-color: #{$navbar-dark-toggler-border-color};
  --#{$prefix}navbar-toggler-icon-bg: #{escape-svg($navbar-dark-toggler-icon-bg)};

Taurangi Sass

Taurangi mo nga pae whakatere katoa:

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

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

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

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

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

Taurangi mo te pae whakatere pouri :

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

Sass loop

Ko nga karaehe whakawhänui/tiango arorangi (hei tauira, .navbar-expand-lg) ka honoa ki te $breakpointsmapi, ka hangaia ma te kopikopiko i scss/_navbar.scss.

// Generate series of `.navbar-expand-*` responsive classes for configuring
// where your navbar collapses.
.navbar-expand {
  @each $breakpoint in map-keys($grid-breakpoints) {
    $next: breakpoint-next($breakpoint, $grid-breakpoints);
    $infix: breakpoint-infix($next, $grid-breakpoints);

    // stylelint-disable-next-line scss/selector-no-union-class-name
    &#{$infix} {
      @include media-breakpoint-up($next) {
        flex-wrap: nowrap;
        justify-content: flex-start;

        .navbar-nav {
          flex-direction: row;

          .dropdown-menu {
            position: absolute;
          }

          .nav-link {
            padding-right: var(--#{$prefix}navbar-nav-link-padding-x);
            padding-left: var(--#{$prefix}navbar-nav-link-padding-x);
          }
        }

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

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

        .navbar-toggler {
          display: none;
        }

        .offcanvas {
          // stylelint-disable declaration-no-important
          position: static;
          z-index: auto;
          flex-grow: 1;
          width: auto !important;
          height: auto !important;
          visibility: visible !important;
          background-color: transparent !important;
          border: 0 !important;
          transform: none !important;
          @include box-shadow(none);
          @include transition(none);
          // stylelint-enable declaration-no-important

          .offcanvas-header {
            display: none;
          }

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