Info@Afragraphic.ir
0912 22 460 22
خدمات و مطالب آموزشی

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

 

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

 

 

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

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

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

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

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

 

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

 6358205673157827761.png

کد زیر پنلی است که دارای 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>

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

 6358205678322523162.png

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

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

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

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

 

 6358205682059036883.png

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

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

 6358205685796150634.png

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

 

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

 

نظــرات شما

نام :
وب سایت :
ایمیل :
پیغام :  

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