বুটস্ট্রাপ ট্যাব উদাহরণ - Bootstrap Tab Example
উদাহরণঃ বুটস্ট্রাপ ট্যাব মেথড
<!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>
ফলাফল
