Source

Navbar

Bootstrap'тин күчтүү, жооп берүүчү навигация баш аты, навигация үчүн документтер жана мисалдар. Брендингди, навигацияны жана башкаларды, анын ичинде биздин кыйратуу плагинибизди колдоону камтыйт.

Бул кантип иштейт

Navbar менен иштөөнү баштоодон мурун бул жерде эмнени билишиңиз керек:

  • Навборлор .navbarжооп берүүчү .navbar-expand{-sm|-md|-lg|-xl}кыйратуу жана түс схемасы класстары үчүн таңууну талап кылат.
  • Navbars жана алардын мазмуну демейки боюнча суюк. Алардын горизонталдуу туурасын чектөө үчүн кошумча контейнерлерди колдонуңуз .
  • Navbars ичиндеги аралыктарды жана тегиздөөлөрдү көзөмөлдөө үчүн биздин аралыкты жана ийкемдүү пайдалуу класстарды колдонуңуз.
  • Navbars демейки боюнча жооп берет, бирок сиз аны өзгөртүү үчүн аларды оңой эле өзгөртө аласыз. Жооптуу жүрүм-турум биздин Collapse JavaScript плагинибизден көз каранды.
  • Басып чыгарууда Navbars демейки боюнча жашырылган. кошуу менен аларды басып .d-printчыгарууга мажбурлаңыз .navbar. Дисплейдин пайдалуу классын караңыз .
  • Элементти колдонуу менен жеткиликтүүлүктү камсыз кылыңыз <nav>же, мисалы, , сыяктуу жалпы элементти колдонсоңуз, ар бир навигация тилкесине <div>a кошуңуз, 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-link​​s же алардын түздөн-түз ата -энесине түз колдонулушу мүмкүн .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. Бул жүрүм-турумду тууралоо үчүн кошумча ийкемдүү утилиттерди колдонуңуз .

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

Ар кандай баскычтар да бул navbar формаларынын бир бөлүгү катары колдоого алынат. Бул ошондой эле вертикалдуу тегиздөө утилиталары ар кандай өлчөмдөгү элементтерди тегиздөө үчүн колдонулушу мүмкүн экендигин эскертет.

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

Жайгаштыруу

Наворларды статикалык эмес позицияларга коюу үчүн биздин позициянын утилиталарын колдонуңуз. Жогору жагына бекитилген, ылдыйга бекитилген же жогору жагына жабышылгандан тандаңыз (барак үстү жагына жеткенге чейин сыдырат, анан ошол жерде калат). 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>

Жооптуу жүрүм-турумдар

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

Эч качан жыйрылбаган чабыттоо тилкелери үчүн классты навигация тилкесине кошуңуз .navbar-expand. Дайыма кулап турган навигация тилкелери үчүн эч кандай .navbar-expandкласс кошпоңуз.

Toggler

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>