বুটস্ট্রাপ ট্যাব এবং পিল - Bootstrap Tabs and Pills

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

বেশিরভাগ ওয়েবপেজেরি মেনুবার থাকে।

এইচটিএমএলে আনওর্ডার্ড লিস্টের (<ul>) মাধ্যমে মেনু তৈরি করা হয় (স্টাইল পরবর্তী বিষয়) যেমনঃ

উদাহরণ

<ul>
   <li><a href="#">Home</a></li>
   <li><a href="#">Service</a></li>
   <li><a href="#">Gallery</a></li>
   <li><a href="#">Contract</a></li>
</ul>

যদি আপনি উপরের লিস্টটিকে আনুভূমিক(horizontal) মেনু হিসেবে তৈরি করতে চান তাহলে <ul> এলিমেন্টের মধ্যে .list-inline ক্লাসটি ব্যবহার করুনঃ

উদাহরণ

<!DOCTYPE html>
<html>
   <head>
      <title>Bootstrap Tabs and Pills Example</title>
	  <meta charset="utf-8">
	  <meta name="viewport" content="width=device-width, initial-scale=1">
	  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
	  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
	  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
   </head>

   <body>

		<div class="container">
          <h3>ইনলাইন লিস্ট</h3>
          <ul class="list-inline">
            <li><a href="#">Home</a></li>
            <li><a href="#">Service</a></li>
            <li><a href="#">Gallery</a></li>
            <li><a href="#">Contract</a></li>
          </ul>
	    </div>

   </body>
</html>

ফলাফল

এছাড়া আপনি বুটস্ট্রাপের ট্যাব এবং পিলের মাধ্যমেও মেনুবার তৈরি করতে পারেন। (নিচে দেখুন)

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

বুটস্ট্রাপ ট্যাব

<ul class="nav nav-tabs"> এর মাধ্যমে ট্যাব তৈরি করা যায়ঃ

টিপসঃ <li class="active"> দ্বারা বর্তমান পেজটিকে হাইলাইট করা হয়েছে।

নিচের উদাহরণটিতে বুটস্ট্রাপ দ্বারা ন্যাভিগেশন ট্যাব তৈরি করে দেখানো হয়েছেঃ

উদাহরণ

<!DOCTYPE html>
<html>
   <head>
      <title>Bootstrap Tabs and Pills Example</title>
	  <meta charset="utf-8">
	  <meta name="viewport" content="width=device-width, initial-scale=1">
	  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
	  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
	  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
   </head>

   <body>

		<div class="container">
          <h3>ট্যাব</h3>
          <ul class="nav nav-tabs">
            <li><a href="#">Home</a></li>
            <li><a href="#">Service</a></li>
            <li class="active"><a href="#">Gallery</a></li>
            <li><a href="#">Contract</a></li>
          </ul>
	    </div>

   </body>
</html>

ফলাফল

বুটস্ট্রাপ ট্যাবের মধ্যে ড্রপডাউন মেনু

আপনি চাইলে ট্যাবের মধ্যেও ড্রপডাউন মেনু ব্যবহার করতে পারেন।

নিচের উদাহরণে "Service" সেকশনে একটি ড্রপডাউন ব্যবহার করা হয়েছেঃ

উদাহরণ

<!DOCTYPE html>
<html>
   <head>
      <title>Bootstrap Tabs and Pills Example</title>
	  <meta charset="utf-8">
	  <meta name="viewport" content="width=device-width, initial-scale=1">
	  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
	  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
	  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
   </head>

   <body>

		<div class="container">
          <h3>ট্যাবের মধ্যে ড্রপডাউনের ব্যবহার</h3>
          <ul class="nav nav-tabs">
            <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="#">Gallery</a></li>
            <li><a href="#">Contract</a></li>
          </ul>
          </ul>
	    </div>

   </body>
</html>

ফলাফল

বুটস্ট্রাপ পিল

<ul class="nav nav-pills"> দ্বারা পিল তৈরি করা হয় এবং <li class="active"> দ্বারা বর্তমান পেজটিকে হাইলাইট করা হয়েছেঃ

উদাহরণ

