স্কিপ করে মূল কন্টেন্ট এ যাও ডক্স নেভিগেশন এড়িয়ে যান
Check
in English

নববার

বুটস্ট্র্যাপের শক্তিশালী, প্রতিক্রিয়াশীল নেভিগেশন শিরোনাম, নেভিবারের জন্য ডকুমেন্টেশন এবং উদাহরণ। ব্র্যান্ডিং, নেভিগেশন, এবং আরও অনেক কিছুর জন্য সমর্থন অন্তর্ভুক্ত করে, আমাদের পতন প্লাগইনের জন্য সমর্থন সহ।

এই পৃষ্ঠায়

কিভাবে এটা কাজ করে

navbar দিয়ে শুরু করার আগে আপনার যা জানা দরকার তা এখানে:

  • রেসপন্সিভ কোলাপিং এবং কালার স্কিম ক্লাসের জন্য Navbars এর .navbarসাথে একটি মোড়ানো প্রয়োজন ।.navbar-expand{-sm|-md|-lg|-xl|-xxl}
  • Navbars এবং তাদের বিষয়বস্তু ডিফল্টরূপে তরল। বিভিন্ন উপায়ে তাদের অনুভূমিক প্রস্থ সীমিত করতে ধারক পরিবর্তন করুন ।
  • navbars মধ্যে ব্যবধান এবং প্রান্তিককরণ নিয়ন্ত্রণ করার জন্য আমাদের স্পেসিং এবং ফ্লেক্স ইউটিলিটি ক্লাস ব্যবহার করুন।
  • Navbars ডিফল্টরূপে প্রতিক্রিয়াশীল, কিন্তু আপনি এটি পরিবর্তন করতে সহজেই তাদের পরিবর্তন করতে পারেন। প্রতিক্রিয়াশীল আচরণ আমাদের সঙ্কুচিত জাভাস্ক্রিপ্ট প্লাগইনের উপর নির্ভর করে।
  • একটি উপাদান ব্যবহার করে অ্যাক্সেসযোগ্যতা নিশ্চিত করুন <nav>বা, যদি আরও সাধারণ উপাদান ব্যবহার করে যেমন একটি , সহায়ক প্রযুক্তি ব্যবহারকারীদের জন্য একটি ল্যান্ডমার্ক অঞ্চল হিসাবে স্পষ্টভাবে চিহ্নিত করতে প্রতিটি নেভিবারে <div>একটি যোগ করুন ৷role="navigation"
  • aria-current="page"বর্তমান পৃষ্ঠার জন্য বা aria-current="true"একটি সেটে বর্তমান আইটেমের জন্য ব্যবহার করে বর্তমান আইটেমটি নির্দেশ করুন ।
  • v5.2.0-এ নতুন: Navbars CSS ভেরিয়েবলের সাথে থিমযুক্ত হতে পারে যেগুলি .navbarবেস ক্লাসে স্কোপ করা হয়। .navbar-lightঅবচয় করা হয়েছে এবং .navbar-darkঅতিরিক্ত শৈলী যোগ করার পরিবর্তে CSS ভেরিয়েবল ওভাররাইড করার জন্য পুনরায় লেখা হয়েছে।
এই উপাদানটির অ্যানিমেশন প্রভাব prefers-reduced-motionমিডিয়া প্রশ্নের উপর নির্ভর করে। আমাদের অ্যাক্সেসিবিলিটি ডকুমেন্টেশনের হ্রাসকৃত গতি বিভাগটি দেখুন ।

সমর্থিত বিষয়বস্তু

মুষ্টিমেয় সাব-কম্পোনেন্টের জন্য Navbars বিল্ট-ইন সমর্থন নিয়ে আসে। প্রয়োজন অনুযায়ী নিম্নলিখিত থেকে চয়ন করুন:

  • .navbar-brandআপনার কোম্পানি, পণ্য বা প্রকল্পের নামের জন্য।
  • .navbar-navএকটি পূর্ণ-উচ্চতা এবং লাইটওয়েট নেভিগেশনের জন্য (ড্রপডাউনগুলির জন্য সমর্থন সহ)।
  • .navbar-togglerআমাদের পতন প্লাগইন এবং অন্যান্য নেভিগেশন টগল করার আচরণের সাথে ব্যবহারের জন্য।
  • যেকোন ফর্ম কন্ট্রোল এবং অ্যাকশনের জন্য ফ্লেক্স এবং স্পেসিং ইউটিলিটি।
  • .navbar-textটেক্সটের উল্লম্বভাবে কেন্দ্রীভূত স্ট্রিং যোগ করার জন্য।
  • .collapse.navbar-collapseএকটি প্যারেন্ট ব্রেকপয়েন্ট দ্বারা navbar বিষয়বস্তু গোষ্ঠীবদ্ধ এবং লুকানোর জন্য।
  • .navbar-scrollএকটি সেট করতে একটি ঐচ্ছিক যোগ করুন max-heightএবং প্রসারিত নেভিবার সামগ্রী স্ক্রোল করুন ৷

