نمادها

شما اینجا هستید

آموزش Bootstrap جلسه بیست و یکم (Collapse)

در خدمت شما هستیم با آموزش 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)

 

شما می توانید این آموزش را به صورت آنلاین از ویدیو زیر ببینید

 

و یا در صورت علاقه آن را در آپارات ببینید

همچنین میتوانید ویدیو این آموزش را در یوتیوب دنبال کنید

همچنین در صورت علاقه می توانید این آموزش را از باکس دانلود موجود در زیر همین پست دانلود نمایید

اگر این مطلب آموزنده بود به ما امتیاز دهید

میانگین امتیاز / 5. تعداد آرا:

اولین کسی باشید که رای میدهید


این یک فایل mp4 تصویری است که با پلیر های ویدیویی قابل اجرا می باشد

دانلود آموزش Bootstrap جلسه بیست و یکم (Collapse): نوع فایل:mp4 حجم فایل:55.84 مگابایت

هر پلیر اجرا کننده فایل ویدیویی

4 دیدگاه برای “آموزش Bootstrap جلسه بیست و یکم (Collapse)”

  1. بهار گفت:

    سلام
    آیا امکانش هست که تمامی فیلمهای آموزش بوت استرپ رابه ایمیلم ارسال کنید.

    باتشکر

    1. amir گفت:

      فیلم ها روزانه توسط مدرس ضبط میشه و توسط نویسنده روی سایت قرار داده می شود

  2. بهار گفت:

    عذر میخوام من هر چی تو سایت شما فیلم آموزش کار با افزونه یواست سئو را سرچ کردم پیدانشد لطفا در صورت امکان به ایمیلم ارسال کنید.

    باتشکر

    1. amir گفت:

      سلام افزونه Yoast هنوز آموزشی ازش ضبط نشده

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

این سایت از اکیسمت برای کاهش هرزنامه استفاده می کند. بیاموزید که چگونه اطلاعات دیدگاه های شما پردازش می‌شوند.