in English

Навбар

Bootstrap-ның көчле, җаваплы навигация башы, диңгез тактасы өчен документлар һәм мисаллар. Брендинг, навигация һәм башкалар өчен ярдәм, шул исәптән безнең җимерелгән плагинга ярдәм.

Бу биттә

Ничек бу эшли

Менә сез диңгез тактасы белән башланганчы белергә тиеш:

Navbars җаваплы җимерелү һәм төс схемасы класслары .navbarбелән төрүне таләп итә ..navbar-expand{-sm|-md|-lg|-xl|-xxl}
Навигатлар һәм аларның эчтәлеге килешү буенча сыек. Аларның горизонталь киңлеген төрлечә чикләү өчен контейнерны үзгәртегез .
Диңгез такталары арасындагы араны һәм тигезләнүне контрольдә тоту өчен безнең аралар һәм флекс файдалы классларны кулланыгыз.
Navbars килешү буенча җаваплы, ләкин сез аларны үзгәртү өчен аларны җиңел үзгәртә аласыз. Respаваплы тәртип безнең Collapse JavaScript плагинына бәйле.
Элемент кулланып, мөмкинлекне тәэмин итегез, <nav>яисә a кебек гомуми элементны куллансагыз, ярдәмче технологияләр кулланучылар өчен истәлекле төбәк итеп ачыклау өчен, һәр диңгез тактасына <div>өстәмә өстәгез .role="navigation"
aria-current="page"Хәзерге битне яки aria-current="true"комплекттагы агымдагы әйберне кулланып агымдагы пунктны күрсәтегез .

Бу компонентның анимация эффекты prefers-reduced-motionмедиа соравына бәйле. Безнең документларның кыскартылган хәрәкәт бүлеген карагыз .

Ярдәм ителгән эчтәлек

Navbars берничә суб-компонент өчен урнаштырылган ярдәм белән килә. Кирәк булганда түбәндәгеләрдән сайлагыз:

.navbar-brandсезнең компания, продукт яки проект исеме өчен.
.navbar-navтулы биеклектә һәм җиңел навигация өчен (тамчыларга ярдәм күрсәтеп).
.navbar-togglerбезнең җимерелү плагины һәм башка навигацияне алыштыру тәртибе белән куллану өчен.
Төрле форма белән идарә итү һәм эш өчен флекс һәм аралар ярдәме.
.navbar-textвертикаль үзәк текстны өстәү өчен.
.collapse.navbar-collapseата-аналар ноктасы буенча диңгез тактасы эчтәлеген төркемләү һәм яшерү өчен.
Киңәйтелгән диңгез эчтәлеген.navbar-scroll урнаштыру max-heightһәм әйләндерү өчен өстәмә өстәгез .

Менә барлык зур компонентларның мисалы, якты тематик диңгез тактасына кертелгән, lgзур (зур) тукталышта автоматик рәвештә җимерелә.

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

Бу мисал фон ( bg-light) һәм аралар ( my-2,,, ) файдалы классларны my-lg-0куллана me-sm-0.my-sm-0

Бренд

Күпчелек .navbar-brandэлементларга кулланылырга мөмкин, ләкин анкор иң яхшы эшли, чөнки кайбер элементлар файдалы класслар яки махсус стильләр таләп итә ала.

Текст

.navbar-brandКласс белән элемент эчендә текстны өстәгез .

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

Рәсем

Сез текст эчендәге текстны алыштыра .navbar-brandаласыз <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>

Рәсем һәм текст

Сез бер үк вакытта рәсем һәм текст өстәү өчен кайбер өстәмә программаларны куллана аласыз. Кушылуга .d-inline-blockһәм . .align-text-top_<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

Navbar навигациясе сылтамалары безнең модификатор классы белән безнең вариантларга нигезләнә һәм дөрес җаваплы стиллау өчен күберәк класслар.nav куллануны таләп итә . Диңгез такталарында навигация шулай ук горизонталь киңлекне биләп торыр өчен үсәчәк .

