نوبار
د بوټسټریپ ځواکمن ، ځواب ویونکي نیویګیشن سرلیک ، نوبار لپاره اسناد او مثالونه. د برانډینګ ، نیویګیشن او نور ډیر څه لپاره ملاتړ شامل دي ، پشمول زموږ د سقوط پلگ ان لپاره ملاتړ.
څنګه کار کوي
دلته هغه څه دي چې تاسو اړتیا لرئ د نوبار سره پیل کولو دمخه پوه شئ:
- Navbars
.navbar
د.navbar-expand{-sm|-md|-lg|-xl|-xxl}
ځواب ویونکي سقوط او رنګ سکیم ټولګیو لپاره لپاسه اړتیا لري. - Navbars او د دوی مینځپانګې په ډیفالټ ډول مایع دي. کانټینر بدل کړئ ترڅو د دوی افقی پلنوالی په مختلفو لارو محدود کړي.
- زموږ د فاصلو او انعطاف افادیت ټولګي په نیوبارونو کې د فاصلې کنټرول او تنظیم کولو لپاره وکاروئ.
- Navbars د ډیفالټ لخوا ځواب ویونکي دي، مګر تاسو کولی شئ په اسانۍ سره د دې بدلولو لپاره ترمیم کړئ. ځواب ورکوونکی چلند زموږ د جاواسکریپټ پلگ ان کولپس پورې اړه لري.
- د یو عنصر په کارولو سره د لاسرسي ډاډ ترلاسه کړئ
<nav>
یا که چیرې نور عام عنصر وکاروئ لکه a ، په هر نوببار کې<div>
a اضافه کړئ ترڅو دا د مرستندویه ټیکنالوژیو کاروونکو لپاره د یوې مهمې سیمې په توګه په څرګند ډول وپیژني.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">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.1/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.1/assets/brand/bootstrap-logo.svg" alt="" width="30" height="24" class="d-inline-block align-text-top">
Bootstrap
</a>
</div>
</nav>
Nav
د Navbar نیویګیشن لینکونه زموږ په .nav
اختیارونو کې د خپل ترمیم کونکي ټولګي سره رامینځته کوي او د مناسب ځواب ویونکي سټایل لپاره د توګلر ټولګیو کارولو ته اړتیا لري. په navbars کې نیویګیشن به د امکان تر حده د افقی ځای نیولو لپاره وده وکړي ترڅو ستاسو د نیوبار مینځپانګې په خوندي ډول تنظیم شي.
د اوسنۍ پاڼې د ښودلو لپاره .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">Disabled</a>
</li>
</ul>
</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="#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">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>
متن
Navbars کېدای شي په مرسته د متن ټوټې ولري .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>
ځای پرځای کول
په غیر جامد موقعیتونو کې د نیوبارونو ځای په ځای کولو لپاره زموږ د موقعیت اسانتیاوې وکاروئ. له فکس شوي څخه پورته ته غوره کړئ، لاندې ته ثابت شوي، یا پورتنۍ ته چپک شوي (د پاڼې سره سکرول تر هغه پورې چې پورته ته ورسیږي، بیا هلته پاتې کیږي). ثابت نیوبارونه کاروي position: fixed
، پدې معنی چې دوی د DOM د نورمال جریان څخه ایستل شوي او ممکن د نورو عناصرو سره د مخنیوي لپاره دودیز CSS (د مثال padding-top
په توګه) ته اړتیا ولري.<body>
دا هم په یاد ولرئ چې .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>
سکرول کول
.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">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>
ځواب ورکوونکي چلندونه
Navbars کولی شي .navbar-toggler
, .navbar-collapse
, او .navbar-expand{-sm|-md|-lg|-xl|-xxl}
ټولګي وکاروي ترڅو معلومه کړي چې کله د دوی مینځپانګه د تڼۍ شاته سقوط کوي. د نورو اسانتیاوو سره په ترکیب کې، تاسو کولی شئ په اسانۍ سره وټاکئ کله چې ځانګړي عناصر ښکاره یا پټ کړئ.
د نیوبارونو لپاره چې هیڅکله سقوط نه کوي ، نوبار کې .navbar-expand
ټولګي اضافه کړئ. د نیوبارونو لپاره چې تل سقوط کوي، هیڅ .navbar-expand
ټولګي مه اضافه کړئ.
ټګګر
د نوبار ټګلرز د ډیفالټ له مخې کیڼ اړخ ته تنظیم شوي ، مګر که دوی د ورور عنصر تعقیب کړي لکه a .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">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">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">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>
کله چې تاسو دا کار کوئ، موږ وړاندیز کوو چې اضافي جاوا سکریپټ شامل کړئ ترڅو تمرکز په پروګرام کې په کانټینر کې حرکت وکړي کله چې دا پرانیستل شي. که نه نو، د کیبورډ کاروونکي او د مرستندویه ټیکنالوژیو کاروونکي به احتمال ولري چې د نوي ښکاره شوي منځپانګې په موندلو کې سخت وخت ولري - په ځانګړې توګه که هغه کانټینر چې پرانیستل شوی وي د سند په جوړښت کې د ټوګلر څخه مخکې راشي. موږ دا هم وړاندیز کوو چې ډاډ ترلاسه کړئ چې توګلر د مینځپانګې کانټینر aria-controls
ته په ګوته کول ، ځانګړتیا id
لري. په تیوري کې، دا د مرستندویه ټیکنالوژۍ کاروونکو ته اجازه ورکوي چې په مستقیم ډول له ټوګلر څخه هغه کانټینر ته لاړ شي چې دا کنټرولوي – مګر د دې لپاره ملاتړ اوس مهال خورا پیچلی دی.
آفکانوس
د آف کینوس پلگ ان سره خپل پراخیدونکی او نړیدلی نوبار په آف کینوس دراز کې بدل کړئ. موږ دواړه د آف کینوس ډیفالټ سټایلونو ته پراختیا ورکوو او .navbar-expand-*
د متحرک او انعطاف وړ نیویګیشن سائډبار جوړولو لپاره زموږ ټولګي وکاروو.
په لاندې مثال کې، د آفکانوس نوبار جوړولو لپاره چې تل په ټولو بریک پوایټونو کې سقوط کیږي، .navbar-expand-*
ټولګي په بشپړه توګه پریږدئ.
<nav class="navbar navbar-light bg-light fixed-top">
<div class="container-fluid">
<a class="navbar-brand" href="#">Offcanvas navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasNavbar" aria-controls="offcanvasNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasNavbar" aria-labelledby="offcanvasNavbarLabel">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="offcanvasNavbarLabel">Offcanvas</h5>
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body">
<ul class="navbar-nav justify-content-end flex-grow-1 pe-3">
<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="offcanvasNavbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown
</a>
<ul class="dropdown-menu" aria-labelledby="offcanvasNavbarDropdown">
<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>
</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>
</div>
</nav>
د آف کینوس نوبار جوړولو لپاره چې په یو ځانګړي وقفې کې په نورمال نوبار کې پراخیږي لکه lg
، وکاروئ .navbar-expand-lg
.
<nav class="navbar navbar-light navbar-expand-lg bg-light fixed-top">
<a class="navbar-brand" href="#">Offcanvas navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#navbarOffcanvasLg" aria-controls="navbarOffcanvasLg">
<span class="navbar-toggler-icon"></span>
</button>
<div class="offcanvas offcanvas-end" tabindex="-1" id="navbarOffcanvasLg" aria-labelledby="navbarOffcanvasLgLabel">
...
</div>
</nav>
ساس
متغیرات
$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;
لوپ
ځواب ورکوونکی نوبار پراخول / سقوط ټولګي (لکه، .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;
}
.offcanvas-header {
display: none;
}
.offcanvas {
position: inherit;
bottom: 0;
z-index: 1000;
flex-grow: 1;
visibility: visible !important; // stylelint-disable-line declaration-no-important
background-color: transparent;
border-right: 0;
border-left: 0;
@include transition(none);
transform: none;
}
.offcanvas-top,
.offcanvas-bottom {
height: auto;
border-top: 0;
border-bottom: 0;
}
.offcanvas-body {
display: flex;
flex-grow: 0;
padding: 0;
overflow-y: visible;
}
}
}
}
}