Source

Navbar

Bootstrap қуатты, жауап беретін шарлау тақырыбына, шарлау тақтасына арналған құжаттар мен мысалдар. Брендингке, навигацияға және т.б. қолдауды қамтиды, соның ішінде біздің тарылту плагинін қолдау.

Бұл қалай жұмыс істейді

Шарлау тақтасын пайдалануды бастамас бұрын мынаны білу керек:

Шарлау жолақтары жауап беретін жиырылуы және түс схемасы.navbar сыныптары үшін ораманы қажет етеді ..navbar-expand{-sm|-md|-lg|-xl}
Шарлау жолақтары және олардың мазмұны әдепкі бойынша сұйық. Көлденең енін шектеу үшін қосымша контейнерлерді пайдаланыңыз .
Шарлау жолақтарындағы аралықты және туралауды басқару үшін аралық және икемді қызметтік сыныптарымызды пайдаланыңыз.
Шарлау тақталары әдепкі бойынша жауап береді, бірақ оны өзгерту үшін оларды оңай өзгертуге болады. Жауап беру әрекеті біздің Collapse JavaScript плагиніне байланысты.
Басып шығару кезінде шарлау жолақтары әдепкі бойынша жасырылады. қосу арқылы оларды басып шығаруға .d-printмәжбүрлеңіз .navbar. Дисплей утилитасының класын қараңыз .
Элементті пайдалану арқылы қол жетімділікті қамтамасыз етіңіз <nav>немесе , сияқты жалпы элементті пайдалансаңыз, көмекші технологияларды пайдаланушылар үшін бағдар аймағы ретінде анық анықтау үшін әрбір шарлау тақтасына <div>a қосыңыз .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өз модификатор класы бар опцияларымызға негізделеді және дұрыс жауап беру стилі үшін ауыстырып қосқыш сыныптарын пайдалануды талап етеді. Шарлау тақталарындағы шарлау сонымен қатар шарлау тақтасының мазмұнын қауіпсіз түрде туралау үшін мүмкіндігінше көлденең кеңістікті алу үшін өседі .

Ағымдағы бетті көрсету үшін белсенді күйлер—-мен s немесе олардың тікелей ата -анасына .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="#">Disabled</a>
      </li>
    </ul>
  </div>
</nav>

Біз өзіміздің navs үшін сабақтарды қолданатындықтан, қаласаңыз, тізімге негізделген тәсілден толығымен аулақ бола аласыз.

<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. Бұл әрекетті реттеу үшін қажет болса, қосымша икемді утилиталарды пайдаланыңыз.

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

Орналастыру

Шарлау жолақтарын статикалық емес орындарға орналастыру үшін біздің позиция утилиталарын пайдаланыңыз. Бекітілгеннен жоғарыға қарай, төменге бекітілген немесе үстіңгі жағына жабыстырылған опцияны таңдаңыз (бетпен жоғарыға жеткенше жылжиды, содан кейін сол жерде қалады). Бекітілген шарлау жолақтары пайдаланады 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-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>