سبد (0)

panel ها در بوت استرپ

پنل ها یا panels  در بوت استرپ

Wiki

یک پنل در بوت استرپ، عبارت است از یک جعبه ی کادربندی شده به همراه مقداری فضای خالی(padding) در اطراف محتوای آن:

panel

پنل ها به وسیله ی کلاس panel. ایجاد می شوندو محتوای درون آنها نیز دارای کلاس panel-body. می باشد:

مثال (پنل های بوت استرپ)

<div class="panel panel-default">
  <div class="panel-body">یک پنل ساده</div>
</div>

امتحان کنید »
Note

از کلاس panel-default برای استایل دهی کردن رنگ پنل استفاده می شود. برای مشاهده ی این موضوع، لطفا مثال آخر این آموزش را مشاهده فرمایید.


سرفصل پنل-Panel Heading در بوت استرپ

Wiki

panelAndHeading

کلاس panel-heading. یک سرفصل را به یک پنل اضافه می کند:

مثال (پنل های بوتسترپ)

<div class="panel panel-default">
  <div class="panel-heading">سرفصل پنل</div>
  <div class="panel-body">محتوای پنل</div>
</div>

امتحان کنید »

فوتر پنل-Panel Footer

Wiki

panelFooter

کلاس panel-footer. یک فوتر(Footer) را به پنل مورد نظر اضافه می کند:

مثال (پنل های بوت استرپ)

<div class="panel panel-default">
  <div class="panel-body">یک پنل ساده</div>
  <div class="panel-footer">فوتر پنل</div>
</div>

امتحان کنید »

گروه های پنل-Panel Group

Wiki

برای اینکه بتوانید تعداد زیادی پنل را در کنار یکدیگر گروه بندی کنید، همه ی آنها را درون یک عنصر <div> با کلاس panel-group. قرار دهید.

کلاس panel-group. مقدار margin-bottom هر پنل(که به طور پیش فرض 20 پیکسل است) را از بین می برد:

مثال (پنل های بوت استرپ)

<div class="panel-group">
  <div class="panel panel-default">
    <div class="panel-body">محتوای پنل</div>
  </div>
  <div class="panel panel-default">
    <div class="panel-body">محتوای پنل</div>
  </div>
</div>

امتحان کنید »

 پنل ها به همراه کلاس های رنگی در بوت استرپ

Wiki

برای رنگی کردن پنل مورد نظر، از کلاس های رنگی زیر استفاده کنید:

  1. panel-default.
  2. panel-primary.
  3. panel-success.
  4. panel-info.
  5. panel-warning.
  6. panel-danger.

مثال (پنل های بوتسترپ)

 coloredPanels
امتحان کنید »

با تمرین خودتان را محک بزنید!

تمرین 1»  تمرین 2»  تمرین 3 »  تمرین 4 »  تمرین 5 »

آموزش صوتی Bootstrap

ابزاری که در پیش روی دارید یکی از ابزارهای بسیار کاربردی سایت بیاموز در زمینه آموزش است، این ابزار برای سهولت یادگیری شما کاربران محترم طراحی شده است.

فقط کافی است روی عنوان پاراگراف مورد نظرتان کلیک کنید تا پخش صدا آغاز شود ...!

تمامی محصولات و خدمات این وبسایت، حسب مورد دارای مجوزهای لازم از مراجع مربوطه می‌باشند و فعالیت‌های این سایت تابع قوانین و مقررات جمهوری اسلامی ایران است.
logo-samandehi مجوز نشر دیجیتال از وزرات فرهنگ و ارشاد اسلامی پرداخت آنلاین -  بانک ملت معرفی بیاموز در شبکه سه