in English

Навбар

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="#" role="button" data-toggle="dropdown" aria-expanded="false">
          Dropdown
        </a>
        <div class="dropdown-menu">
          <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">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.6/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.6/assets/brand/bootstrap-solid.svg" width="30" height="30" class="d-inline-block align-top" alt="">
    Bootstrap
  </a>
</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">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-link active" href="#">Home <span class="sr-only">(current)</span></a>
      <a class="nav-link" href="#">Features</a>
      <a class="nav-link" href="#">Pricing</a>
      <a class="nav-link disabled">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="#" role="button" data-toggle="dropdown" aria-expanded="false">
          Dropdown link
        </a>
        <div class="dropdown-menu">
          <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>

Текст

Навигатлар ярдәмендә текст битләре булырга мөмкин .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аны биттә урнаштыру өчен диңгез тактасын төрергә мөмкин. Яисә сез тотрыклы яки статик өске диңгез тактасының.navbar эчтәлеген үзәкләштерү өчен контейнер өсти аласыз .

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

Әйләнү

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

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

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

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar scroll</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-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 mr-auto my-2 my-lg-0 navbar-nav-scroll" style="max-height: 100px;">
      <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="#" role="button" data-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">
      <input class="form-control mr-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success" type="submit">Search</button>
    </form>
  </div>
</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">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">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">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>

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

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

<div class="fixed-top">
  <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>

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