آموزش Bootstrap--کاربرد کلاس collapse در بوت استرپ

کانون تبلیغاتی افرا گرافیک در نظر دارد به صورت گام به گام bootstrap را به شما عزیزان آموزش دهد. لذا قسمت نهم آموزش در زیر قرار داده شده است.

کاربرد کلاس collapse. در بوت استرپ                                            قسمت نهم

قبل از شروع آموزش از شما عزیزان میخوام برای درک بهتر مطالب وارد محیط visual studio شده و کد های آموزش داده شده را نوشته و خروجی را مشاهده کنید

کلاس collacpse. :

زمانی که شما متنی با محتوای زیاد دارید میتوانید با استفاده از این کلاس متن خود را مخفی کنید بدین صورت که با کلیک بر روی تگ مورد نظر متن شما قابل مشاهده خواهد شد که برای این کار می توانیم از تگ a یا تگ button استفاده کنیم

ما در اینجا با استفاده از یک تگ <a></a> متن مخفی شده خود را در زمان کلیک کاربر نمایش می دهیم

ابتدا برای المان لینک  خود "data-toggle="collapse را مینویسیم سپس ID تگی که متنمان در آن قرار دارد را به button  خود اختصاص میدهیم به این صورت :

data-target="#id"

سپس کلاس .collapse را به تگ حاوی متن خود می دهیم

برای تگ a به جای قرار دادن ID در data-target آن را در خصوصیت href تگ a قرار می دهیم

استفده از تگ a :

<a href="#demo" data-toggle="collapse">Collapsible</a>

<div id="demo" class="collapse">
Lorem ipsum dolor text....
</div>

استفاده از button :

<button class=" btn btn-info" data-toggle="collapse" data-target="#demo">Simple collapsible</button>

<div id="demo" class="collapse">
Lorem ipsum dolor text....
</div>

اجرای کد بالا به صورت زیر می باشد

 

بعد از کلیک :

 

نکته : متن ما به صورت پیش فرض مخفی می باشد اگر بخواهیم متن در ابتدا نمایش داده شود سپس با کلیک مخفی شود از کلاس in. استفاده میکنیم

<div id="demo" class="collapse in">
Lorem ipsum dolor text....
</div>

میتوانیم از کلاس collapse در پنل هایمان نیز استفاده کنیم به این صورت که pane-body را درون تگی که به آن کلاس panel-collapse را داده ایم قرار میدهیم

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

 مثال زیر یک پنل collapse شده را نشان می دهد

<div class="container">

  <h2>Collapsible Panel</h2>

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

نتیجه اجرای کد بالا به شکل زیر می باشد :

 

 

مثالی دیگر با استفاده از کلاس list و panel و : collapse

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

نتیجه اجرای کد بالا :

 

برای درک بهتر کد , کد را بنویسید و اجرای آن را مشاهده کنید

 پایان قسمت نهم

 ادامه آموزش در قسمت دهم و از طریق مطالب آموزشی سایت افراگرافیک - www.afragraphic.ir خواهید دید.

منبع : http://www.w3schools.com