ন্যাভবার ট্যাগ পার্ট-৫

প্রথমেই নিচের কোডটুকু লক্ষ্য করি , কি আছে এর মধ্যে। 

<div class="container">

  <nav class="navbar bg-dark navbar-expand-md navbar-dark justify-content-center">

    <ul class="navbar-nav">

      <li class="nav-item">

        <a href="#" class="nav-link">Home</a>

      </li><li class="nav-item">

        <a href="#" class="nav-link">Home</a>

      </li><li class="navbar-item">

        <a href="#" class="nav-link">Home</a>

      </li>

    </ul>

  </nav>

ব্যাসিক Navbar তৈরির জন্য আপনাকে এই স্টেপগুল ফলো করতে হবে

1. nav tag এর ভিতরে ক্লাসের মধ্যে navbar লিখতে হবে।

1. ul tage এর ভিতরে ক্লাসের মধ্যে navbar-nav লিখতে হবে

1. li tag এর ভিতরে ক্লাসের মধ্যে nav-item লিখতে হবে

1. a tage ভিতরে ক্লাসের মধ্যে nav-link লিখতে হবে।

এবার আসি ডিজাইন করার পালায়

<!-- Black with white text -->

<nav class="navbar navbar-expand-sm bg-dark

 navbar-dark">...</nav>

<!-- Blue with white text -->

<nav class="navbar navbar-expand-sm bg-primary

 navbar-dark">...</nav>

আমি যদি চাই টোগল টাইপ বাটন তৈরি করতে তাহলে যা

 করতে হবে।

<div class="container">

  <nav class="navbar bg-dark navbar-expand-lg navbar-dark ">

    <a class="navbar-brand" href="#">Navbar</a>

      <button class=" navbar-toggler"  data-toggle="collapse" data-target="#contentId">

         <span class="navbar-toggler-icon"></span>

      </button>

    <div class="collapse navbar-collapse " id="contentId">

      <ul class="navbar-nav">

        <li class="nav-item"><a href="#" class="nav-link">Home</a></li>

        <li class="nav-item"><a href="#" class="nav-link">Address</a></li>

        <li class="nav-item"><a href="#" class="nav-link">City</a></li>

      </ul>

    </div>

  </nav>

  </div>

এখানে আমরা লক্ষ্য করছি


1. .navbar-brand যুক্ত একটি anchor tag use করেছি
2. .navbar-toggler ক্লাস যুক্ত  একটি button tag use করেছি এটা navbar টিকে toggle বাটন তৈরি করার কাজে সাহায্য করবে সেই সাথে দুটি Attribute use করতে  হবে data-toggle="collapse" যেটা কলাপ্স করবে এবং data-target="#contentId" Id ব্যাবহার করে লিংকগুল এটাচ করে দিব টোগল বাটনের সাথে । <span class="navbar-toggler-icon"></span>

1. এবার ফাইনালি একটা Div তৈরি করে ক্লাসের মধ্যে data-target value =collapse এবং Id হিসেবে data-toggle Id টা ব্যবহার করতে হবে। এই Id দিয়ে একটা লিংক তৈরি হবে । navbar টিকে কলাপ্সেবল করার জন্য .navbar-collapse ব্যাবহার করতে হবে। বাকিটা আগের মতই