Хәзерге битне күрсәтү өчен .activeкласс өстәгез ..nav-link

Зинһар, онытмагыз, сез шулай ук активга aria-currentатрибут өстәргә тиеш .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>

Ourәм без диңгез флотлары өчен класслар кулланганга, сез теләсәгез, исемлеккә нигезләнгән алымнан бөтенләй кача аласыз.

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

Сез шулай ук диңгез тактасында тамчыларны куллана аласыз. Тамчы менюлары урнашу өчен төрү элементын таләп итә, шуңа күрә түбәндә күрсәтелгәнчә .nav-itemһәм ояланган элементларны кулланыгыз..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="#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>

Формалар

Төрле форма контроллерын һәм компонентларын диңгез тактасына урнаштырыгыз:

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

Флекс макетын куллануның шунда ук балалар элементлары .navbarһәм килешү буенча justify-content: space-between. Бу тәртипне көйләү өчен кирәк булганда өстәмә флекс ярдәмен кулланыгыз.

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

Керү төркемнәре дә эшли. Әгәр сезнең диңгез плитәсе тулы форма, яки күбесенчә форма булса, сез <form>элементны контейнер итеп куллана аласыз һәм кайбер 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>

Бу төймәләр формаларының бер өлеше буларак төрле төймәләр дә ярдәм итә. Бу шулай ук зур искә төшерү, вертикаль тигезләү инженерлары төрле зурлыктагы элементларны тигезләү өчен кулланылырга мөмкин.

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

Текст

Navbars ярдәмендә текст битләре булырга мөмкин .navbar-text. Бу класс вертикаль тигезләнүне һәм текст сызыклары өчен горизонталь араны көйли.

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

Кирәк булганда бүтән компонентлар һәм коммуналь хезмәтләр белән кушылыгыз.

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

Төс схемалары

Тематик класслар һәм background-colorкоммуналь хезмәтләр кушылуы аркасында диңгез тактасын җылыту беркайчан да җиңел булмады. Ачык .navbar-lightфон төсләре белән, яки .navbar-darkкара төсләр өчен кулланыгыз. Аннары, .bg-*коммуналь хезмәтләр белән көйләгез.

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

Контейнерлар

Бу таләп ителмәсә дә, сез битне үзәккә урнаштыру өчен диңгез тактасын төрә аласыз .container- шулай да эчке контейнер әле дә кирәк. Яисә сез тотрыклы яки статик өске диңгез тактасының.navbar эчтәлеген үзәкләштерү өчен контейнер өсти аласыз .

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

Сезнең диңгез тактасындагы эчтәлекнең киңлеген үзгәртү өчен теләсә нинди контейнер кулланыгыз.

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

Урнаштыру

Статик булмаган позицияләрдә диңгез плиткаларын урнаштыру өчен безнең позиция программаларын кулланыгыз. Fixedгарыдан өскә, аска тоташтырылган яки өскә ябыштырылганны сайлагыз (өскә җиткәнче бит белән әйләндерегез, аннары шунда калыгыз). Тикшерелгән диңгез плиткалары кулланыла position: fixed, димәк, алар DOMның гадәти агымыннан тартылганнар һәм башка элементлар белән капланмасын өчен махсус CSS (мәсәлән,) padding-topталәп ителергә мөмкин.<body>

Alsoәрбер браузерда тулысынча кулланылмаган .sticky-topкулланугаposition: sticky игътибар итегез .

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

Әйләнү

Aимерелгән диңгез тактасының күчеп була торган эчтәлеге эчендә вертикаль әйләндерүне эшләтеп .navbar-nav-scrollҗибәрү өчен (яки бүтән диңгез суб-компонентына) өстәгез. .navbar-navКилешү буенча, әйләндерү башлана 75vh(яки күренеш биеклегенең 75%), ләкин сез моны җирле CSS махсус милеге --bs-navbar-heightяки махсус стильләре белән кире кагарга мөмкин. Диңгез тактасы киңәйтелгәндә зуррак күренешләрдә эчтәлек, гадәттәгечә диңгез тактасындагы кебек күренәчәк.