<!DOCTYPE html>
<html>
   <head>
      <title>Bootstrap Tabs and Pills Example</title>
	  <meta charset="utf-8">
	  <meta name="viewport" content="width=device-width, initial-scale=1">
	  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
	  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
	  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
   </head>

   <body>

		<div class="container">
          <h3>পিল</h3>
          <ul class="nav nav-pills">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#">Service</a></li>
            <li><a href="#">Gallery</a></li>
            <li><a href="#">Contract</a></li>
          </ul>
          </ul>
	    </div>

   </body>
</html>

ফলাফল

বুটস্ট্রাপ ভার্টিক্যাল পিল

পিলকে ভার্টিক্যাল ভাবেও তৈরি করা যায়। এর জন্য .nav-stacked ক্লাস ব্যবহার করুনঃ

উদাহরণ

<!DOCTYPE html>
<html>
   <head>
      <title>Bootstrap Tabs and Pills Example</title>
	  <meta charset="utf-8">
	  <meta name="viewport" content="width=device-width, initial-scale=1">
	  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
	  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
	  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
   </head>

   <body>

		<div class="container">
          <h3>পিল</h3>
          <ul class="nav nav-pills nav-stacked">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#">Service</a></li>
            <li><a href="#">Gallery</a></li>
            <li><a href="#">Contract</a></li>
          </ul>
          </ul>
	    </div>

   </body>
</html>

ফলাফল

একই সারিতে ভার্টিক্যাল পিল

এখানে শেষ কলামটিতে ভার্টিক্যাল আকারে পিল ব্যবহার করা হয়েছে।
যেখানে বড় স্ক্রিনে কলামগুলো পাশাপাশি অবস্থান করে। কিন্তু ছোট স্ক্রিনের ক্ষেত্রে কলামগুলো স্বয়ংক্রিয়ভাবে একটি একক কলামে রুপান্তরিত হয়ঃ

উদাহরণ

<!DOCTYPE html>
<html>
   <head>
      <title>Bootstrap Tabs and Pills Example</title>
	  <meta charset="utf-8">
	  <meta name="viewport" content="width=device-width, initial-scale=1">
	  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
	  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
	  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
   </head>

   <body>

		<div class="container">
          <h3>ভার্টিক্যাল পিল</h3>
          <div class="row">
              <div class="col-md-3">
                <p>Content</p>
              </div>
              <div class="col-md-3">
                <p>Content</p>
              </div>
              <div class="col-md-3">
                <p>Content</p>
              </div>
              <div class="col-md-3">
                <ul class="nav nav-pills nav-stacked">
                  <li class="active"><a href="#">Home</a></li>
                  <li><a href="#">Service</a></li>
                  <li><a href="#">Gallery</a></li>
                  <li><a href="#">Contract</a></li>
                </ul>
              </div>
              <div class="clearfix visible-lg"></div>
          </div>
	    </div>

   </body>
</html>

ফলাফল

পিলের মধ্যে ড্রপডাউন মেনুর ব্যবহার

আমরা চাইলে পিলের মধ্যেও ড্রপডাউন মেনু ব্যবহার করতে পারি।

নিচের এই উদাহরণটিতে "Service" সেকশনে ড্রপডাউন ব্যবহার করা হয়েছেঃ

উদাহরণ

<!DOCTYPE html>
<html>
   <head>
      <title>Bootstrap Tabs and Pills Example</title>
	  <meta charset="utf-8">
	  <meta name="viewport" content="width=device-width, initial-scale=1">
	  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
	  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
	  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
   </head>

   <body>

		<div class="container">
            <h3>পিলস এর মধ্যে ড্রপডাউন মেনুর ব্যবহার</h3>
            <ul class="nav nav-pills nav-stacked">
              <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="#">Gallery</a></li>
              <li><a href="#">Contract</a></li>
            </ul>
	    </div>

   </body>
</html>

ফলাফল

সেন্টারে ট্যাব এবং পিলের ব্যবহার

ট্যাব এবং পিলকে মধ্যস্থানে/জাস্টিফাই করার জন্য .nav-justified ক্লাস ব্যবহার করুন।

মনে রাখবেন ৭৬৮ পিক্সেল থেকে ছোট স্ক্রিনে লিস্ট আইটেমগুলো নিচে নিচে চলে আসবে তবে কন্টেন্টগুলো ঠিক মাঝামাঝিতেই থাকবেঃ

উদাহরণ

