در خدمت شما هستیم با آموزش Bootstrap جلسه بیست و یکم (Collapse)
آموزش Bootstrap جلسه بیست و یکم (Collapse) از سری آموزش های تک قسمتی است
سلام برنامه در این آموزش نحوه ساخت باکس کشویی را به شما آموزش می دهد
به واسطه باکس کشویی به شما یاد می دهیم تا آکاردئون بسازید
ساخت آکاردئون در این آموزش تنها با کلاس های بوت استرپ انجام می شود
از Collapse برای ساخت باکس هایی که با دکمه باز و بسته می شوند استفاده می شود
این باکس ها کاملا رسپانسیو هستند و در تمام رزولیشن ها به خوبی نمایش داده می شوند
کلاس Collapse
طبق توضیح بالا اگر بخواهیم دقیق تر بگوییم به باز شدن اطلاعات به صورت شناور بدون بارگذاری مجدد صفحه Collapse گفته میشود.
یکی از بهترین مثال های Collapse منو های آکاردئونی میباشند که ساخت آن را در این مقاله میبینید.
برای ساخت Collapse کافیست کلاس آن را اجرا کرده و روی دکمه خود قابلیت data-toggle را اضافه کنید.
برای اینکه این مورد برای شما شفاف شود میتوانید نمونه کد زیر را دنبال کنید:
<!DOCTYPE html>
<html>
<head>
<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>Simple Collapsible</h2>
<p>Click on the button to toggle between showing and hiding content.</p>
<button type="button" class="btn btn-info" data-toggle="collapse" data-target="#demo">Simple collapsible</button>
<div id="demo" class="collapse">
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>
</div>
</body>
</html>
همانطور که در کد بالا مشخص است ما یک دکمه تعریف کردیم و قابلیت های collapse را به آن اضافه کردیم.
به واسطه data-target شما میتوانید دکمه خود را به موردی که قرار است نشان دهد وصل کنید.
اگر میخواهید به صورت پیشفرض کولاپس باز باشد و محتوای آن نمایش داده شود کافیست در کلاس collapse عبارت in را نیز اضافه کنید.
برای متوجه شدن این موضوع از کد زیر کمک بگیرید:
<!DOCTYPE html>
<html>
<head>
<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>Simple Collapsible</h2>
<p>Click on the button to toggle between showing and hiding content.</p>
<button type="button" class="btn btn-info" data-toggle="collapse" data-target="#demo">Simple collapsible</button>
<div id="demo" class="collapse in">
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>
</div>
</body>
</html>
و اگر میخواهید به واسطه کولاپس پنل های بازشو بسازید میتوانید از کد زیر کمک بگیرید:
<!DOCTYPE html>
<html>
<head>
<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>Collapsible Panel</h2>
<p>Click on the collapsible panel to open and close it.</p>
<div class="panel-group">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" href="#collapse1">Collapsible panel</a>
</h4>
</div>
<div id="collapse1" class="panel-collapse collapse">
<div class="panel-body">Panel Body</div>
<div class="panel-footer">Panel Footer</div>
</div>
</div>
</div>
</div>
</body>
</html>
همچنین شما میتوانید به کمک collapse منو آکاردئونی بسازید که کد آن را برای شما قرار میدهیم.
کد زیر کدهای یک منو آکاردئونی کامل است که میتوانید از آن استفاده کنید:
<!DOCTYPE html>
<html>
<head>
<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>Accordion Example</h2>
<p><strong>Note:</strong> The <strong>data-parent</strong> attribute makes sure that all collapsible elements under the specified parent will be closed when one of the collapsible item is shown.</p>
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse1">Collapsible Group 1</a>
</h4>
</div>
<div id="collapse1" class="panel-collapse collapse in">
<div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse2">Collapsible Group 2</a>
</h4>
</div>
<div id="collapse2" class="panel-collapse collapse">
<div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse3">Collapsible Group 3</a>
</h4>
</div>
<div id="collapse3" class="panel-collapse collapse">
<div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
</div>
</div>
</div>
</div>
</body>
</html>
می توانید دیگر قسمت ها را در لینک زیر ببینید
آموزش Bootstrap جلسه بیستم (Dropdown)
آموزش Bootstrap جلسه بیست و دوم (Tabs)
شما می توانید این آموزش را به صورت آنلاین از ویدیو زیر ببینید
و یا در صورت علاقه آن را در آپارات ببینید
همچنین در صورت علاقه می توانید این آموزش را از باکس دانلود موجود در زیر همین پست دانلود نمایید
آموزش Bootstrap 4 جلسه بیست و دوم (Inputs Group)
آموزش Bootstrap 4 جلسه دوم (start)
آموزش Bootstrap جلسه پایانی (Design Template)
آموزش Bootstrap جلسه سی و پنجم (Simple Template)
سلام
آیا امکانش هست که تمامی فیلمهای آموزش بوت استرپ رابه ایمیلم ارسال کنید.
باتشکر
فیلم ها روزانه توسط مدرس ضبط میشه و توسط نویسنده روی سایت قرار داده می شود
عذر میخوام من هر چی تو سایت شما فیلم آموزش کار با افزونه یواست سئو را سرچ کردم پیدانشد لطفا در صورت امکان به ایمیلم ارسال کنید.
باتشکر
سلام افزونه Yoast هنوز آموزشی ازش ضبط نشده