in English

نوبار

بوٹسٹریپ کے طاقتور، ذمہ دار نیویگیشن ہیڈر، navbar کے لیے دستاویزات اور مثالیں۔ برانڈنگ، نیویگیشن، کولاپس پلگ ان اور مزید کے لیے سپورٹ شامل ہے۔

یہ کیسے کام کرتا ہے

نیوبار کے ساتھ شروع کرنے سے پہلے آپ کو یہ جاننے کی ضرورت ہے:

  • ریسپانسیو کولاپسنگ اور کلر اسکیم کلاسز .navbarکے لیے Navbars کو ریپنگ کی ضرورت ہوتی ہے ۔.navbar-expand{-sm|-md|-lg|-xl}
  • Navbars اور ان کے مشمولات بطور ڈیفالٹ سیال ہوتے ہیں۔ ان کی افقی چوڑائی کو محدود کرنے کے لیے اختیاری کنٹینرز کا استعمال کریں ۔
  • نیوبارز کے اندر وقفہ کاری اور صف بندی کو کنٹرول کرنے کے لیے ہماری اسپیسنگ اور فلیکس یوٹیلیٹی کلاسز کا استعمال کریں۔
  • Navbars بطور ڈیفالٹ جوابدہ ہوتے ہیں، لیکن آپ اسے تبدیل کرنے کے لیے آسانی سے ان میں ترمیم کر سکتے ہیں۔ جوابی رویہ ہمارے کولپس جاوا اسکرپٹ پلگ ان پر منحصر ہے۔
  • پرنٹنگ کے وقت Navbars بطور ڈیفالٹ چھپے ہوتے ہیں۔ میں شامل کرکے انہیں پرنٹ کرنے پر مجبور .d-printکریں .navbar۔ ڈسپلے یوٹیلیٹی کلاس دیکھیں ۔
  • کسی عنصر کا استعمال کرتے ہوئے رسائی کو یقینی بنائیں <nav>یا، اگر کوئی زیادہ عام عنصر استعمال کر رہے ہیں جیسے کہ ، ہر navbar میں <div>a کا اضافہ کریں role="navigation"تاکہ اسے معاون ٹیکنالوجیز کے صارفین کے لیے ایک تاریخی خطہ کے طور پر واضح طور پر شناخت کیا جا سکے۔
prefers-reduced-motionاس جزو کا اینیمیشن اثر میڈیا کے استفسار پر منحصر ہے ۔ ہماری ایکسیسبیلٹی دستاویزات کا کم موشن سیکشن دیکھیں ۔

تائید شدہ مواد

Navbars مٹھی بھر ذیلی اجزاء کے لیے بلٹ ان سپورٹ کے ساتھ آتے ہیں۔ ضرورت کے مطابق درج ذیل میں سے انتخاب کریں:

  • .navbar-brandآپ کی کمپنی، پروڈکٹ، یا پروجیکٹ کے نام کے لیے۔
  • .navbar-navپوری اونچائی اور ہلکے وزن والے نیویگیشن کے لیے (بشمول ڈراپ ڈاؤن کے لیے سپورٹ)۔
  • .navbar-togglerہمارے کولپس پلگ ان اور دیگر نیویگیشن ٹوگلنگ رویوں کے ساتھ استعمال کے لیے۔
  • .form-inlineکسی بھی فارم کنٹرول اور کارروائیوں کے لیے۔
  • .navbar-textمتن کے عمودی طور پر مرکز والے تاروں کو شامل کرنے کے لیے۔
  • .collapse.navbar-collapseپیرنٹ بریک پوائنٹ کے ذریعے navbar کے مواد کو گروپ کرنے اور چھپانے کے لیے۔

یہاں ایک ریسپانسیو لائٹ تھیم والے نیوبار میں شامل تمام ذیلی اجزاء کی ایک مثال ہے جو خود بخود 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>

