Навбар
Bootstrap-ның көчле, җаваплы навигация башы, диңгез тактасы өчен документлар һәм мисаллар. Брендинг, навигация һәм башкалар өчен ярдәм, шул исәптән безнең җимерелгән плагинга ярдәм.
Ничек бу эшли
Менә диңгез тактасы белән башланганчы белергә кирәк:
- Navbars җаваплы җимерелү һәм төс схемасы класслары
.navbar
белән төрүне таләп итә ..navbar-expand{-sm|-md|-lg|-xl|-xxl}
- Диңгез такталары һәм аларның эчтәлеге килешү буенча сыек. Аларның горизонталь киңлеген төрлечә чикләү өчен контейнерны үзгәртегез .
- Диңгез такталары арасындагы араны һәм тигезләнүне контрольдә тоту өчен безнең аралар һәм флекс файдалы классларны кулланыгыз.
- Navbars килешү буенча җаваплы, ләкин сез аларны үзгәртү өчен аларны җиңел үзгәртә аласыз. Respаваплы тәртип безнең Collapse JavaScript плагинына бәйле.
- Элемент кулланып, мөмкинлекне тәэмин итегез,
<nav>
яисә a кебек гомуми элементны куллансагыз, ярдәмче технологияләр кулланучылар өчен истәлекле төбәк итеп ачыклау өчен, һәр диңгез тактасына<div>
өстәмә өстәгез .role="navigation"
aria-current="page"
Хәзерге битне якиaria-current="true"
комплекттагы агымдагы әйберне кулланып агымдагы пунктны күрсәтегез .
prefers-reduced-motion
медиа соравына бәйле. Безнең документларның кыскартылган хәрәкәт бүлеген карагыз
.
Ярдәм ителгән эчтәлек
Navbars берничә суб-компонент өчен урнаштырылган ярдәм белән килә. Кирәк булганда түбәндәгеләрдән сайлагыз:
.navbar-brand
сезнең компания, продукт яки проект исеме өчен..navbar-nav
тулы биеклектә һәм җиңел навигация өчен (тамчыларга ярдәм күрсәтеп)..navbar-toggler
безнең җимерелү плагины һәм башка навигацияне алыштыру тәртибе белән куллану өчен.- Төрле форма белән идарә итү һәм эш өчен флекс һәм аралар ярдәме.
.navbar-text
вертикаль үзәк текстны өстәү өчен..collapse.navbar-collapse
ата-аналар ноктасы буенча диңгез тактасы эчтәлеген төркемләү һәм яшерү өчен.- Киңәйтелгән диңгез эчтәлеген
.navbar-scroll
урнаштыруmax-height
һәм әйләндерү өчен өстәмә өстәгез .
Менә барлык суб-компонентларның мисалы, якты тематик диңгез тактасына кертелгән, ул lg
(зур) ноктада автоматик рәвештә җимерелә.
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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 me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</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-bs-toggle="dropdown" aria-expanded="false">
Dropdown
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<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" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
<form class="d-flex">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success" type="submit">Search</button>
</form>
</div>
</div>
</nav>
Бу мисал фон ( bg-light
) һәм аралар ( my-2
,,, ) файдалы классларны my-lg-0
куллана me-sm-0
.my-sm-0
Бренд
Күпчелек .navbar-brand
элементларга кулланылырга мөмкин, ләкин анкор иң яхшы эшли, чөнки кайбер элементлар файдалы класслар яки махсус стильләр таләп итә ала.
Текст
.navbar-brand
Класс белән элемент эчендә текстны өстәгез .
<!-- As a link -->
<nav class="navbar navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
</div>
</nav>
<!-- As a heading -->
<nav class="navbar navbar-light bg-light">
<div class="container-fluid">
<span class="navbar-brand mb-0 h1">Navbar</span>
</div>
</nav>
Рәсем
Сез текст эчендәге текстны алыштыра .navbar-brand
аласыз <img>
.
<nav class="navbar navbar-light bg-light">
<div class="container">
<a class="navbar-brand" href="#">
<img src="/docs/5.0/assets/brand/bootstrap-logo.svg" alt="" width="30" height="24">
</a>
</div>
</nav>
Рәсем һәм текст
Сез бер үк вакытта рәсем һәм текст өстәү өчен кайбер өстәмә программаларны куллана аласыз. Кушылуга .d-inline-block
һәм . .align-text-top
_<img>
<nav class="navbar navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">
<img src="/docs/5.0/assets/brand/bootstrap-logo.svg" alt="" width="30" height="24" class="d-inline-block align-text-top">
Bootstrap
</a>
</div>
</nav>
Nav
Navbar навигациясе сылтамалары безнең модификатор классы белән безнең вариантларга нигезләнә һәм дөрес җаваплы стиллау өчен күберәк класслар.nav
куллануны таләп итә . Диңгез такталарында навигация шулай ук горизонталь киңлекне биләп торыр өчен үсәчәк .
Хәзерге битне күрсәтү өчен .active
класс өстәгез ..nav-link
Зинһар, онытмагыз, сез шулай ук активга aria-current
атрибут өстәргә тиеш .nav-link
.
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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">
<a class="nav-link active" aria-current="page" href="#">Home</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>
</div>
</nav>
Ourәм без диңгез флотлары өчен класслар кулланганга, сез теләсәгез, исемлеккә нигезләнгән алымнан бөтенләй кача аласыз.
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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" aria-current="page" href="#">Home</a>
<a class="nav-link" href="#">Features</a>
<a class="nav-link" href="#">Pricing</a>
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</div>
</div>
</div>
</nav>
Сез шулай ук диңгез тактасында тамчыларны куллана аласыз. Тамчы менюлары позицияләү өчен төрү элементын таләп итә, шуңа күрә түбәндә күрсәтелгәнчә аерым .nav-item
һәм ояланган элементларны кулланыгыз..nav-link
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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">
<a class="nav-link active" aria-current="page" href="#">Home</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-bs-toggle="dropdown" aria-expanded="false">
Dropdown link
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
Формалар
Төрле форма контроллерын һәм компонентларын диңгез тактасына урнаштырыгыз:
<nav class="navbar navbar-light bg-light">
<div class="container-fluid">
<form class="d-flex">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success" type="submit">Search</button>
</form>
</div>
</nav>
Флекс макетын куллануның шунда ук балалар элементлары .navbar
һәм килешү буенча justify-content: space-between
. Бу тәртипне көйләү өчен кирәк булганда өстәмә флекс ярдәмен кулланыгыз.
<nav class="navbar navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand">Navbar</a>
<form class="d-flex">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success" type="submit">Search</button>
</form>
</div>
</nav>
Керү төркемнәре дә эшли. Әгәр сезнең диңгез плитәсе тулы форма, яки күбесенчә форма булса, сез <form>
элементны контейнер итеп куллана аласыз һәм кайбер HTML саклый аласыз.
<nav class="navbar navbar-light bg-light">
<form class="container-fluid">
<div class="input-group">
<span class="input-group-text" id="basic-addon1">@</span>
<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="container-fluid justify-content-start">
<button class="btn btn-outline-success me-2" 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">
<div class="container-fluid">
<span class="navbar-text">
Navbar text with an inline element
</span>
</div>
</nav>
Кирәк булганда бүтән компонентлар һәм коммуналь хезмәтләр белән кушылыгыз.
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar w/ text</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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 me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</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>
</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">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
</div>
</nav>
</div>
Сезнең диңгез тактасындагы эчтәлекнең киңлеген үзгәртү өчен теләсә нинди контейнер кулланыгыз.
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-md">
<a class="navbar-brand" href="#">Navbar</a>
</div>
</nav>
Урнаштыру
Статик булмаган позицияләрдә диңгез плиткаларын урнаштыру өчен безнең позиция программаларын кулланыгыз. Fixedгарыдан өскә, аска тоташтырылган яки өскә ябыштырылганны сайлагыз (өскә җиткәнче бит белән әйләндерегез, аннары шунда калыгыз). Тикшерелгән диңгез плиткалары кулланыла position: fixed
, димәк, алар DOMның гадәти агымыннан тартылганнар һәм бүтән элементлар белән капланмасын өчен махсус CSS (мәсәлән,) padding-top
таләп ителергә мөмкин.<body>
Alsoәрбер браузерда тулысынча кулланылмаган .sticky-top
кулланугаposition: sticky
игътибар итегез .
<nav class="navbar navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Default</a>
</div>
</nav>
<nav class="navbar fixed-top navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Fixed top</a>
</div>
</nav>
<nav class="navbar fixed-bottom navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Fixed bottom</a>
</div>
</nav>
<nav class="navbar sticky-top navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Sticky top</a>
</div>
</nav>
Әйләнү
Aимерелгән диңгез тактасының күчә торган эчтәлеге эчендә вертикаль әйләндерүне эшләтеп .navbar-nav-scroll
җибәрү өчен (яки бүтән диңгез суб-компонентына) өстәгез. .navbar-nav
Килешү буенча, әйләндерү башлана 75vh
(яки күренеш биеклегенең 75%), ләкин сез моны җирле CSS махсус милеге --bs-navbar-height
яки махсус стильләре белән кире кагарга мөмкин. Диңгез тактасы киңәйтелгәндә зуррак күренешләрдә, эчтәлек, гадәттәгечә диңгез тактасындагы кебек күренәчәк.
Зинһар, онытмагыз, бу тәртип потенциаль җитешсезлек белән килә overflow
- көйләү overflow-y: auto
(монда эчтәлекне әйләндерү өчен кирәк), overflow-x
эквивалент auto
, ул горизонталь эчтәлекне чәчәчәк.
Менә оптималь аралар өчен өстәмә маржа ярдәме .navbar-nav-scroll
белән кулланылган навбар плитәсе.style="--bs-scroll-height: 100px;"
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar scroll</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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 me-auto my-2 my-lg-0 navbar-nav-scroll" style="--bs-scroll-height: 100px;">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</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="navbarScrollingDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Link
</a>
<ul class="dropdown-menu" aria-labelledby="navbarScrollingDropdown">
<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" href="#" tabindex="-1" aria-disabled="true">Link</a>
</li>
</ul>
<form class="d-flex">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success" type="submit">Search</button>
</form>
</div>
</div>
</nav>
Onsаваплы тәртип
Navbars аларның эчтәлеге төймә артында кайчан җимерелүен ачыклау өчен куллана .navbar-toggler
ала . Башка коммуналь хезмәтләр белән берлектә, сез билге��е элементларны кайчан күрсәтергә яки яшерергә җиңел сайлый аласыз..navbar-collapse
.navbar-expand{-sm|-md|-lg|-xl|-xxl}
Беркайчан да җимерелмәгән диңгез плиткалары өчен .navbar-expand
классны диңгез тактасына өстәгез. Alwaysәрвакыт җимерелә торган диңгез плиткалары өчен бернинди .navbar-expand
класс өстәмәгез.
Тогглер
Navbar алмаштыручылары килешү буенча сул якка тигезләнәләр, ләкин алар кебек кардәш элементка иярсәләр .navbar-brand
, алар автоматик рәвештә ерак уңга тигезләнәчәкләр. Сезнең билгегезне кире кайтару күчү урынын кире кайтарачак. Түбәндә төрле күчү стильләренең мисаллары китерелгән.
.navbar-brand
Иң кечкенә ноктада күрсәтелмәгән :
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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 me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</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="d-flex">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success" type="submit">Search</button>
</form>
</div>
</div>
</nav>
Сулда күрсәтелгән бренд исеме һәм уңда күчү:
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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 me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</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="d-flex">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success" type="submit">Search</button>
</form>
</div>
</div>
</nav>
Сул якта күберәк һәм уңда бренд исеме белән:
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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 me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</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="d-flex">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success" type="submit">Search</button>
</form>
</div>
</div>
</nav>
Тышкы эчтәлек
Кайвакыт сез җимерелгән плагинны контейнер элементын эшләтеп җибәрү өчен кулланырга телисез .navbar
. Чөнки безнең плагин id
һәм data-bs-target
туры килү өстендә эшли, бу җиңел!
<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">
<div class="container-fluid">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</div>
</nav>
Моны эшләгәндә, фокусны программалы рәвештә контейнерга күчерү өчен өстәмә JavaScript кертергә киңәш итәбез. Otherwiseгыйсә, клавиатура кулланучылары һәм ярдәмче технологияләрне кулланучылар, мөгаен, яңа ачылган эчтәлекне табуда кыенлыклар кичерерләр - аеруча ачылган контейнер документ структурасында күчү алдыннан килсә. Без шулай ук эчтәлек контейнерына aria-controls
күрсәтеп, күчүченең атрибутына ия булуына инанырга киңәш итәбез. id
Теория буенча, бу ярдәмче технология кулланучыларына турыдан-туры күгәрченнән үзе идарә иткән контейнерга сикерергә мөмкинлек бирә - ләкин хәзерге вакытта моның ярдәме бик ямьсез.
Сасс
Variзгәрешләр
$navbar-padding-y: $spacer * .5;
$navbar-padding-x: null;
$navbar-nav-link-padding-x: .5rem;
$navbar-brand-font-size: $font-size-lg;
// Compute the navbar-brand padding-y so the navbar-brand will have the same height as navbar-text and nav-link
$nav-link-height: $font-size-base * $line-height-base + $nav-link-padding-y * 2;
$navbar-brand-height: $navbar-brand-font-size * $line-height-base;
$navbar-brand-padding-y: ($nav-link-height - $navbar-brand-height) * .5;
$navbar-brand-margin-end: 1rem;
$navbar-toggler-padding-y: .25rem;
$navbar-toggler-padding-x: .75rem;
$navbar-toggler-font-size: $font-size-lg;
$navbar-toggler-border-radius: $btn-border-radius;
$navbar-toggler-focus-width: $btn-focus-width;
$navbar-toggler-transition: box-shadow .15s ease-in-out;
$navbar-dark-color: rgba($white, .55);
$navbar-dark-hover-color: rgba($white, .75);
$navbar-dark-active-color: $white;
$navbar-dark-disabled-color: rgba($white, .25);
$navbar-dark-toggler-icon-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path stroke='#{$navbar-dark-color}' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>");
$navbar-dark-toggler-border-color: rgba($white, .1);
$navbar-light-color: rgba($black, .55);
$navbar-light-hover-color: rgba($black, .7);
$navbar-light-active-color: rgba($black, .9);
$navbar-light-disabled-color: rgba($black, .3);
$navbar-light-toggler-icon-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path stroke='#{$navbar-light-color}' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>");
$navbar-light-toggler-border-color: rgba($black, .1);
$navbar-light-brand-color: $navbar-light-active-color;
$navbar-light-brand-hover-color: $navbar-light-active-color;
$navbar-dark-brand-color: $navbar-dark-active-color;
$navbar-dark-brand-hover-color: $navbar-dark-active-color;
Loop
Navаваплы диңгез тактасы киңәйтү / җимерелү класслары (мәсәлән, .navbar-expand-lg
) $breakpoints
карта белән берләштерелгән һәм әйләнеш аша ясалган scss/_navbar.scss
.
// Generate series of `.navbar-expand-*` responsive classes for configuring
// where your navbar collapses.
.navbar-expand {
@each $breakpoint in map-keys($grid-breakpoints) {
$next: breakpoint-next($breakpoint, $grid-breakpoints);
$infix: breakpoint-infix($next, $grid-breakpoints);
// stylelint-disable-next-line scss/selector-no-union-class-name
&#{$infix} {
@include media-breakpoint-up($next) {
flex-wrap: nowrap;
justify-content: flex-start;
.navbar-nav {
flex-direction: row;
.dropdown-menu {
position: absolute;
}
.nav-link {
padding-right: $navbar-nav-link-padding-x;
padding-left: $navbar-nav-link-padding-x;
}
}
.navbar-nav-scroll {
overflow: visible;
}
.navbar-collapse {
display: flex !important; // stylelint-disable-line declaration-no-important
flex-basis: auto;
}
.navbar-toggler {
display: none;
}
}
}
}
}