Source

Навбар

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

Ничек бу эшли

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

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

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

Мисал һәм ярдәмче суб-компонентлар исемлеге өчен укыгыз.

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

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

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

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

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>

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

Бренд

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

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

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

Васыятькә рәсемнәр өстәү, .navbar-brandмөгаен, зур күләмле стильләр яки коммуналь хезмәтләр таләп итәчәк. Менә күрсәтер өчен берничә мисал.

<!-- Just an image -->
<nav class="navbar navbar-light bg-light">
  <a class="navbar-brand" href="#">
    <img src="/docs/4.4/assets/brand/bootstrap-solid.svg" width="30" height="30" alt="">
  </a>
</nav>

<!-- Image and text -->
<nav class="navbar navbar-light bg-light">
  <a class="navbar-brand" href="#">
    <img src="/docs/4.4/assets/brand/bootstrap-solid.svg" width="30" height="30" class="d-inline-block align-top" alt="">
    Bootstrap
  </a>
</nav>

Nav

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

Актив .activeхәлләр - хәзерге битне турыдан-туры .nav-linkяисә аларның ата-аналарына кулланырга мөмкинлеген күрсәтү өчен .nav-item.

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Features</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Pricing</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
      </li>
    </ul>
  </div>
</nav>

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

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
    <div class="navbar-nav">
      <a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
      <a class="nav-item nav-link" href="#">Features</a>
      <a class="nav-item nav-link" href="#">Pricing</a>
      <a class="nav-item nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
    </div>
  </div>
</nav>

Сез шулай ук үзегезнең диңгез диңгезендәге тамчыларны куллана аласыз. Тамчы менюлары урнашу өчен төрү элементын таләп итә, шуңа күрә түбәндә күрсәтелгәнчә .nav-itemһәм ояланган элементларны кулланыгыз..nav-link

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNavDropdown">
    <ul class="navbar-nav">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Features</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Pricing</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown link
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>
    </ul>
  </div>
</nav>

Формалар

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

<nav class="navbar navbar-light bg-light">
  <form class="form-inline">
    <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
    <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
  </form>
</nav>

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

<nav class="navbar navbar-light bg-light">
  <a class="navbar-brand">Navbar</a>
  <form class="form-inline">
    <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
    <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
  </form>
</nav>

Керү төркемнәре дә эшли:

<nav class="navbar navbar-light bg-light">
  <form class="form-inline">
    <div class="input-group">
      <div class="input-group-prepend">
        <span class="input-group-text" id="basic-addon1">@</span>
      </div>
      <input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
    </div>
  </form>
</nav>

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

<nav class="navbar navbar-light bg-light">
  <form class="form-inline">
    <button class="btn btn-outline-success" type="button">Main button</button>
    <button class="btn btn-sm btn-outline-secondary" type="button">Smaller button</button>
  </form>
</nav>

Текст

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

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

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

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar w/ text</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarText">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Features</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Pricing</a>
      </li>
    </ul>
    <span class="navbar-text">
      Navbar text with an inline element
    </span>
  </div>
</nav>

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

Тематик класслар һәм 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 тактасының эчтәлеген үзәккә кертә аласыз .

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

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

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

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

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

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

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

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

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

Тогглер

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

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

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarTogglerDemo01">
    <a class="navbar-brand" href="#">Hidden brand</a>
    <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>

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

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarTogglerDemo02">
    <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>

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

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo03" aria-controls="navbarTogglerDemo03" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <a class="navbar-brand" href="#">Navbar</a>

  <div class="collapse navbar-collapse" id="navbarTogglerDemo03">
    <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>

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

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

Collapsed content

Toggleable via the navbar brand.

<div class="pos-f-t">
  <div class="collapse" id="navbarToggleExternalContent">
    <div class="bg-dark p-4">
      <h5 class="text-white h4">Collapsed content</h5>
      <span class="text-muted">Toggleable via the navbar brand.</span>
    </div>
  </div>
  <nav class="navbar navbar-dark bg-dark">
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
  </nav>
</div>