Source

نوبار

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

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

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

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

معاون ذیلی اجزاء کی مثال اور فہرست کے لیے پڑھیں۔

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

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="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
          <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" href="#">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.1/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.1/assets/brand/bootstrap-solid.svg" width="30" height="30" class="d-inline-block align-top" alt="">
    Bootstrap
  </a>
</nav>

Navbar نیویگیشن لنکس ہمارے .navاختیارات پر ان کی اپنی موڈیفائر کلاس کے ساتھ تعمیر کرتے ہیں اور مناسب ریسپانسیو اسٹائلنگ کے لیے ٹوگلر کلاسز کے استعمال کی ضرورت ہوتی ہے۔ 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" href="#">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-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
      <a class="nav-item nav-link" href="#">Features</a>
      <a class="nav-item nav-link" href="#">Pricing</a>
      <a class="nav-item nav-link disabled" href="#">Disabled</a>
    </div>
  </div>
</nav>

آپ اپنے navbar 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="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown link
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
          <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: 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>

کنٹینرز

اگرچہ اس کی ضرورت نہیں ہے، آپ ایک صفحہ پر اسے مرکز کرنے کے لیے ایک میں لپیٹ سکتے ہیں یا کسی فکسڈ یا سٹیٹک ٹاپ navbar.container کے مواد کو صرف مرکز میں شامل کر سکتے ہیں ۔

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

جوابدہ طرز عمل

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" href="#">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" href="#">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" href="#">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>

بیرونی مواد

بعض اوقات آپ صفحہ پر کہیں اور چھپے ہوئے مواد کو متحرک کرنے کے لیے کولپس پلگ ان کا استعمال کرنا چاہتے ہیں۔ کیونکہ ہمارا پلگ ان idاور data-targetملاپ پر کام کرتا ہے، یہ آسانی سے ہو جاتا ہے!

<div class="pos-f-t">
  <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>