Source

Навігацыйная панэль

Дакументацыя і прыклады для магутнага, адаптыўнага навігацыйнага загалоўка Bootstrap, панэлі навігацыі. Уключае падтрымку брэндынгу, навігацыі і іншага, у тым ліку падтрымку нашага плагіна для згортвання.

Як гэта працуе

Вось што вам трэба ведаць, перш чым пачаць працу з панэллю навігацыі:

  • Панэлі навігацыі патрабуюць абгорткі .navbarдля адаптыўнага згортвання .navbar-expand{-sm|-md|-lg|-xl}і класаў каляровай схемы .
  • Панэлі навігацыі і іх змесціва плыўныя па змаўчанні. Выкарыстоўвайце дадатковыя кантэйнеры , каб абмежаваць іх гарызантальную шырыню.
  • Выкарыстоўвайце нашы ўтыліты spacing і flex для кіравання інтэрвалам і выраўноўваннем у панэлях навігацыі.
  • Панэлі навігацыі спагадныя па змаўчанні, але вы можаце лёгка змяніць іх, каб змяніць гэта. Адказныя паводзіны залежаць ад нашага плагіна Collapse JavaScript.
  • Панэлі навігацыі схаваныя па змаўчанні падчас друку. Прымусіць іх надрукаваць, дадаўшы .d-printў .navbar. Глядзіце клас карыснасці дысплея .
  • Забяспечце даступнасць з дапамогай <nav>элемента або, калі выкарыстоўваецца больш агульны элемент, напрыклад <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>

Спасылкі навігацыі Navbar абапіраюцца на нашы .navпараметры з іх уласным класам-мадыфікатарам і патрабуюць выкарыстання класаў -пераключальнікаў для правільнага адаптыўнага стылю. Навігацыя ў панэлі навігацыі таксама будзе пашырацца, каб займаць як мага больш гарызантальнай прасторы, каб змесціва панэлі навігацыі было надзейна выраўнавана.

Актыўныя станы — з .active— для ўказання бягучай старонкі могуць прымяняцца непасрэдна да .nav-links або іх непасрэдных бацькоў .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>

І паколькі мы выкарыстоўваем класы для нашых навігацый, вы можаце цалкам пазбегнуць падыходу на аснове спісаў, калі хочаце.

<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. Пры неабходнасці выкарыстоўвайце дадатковыя ўтыліты flex , каб наладзіць гэтыя паводзіны.

<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каб адцэнтраваць яе на старонцы, або дадаць яе ўнутр, каб адцэнтраваць толькі змесціва фіксаванай або статычнай верхняй навігацыйнай панэлі .

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

Размяшчэнне

Выкарыстоўвайце нашы ўтыліты размяшчэння, каб размясціць панэлі навігацыі ў нестатычных пазіцыях. Выбірайце паміж замацаванымі ўверсе, замацаванымі ўнізе або прылепленымі да верху (пракручваецца разам са старонкай, пакуль не дасягне верху, потым застаецца там). Фіксаваныя панэлі навігацыі выкарыстоўваюць position: fixed, што азначае, што яны выцягнуты з нармальнага ходу DOM і могуць патрабаваць карыстальніцкага CSS (напрыклад, padding-topна <body>), каб прадухіліць накладанне з іншымі элементамі.

Таксама звярніце ўвагу, што .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>

Спагадныя паводзіны

Панэлі навігацыі могуць выкарыстоўваць .navbar-toggler, .navbar-collapse, і .navbar-expand{-sm|-md|-lg|-xl}класы для змены, калі іх змест згортваецца за кнопкай. У спалучэнні з іншымі ўтылітамі вы можаце лёгка выбраць, калі паказваць або хаваць пэўныя элементы.

Для панэлі навігацыі, якія ніколі не згортваюцца, дадайце .navbar-expandклас на панэлі навігацыі. Для панэлі навігацыі, якія заўсёды згортваюцца, не дадавайце .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супастаўленні, гэта лёгка зрабіць!

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