এখানে একটি প্রতিক্রিয়াশীল আলো-থিমযুক্ত ন্যাভবারে অন্তর্ভুক্ত সমস্ত উপ-উপাদানের একটি উদাহরণ রয়েছে যা lg(বড়) ব্রেকপয়েন্টে স্বয়ংক্রিয়ভাবে ভেঙে পড়ে।

html 
<nav class="navbar navbar-expand-lg 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="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Dropdown
          </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">Disabled</a>
        </li>
      </ul>
      <form class="d-flex" role="search">
        <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) এবং স্পেসিং ( me-auto, mb-2, mb-lg-0, me-2) ইউটিলিটি ক্লাস ব্যবহার করে।

ব্র্যান্ড

.navbar-brandবেশিরভাগ উপাদানগুলিতে প্রয়োগ করা যেতে পারে, তবে একটি অ্যাঙ্কর সবচেয়ে ভাল কাজ করে, কারণ কিছু উপাদানের জন্য ইউটিলিটি ক্লাস বা কাস্টম শৈলীর প্রয়োজন হতে পারে ।

পাঠ্য

.navbar-brandক্লাসের সাথে একটি উপাদানের মধ্যে আপনার পাঠ্য যোগ করুন ।

html 
<!-- As a link -->
<nav class="navbar bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
  </div>
</nav>

<!-- As a heading -->
<nav class="navbar bg-light">
  <div class="container-fluid">
    <span class="navbar-brand mb-0 h1">Navbar</span>
  </div>
</nav>

ছবি

.navbar-brandআপনি এর মধ্যে লেখাটিকে একটি দিয়ে প্রতিস্থাপন করতে পারেন <img>।

html 
<nav class="navbar bg-light">
  <div class="container">
    <a class="navbar-brand" href="#">
      <img src="/docs/5.2/assets/brand/bootstrap-logo.svg" alt="Bootstrap" width="30" height="24">
    </a>
  </div>
</nav>

ছবি এবং পাঠ্য

আপনি একই সময়ে একটি চিত্র এবং পাঠ্য যোগ করতে কিছু অতিরিক্ত ইউটিলিটি ব্যবহার করতে পারেন। .d-inline-blockএবং এর সংযোজন নোট .align-text-topকরুন <img>।

html 
<nav class="navbar bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">
      <img src="/docs/5.2/assets/brand/bootstrap-logo.svg" alt="Logo" width="30" height="24" class="d-inline-block align-text-top">
      Bootstrap
    </a>
  </div>
</nav>

Navbar নেভিগেশন লিঙ্কগুলি .navতাদের নিজস্ব মডিফায়ার ক্লাসের সাথে আমাদের বিকল্পগুলি তৈরি করে এবং সঠিক প্রতিক্রিয়াশীল স্টাইলিং এর জন্য টগলার ক্লাস ব্যবহার করা প্রয়োজন। আপনার navbar বিষয়বস্তু সুরক্ষিতভাবে সারিবদ্ধ রাখতে যতটা সম্ভব অনুভূমিক স্থান দখল করতে নেভিগেশন বৃদ্ধি পাবে ।

বর্তমান পৃষ্ঠাটি নির্দেশ করতে .activeক্লাসটি যুক্ত করুন ।.nav-link

অনুগ্রহ করে মনে রাখবেন যে আপনাকে aria-currentসক্রিয় এ বৈশিষ্ট্যটিও যোগ করতে হবে .nav-link।

html 
<nav class="navbar navbar-expand-lg 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>

