Source

Navbar

Iwe ati awọn apẹẹrẹ fun Bootstrap ti o lagbara, akọsori lilọ kiri ti o dahun, navbar. Pẹlu atilẹyin fun isamisi, lilọ kiri, ati diẹ sii, pẹlu atilẹyin fun ohun itanna iṣubu wa.

Bawo ni o ṣe n ṣiṣẹ

Eyi ni ohun ti o nilo lati mọ ṣaaju ki o to bẹrẹ pẹlu navbar:

Navbars nilo a murasilẹ .navbarpẹlu .navbar-expand{-sm|-md|-lg|-xl}fun idahun collapsing ati awọ eni kilasi.
Navbars ati akoonu wọn jẹ ito nipasẹ aiyipada. Lo awọn apoti iyan lati fi opin si iwọn petele wọn.
Lo aye wa ati awọn kilasi IwUlO fun ṣiṣakoso aye ati titete laarin awọn navbars .
Navbars jẹ idahun nipasẹ aiyipada, ṣugbọn o le ni rọọrun yipada wọn lati yi iyẹn pada. Ihuwasi idahun da lori ohun itanna JavaScript Collapse wa.
Navbars ti wa ni pamọ nipasẹ aiyipada nigba titẹ sita. Fi ipa mu wọn lati wa ni titẹ nipasẹ fifi kun .d-printsi .navbar. Wo kilasi IwUlO ifihan .
Rii daju iraye si nipa lilo <nav>eroja kan tabi, ti o ba nlo eroja jeneriki diẹ sii gẹgẹbi <div>, ṣafikun kan role="navigation"si gbogbo navbar lati ṣe idanimọ ni gbangba bi agbegbe ala-ilẹ fun awọn olumulo ti awọn imọ-ẹrọ iranlọwọ.

Ipa iwara ti paati yii dale lori prefers-reduced-motionibeere media. Wo apakan išipopada ti o dinku ti iwe iraye si wa .

Ka siwaju fun apẹẹrẹ ati atokọ ti awọn ẹya-ara ti o ni atilẹyin.

Atilẹyin akoonu

Navbars wa pẹlu atilẹyin-itumọ ti fun iwonba ti ipin-irinše. Yan lati inu atẹle bi o ṣe nilo:

.navbar-brandfun ile-iṣẹ rẹ, ọja, tabi orukọ iṣẹ akanṣe.
.navbar-navfun lilọ ni kikun giga ati iwuwo fẹẹrẹ (pẹlu atilẹyin fun awọn silẹ).
.navbar-togglerfun lilo pẹlu ohun itanna iṣubu ati awọn ihuwasi lilọ kiri miiran.
.form-inlinefun eyikeyi awọn iṣakoso fọọmu ati awọn iṣe.
.navbar-textfun fifi inaro aarin awọn gbolohun ọrọ.
.collapse.navbar-collapsefun kikojọpọ ati nọmbafoonu navbar awọn akoonu ti nipa a obi breakpoint.

Eyi ni apẹẹrẹ ti gbogbo awọn ẹya-ara ti o wa ninu navbar ti o ni akori ina idahun ti o ṣubu laifọwọyi ni aaye fifọ lg(nla).

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

Apeere yii nlo awọ ( bg-light) ati aaye ( my-2, my-lg-0, ) mr-sm-0awọn my-sm-0kilasi iwulo.

Brand

O .navbar-brandle lo si awọn eroja pupọ julọ, ṣugbọn oran kan ṣiṣẹ dara julọ bi diẹ ninu awọn eroja le nilo awọn kilasi iwulo tabi awọn aza aṣa.

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

Ṣafikun awọn aworan si .navbar-brandifẹ nigbagbogbo nilo awọn aza aṣa tabi awọn ohun elo si iwọn daradara. Eyi ni diẹ ninu awọn apẹẹrẹ lati ṣe afihan.

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

Nav

Awọn ọna asopọ lilọ kiri Navbar kọ lori awọn .navaṣayan wa pẹlu kilasi modifier tiwọn ati nilo lilo awọn kilasi toggler fun iselona idahun to dara. Lilọ kiri ni navbars yoo tun dagba lati gba aaye petele bi o ti ṣee ṣe lati jẹ ki awọn akoonu navbar rẹ wa ni ibamu ni aabo.

Awọn ipinlẹ ti nṣiṣe lọwọ-pẹlu .active-lati tọkasi oju-iwe lọwọlọwọ le ṣee lo taara si awọn .nav-links tabi awọn obi obi wọn lẹsẹkẹsẹ .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>

Ati pe nitori a lo awọn kilasi fun awọn navs wa, o le yago fun ọna ti o da lori atokọ patapata ti o ba fẹ.

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

O tun le lo awọn isọ silẹ ninu navbar rẹ. Awọn akojọ aṣayan sisọ silẹ nilo ipin wiwu fun ipo, nitorinaa rii daju lati lo awọn eroja lọtọ ati itẹ-ẹiyẹ fun .nav-itemati .nav-linkbi o ṣe han ni isalẹ.

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