<!DOCTYPE html>
<html>
   <head>
      <title>Bootstrap Tabs and Pills Example</title>
	  <meta charset="utf-8">
	  <meta name="viewport" content="width=device-width, initial-scale=1">
	  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
	  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
	  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
   </head>

   <body>

		<div class="container">
            <h3>সেন্টারে ট্যাব ও পিলের ব্যবহার</h3>
            <!-- ট্যাবের মাঝামাঝি অবস্থান -->
            <ul class="nav nav-tabs nav-justified">
              <li class="active"><a href="#">Home</a></li>
              <li><a href="#">Service</a></li>
              <li><a href="#">Gallery</a></li>
              <li><a href="#">Contract</a></li>
            </ul>

            <!-- পিলের মাঝামাঝি অবস্থান -->
            <ul class="nav nav-pills nav-justified">
              <li class="active"><a href="#">Home</a></li>
              <li><a href="#">Service</a></li>
              <li><a href="#">Gallery</a></li>
              <li><a href="#">Contract</a></li>
            </ul>
	    </div>

   </body>
</html>

ফলাফল

বুটস্ট্রাপ টোগোলেবল/ডায়নামিক ট্যাব

ট্যাবকে টোগোলেবল করার জন্য, প্রত্যেকটি লিংকে data-toggle="tab" এট্রিবিউটটি ব্যবহার করুন।
তারপর একক একটি ID 'র সাথে .tab-pane ক্লাসটি ব্যবহার করুন এবং .tab-content ক্লাসযুক্ত একটি <div> এলিমেন্টের মধ্যে সবগুলো কন্টেন্টকে রাখুন।

এছাড়াও যদি আপনি ক্লিক করার সময় ট্যাবে ফেড-ইন এবং ফেড-আউট এফেক্ট যুক্ত করতে চান তাহলে .tab-pane ক্লাসের সাথে অবশ্যই .fade ক্লাস ব্যবহার করুনঃ

উদাহরণ

<!DOCTYPE html>
<html>
   <head>
      <title>Bootstrap Tabs and Pills Example</title>
	  <meta charset="utf-8">
	  <meta name="viewport" content="width=device-width, initial-scale=1">
	  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
	  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
	  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
   </head>

   <body>

		<div class="container">
          <h2>ডায়নামিক ট্যাব</h2>
          <ul class="nav nav-tabs">
              <li class="active"><a data-toggle="tab" href="#home">Home</a></li>
              <li><a data-toggle="tab" href="#service">Service</a></li>
              <li><a data-toggle="tab" href="#about-us">About us</a></li>
          </ul>

          <div class="tab-content">
            <div id="home" class="tab-pane fade in active">
              <h3>স্যাট একাডেমী</h3>
              <p>দেশের বৃহত্তম কম্পিউটার প্রোগ্রামিং শেখার একমাত্র বৃহত্তম প্রতিষ্ঠান স্যাট একাডেমী।</p>
            </div>
            <div id="service" class="tab-pane fade">
              <h3>Service</h3>
              <p>এখানে সম্পূর্ণ বিনামূল্যে কম্পিউটার প্রোগ্রামিং এর উপর প্রশিক্ষণ দেয়া হয়।</p>
            </div>
            <div id="about-us" class="tab-pane fade">
              <h3>About us</h3>
              <p>শিক্ষাতে বানিজ্য নয়। শিক্ষা বানিজ্যকে না বলি।</p>
            </div>
          </div>
	    </div>

   </body>
</html>

ফলাফল

বুটস্ট্রাপ টোগোলেবল/ডায়নামিক পিল

ট্যাবের মতো পিলের ক্ষেত্রে ঠিক একই কোড ব্যবহার করা হয়। শুধুমাত্র data-toggle="tab" এট্রিবিউটের জায়গায় data-toggle="pill" এট্রিবিউট ব্যবহার করতে হবেঃ

উদাহরণ

