Source

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.

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} tiango aro me nga karaehe.
  • Navbars me o ratou ihirangi he wai ma te taunoa. Whakamahia nga ipu hei whakawhāiti i te whanui whakapae.
  • 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.
  • Ka hunahia nga Navbars i te wa e ta ana. Whakahau kia taia ma te taapiri atu .d-printki te .navbar. Tirohia te akomanga whaipainga whakaatu .
  • 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.

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 .

Pānuihia mo tetahi tauira me te rarangi o nga waahanga iti e tautokohia ana.

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 .
  • .form-inlinemo 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.

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

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

Ka whakamahia e tenei tauira nga karaehe whaipainga tae ( bg-light) me te mokowā ( my-2, my-lg-0, mr-sm-0, ).my-sm-0

Waitohu

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

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

Ko te taapiri i nga whakaahua ki te taapiri .navbar-brandka hiahia tonu ki nga momo ritenga me nga taputapu kia tika te rahi. Anei etahi tauira hei whakaatu.

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

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.

Active states-with .active—ki te tohu i te wharangi o naianei ka taea te tono tika ki .nav-links o ratou matua tonu ranei .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>

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.

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

Ka taea hoki e koe te whakamahi i nga takaiho i roto i to navbar nav. 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.

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

Puka

Whakanohoia nga momo mana whakahaere me nga waahanga ki roto i te pae whakatere me te .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>

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

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

Ka mahi ano nga roopu whakauru:

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

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.

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

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.

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

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

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

Kaupapa tae

Ko te whakamaarama i te pae navbar kaore ano kia ngawari ake na te whakakotahitanga o nga karaehe kaupapa me nga background-colortaputapu. Whiriwhiria .navbar-lighthei whakamahi me nga tae papamuri marama, .navbar-darkmo nga tae papamuri pouri ranei. 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 navbar-light" style="background-color: #e3f2fd;">
  <!-- Navbar content -->
</nav>

Nga ipu

Ahakoa kare e hiahiatia, ka taea e koe te takai i te pae whakatere ki roto .containerki tetahi wharangi ki te whakauru ranei i tetahi ki roto hei whakakotahi i nga ihirangi o te pae whakaterenga pumau ranei .

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

I te wa kei roto te ipu i to pae whakaterenga, ka tangohia tana papapae whakapae i nga waahi pakaru iti iho i to .navbar-expand{-sm|-md|-lg|-xl}karaehe kua tohua. Ma tenei ka whakarite kia kore matou e ruarua i runga i te papaa i runga i nga tauranga tirohanga o raro ina hinga ana to pae whakatere.

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container">
    <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 ranei ki runga (panuku me te wharangi tae noa ki runga, ka noho ki 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.

Kia mahara hoki ko .sticky-topnga whakamahinga position: sticky, kaore i te tino tautokona i ia kaitirotiro .

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

Nga whanonga urupare

Ka taea e nga Navbars te whakamahi i te .navbar-toggler, .navbar-collapse, me .navbar-expand{-sm|-md|-lg|-xl}nga karaehe ki te huri ina taka ana 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:

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

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

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

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

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

Ihirangi o waho

I etahi wa ka hiahia koe ki te whakamahi i te mono tiango hei whakaoho i nga mea huna i etahi atu waahi o te wharangi. Na te mea e mahi ana ta maatau mono i runga i te idme data-targette taurite, he ngawari te mahi!

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