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="#" 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>
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">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-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>
Ар кандай баскычтар да бул 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
беттин ортосуна коюу үчүн аны ороп алсаңыз болот. Же болбосо, статикалык же статикалык үстүнкү навигация тилкесинин.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>
Жайгаштыруу
Наворларды статикалык эмес позицияларга коюу үчүн биздин позициянын утилиталарын колдонуңуз. Жогору жагына бекитилген, ылдыйга бекитилген же жогору жагына жабышылгандан тандаңыз (барак үстү жагына жеткенге чейин сыдырат, анан ошол жерде калат). 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-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>
Жооптуу жүрүм-турумдар
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">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 кошууну сунуштайбыз. Болбосо, клавиатура колдонуучулары жана жардамчы технологиялардын колдонуучулары жаңы ачылган мазмунду табууда кыйынга турушу мүмкүн - өзгөчө, эгерде ачылган контейнер документтин түзүмүндөгү которгучтан мурун келсе. Биз ошондой эле алмаштыргычтын мазмун контейнерин aria-controls
көрсөткөн атрибуту бар экенине ынанууну сунуштайбыз . id
Теориялык жактан алганда, бул жардамчы технологияны колдонуучуларга ал башкарган контейнерден түздөн-түз секирип өтүүгө мүмкүндүк берет, бирок учурда бул колдоо абдан начар.