Navbar نیویگیشن لنکس ہمارے .navاختیارات پر ان کی اپنی موڈیفائر کلاس کے ساتھ تعمی�� کرتے ہیں اور مناسب ریسپانسیو اسٹائلنگ کے لیے ٹوگلر کلاسز کے استعمال کی ضرورت ہوتی ہے۔ navbars میں نیویگیشن بھی زیادہ سے زیادہ افقی جگہ پر قبضہ کرنے کے لیے بڑھے گی۔navbars میں نیویگیشن آپ کے navbar کے مواد کو محفوظ طریقے سے سیدھ میں رکھنے

.activeموجودہ صفحہ کی نشاندہی کرنے کے لیے فعال ریاستیں — کے ساتھ — کا اطلاق براہ راست .nav-links یا ان کے فوری والدین پر کیا جا سکتا ہے .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>

اور چونکہ ہم اپنے navs کے لیے کلاسز کا استعمال کرتے ہیں، اگر آپ چاہیں تو آپ فہرست پر مبنی نقطہ نظر سے مکمل طور پر بچ سکتے ہیں۔

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
    <div class="navbar-nav">
      <a class="nav-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>

فارمز

مختلف فارم کنٹرولز اور اجزاء کو navbar کے اندر رکھیں .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>

ان نوبار فارمز کے حصے کے طور پر بھی مختلف بٹن سپورٹ کیے جاتے ہیں۔ یہ ایک زبردست یاد دہانی بھی ہے کہ عمودی سیدھ کی افادیت مختلف سائز کے عناصر کو سیدھ میں لانے کے لیے استعمال کی جا سکتی ہے۔

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

جگہ کا تعین

نیوبارز کو غیر جامد جگہوں پر رکھنے کے لیے ہماری پوزیشن یوٹیلیٹیز استعمال کریں۔ اوپر سے فکسڈ، نیچے سے فکسڈ، یا اوپر سے چپکا ہوا میں سے انتخاب کریں (صفحہ کے ساتھ اس وقت تک اسکرول کریں جب تک کہ یہ اوپر نہ پہنچ جائے، پھر وہیں رہتا ہے)۔ فکسڈ navbars استعمال کرتے ہیں position: fixed، یعنی وہ DOM کے عام بہاؤ سے کھینچے جاتے ہیں اور دوسرے عناصر کے ساتھ اوورلیپ کو روکنے کے لیے حسب ضرورت CSS (مثلاً، padding-topon the ) کی ضرورت پڑ سکتی ہے۔<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 ذیلی جزو) میں شامل کریں ۔ .navbar-collapseپہلے سے طے شدہ طور پر، اسکرولنگ 75vh(یا ویو پورٹ کی اونچائی کے 75%) پر شروع ہوتی ہے، لیکن آپ اسے ان لائن یا حسب ضرورت انداز کے ساتھ اوور رائڈ کر سکتے ہیں۔ بڑے ویو پورٹ پر جب navbar کو بڑھایا جائے گا، مواد ظاہر ہوگا جیسا کہ یہ ڈیفالٹ navbar میں ہوتا ہے۔

overflowبراہ کرم نوٹ کریں کہ یہ طرز عمل —when سیٹنگ overflow-y: auto(یہاں مواد کو اسکرول کرنے کی ضرورت ہے) کی ممکنہ خرابی کے ساتھ آتا ہے ، overflow-xکے مساوی ہے auto، جو کچھ افقی مواد کو تراشے گا۔

زیادہ سے زیادہ وقفہ کاری کے لیے کچھ اضافی مارجن یوٹیلیٹیز کے .navbar-nav-scrollساتھ ، کے ساتھ استعمال کرنے والی navbar کی ایک مثال یہ ہے۔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کلاس شامل نہ کریں۔

ٹوگلر

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نظریہ طور پر، یہ معاون ٹیکنالوجی کے صارفین کو ٹوگلر سے براہ راست اس کنٹینر پر جانے کی اجازت دیتا ہے جسے وہ کنٹرول کرتا ہے- لیکن اس کے لیے سپورٹ فی الحال کافی پیچیدہ ہے۔