Awọn fọọmu

Gbe orisirisi awọn idari fọọmu ati awọn paati laarin navbar pẹlu .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>

Lẹsẹkẹsẹ awọn eroja ti awọn ọmọde ti o wa ni .navbarlilo ipalemo yoo jẹ aiyipada si justify-content: space-between. Lo afikun awọn ohun elo irọrun bi o ṣe nilo lati ṣatunṣe ihuwasi yii.

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

Awọn ẹgbẹ igbewọle ṣiṣẹ, paapaa:

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

Awọn bọtini oriṣiriṣi ni atilẹyin gẹgẹbi apakan ti awọn fọọmu navbar wọnyi, paapaa. Eyi tun jẹ olurannileti nla pe awọn ohun elo titete inaro le ṣee lo lati ṣe deede awọn eroja iwọn oriṣiriṣi.

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

Ọrọ

Navbars le ni awọn ọrọ diẹ ninu pẹlu iranlọwọ ti .navbar-text. Kilasi yii ṣatunṣe titete inaro ati aye petele fun awọn gbolohun ọrọ.

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

Illa ati baramu pẹlu awọn paati miiran ati awọn ohun elo bi o ṣe nilo.

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

Awọn eto awọ

Titori navbar ko rọrun rara ọpẹ si apapọ awọn kilasi akori ati background-colorawọn ohun elo. Yan lati .navbar-lightfun lilo pẹlu awọn awọ abẹlẹ ina, tabi .navbar-darkfun awọn awọ abẹlẹ dudu. Lẹhinna, ṣe akanṣe pẹlu .bg-*awọn ohun elo.

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

Awọn apoti

Botilẹjẹpe ko nilo, o le fi ipari si navbar kan .containersi aarin rẹ si oju-iwe kan tabi ṣafikun ọkan laarin si aarin awọn akoonu ti oke navbar ti o wa titi tabi aimi .

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

Nigbati eiyan ba wa laarin navbar rẹ, a ti yọ paadi petele rẹ kuro ni awọn aaye fifọ ni isalẹ ju kilasi ti o ti sọ .navbar-expand{-sm|-md|-lg|-xl}tẹlẹ. Eyi ṣe idaniloju pe a ko ni ilọpo meji lori padding lainidi lori awọn oju iwo kekere nigbati navbar rẹ ba ṣubu.

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

Ipo

Lo awọn ohun elo ipo wa lati gbe awọn navbars si awọn ipo ti kii ṣe aimi. Yan lati ti o wa titi si oke, ti o wa titi si isalẹ, tabi lẹmọ si oke (awọn iwe pẹlu oju-iwe naa titi ti o fi de oke, lẹhinna duro nibẹ). Awọn navbars ti o wa titi lo position: fixed, afipamo pe wọn fa lati ṣiṣan deede ti DOM ati pe o le nilo CSS aṣa (fun apẹẹrẹ, padding-toplori awọn <body>) lati ṣe idiwọ iṣakojọpọ pẹlu awọn eroja miiran.

Tun ṣe akiyesi pe .sticky-toplilo position: sticky, eyiti ko ni atilẹyin ni kikun ni gbogbo ẹrọ aṣawakiri .

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

Awọn ihuwasi idahun

Navbars le lo .navbar-toggler, .navbar-collapse, ati .navbar-expand{-sm|-md|-lg|-xl}awọn kilasi lati yipada nigbati akoonu wọn ba ṣubu lẹhin bọtini kan. Ni apapo pẹlu awọn ohun elo miiran, o le ni rọọrun yan igba lati ṣafihan tabi tọju awọn eroja kan pato.

Fun awọn navbars ti ko wó, fi awọn .navbar-expandkilasi lori navbar. Fun awọn navbars ti o nigbagbogbo ṣubu, ma ṣe fi eyikeyi .navbar-expandkilasi kun.

Toggler

Navbar togglers ti wa ni ibamu si osi nipasẹ aiyipada, ṣugbọn ti wọn ba tẹle nkan ti arakunrin bi a .navbar-brand, wọn yoo wa ni deede laifọwọyi si apa ọtun. Yiyipada isamisi rẹ yoo yi ipo ti toggler pada. Ni isalẹ wa ni awọn apẹẹrẹ ti awọn aṣa toggle oriṣiriṣi.

Pẹlu ko .navbar-brandṣe afihan ni aaye isinmi ti o kere julọ:

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

Pẹlu orukọ iyasọtọ ti o han ni apa osi ati toggler ni apa ọtun:

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

Pẹlu toggler ni apa osi ati orukọ iyasọtọ ni apa ọtun:

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

Ita akoonu

Nigba miiran o fẹ lati lo ohun itanna iṣubu lati ṣe okunfa akoonu ti o farapamọ ni ibomiiran lori oju-iwe naa. Nitori ohun itanna wa ṣiṣẹ lori idati data-targetibaramu, iyẹn ni irọrun ṣe!

Collapsed content

Toggleable via the navbar brand.

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