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

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

হোম-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

 

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


JS ট্যাব (tab.js)

একটি কন্টেন্টকে বিভিন্ন অংশে ভাগ করতে ট্যাব ব্যবহার করা হয় যেখানে প্রত্যেকটি অংশের যেকোন একটি অংশই একবারে দেখা যাবে।

ট্যাব সর্ম্পকিত টিউটরিয়ালের জন্য আমাদের বুটস্ট্রাপ ট্যাব/পিল টিউটোরিয়ালটি পড়ুন।


ট্যাব প্লাগইন ক্লাসসমূহ

ক্লাস বর্ণনা
.nav nav-tabs ন্যাভিগেশন ট্যাব তৈরী করে।
.nav-justified যখন স্ক্রীন 768px থেকে বড় থাকে,ন্যাভিগেশন ট্যাব/পিল কে তাদের পেরেন্টের দৈঘ্যের সমান রাখে। আর ছোট স্ক্রীনের ক্ষেত্রে, ন্যাভিগেশন ট্যাব গুলো stack আকারে থাকে।
.tab-content .tab-pane ক্লাস এবং data-toggle="tab" এট্রিবিউট একত্রে ট্যাবকে টোগলেবল করে।
.tab-pane .tab-content ক্লাস এবং data-toggle="tab" এট্রিবিউটের সাহায্যে একত্রে টোগলেবল করে।

data-* এট্রিবিউট মাধ্যম

ট্যাবের মধ্যে data-toggle="tab" এট্রিবিউট যুক্ত করুন এবং প্রত্যেকটি ট্যাব আইটেমের মধ্যে ইউনিক আইডি সহ .tab-pane ক্লাস যুক্ত করুন তারপর পুরোটাকে .tab-content ক্লাসের আওতায় অন্তর্ভূক্ত করুন।

উদাহরণ

<!DOCTYPE html>
<html>
   <head>
      <title>Bootstrap Tab 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>data-* এট্রিবিউট মাধ্যম</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>

ফলাফল




জাভাস্ক্রিপ্ট মাধ্যম

ম্যানুয়ালি সক্রিয় করার জন্যঃ

// সকল ট্যাবকে একসাথে সিলেক্ট করার জন্য
  $('.nav-tabs a').click(function(){
        $(this).tab('show');
    })
    
// নামের মাধ্যমে সিলেক্টের জন্য
$('.nav-tabs a[href="#home"]').tab('show')

// প্রথম ট্যাবকে সিলেক্ট করার জন্য 
$('.nav-tabs a:first').tab('show')

// সর্বশেষ ট্যাব সিলেক্ট করার জন্য
$('.nav-tabs a:last').tab('show') 

// চতুর্থ ট্যাবকে সিলেক্ট করার জন্য (zero-based)
$('.nav-tabs li:eq(3) a').tab('show')

উদাহরণ

<!DOCTYPE html>
<html>
   <head>
      <title>Bootstrap Tab 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>
        <script>
        $(document).ready(function(){
            $(".nav-tabs a").click(function(){
                $(this).tab('show');
            });
        });
        </script>

   </body>
</html>

ফলাফল




ট্যাব মেথড

ট্যাব মেথড নিচের টেবিলে দেখানো হলো।

মেথড বর্ণনা উদাহরণ
.tab("show") ট্যাব প্রদর্শন করে। উদাহরণ দেখুন

ট্যাব ইভেন্ট

ট্যাব ইভেন্ট নিম্নোক্ত টেবিল দেখানো হলো।

ইভেন্ট বর্ণনা উদাহরণ
show.bs.tab যখন ট্যাব প্রদর্শন করা হয় তখন সম্পন্ন হয়। উদাহরণ দেখুন
shown.bs.tab যখন ট্যাবটি সম্পূর্ন প্রদর্শিত হয় হয় তখন এই ইভেন্টটি ঘটে (সিএসএস ট্রানজিশন সম্পন্ন হওয়ার পর)। উদাহরণ দেখুন
hide.bs.tab যখন ট্যাব হাইড করা হয় তখন ঘটে। উদাহরণ দেখুন
hidden.bs.tab যখন ট্যাবটি সম্পূর্ন হাইড হয়ে যায় তখন এই ইভেন্টটি ঘটে (সিএসএস ট্রানজিশন সম্পন্ন হওয়ার পর)। উদাহরণ দেখুন

টিপসঃ একটিভ ট্যাব এবং পূর্ববর্তী একটিভ ট্যাব পেতে জেকুয়েরির event.target এবং event.relatedTarget ইভেন্ট গুলো ব্যবহার করুন।