<!DOCTYPE html>
<html>
   <head>
      <title>Bootstrap Tabs and Pills Example</title>
	  <meta charset="utf-8">
	  <meta name="viewport" content="width=device-width, initial-scale=1">
	  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
	  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
	  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
   </head>

   <body>

		<div class="container">
            <h2>ডায়নামিক পিল</h2>
            <ul class="nav nav-pills">
              <li class="active"><a data-toggle="pill" href="#home">Home</a></li>
              <li><a data-toggle="pill" href="#service">Service</a></li>
              <li><a data-toggle="pill" href="#about-us">About us</a></li>
            </ul>

            <div class="tab-content">
              <div id="home" class="tab-pane fade in active">
                <h3>স্যাট একাডেমী</h3>
                <p>দেশের বৃহত্তম কম্পিউটার প্রোগ্রামিং শেখার একমাত্র বৃহত্তম প্রতিষ্ঠান স্যাট একাডেমী।</p>
              </div>
              <div id="service" class="tab-pane fade">
                <h3>Service</h3>
                <p>এখানে সম্পূর্ণ বিনামূল্যে কম্পিউটার প্রোগ্রামিং এর উপর প্রশিক্ষণ দেয়া হয়।</p>
              </div>
              <div id="about-us" class="tab-pane fade">
                <h3>About us</h3>
                <p>শিক্ষাতে আর বানিজ্য নয়। শিক্ষা বানিজ্যকে না বলি।</p>
              </div>
            </div>
	    </div>

   </body>
</html>

ফলাফল

একনজরে ট্যাব এবং পিল সংক্রান্ত ক্লাসগুলো দেখে নেইঃ

ক্লাস	বর্ণনা
`.nav nav-tabs`	একটি ন্যাভিগেশন ট্যাব তৈরি করে।
`.nav nav-pills`	একটি ন্যাভিগেশন পিল তৈরি করে।
`.nav nav-pills nav-stacked`	একটি ভার্টিক্যাল ন্যাভিগেশন পিল তৈরি করে।
`.nav-justified`	৭৬৮ পিক্সেলের উর্দ্ধে স্ক্রিনের ক্ষেত্রে পেরেন্ট এলিমেন্টের সমান প্রস্থের ন্যাভিগেশন ট্যাব/পিল তৈরি করে। ছোট স্ক্রিনে এটি একের পর এক নিচে নিচে অবস্থান করবে।
`.disabled`	ট্যাব/পিলকে ডিজেবল(unclickable) করার জন্য এটি ব্যবহার করা হয়।
`.tab-content`	`.tab-pane` ক্লাস এবং `data-toggle="tab"` এট্রবিউটের সাথে একসাথে ব্যবহার করা যায় (পিলের ক্ষেত্রে `data-toggle="pill"`)। এটি ট্যাব/পিলকে টোগোলেবল করে।
`.tab-pane`	`.tab-content` ক্লাস এবং `data-toggle ="tab"` এট্রবিউটের সাথে একসাথে ব্যবহার করা যায় (পিলের ক্ষেত্রে `data-toggle="pill"`)। এটি ট্যাব/পিলকে টোগোলেবল করে।

« পূর্ববর্তী

পরবর্তী »

ক্লায়েন্ট সাইড টিউটোরিয়াল

সার্ভার সাইড টিউটোরিয়ায়াল

প্রোগ্রামিং টিউটোরিয়ায়াল

অন্যান্য

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

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

JS কম্পোনেন্ট

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

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

বুটস্ট্রাপ ট্যাব এবং পিল - Bootstrap Tabs and Pills

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

উদাহরণ

উদাহরণ

ফলাফল

বুটস্ট্রাপ ট্যাব

উদাহরণ

ফলাফল

বুটস্ট্রাপ ট্যাবের মধ্যে ড্রপডাউন মেনু

উদাহরণ

ফলাফল

বুটস্ট্রাপ পিল

উদাহরণ

ফলাফল

বুটস্ট্রাপ ভার্টিক্যাল পিল

উদাহরণ

ফলাফল

একই সারিতে ভার্টিক্যাল পিল

উদাহরণ

ফলাফল

পিলের মধ্যে ড্রপডাউন মেনুর ব্যবহার

উদাহরণ

ফলাফল

সেন্টারে ট্যাব এবং পিলের ব্যবহার

উদাহরণ

ফলাফল

বুটস্ট্রাপ টোগোলেবল/ডায়নামিক ট্যাব

উদাহরণ

ফলাফল

বুটস্ট্রাপ টোগোলেবল/ডায়নামিক পিল

উদাহরণ

ফলাফল

একনজরে ট্যাব এবং পিল সংক্রান্ত ক্লাসগুলো দেখে নেইঃ

আমাদের টিউটোরিয়াল সমূহ

ক্লায়েন্ট সাইড টিউটোরিয়াল

সার্ভার সাইড টিউটোরিয়ায়াল

প্রোগ্রামিং টিউটোরিয়ায়াল

অন্যান্য