Bootstrap 5 ការរដួលរបស់ការរដួល

নেভিগেশন বার্তা

নেভিগেশন বার্তা হল পৃষ্ঠার শীর্ষের নেভিগেশন হেডার

প্রথমিক নেভিগেশন বার্তা

Bootstrap ব্যবহার করে, নেভিগেশন বার্তা স্ক্রিনের মাপ অনুযায়ী সম্প্রসারিত বা মুছে যাওয়ার সম্ভব

অনুগ্রহ করে .navbar শ্রেণীকে প্রমাণিত নেভিগেশন বার্তা তৈরি করুন, এরপর প্রতিক্রিয় সারিবদ্ধ শ্রেণী.navbar-expand-xxl|xl|lg|md|sm（বড়, বড় বড়, বড়, মাঝারি ডিভাইসে হোরাইজন্টাল সারিবদ্ধ বা ছোট স্ক্রিনে ভিক্টিক্যাল হয় নেভিগেশন বার্তা）。

নেভিগেশন বার্তায় লিঙ্ক যোগ করতে class="navbar-nav" রঙ <ul> উপাদান (বা <div>）。তারপর .nav-item শ্রেণীর <li> উপাদান, এরপর .nav-link শ্রেণীর <a> উপাদানকে

প্রতিমান

<-- গ্রীষ্মকালীন হোরাইজন্টাল নেভিগেশন বার্তা, ছোট স্ক্রিনে ভিক্টিক্যাল হয় -->
<nav class="navbar navbar-expand-sm bg-light">
  <div class="container-fluid">
    <-- লিঙ্ক -->
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" href="#">লিঙ্ক 1</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">লিঙ্ক 2</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">লিঙ্ক 3</a>
      </li>
    </ul>
  </div>
</nav>

স্বয়ংক্রিয়ভাবে প্রয়োগ করুন

ভিক্টিক্যাল নেভিগেশন বার্তা

মুছে দিন .navbar-expand-* শ্রেণীকে সর্বদা ভিক্টিক্যাল নেভিগেশন বার্তা তৈরি করতে

প্রতিমান

<-- গ্রীষ্মকালীন ভিক্টিক্যাল নেভিগেশন বার্তা -->
<nav class="navbar bg-light">
  ...
</nav>

স্বয়ংক্রিয়ভাবে প্রয়োগ করুন

কেন্দ্রীভূত নেভিগেশন বার্তা

যোগ করুন .justify-content-center শ্রেণীকে নেভিগেশন বার্তা কেন্দ্রীভূত করতে

প্রতিমান

<nav class="navbar navbar-expand-sm bg-light justify-content-center">
  ...
</nav>

স্বয়ংক্রিয়ভাবে প্রয়োগ করুন

রঙায়িত নেভিগেশন বার্তা

কোনও .bg-color শ্রেণীকে নেভিগেশন বার্তার পটভূমির রঙ পরিবর্তন করতে

  • .bg-primary
  • .bg-success
  • .bg-info
  • .bg-warning
  • .bg-danger
  • .bg-secondary
  • .bg-dark
  • .bg-light

টীকা:অনুগ্রহ করে .navbar-dark শ্রেণীকে নেভিগেশন বার্তার সকল লিঙ্ককে সাদা লেখার রঙ যোগ করুন, বা ব্যবহার করুন .navbar-light শ্রেণীকে কালো লেখার রঙ যোগ করুন。

প্রতিমান

<-- গ্রীষ্মকালীন পটভূমি, সাদা লেখার টেক্সট -->
<nav class="navbar navbar-expand-sm bg-light navbar-light">
  <div class="container-fluid">
    <ul class="navbar-nav">
      <li class="nav-item">
        活动
      </li>
     <li class="nav-item">
        <a class="nav-link" href="#">লিঙ্ক</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">লিঙ্ক</a>
      </li>
      <li class="nav-item">
        <a class="nav-link active" href="#">সক্রিয়</a>
      </li>
    </ul>
  </div>
</nav>
<a class="nav-link disabled" href="#">অসক্রিয়</a>
<!-- কালো পটভূমি, সাদা লিখন -->
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">...</nav>
<!-- নীল পটভূমি, সাদা লিখন -->

স্বয়ংক্রিয়ভাবে প্রয়োগ করুন

<nav class="navbar navbar-expand-sm bg-primary navbar-dark">...</nav>র সক্রিয়/অসক্রিয় অবস্থা .active র ক্লাস <a> র মেম্বার নিয়ে বার্তা উপস্থাপন করতে .disabled র ক্লাস ব্যবহার করেন

ব্র্যান্ড / লগো

.navbar-brand র ক্লাস ব্যবহার করেন

প্রতিমান

<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Logo</a>
  </div>
</nav>

স্বয়ংক্রিয়ভাবে প্রয়োগ করুন

যদি আপনি .navbar-brand র বাটনের সাথে ব্যবহৃত হলে, Bootstrap 5 স্বচালিতভাবে চিত্রের শৈলী সংযোজন করবে, নেভিগেশনের উপরিনীতি করবে。

প্রতিমান

<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">
      <img src="logo.png" alt="Avatar Logo" style="width:40px;" class="rounded-pill"> 
    </a>
  </div>
</nav>

স্বয়ংক্রিয়ভাবে প্রয়োগ করুন

নেভিগেশন বার্তা

অনুগ্রহ করে .navbar-text যে কোনও অলিঙ্কসহ নেভিগেশন বার্তার উপরিনীতি করা হয় (নিয়মিত মাঝামাঝি প্যাডিং এবং লিঙ্ক রঙের নিশ্চয়)。

প্রতিমান

<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
  <div class="container-fluid">
    <span class="navbar-text">নেভিগেশন বার্তা</span>
  </div>
</nav>

স্বয়ংক্রিয়ভাবে প্রয়োগ করুন

অনেক সময়, বিশেষ করে ছোট স্ক্রিনের ক্ষেত্রে, আপনি নেভিগেশন লিঙ্কগুলিকে লুকাতে চান এবং একটি বাটনের পরিবর্তে ব্যবহার করতে চান

যদি আপনি একটি ফোল্ডাবল নেভিগেশন বানাতে চান class="navbar-toggler"、data-bs-toggle="collapse" এবং data-bs-target="#thetarget" র নেভিগেশন কনটেন্ট (লিঙ্কসহ) রক্ষা করা হয় class="collapse navbar-collapse" র অংশের <div> মেম্বারে যা বাটনের data-bs-target ম্যাচ হওয়া id："thetarget"。

প্রতিমান

<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Logo</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#collapsibleNavbar">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="collapsibleNavbar">
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link" href="#">লিঙ্ক</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">লিঙ্ক</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">লিঙ্ক</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

স্বয়ংক্রিয়ভাবে প্রয়োগ করুন

টীকা:আপনি আরও মুছতে পারেন: .navbar-expand-md শ্রেণী নেভিগেশন বারের লিঙ্ককে সর্বদা লুকিয়ে রাখতে এবং টুল বাটনকে দেখাতে হয়。

ড্রপডাউন নেভিগেশন বার

নেভিগেশন বার ড্রপডাউন মেনুকে ধারণ করতে পারে:

প্রতিমান

<li class="nav-item dropdown">
  <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown">ড্রপডাউন মেনু</a>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">লিঙ্ক</a></li>
    <li><a class="dropdown-item" href="#">আরেকটি লিঙ্ক</a></li>
    <li><a class="dropdown-item" href="#">তৃতীয় লিঙ্ক</a></li>
  </ul>
</li>

স্বয়ংক্রিয়ভাবে প্রয়োগ করুন

নেভিগেশন বারের মেনু ও বাটন

আপনি আরও নেভিগেশন বারের মধ্যে ফর্ম সমাবেশ করতে পারেন:

প্রতিমান

<nav class="navbar navbar-expand-sm navbar-dark bg-dark">
  <div class="container-fluid">
    <a class="navbar-brand" href="javascript:void(0)">Logo</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#mynavbar">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="mynavbar">
      <ul class="navbar-nav me-auto">
        <li class="nav-item">
          <a class="nav-link" href="javascript:void(0)">লিঙ্ক</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="javascript:void(0)">লিঙ্ক</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="javascript:void(0)">লিঙ্ক</a>
        </li>
      </ul>
      <form class="d-flex">
        <input class="form-control me-2" type="text" placeholder="Search">
        <button class="btn btn-primary" type="button">Search</button>
      </form>
    </div>
  </div>
</nav>

স্বয়ংক্রিয়ভাবে প্রয়োগ করুন

স্থায়ী নেভিগেশন বার

নেভিগেশন বারটি পৃষ্ঠার শীর্ষ বা নিচে স্থায়ী করা যেতে পারে

স্থায়ী নেভিগেশন বারটি পৃষ্ঠার স্ক্রোল থেকে স্বতন্ত্র স্থায়ী স্থান (শীর্ষ বা নিচ) তে দৃশ্যমান থাকবে

.fixed-top শ্রেণীটি নেভিগেশন বারটিকে পৃষ্ঠার উপর স্থায়ী করেশীর্ষ:

প্রতিমান

<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">
  ...
</nav>

স্বয়ংক্রিয়ভাবে প্রয়োগ করুন

নিচের নেভিগেশন বারটিকে পৃষ্ঠার নিচে স্থায়ী করতে .fixed-bottom শ্রেণী ব্যবহার করুন:

প্রতিমান

<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-bottom">
  ...
</nav>

স্বয়ংক্রিয়ভাবে প্রয়োগ করুন

অনুগ্রহ করে .sticky-top এই শ্রেণীটি নেভিগেশন বার যখন স্ক্রোল করা হয় তখন পৃষ্ঠার উপর স্থায়ী/স্থানীয় হয়শীর্ষ.

মন্তব্য:এই ধরনটি IE11 এবং আরও পুরানী সংস্করণে কাজ করে না (তাকে একইভাবে দেখুন) position:relative)

প্রতিমান

<nav class="navbar navbar-expand-sm bg-dark navbar-dark sticky-top">
  ...
</nav>

স্বয়ংক্রিয়ভাবে প্রয়োগ করুন