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

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

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

بوت استرپ امکان استفاده از یک پنل آماده را در اختیار ما قرار داده تا با استفاده از این پنل های زیبا دیگر نیازی به استایل دادن به المان هایمان که باعث سنگینی سایتمان می شود نباشد

پنل بوت استرپ شامل باکسی است که دارای بخش header برای نوشتن عنوان , بخش Body برای نوشتن محتویاتی که درون پنل قرار میگیرد و بخش footer می باشد

کد زیر یک پنل است که فقط قسمت body یا بدنه را دارد

<div class="panel panel-default">
  <div class="panel-body">A Basic Panel</div>
</div>

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

 

کد زیر پنلی است که دارای footer,header می باشد

<div class="container">

  <h2>Panel Footer</h2>

  <div class="panel panel-default">

    <div class="panel-heading">Panel Heading</div>

    <div class="panel-body">Panel Content</div>

    <div class="panel-footer">Panel Footer</div>

  </div>

</div>

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

 

همچنین می توانیم چند پنل را در یک گروه قرار دهیم

مثال زیر یک گروه بندی از پنل ها را نشان می دهد

<div class="container">

  <div class="panel-group">

    <div class="panel panel-default">

      <div class="panel-heading">Panel Header</div>

      <div class="panel-body">Panel Content</div>

    </div>

    <div class="panel panel-default">

      <div class="panel-heading">Panel Header</div>

      <div class="panel-body">Panel Content</div>

    </div>

    <div class="panel panel-default">

      <div class="panel-heading">Panel Header</div>

      <div class="panel-body">Panel Content</div>

    </div>

  </div>

</div>

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

 

همچنین می توانیم با استفاده از کلاس های متی موجود در بوت استرپ به پنل هامون رنگ بدهیم

 (.panel-default, .panel-primary, .panel-success, .panel-info, .panel-warning, or .panel-danger)

 

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

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