এবং যেহেতু আমরা আমাদের ন্যাভিসের জন্য ক্লাস ব্যবহার করি, আপনি যদি চান তাহলে আপনি তালিকা-ভিত্তিক পদ্ধতি সম্পূর্ণরূপে এড়াতে পারেন।

html 
<nav class="navbar navbar-expand-lg 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

html 
<nav class="navbar navbar-expand-lg 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="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Dropdown 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><a class="dropdown-item" href="#">Something else here</a></li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</nav>

ফর্ম

একটি navbar এর মধ্যে বিভিন্ন ফর্ম নিয়ন্ত্রণ এবং উপাদান রাখুন:

html 
<nav class="navbar bg-light">
  <div class="container-fluid">
    <form class="d-flex" role="search">
      <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। এই আচরণ সামঞ্জস্য করার জন্য প্রয়োজন অনুযায়ী অতিরিক্ত ফ্লেক্স ইউটিলিটি ব্যবহার করুন।

html 
<nav class="navbar bg-light">
  <div class="container-fluid">
    <a class="navbar-brand">Navbar</a>
    <form class="d-flex" role="search">
      <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 সংরক্ষণ করতে পারেন।

html 
<nav class="navbar 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>

এই নেভিবার ফর্মগুলির অংশ হিসাবেও বিভিন্ন বোতাম সমর্থিত। এটি একটি দুর্দান্ত অনুস্মারক যে উল্লম্ব প্রান্তিককরণ ইউটিলিটিগুলি বিভিন্ন আকারের উপাদানগুলিকে সারিবদ্ধ করতে ব্যবহার করা যেতে পারে।

html 
<nav class="navbar 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। এই ক্লাসটি টেক্সটের স্ট্রিংগুলির জন্য উল্লম্ব প্রান্তিককরণ এবং অনুভূমিক ব্যবধান সামঞ্জস্য করে।

html 
<nav class="navbar bg-light">
  <div class="container-fluid">
    <span class="navbar-text">
      Navbar text with an inline element
    </span>
  </div>
</nav>

প্রয়োজন অনুসারে অন্যান্য উপাদান এবং ইউটিলিটিগুলির সাথে মিশ্রিত করুন।

html 
<nav class="navbar navbar-expand-lg 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>

রঙের স্কিম

v5.2.0-এ নতুন: Navbar থিমিং এখন CSS ভেরিয়েবল দ্বারা চালিত এবং তা অবমূল্যায়ন .navbar-lightকরা হয়েছে। CSS ভেরিয়েবলগুলি .navbar"হালকা" চেহারাতে ডিফল্টভাবে প্রয়োগ করা হয় এবং এর সাথে ওভাররাইড করা যেতে পারে .navbar-dark।

বুটস্ট্র্যাপের Sass এবং CSS ভেরিয়েবলের সমন্বয়ের জন্য Navbar থিমগুলি আগের চেয়ে সহজ। হালকা ব্যাকগ্রাউন্ড রঙের সাথে ব্যবহারের জন্য ডিফল্ট হল আমাদের "হালকা নেভিবার", তবে আপনি .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" style="background-color: #e3f2fd;">
  <!-- Navbar content -->
</nav>

পাত্রে

যদিও এটির প্রয়োজন নেই, আপনি একটি নেভিবারকে .containerএকটি পৃষ্ঠায় কেন্দ্রে মোড়ানো করতে পারেন-যদিও মনে রাখবেন যে একটি অভ্যন্তরীণ ধারক এখনও প্রয়োজন। অথবা আপনি একটি স্থির বা স্ট্যাটিক শীর্ষ নেভিবারের.navbar বিষয়বস্তুকে কেন্দ্রে রাখতে এর ভিতরে একটি ধারক যোগ করতে পারেন ।

html 
<div class="container">
  <nav class="navbar navbar-expand-lg bg-light">
    <div class="container-fluid">
      <a class="navbar-brand" href="#">Navbar</a>
    </div>
  </nav>
</div>

আপনার নেভিবারে কন্টেন্ট কতটা প্রশস্ত করা হয়েছে তা পরিবর্তন করতে প্রতিক্রিয়াশীল পাত্রগুলির যেকোনো একটি ব্যবহার করুন।

html 
<nav class="navbar navbar-expand-lg bg-light">
  <div class="container-md">
    <a class="navbar-brand" href="#">Navbar</a>
  </div>
</nav>

বসানো

