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

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

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

 


উদাহরণঃ ট্যাব মেথড

<!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>

ফলাফল






উদাহরণঃ ট্যাব ইভেন্ট

<!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>
          <p>ট্যাব প্রদর্শন করার জন্য <strong>show.bs.tab</strong> ইভেন্টটি ব্যবহার করা হয়।</p>
          <p>যখন ট্যাবটি সম্পূর্ন প্রদর্শিত হয় তখন <strong>shown.bs.tab</strong> ইভেন্টটি ঘটে
             (সিএসএস ট্রানজিশন সম্পন্ন হওয়ার পর)।</p>
          <p>ট্যাব হাইড করার জন্য <strong>hide.bs.tab</strong> ইভেন্টটি ব্যবহার করা হয়।</p>
          <p>যখন ট্যাবটি সম্পূর্ন হাইড হয়ে যায় তখন <strong>hidden.bs.tab</strong> ইভেন্টটি ঘটে
             (সিএসএস ট্রানজিশন সম্পন্ন হওয়ার পর)।</p>

          <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');
            });
            $('.nav-tabs a').on('show.bs.tab', function(){
                alert('The new tab is about to be shown.');
            });
            $('.nav-tabs a').on('shown.bs.tab', function(){
                alert('The new tab is now fully shown.');
            });
            $('.nav-tabs a').on('hide.bs.tab', function(e){
                alert('The previous tab is about to be hidden.');
            });
            $('.nav-tabs a').on('hidden.bs.tab', function(){
                alert('The previous tab is now fully hidden.');
            });
        });
        </script>

   </body>
</html>

ফলাফল