বুটস্ট্রাপ সিএসএস এইচটিএমএল জাভাস্ক্রিপ্ট জেকুয়েরি পিএইচপি এসকিউএল এঙ্গুলার জেএস
ফোরাম
×

বুটস্ট্রাপ টিউটোরিয়াল

হোম-Home শুরু করুন-Get Started গ্রীড বেসিক-Grid Basic

সিএসএস কম্পোনেন্ট

টাইপোগ্রাফী-Typography টেবিল-Table ইমেজ-Image জামবোর্টন-Jumbotron বুটস্ট্রাপ Well এলার্ট-Alert বাটন-Button বাটন গ্রুপ-Button Group গ্লিফআইকন-Glypicon ব্যাজ/লেভেল-Badge/Label প্রোগ্রেস বার-Progress Bar পেজিনেশন-Pagination পেজার-Pager লিস্ট গ্রুপ-List Group প্যানেল-Panel ফরম-Form ইনপুট-Input ইনপুট(২)-Input(2) ইনপুটের আকার-Input Sizing সাহায্যকারী-Helper

JS কম্পোনেন্ট

ড্রপডাউন-Dropdown কলাপ্স-Collapse ট্যাব/পিল-Tab/Pill ন্যাভবার-Navbar ক্যারোসেল-Carousel মোডাল-Modal টুলটিপ-Tooltip পপওভার-Popover স্ক্রলস্পাই-Scrollspy এফিক্স-Affix

বুটস্ট্রাপ গ্রীড সিস্টেম

গ্রীড সিস্টেম-Grid System বুটস্ট্রাপ Stacked/Horizontal গ্রীড ছোট-Grid Small গ্রীড মিডিয়াম-Grid Medium গ্রীড বড়-Grid Large গ্রীড উদাহরণ-Grid Example

বুটস্ট্রাপ রেফারেন্স

ড্রপডাউন-Dropdown কলাপ্স-Collapse ট্যাব-Tab বাটন-Button ক্যারোসেল-Carousel মোডাল-Modal স্ক্রলস্পাই-Scrollspy এফিক্স-Affix

 

বুটস্ট্রাপ ন্যাভিগেশন বার


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

ন্যাভিগেশন বার হলো একটি ন্যাভিগেশন হেডার যা একটি পেজের উপরে ব্যবহার করা হয়:

বুটস্ট্রাপ দ্বারা খুব সহজে ডিভাইসের স্ক্রিন সাইজের উপর নির্ভর করে একটি পেজের ন্যাভিগেশন বারকে প্রসারিত বা কলাপ্স করা যায়।

একটি স্ট্যান্ডার্ড ন্যাভিগেশন বার তৈরি করার জন্য <nav class="navbar navbar-default"> ক্লাস ব্যবহার করা হয়।

কিভাবে ন্যাভিগেশন বারকে একটি পেজের উপরে ব্যবহার করা যায় নিচের উদাহরণে দেখানো হলোঃ

উদাহরণ

<body>
<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">WebsiteName</a>
    </div>
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#">Service</a></li>
      <li><a href="#">Contract</a></li>
      <li><a href="#">About us</a></li>
    </ul>
  </div>
</nav>
...
নিজে চেষ্টা করি »

একটি ন্যাভিগেশন বার বড় স্ক্রিনের জন্য এক লাইনের হলেও ছোট স্ক্রিনের ডিভাইসের জন্য এটি নিচে নিচে অনেক বড় জায়গা দখল করে নেয়। কারণ বুটস্ট্রাপ সম্পূর্ণ রেসপন্সিভ। ছোট স্ক্রিনের এই সমস্যার সমাধানের জন্য এই পেজের শেষে একটি উদাহরণ দেয়া আছে।


ইনভার্স(Inverse) ন্যাভিগেশন বার

যদি বুটস্ট্রাপের ডিফল্ট ন্যাভিগেশন বারটি আপনার পছন্দ না হয় তাহলে আপনি চাইলে কালো কালারের ন্যাভিগেশন বার ব্যবহার করতে পারেনঃ


এর জন্য শুধুমাত্র .navbar-default ক্লাস এর পরিবর্তে .navbar-inverse ক্লাস ব্যবহার করুনঃ

উদাহরণ

<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">WebsiteName</a>
    </div>
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#">Service</a></li>
      <li><a href="#">Contract</a></li>
      <li><a href="#">About us</a></li>
    </ul>
  </div>
</nav>
নিজে চেষ্টা করি »

ফিক্সড ন্যাভিগেশন বার