নন-স্ট্যাটিক পজিশনে ন্যাভবার রাখতে আমাদের পজিশন ইউটিলিটি ব্যবহার করুন। স্থির থেকে শীর্ষে, নীচে স্থির, শীর্ষে আটকে থাকা (পৃষ্ঠাটি শীর্ষে না পৌঁছানো পর্যন্ত স্ক্রোল করে, তারপরে সেখানে থাকে) বা নীচে আটকানো (পৃষ্ঠাটি নীচে না পৌঁছানো পর্যন্ত স্ক্রোল করে, তারপরে থাকে) চয়ন করুন সেখানে)।

স্থির ন্যাভবার ব্যবহার করে position: fixed, যার অর্থ তারা DOM-এর স্বাভাবিক প্রবাহ থেকে টেনে নিয়ে যায় এবং অন্যান্য উপাদানের সাথে ওভারল্যাপ রোধ করতে কাস্টম CSS (যেমন, padding-topঅন ) প্রয়োজন হতে পারে।<body>

html 
<nav class="navbar bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Default</a>
  </div>
</nav>
html 
<nav class="navbar fixed-top bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Fixed top</a>
  </div>
</nav>
html 
<nav class="navbar fixed-bottom bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Fixed bottom</a>
  </div>
</nav>
html 
<nav class="navbar sticky-top bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Sticky top</a>
  </div>
</nav>
html 
<nav class="navbar sticky-bottom bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Sticky bottom</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;"

html 
<nav class="navbar navbar-expand-lg 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="#" role="button" data-bs-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" role="search">
        <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দেখানো নেই:

html 
<nav class="navbar navbar-expand-lg 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" role="search">
        <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>

বাম দিকে দেখানো একটি ব্র্যান্ডের নাম এবং ডানদিকে টগলারের সাথে:

html 
<nav class="navbar navbar-expand-lg 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" role="search">
        <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>

বাম দিকে একটি টগলার এবং ডানদিকে ব্র্যান্ড নাম সহ:

html 
<nav class="navbar navbar-expand-lg 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" role="search">
        <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ম্যাচিং করে, এটি সহজেই করা যায়!

html 
<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-*ক্লাসটি সম্পূর্ণভাবে বাদ দিন।

html 
<nav class="navbar 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" 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="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
              Dropdown
            </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>
        </ul>
        <form class="d-flex" role="search">
          <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-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-darkএর সাথে যোগ করি।.bg-dark.navbar.text-bg-dark.offcanvas.dropdown-menu-dark.dropdown-menu.btn-close-white.btn-close

html 
<nav class="navbar navbar-dark bg-dark fixed-top">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Offcanvas dark navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasDarkNavbar" aria-controls="offcanvasDarkNavbar">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="offcanvas offcanvas-end text-bg-dark" tabindex="-1" id="offcanvasDarkNavbar" aria-labelledby="offcanvasDarkNavbarLabel">
      <div class="offcanvas-header">
        <h5 class="offcanvas-title" id="offcanvasDarkNavbarLabel">Dark offcanvas</h5>
        <button type="button" class="btn-close btn-close-white" 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="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
              Dropdown
            </a>
            <ul class="dropdown-menu dropdown-menu-dark">
              <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" role="search">
          <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
          <button class="btn btn-success" type="submit">Search</button>
        </form>
      </div>
    </div>
  </div>
</nav>

সিএসএস

ভেরিয়েবল

v5.2.0 এ যোগ করা হয়েছে

