Rekọja si akoonu akọkọ Rekọja si lilọ kiri awọn docs
Check
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.
  • Titun ni v5.2.0: Navbars le jẹ akori pẹlu awọn oniyipada CSS ti o ni opin si .navbarkilasi mimọ. .navbar-lightti kọ silẹ ati .navbar-darkpe o ti tun kọ lati dojuiwọn awọn oniyipada CSS dipo fifi awọn aṣa afikun kun.
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 inaro aarin awọn gbolohun ọrọ.
  • .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).

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>

Apeere yii nlo abẹlẹ ( bg-light) ati aaye ( me-auto, mb-2, ) mb-lg-0awọn me-2kilasi 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.

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>

Aworan

.navbar-brandO le rọpo ọrọ laarin <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>

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

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>

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.

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>

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

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>

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

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>

Awọn fọọmu

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

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>

Lẹsẹkẹsẹ awọn eroja ọmọde 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.

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>

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.

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>

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.

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>

Ọ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ọ.

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

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>

Awọn eto awọ

Titun ni v5.2.0: Navbar akori ti ni agbara nipasẹ awọn oniyipada CSS ati .navbar-lightpe o ti parẹ. Awọn oniyipada CSS wa ni lilo si .navbar, aiyipada si irisi “ina”, ati pe o le bori pẹlu .navbar-dark.

Awọn akori Navbar rọrun ju igbagbogbo lọ ọpẹ si akojọpọ Bootstrap ti Sass ati awọn oniyipada CSS. Aiyipada ni “navbar ina” wa fun lilo pẹlu awọn awọ abẹlẹ ina, ṣugbọn o tun le lo .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" 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 .

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>

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

html 
<nav class="navbar navbar-expand-lg 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ẹ, ti o tẹmọ si oke (awọn iwe-iwe pẹlu oju-iwe titi ti o fi de oke, lẹhinna duro nibẹ), tabi ti o duro si isalẹ (yiyi pẹlu oju-iwe titi ti o fi de isalẹ, 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.

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>

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

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>

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

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>

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

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>

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

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>

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!

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>

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

Ṣe iyipada ọpa navbar ti o gbooro ati ti n ṣubu sinu apamọwọ ita kanfasi pẹlu paati itanafasi . 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.

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>

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

Nigbati o ba nlo offcanvas ni navbar dudu, ṣe akiyesi pe o le nilo lati ni ipilẹ dudu lori akoonu offcanvas lati yago fun ọrọ di airotẹlẹ. Ninu apẹẹrẹ ti o wa ni isalẹ, a ṣafikun .navbar-darkati .bg-darksi .navbar, .text-bg-darksi .offcanvas, .dropdown-menu-darksi .dropdown-menu, ati .btn-close-whitesi .btn-closefun iselona to dara pẹlu itagiri dudu.

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

Awọn oniyipada

Fi kun v5.2.0

Gẹgẹ bi ara Bootstrap ti o ni ilọsiwaju awọn oniyipada CSS, awọn navbars lo awọn oniyipada CSS agbegbe lori .navbarfun imudara isọdi akoko gidi. Awọn iye fun awọn oniyipada CSS ti ṣeto nipasẹ Sass, nitorinaa isọdi Sass tun ni atilẹyin, paapaa.

  --#{$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};

Diẹ ninu awọn oniyipada CSS tun wa lori .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);

Isọdi-ara nipasẹ awọn oniyipada CSS ni a le rii lori .navbar-darkkilasi nibiti a ti bori awọn iye kan pato laisi fifi awọn yiyan CSS ẹda-iwe kun.

  --#{$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)};

Sass oniyipada

Awọn oniyipada fun gbogbo awọn navbars:

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

Awọn oniyipada fun navbar dudu :

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

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: 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;
          }
        }
      }
    }
  }
}