in English

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.

Lori iwe yi

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|-xxl}fun idahun collapsing ati awọ eni kilasi.
Navbars ati akoonu wọn jẹ ito nipasẹ aiyipada. Yi eiyan pada lati ṣe idinwo iwọn petele wọn ni awọn ọna oriṣiriṣi.
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.
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ọ.
Tọkasi ohun ti o wa lọwọlọwọ nipa lilo aria-current="page"fun oju-iwe lọwọlọwọ tabi aria-current="true"fun ohun ti o wa lọwọlọwọ ninu eto kan.

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

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.
Flex ati awọn ohun elo aye fun eyikeyi awọn iṣakoso fọọmu ati awọn iṣe.
.navbar-textfun fifi awọn gbolohun ọrọ ti aarin inaro kun.
.collapse.navbar-collapsefun kikojọpọ ati nọmbafoonu navbar awọn akoonu ti nipa a obi breakpoint.
Fi aṣayan kan kun .navbar-scrolllati ṣeto max-heightati yi lọ akoonu navbar ti o gbooro sii .

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">
  <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="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Dropdown
          </a>
          <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
            <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">
        <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>

Apeere yii nlo abẹlẹ ( bg-light) ati aaye ( my-2, my-lg-0, ) me-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ọ, nitori diẹ ninu awọn eroja le nilo awọn kilasi iwulo tabi awọn aṣa aṣa.

Ọrọ

Ṣafikun ọrọ rẹ laarin ipin kan pẹlu .navbar-brandkilasi naa.

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

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

Aworan

.navbar-brandO le rọpo ọrọ laarin <img>.

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

Aworan ati ọrọ

O tun le lo diẹ ninu awọn ohun elo afikun lati ṣafikun aworan ati ọrọ ni akoko kanna. Ṣe akiyesi afikun ti .d-inline-blockati .align-text-toplori <img>.

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

Ṣafikun .activekilasi .nav-linknaa lati tọka oju-iwe lọwọlọwọ.

Jọwọ ṣakiyesi pe o tun yẹ ki o ṣafikun aria-currentabuda naa lori iṣẹ ṣiṣe .nav-link.

<nav class="navbar navbar-expand-lg navbar-light 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>

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

O tun le lo awọn dropdowns ninu rẹ navbar. 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">
  <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="#" id="navbarDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Dropdown link
          </a>
          <ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
            <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>

Awọn fọọmu

Gbe awọn iṣakoso fọọmu lọpọlọpọ ati awọn paati laarin navbar kan:

<nav class="navbar navbar-light bg-light">
  <div class="container-fluid">
    <form class="d-flex">
      <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>

Lẹsẹkẹsẹ awọn eroja ọmọ ti .navbarlilo ipalemọ ati pe 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">
  <div class="container-fluid">
    <a class="navbar-brand">Navbar</a>
    <form class="d-flex">
      <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>

Awọn ẹgbẹ igbewọle ṣiṣẹ, paapaa. Ti o ba jẹ pe navbar rẹ jẹ gbogbo fọọmu, tabi pupọ julọ fọọmu kan, o le lo <form>nkan bi eiyan naa ki o fipamọ diẹ ninu HTML.

<nav class="navbar navbar-light 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>

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

Ọ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">
  <div class="container-fluid">
    <span class="navbar-text">
      Navbar text with an inline element
    </span>
  </div>
</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">
  <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>

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ẹ lori oju-iwe kan – botilẹjẹpe akiyesi pe eiyan inu kan tun nilo. Tabi o le ṣafikun eiyan kan .navbarsi aarin si aarin awọn akoonu ti navbar oke ti o wa titi tabi aimi .

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

Lo eyikeyi ninu awọn apoti idahun lati yi bi o ṣe gbooro akoonu inu navbar rẹ ti ṣe afihan.

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-md">
    <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">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Default</a>
  </div>
</nav>

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

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

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

Yi lọ

Fikun .navbar-nav-scroll- un .navbar-nav(tabi apa-paati navbar miiran) lati jẹ ki yi lọ inaro ṣiṣẹ laarin awọn akoonu toggle ti navbar ti o ṣubu. Nipa aiyipada, yiyi bẹrẹ ni 75vh(tabi 75% ti iga wiwo wiwo), ṣugbọn o le bori iyẹn pẹlu ohun-ini aṣa CSS agbegbe --bs-navbar-heighttabi awọn aṣa aṣa. Ni awọn ibudo wiwo nla nigbati navbar ba ti fẹ sii, akoonu yoo han bi o ti ṣe ni navbar aiyipada.