একজন ব্যবহারকারী তার ইচ্ছা মত ন্যাভিগেশন বারকে পেজের উপরে বা নিচে ফিক্সড করতে পারে।

এক্ষেত্রে ন্যাভিগেশন বারটি পেজের উপরে অথবা নিচে ফিক্সড থাকবে এমনকি যখন পেজটি স্ক্রলিং করা হয় তখনও এর অবস্থানের কোন পরিবর্তন হবে না।

ন্যাভিগেশন বারকে পেজের উপরে ফিক্সড করার জন্য .navbar-fixed-top ক্লাসটি ব্যবহার করুনঃ

উদাহরণ

<nav class="navbar navbar-inverse navbar-fixed-top">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">WebsiteName</a>
    </div>
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#">Service</a></li>
      <li><a href="#">Contract</a></li>
      <li><a href="#">About us</a></li>
    </ul>
  </div>
</nav>
নিজে চেষ্টা করি »

ন্যাভিগেশন বারকে পেজের নিচে ফিক্সড করার জন্য .navbar-fixed-bottom ক্লাসটি ব্যবহার করুনঃ

উদাহরণ

<nav class="navbar navbar-inverse navbar-fixed-bottom">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">WebsiteName</a>
    </div>
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#">Service</a></li>
      <li><a href="#">Contract</a></li>
      <li><a href="#">About us</a></li>
    </ul>
  </div>
</nav>
নিজে চেষ্টা করি »

ন্যাভিগেশন বারের সাথে ড্রপাডাউনের ব্যবহার

আমরা চাইলে একটি ন্যাভিগেশন বারের সাথে ড্রপাডাউনও ব্যবহার করতে পারি।

নিচের এই উদাহরণে "Service" মেনুর মধ্যে ড্রপাডাউন ব্যবহার করা হয়েছে:

উদাহরণ

<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">WebsiteName</a>
    </div>
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Home</a></li>
      <li class="dropdown">
        <a class="dropdown-toggle" data-toggle="dropdown" href="#">Service
        <span class="caret"></span></a>
        <ul class="dropdown-menu">
          <li><a href="#">Web-development</a></li>
          <li><a href="#">App-development</a></li>
          <li><a href="#">Web-security</a></li>
        </ul>
      </li>
      <li><a href="#">Contract</a></li>
      <li><a href="#">About us</a></li>
    </ul>
  </div>
</nav>
নিজে চেষ্টা করি »

ডানে এ্যালাইনকৃত ন্যাভিগেশন বার

ন্যাভিগেশন বারের বাটনকে ডানদিকে নেয়ার জন্য .navbar-right ক্লাস ব্যবহার করুনঃ

এই উদাহরণটিতে "Sign up" এবং "Log in" নামে দুইটি বাটনকে ন্যাভিগেশন বারের ডানদিকে ব্যবহার করা হয়েছে এবং বাটন গুলোর সাথে গ্লিফআইকনও ব্যবহার করা হয়েছেঃ

উদাহরণ

<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">WebsiteName</a>
    </div>
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#">Service</a></li>
      <li><a href="#">Contract</a></li>
    </ul>
    <ul class="nav navbar-nav navbar-right">
      <li><a href="#"><span class="glyphicon glyphicon-user"></span>Sign up</a></li>
      <li><a href="#"><span class="glyphicon glyphicon-log-in"></span>Log in</a></li>
    </ul>
  </div>
</nav>
নিজে চেষ্টা করি »

কলাপ্সিবল ন্যাভিগেশন বার

ন্যাভিগেশন বার ছোট স্ক্রিনের জন্য অনেক জায়গায় দখল করে।

এই সমস্যার সমাধানের জন্য ছোট স্ক্রিনের ক্ষেত্রে ন্যাভিগেশন বারকে হাইড করে রাখা যায় এবং প্রয়োজনের সময় প্রদর্শন করানো যায়।

এই উদাহরণটিতে ন্যাভিগেশন বারকে উপরে ডানদিকে বাটন আকারে রাখা হয়েছে। এক্ষেত্রে যখনই বাটনে ক্লিক করা হবে তখনই এটি প্রদর্শিত হবে অন্যথায় এটি হাইড হয়ে থাকবেঃ

উদাহরণ

<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">WebsiteName</a>
    </div>
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#">Service</a></li>
        <li><a href="#">Contract</a></li>
        <li><a href="#">About us</a></li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#"><span class="glyphicon glyphicon-user"></span>Sign up</a></li>
        <li><a href="#"><span class="glyphicon glyphicon-log-in"></span>Log in</a></li>
      </ul>
    </div>
  </div>
</nav>
নিজে চেষ্টা করি »