در خدمت شما هستیم با آموزش Bootstrap جلسه بیست و دوم (Tabs)
آموزش Bootstrap جلسه بیست و دوم (Tabs) از سری آموزش های تک قسمتی است
سلام برنامه در این جلسه به شما یاد می دهد که به کمک بوت استرپ تب رسپانسیو بسازید
تقریبا عمده سایت ها امروزی به خصوص سایت های خبری از تب استفاده می کنند
که معمولا عمده این تب ها با رسپانسیو بودن مشکل دارند
اما در این جلسه آموزش به سادگی به کمک کلاس های بوت استرپ تب های رسپانسیو می سازید
همچنین خصوصیات خوبی نظیر اینکه به صورت پیشفرض کدام تب باز شود و … نیز در بوت استرپ وجود دارد
کلاس tabs
همانطور که بالاتر گفتیم tab ها بسیار کاربردی هستند و شما آن ها را در اکثر سایدبار ها میبینید.
ساخت تب کار راحتی نیست اگر نخواهیم از بوت استرپ استفاده کنیم.
در بوت استرپ تنها با چند کلاس ساده میتوان تب ها را ایجاد کرد کلاس اصلی که برای اینکار نیاز دارید nav-tabs است.
برای آنکه موضوع برای شما ساده تر شود میتوانید از کد زیر کمک بگیرید
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap 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.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Dynamic Tabs</h2>
<p>To make the tabs toggleable, add the data-toggle="tab" attribute to each link. Then add a .tab-pane class with a unique ID for every tab and wrap them inside a div element with class .tab-content.</p>
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#home">Home</a></li>
<li><a data-toggle="tab" href="#menu1">Menu 1</a></li>
<li><a data-toggle="tab" href="#menu2">Menu 2</a></li>
<li><a data-toggle="tab" href="#menu3">Menu 3</a></li>
</ul>
<div class="tab-content">
<div id="home" class="tab-pane fade in active">
<h3>HOME</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div id="menu1" class="tab-pane fade">
<h3>Menu 1</h3>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<div id="menu2" class="tab-pane fade">
<h3>Menu 2</h3>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
</div>
<div id="menu3" class="tab-pane fade">
<h3>Menu 3</h3>
<p>Eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
</div>
</div>
</div>
</body>
</html>
در کد بالا ابتدا ul و چند li تعریف کردیم و هرکدام از li هارا به یک div که دارای محتوا است وصل کردیم در این روش وقتی روی li کیک شود id وصل شده به آن باز میشود.
در ساخت تعداد تب ها در این روش هیچ محدودیتی وجود ندارد تنها لازم است که برای هرکدام id جداگانه ای در نظر گرفته شود
می توانید دیگر قسمت ها را در لینک زیر ببینید
آموزش Bootstrap جلسه بیست و یکم (Collapse)
آموزش Bootstrap جلسه بیست و سوم (navbar)
شما می توانید این آموزش را به صورت آنلاین از ویدیو زیر ببینید
و یا در ورت علاقه آن را در آپارات ببینید
آموزش Bootstrap 4 جلسه بیست و دوم (Inputs Group)
آموزش Bootstrap 4 جلسه دوم (start)
آموزش Bootstrap جلسه پایانی (Design Template)
آموزش Bootstrap جلسه سی و پنجم (Simple Template)