বুটস্ট্রাপ নেভবার কম্পোনেন্ট এর ক্লাসগুলোর সহজ, সিম্পল বিশ্লেষণ

Bootstrap তাদের navbar component এর code এ কোন কোন class কেন ব্যবহার করেছে সেটা আমরা আজকে এখানে কিছুটা আলোচনা করার চেষ্টা করব।

<nav class="navbar navbar-expand-lg bg-body-tertiary">
  <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>

nav -> bootstrap এ ন্যাভিগেশন বানানোর জন্য একটা in-build component. এর main basis তৈরি করা হয়েছে flexbox এর উপর ভিত্তি করে এবং এটা সব ধরনের ন্যাভিগেশন এর জন্য একটা strong foundation হিসেবে কাজ করে।

nav-item -> ন্যাভিগেশন এ যতগুলো li ( list item ) ব্যবহার করা হয় সবগুলোকে একটা fixed styling দেওয়ার জন্য এই class ব্যবহার করা হয়।

nav-link -> ন্যাভিগেশন এর মধ্যে যতগুলো nav item থাকে সেগুলো বিভিন্ন ধরনের হতে পারে ( ওয়েবসাইট লোগো, ওয়েবসাইট নাম, বাটন, লিঙ্ক )। যত ধরনের লিঙ্ক আছে সেগুলোকে একই ধরনের একটা styling এর মধ্যে রাখার জন্য এই class ব্যবহার করা হয়।

active -> যখন আপনি একটা nav item এ click করে কোন page এ active আছেন সেটা বুঝাতে চাচ্ছেন তখন এই class ব্যবহার করা হয়। এই class কিন্তু কোন আলাদা styling আপনাকে nav item এর মধ্যে provide করবে না যেটা দেখে আপনি বুঝতে পারবেন যে কোন nav item টা এই মুহূর্তে click করা হয়েছে/ active অবস্থায় আছে। সেরকম কিছু করতে হলে এই class এর সাথে আপনার আলাদা করে custom css ব্যবহার করতে কবে। Basically কোন custom css ছাড়া bootstrap এর এই class এর importance/ activity আসলেই চোখে পড়ার মত নয়।
নিচের মত করে কোন custom css লিখতে পারেনঃ

.nav-link .active{
    color: #fff;
    background: skyblue;
}

aria-current="page" -> এখানে aria-current হল bootstrap এর তৈরি করা একটা attribute যা active class এর active state টা কে কার্যকরী করার জন্য ব্যবহার করা হয়। এই attribute এর value হিসেবে ব্যবহার করা হয় page / true যেটা বর্তমান page কে indicate করে।

disabled -> যেই nav item এর উপর আপনি এই class ব্যবহার করবেন সেটা disabled হয়ে যাবে। মানে হল আপনি সেই nav item এ আর click করতে পারবেন না। এবং automatic nav item এর color gray হয়ে যাবে।

navbar -> navbar এর যেই basic styling সেটা bootstrap আমাদেরকে provide করে এই class এর মাধ্যমে। এই class টা code থেকে remove করে দেখুন, তাহলেই clearly বুঝতে পারবেন। কিছুটা নিচের মত দেখতে পাবেনঃ

navbar-expand-lg-> এই class use না করলে larger screen device এও মেনু আইটেম গুলো expandable ভাবে automatic show না করে hamburger menu তে show করবে।

bg-body-tertiary -> এর সাহায্যে navbar এর একটা default background colour দেওয়া হয়েছে। আপনি আপনার ইচ্ছেমত যেকোনো color এখানে set করতে পারেন।

container-fluid -> এই class আপনার screen এর horizontal width অনুযায়ী সবগুলো nav item কে একটা নির্দিষ্ট space maintain করে set করে দিবে। এটা ছাড়া navbar টা দেখতে কিছুটা এরকম হবেঃ

role="button" / role="search" -> এই role এখানে একটা attribute. button & search হল এর value। anchor tag এর মধ্যে role=”button” ব্যবহার করে anchor tag টা একটা button এর মত কাজ করছে সেটা বুঝানো হয়েছে।

navbar-brand-> ওয়েবসাইট নাম/ company নাম একটু different styling করে এই class এর under এ রাখা হয়।

data-bs-toggle="collapse" -> এটা ছাড়া hamburger menu তে click করলেও navigation item গুলো expand হবে না।

navbar-nav -> এটা ব্যবহার করা হয়েছে full-height and lightweight navigation এর জন্য।

collapse navbar-collapse -> একটা parent breakpoint ব্যবহার করে navbar contents কে grouping এবং hiding করার জন্য এই class গুলো use করা হয়।

dropdown-> কোনও nav item এর মধ্যে আরও কিছু আইটেম drop down হিসেবে সেট করতে চাইলে এই class ব্যবহার করা হয়। এটা ছাড়া specific জায়গায় droption menu show করবে না। অনেকটা এরকম দেখাবে।

dropdown-menu -> dropdown item গুলোর যেই styling navbar কে সুন্দরভাবে represent করার জন্য ব্যবহার করা হয়েছে টা এটা ছাড়া সম্ভব নয়। এটা ছাড়া navbar টা এরকম দেখাবেঃ

dropdown-item -> dropdown menu এর প্রতিটা item এর styling করা হয় এর সাহায্যে।

dropdown-divider -> অনেকগুলো dropdown item এর মধ্যে একটা horizontal line সেট করে তাদের আলাদা করা যায়। সাধারণত এটা ব্যবহার করা হয় যদি বিভিন্ন category র আইটেম একসাথে থাকে তাদের category অনুযায়ী আলাদা করার জন।

navbar-toggler-icon -> hamburger menu এর যেই styling সেটা করা হয়েছে এর সাহায্যে।

navbar-toggler-> hamburger menu এর styling কে আরও একটু সুন্দর, smooth করতে এটা ব্যবহার করা হয়েছে।

navbar component এর default code এর styling কে আপনি আপনার প্রয়োজন অনুযায়ী custom css লিখে / bootstrap এর অন্যান্য যেকোনো class ব্যাবহার করে পরিবর্তন করতে পারেন। Suppose, এখানে nav item গুলো সব একই line এ আছে। এটাকে আপনি horizontal menu থেকে vertical menu তে convert করতে পারেন easily.

[hint: এটা করার জন্য আপনাকে মোটামুটি ৩টা জায়গায় flex-coumn এই class টা ব্যাবহার করতে হবে উপরের ডিফল্ট কোড এর মধ্যে।]

তাহলে একটু নিজে নিজে try করে দেখুন তো করতে পাছেন কিনা?

Basically এই যত ধরনের css framework আছে, সেগুলো ভালভাবে শিখতে -

• আপনাকে তাদের class গুলো সব ভালমত analysis করে দেখতে হবে,
• তারপর নিজের মত বিভিন্ন ভাবে সেগুলো implement করে দেখতে হবে,
• ওদের default component code থেকে একটা একটা class রিমুভ করে করে দেখুন output কিরকম আসে

তাহলেই সব crystal clear হয়ে যাবে।

Because, Practice makes a man perfect !!!

~Let's_code_your_career
~Happy_coding