বুটস্ট্র্যাপের বিকশিত CSS ভেরিয়েবল পদ্ধতির অংশ হিসাবে, navbars এখন .navbarউন্নত রিয়েল-টাইম কাস্টমাইজেশনের জন্য স্থানীয় CSS ভেরিয়েবল ব্যবহার করে। CSS ভেরিয়েবলের মান Sass এর মাধ্যমে সেট করা হয়, তাই Sass কাস্টমাইজেশন এখনও সমর্থিত।

  --#{$prefix}navbar-padding-x: #{if($navbar-padding-x == null, 0, $navbar-padding-x)};
  --#{$prefix}navbar-padding-y: #{$navbar-padding-y};
  --#{$prefix}navbar-color: #{$navbar-light-color};
  --#{$prefix}navbar-hover-color: #{$navbar-light-hover-color};
  --#{$prefix}navbar-disabled-color: #{$navbar-light-disabled-color};
  --#{$prefix}navbar-active-color: #{$navbar-light-active-color};
  --#{$prefix}navbar-brand-padding-y: #{$navbar-brand-padding-y};
  --#{$prefix}navbar-brand-margin-end: #{$navbar-brand-margin-end};
  --#{$prefix}navbar-brand-font-size: #{$navbar-brand-font-size};
  --#{$prefix}navbar-brand-color: #{$navbar-light-brand-color};
  --#{$prefix}navbar-brand-hover-color: #{$navbar-light-brand-hover-color};
  --#{$prefix}navbar-nav-link-padding-x: #{$navbar-nav-link-padding-x};
  --#{$prefix}navbar-toggler-padding-y: #{$navbar-toggler-padding-y};
  --#{$prefix}navbar-toggler-padding-x: #{$navbar-toggler-padding-x};
  --#{$prefix}navbar-toggler-font-size: #{$navbar-toggler-font-size};
  --#{$prefix}navbar-toggler-icon-bg: #{escape-svg($navbar-light-toggler-icon-bg)};
  --#{$prefix}navbar-toggler-border-color: #{$navbar-light-toggler-border-color};
  --#{$prefix}navbar-toggler-border-radius: #{$navbar-toggler-border-radius};
  --#{$prefix}navbar-toggler-focus-width: #{$navbar-toggler-focus-width};
  --#{$prefix}navbar-toggler-transition: #{$navbar-toggler-transition};

কিছু অতিরিক্ত CSS ভেরিয়েবলও এখানে রয়েছে .navbar-nav:

  --#{$prefix}nav-link-padding-x: 0;
  --#{$prefix}nav-link-padding-y: #{$nav-link-padding-y};
  @include rfs($nav-link-font-size, --#{$prefix}nav-link-font-size);
  --#{$prefix}nav-link-font-weight: #{$nav-link-font-weight};
  --#{$prefix}nav-link-color: var(--#{$prefix}navbar-color);
  --#{$prefix}nav-link-hover-color: var(--#{$prefix}navbar-hover-color);
  --#{$prefix}nav-link-disabled-color: var(--#{$prefix}navbar-disabled-color);

CSS ভেরিয়েবলের মাধ্যমে কাস্টমাইজেশন ক্লাসে দেখা যায় .navbar-darkযেখানে আমরা ডুপ্লিকেট CSS নির্বাচক যোগ না করে নির্দিষ্ট মান ওভাররাইড করি।

  --#{$prefix}navbar-color: #{$navbar-dark-color};
  --#{$prefix}navbar-hover-color: #{$navbar-dark-hover-color};
  --#{$prefix}navbar-disabled-color: #{$navbar-dark-disabled-color};
  --#{$prefix}navbar-active-color: #{$navbar-dark-active-color};
  --#{$prefix}navbar-brand-color: #{$navbar-dark-brand-color};
  --#{$prefix}navbar-brand-hover-color: #{$navbar-dark-brand-hover-color};
  --#{$prefix}navbar-toggler-border-color: #{$navbar-dark-toggler-border-color};
  --#{$prefix}navbar-toggler-icon-bg: #{escape-svg($navbar-dark-toggler-icon-bg)};

Sass ভেরিয়েবল

সমস্ত নেভিবারগুলির জন্য ভেরিয়েবল:

$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-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-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-dark-brand-color:           $navbar-dark-active-color;
$navbar-dark-brand-hover-color:     $navbar-dark-active-color;

Sass লুপ

প্রতিক্রিয়াশীল নেভিবার প্রসারিত/পতন ক্লাস (যেমন, .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: var(--#{$prefix}navbar-nav-link-padding-x);
            padding-left: var(--#{$prefix}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 {
          // stylelint-disable declaration-no-important
          position: static;
          z-index: auto;
          flex-grow: 1;
          width: auto !important;
          height: auto !important;
          visibility: visible !important;
          background-color: transparent !important;
          border: 0 !important;
          transform: none !important;
          @include box-shadow(none);
          @include transition(none);
          // stylelint-enable declaration-no-important

          .offcanvas-header {
            display: none;
          }

          .offcanvas-body {
            display: flex;
            flex-grow: 0;
            padding: 0;
            overflow-y: visible;
          }
        }
      }
    }
  }
}