سبد (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 »

دیدگاه‌ها  

+1 # salar5075 1395-12-28 21:03
سلام.عذر می خوام من دقیقا کاربرد پنل رو متوجه نشدم.مخصوصا فوتر.اگه میشه یه مختصر توضیحی بدید.ممنون
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+2 # احسان عباسی 1395-12-29 09:07
سلام . خواهش می کنم.
پنل ها در مواقع مختلف می تونن کاربردهای مختلفی داشته باشند. مثلا می تونیم توی پنل ها جدول یا چیزهای دیگری قرار بدیم. در مورد فوتر پنل هم به مثال زیر توجه کنید. توی این مثال، در فوتر پنل، چند تا دکمه قرار داده شده:
www.tutorialrepublic.com/codelab.php?topic=bootstrap&file=panels-with-footer
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن

آموزش صوتی Bootstrap

بستن
مدرس:
سوال و جواب:

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

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

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