نوبار
بوٹسٹریپ کے طاقتور، ذمہ دار نیویگیشن ہیڈر، navbar کے لیے دستاویزات اور مثالیں۔ برانڈنگ، نیویگیشن اور مزید کے لیے سپورٹ شامل ہے، بشمول ہمارے کولپس پلگ ان کے لیے سپورٹ۔
یہ کیسے کام کرتا ہے
نیوبار کے ساتھ شروع کرنے سے پہلے آپ کو یہ جاننے کی ضرورت ہے:
- ریسپانسیو کولاپسنگ اور کلر اسکیم کلاسز
.navbar
کے لیے Navbars کو ریپنگ کی ضرورت ہوتی ہے ۔.navbar-expand{-sm|-md|-lg|-xl|-xxl}
- Navbars اور ان کے مشمولات بطور ڈیفالٹ سیال ہوتے ہیں۔ کنٹینر کی افقی چوڑائی کو مختلف طریقوں سے محدود کرنے کے لیے تبدیل کریں ۔
- نیوبارز کے اندر وقفہ کاری اور صف بندی کو کنٹرول کرنے کے لیے ہماری اسپیسنگ اور فلیکس یوٹیلیٹی کلاسز کا استعمال کریں۔
- Navbars بطور ڈیفالٹ جوابدہ ہوتے ہیں، لیکن آپ اسے تبدیل کرنے کے لیے آسانی سے ان میں ترمیم کر سکتے ہیں۔ جوابی رویہ ہمارے کولپس جاوا اسکرپٹ پلگ ان پر منحصر ہے۔
- کسی عنصر کا استعمال کرتے ہوئے رسائی کو یقینی بنائیں
<nav>
یا، اگر کوئی زیادہ عام عنصر استعمال کر رہے ہیں جیسے کہ ، ہر navbar میں<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 کے مواد کو گروپ کرنے اور چھپانے کے لیے۔.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 میں نیویگیشن آپ کے navbar کے مواد کو محفوظ طریقے سے سیدھ میں رکھنے کے لیے زیادہ سے زیادہ افقی جگہ پر قبضہ کرنے کے لیے بھی بڑھے گی ۔
موجودہ صفحہ کی نشاندہی کرنے کے لیے .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>
اور چونکہ ہم اپنے navs کے لیے کلاسز کا استعمال کرتے ہیں، اگر آپ چاہیں تو آپ فہرست پر مبنی نقطہ نظر سے مکمل طور پر بچ سکتے ہیں۔
<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>
ان پٹ گروپس بھی کام کرتے ہیں۔ اگر آپ کا navbar ایک مکمل شکل ہے، یا زیادہ تر ایک شکل ہے، تو آپ <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 کو لپیٹ سکتے ہیں ۔ یا آپ کسی فکسڈ یا سٹیٹک ٹاپ نیوبار.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>
جگہ کا تعین
نیوبارز کو غیر جامد جگہوں پر رکھنے کے لیے ہماری پوزیشن یوٹیلیٹیز استعمال کریں۔ اوپر سے فکسڈ، نیچے سے فکسڈ، یا اوپر سے چپکا ہوا میں سے انتخاب کریں (صفحہ کے ساتھ اس وقت تک اسکرول کریں جب تک کہ یہ اوپر نہ پہنچ جائے، پھر وہیں رہتا ہے)۔ فکسڈ navbars استعمال کرتے ہیں position: fixed
، یعنی وہ DOM کے عام بہاؤ سے کھینچے جاتے ہیں اور دوسرے عناصر کے ساتھ اوورلیپ کو روکنے کے لیے حسب ضرورت CSS (مثلاً، padding-top
on the ) کی ضرورت پڑ سکتی ہے۔<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 ذیلی جزو) میں شامل کریں ۔ .navbar-nav
پہلے سے طے شدہ طور پر، اسکرولنگ 75vh
(یا ویو پورٹ کی اونچائی کے 75%) پر شروع ہوتی ہے، لیکن آپ اسے مقامی CSS کسٹم پراپرٹی --bs-navbar-height
یا اپنی مرضی کے انداز کے ساتھ اوور رائڈ کر سکتے ہیں۔ بڑے ویو پورٹ پر جب navbar کو بڑھایا جائے گا، مواد ظاہر ہوگا جیسا کہ یہ ڈیفالٹ navbar میں ہوتا ہے۔
overflow
براہ کرم نوٹ کریں کہ یہ طرز عمل —when سیٹنگ overflow-y: auto
(یہاں مواد کو اسکرول کرنے کی ضرورت ہے) کی ممکنہ خرابی کے ساتھ آتا ہے ، overflow-x
کے مساوی ہے auto
، جو کچھ افقی مواد کو تراشے گا۔
زیادہ سے زیادہ وقفہ کاری کے لیے کچھ اضافی مارجن یوٹیلیٹیز کے .navbar-nav-scroll
ساتھ ، کے ساتھ استعمال کرنے والی navbar کی ایک مثال یہ ہے۔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
کلاس شامل نہ کریں۔
ٹوگلر
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">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>
جب آپ یہ کرتے ہیں، تو ہم تجویز کرتے ہیں کہ اضافی JavaScript شامل کریں تاکہ کنٹینر کے کھلنے پر پروگرام کے لحاظ سے توجہ مرکوز کی جا سکے۔ بصورت دیگر، کی بورڈ استعمال کرنے والوں اور معاون ٹیکنالوجیز کے استعمال کنندگان کو نئے انکشاف شدہ مواد کو تلاش کرنے میں دشواری کا سامنا کرنا پڑے گا - خاص طور پر اگر کنٹینر جو کھولا گیا تھا وہ دستاویز کے ڈھانچے میں ٹوگلر سے پہلے آتا ہے۔ ہم یہ بھی تجویز کرتے ہیں کہ مواد کے کنٹینر کی طرف اشارہ کرتے ہوئے اس بات کو یقینی بنائیں کہ ٹوگلر میں 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;
}
}
}
}
}