Source

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

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

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

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

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

Прачытайце прыклад і спіс падтрымоўваных субкампанентаў.

Падтрымоўваны кантэнт

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="#">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.1/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.1/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="#">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="#">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: 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="#">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="#">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="#">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>