Зинһар, онытмагыз, бу тәртип потенциаль җитешсезлек белән килә overflow- көйләү overflow-y: auto(монда эчтәлекне әйләндерү өчен кирәк), overflow-xэквивалент auto, ул горизонталь эчтәлекне чәчәчәк.

Менә оптималь аралар өчен өстәмә маржа ярдәме .navbar-nav-scrollбелән кулланылган навбар плитәсе.style="--bs-scroll-height: 100px;"

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

Onsаваплы тәртип

Navbars аларның эчтәлеге төймә артында кайчан җимерелүен ачыклау өчен куллана .navbar-togglerала . Башка коммуналь хезмәтләр белән берлектә, сез билгеле элементларны кайчан күрсәтергә яки яшерергә җиңел сайлый аласыз..navbar-collapse.navbar-expand{-sm|-md|-lg|-xl|-xxl}

Беркайчан да җимерелмәгән диңгез плиткалары өчен .navbar-expandклассны диңгез тактасына өстәгез. Alwaysәрвакыт җимерелә торган диңгез плиткалары өчен бернинди .navbar-expandкласс өстәмәгез.

Тогглер

Navbar алмаштыручылары килешү буенча сул якка тигезләнәләр, ләкин алар кебек кардәш элементка иярсәләр .navbar-brand, алар автоматик рәвештә ерак уңга тигезләнәчәкләр. Сезнең билгегезне кире кайтару күчү урынын кире кайтарачак. Түбәндә төрле күчү стильләренең мисаллары китерелгән.

.navbar-brandИң кечкенә ноктада күрсәтелмәгән :

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

Сулда күрсәтелгән бренд исеме һәм уңда күчү:

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

Сул якта күберәк һәм уңда бренд исеме белән:

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

Тышкы эчтәлек

Кайвакыт сез җимерелгән плагинны кулланырга телисез, контейнер элементын структур яктан читтә утырган эчтәлек өчен .navbar. Чөнки безнең плагин idһәм data-bs-targetтуры килү өстендә эшли, бу җиңел!

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>

Моны эшләгәндә, фокусны программалы рәвештә контейнерга күчерү өчен өстәмә JavaScript кертергә киңәш итәбез. Otherwiseгыйсә, клавиатура кулланучылары һәм ярдәмче технологияләрне кулланучылар, мөгаен, яңа ачылган эчтәлекне табуда кыенлыклар кичерерләр - аеруча ачылган контейнер документ структурасында күчү алдыннан килсә. Без шулай ук эчтәлек контейнерына aria-controlsкүрсәтеп, күчүченең атрибутына ия булуына инанырга киңәш итәбез. idТеория буенча, бу ярдәмче технология кулланучыларына турыдан-туры күгәрченнән үзе идарә иткән контейнерга сикерергә мөмкинлек бирә - ләкин хәзерге вакытта моның ярдәме бик ямьсез.

Офканвас

Офканвас плагины белән киңәйтелгән һәм җимерелгән диңгез тактасын офканвас тартмасына үзгәртегез. Без офканвасның стильләрен дә киңәйтәбез .navbar-expand-*, динамик һәм сыгылмалы навигация кыры ясау өчен классларыбызны кулланабыз.

Түбәндәге мисалда, барлык өзекләр аша гел җимерелә торган офканвас диңгез плитәсен булдыру өчен, .navbar-expand-*классны бөтенләй калдырыгыз.

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

Офканвас диңгез тактасын булдыру өчен, билгеле бер ноктада гадәти диңгез тактасына lgкиңәя .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>

Сасс

Variзгәрешләр

$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

Navаваплы диңгез тактасы киңәйтү / җимерелү класслары (мәсәлән, .navbar-expand-lg) $breakpointsкарта белән берләштерелгән һәм әйләнеш аша ясалган 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;
        }
      }
    }
  }
}