Jọwọ ṣe akiyesi pe ihuwasi yii wa pẹlu ipadasẹhin ti o pọju ti overflow— nigbati eto overflow-y: auto(ti o nilo lati yi akoonu si ibi), overflow-xjẹ deede ti auto, eyiti yoo gbin diẹ ninu akoonu petele.

Eyi ni apẹẹrẹ navbar nipa lilo .navbar-nav-scrollpẹlu style="--bs-scroll-height: 100px;", pẹlu diẹ ninu awọn ohun elo ala-ilẹ fun aye to dara julọ.

<nav class="navbar navbar-expand-lg navbar-light 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="#" id="navbarScrollingDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Link
          </a>
          <ul class="dropdown-menu" aria-labelledby="navbarScrollingDropdown">
            <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 me-2" type="search" placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-success" type="submit">Search</button>
      </form>
    </div>
  </div>
</nav>

Awọn ihuwasi idahun

Navbars le lo .navbar-toggler, .navbar-collapse, ati .navbar-expand{-sm|-md|-lg|-xl|-xxl}awọn kilasi lati pinnu nigbati akoonu wọn ṣ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">
  <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">
        <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>

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

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

<nav class="navbar navbar-expand-lg navbar-light 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">
        <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>

Ita akoonu

Nigba miiran o fẹ lati lo ohun itanna iṣubu lati ma nfa ohun elo eiyan kan fun akoonu ti o joko ni ipilẹ ti ita .navbar. Nitori ohun itanna wa ṣiṣẹ lori idati data-bs-targetibaramu, iyẹn ni irọrun ṣe!

Collapsed content

Toggleable via the navbar brand.

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

Nigbati o ba ṣe eyi, a ṣeduro pẹlu afikun JavaScript lati gbe idojukọ ni eto si eiyan nigbati o ṣii. Bibẹẹkọ, awọn olumulo keyboard ati awọn olumulo ti awọn imọ-ẹrọ iranlọwọ yoo ni akoko lile lati wa akoonu tuntun ti a fihan - ni pataki ti apoti ti o ṣii ba wa ṣaaju toggler ninu eto iwe naa. A tun ṣeduro rii daju pe toggler ni abuda naa aria-controls, tọka si idti eiyan akoonu. Ni imọran, eyi ngbanilaaye awọn olumulo imọ-ẹrọ iranlọwọ lati fo taara lati toggler si apo eiyan ti o ṣakoso - ṣugbọn atilẹyin fun eyi jẹ alamọ lọwọlọwọ.

Offcanfasi

Yipada faagun rẹ ati navbar ti n ṣubu sinu duroa itanafa kan pẹlu ohun itanna offcanvas. A fa awọn aṣa aifọwọṣe offcanvas mejeeji ati lo awọn .navbar-expand-*kilasi wa lati ṣẹda ọpa lilọ kiri ti o ni agbara ati rọ.

Ninu apẹẹrẹ ti o wa ni isalẹ, lati ṣẹda navbar ti ita kanfasi ti o nigbagbogbo ṣubu ni gbogbo awọn aaye fifọ, fi .navbar-expand-*kilasi naa silẹ patapata.

<nav class="navbar navbar-light 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 text-reset" 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="#" id="offcanvasNavbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
              Dropdown
            </a>
            <ul class="dropdown-menu" aria-labelledby="offcanvasNavbarDropdown">
              <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">
          <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>

Lati ṣẹda navbar offcanvas ti o gbooro si navbar deede ni aaye fifọ kan pato bi lg, lo .navbar-expand-lg.

<nav class="navbar navbar-light 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>

Sass

Awọn oniyipada

$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-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-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;
$navbar-dark-brand-color:                 $navbar-dark-active-color;
$navbar-dark-brand-hover-color:           $navbar-dark-active-color;

Loop

Navbar idahun faagun/ru awọn kilasi (fun apẹẹrẹ, .navbar-expand-lg) ni idapo pelu $breakpointsmaapu ati ipilẹṣẹ nipasẹ lupu ni 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: $navbar-nav-link-padding-x;
            padding-left: $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-header {
          display: none;
        }

        .offcanvas {
          position: inherit;
          bottom: 0;
          z-index: 1000;
          flex-grow: 1;
          visibility: visible !important; // stylelint-disable-line declaration-no-important
          background-color: transparent;
          border-right: 0;
          border-left: 0;
          @include transition(none);
          transform: none;
        }
        .offcanvas-top,
        .offcanvas-bottom {
          height: auto;
          border-top: 0;
          border-bottom: 0;
        }

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