• Telegram
  • Google Plus
  • Linked In

ایجاد پنل در Bootstrap

ایجاد پنل در Bootstrap

تاریخ درج: خلاصه

طراحی سایت، بوت استرپ، ایجاد پنل در بوت استرپ، آموزش بوت استرپ، bootstrap

ایجاد پنل در Bootstrap

در این بخش نحوه ایجاد پنل ها را با استفاده از Bootstrap خواهید آموخت.

پنل های Bootstrap :

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





خروجی مثال بالا به شکل زیر خواهد بود :



پنل های دارای سرفصل (عنوان) :

همچنین با استفاده از کلاس panel-heading. میتوانید به پنل ها عنوان اضافه کنید.







خروجی مثال بالا به شکل زیر خواهد بود :







همچنین میتوانید از تگ های h1-h6 همراه با کلاس panel-title. استفاده نمایید.





پنل های دارای فوتر :

مانند هدر، همچنین با استفاده از کلاس panel-foorter. میتوانید به پنل، فوتر اضافه کنید. فوتر پنل میتواند برای در بر گرفتن دکمه ها و زیرنویس ها به کار رود.









خروجی مثال بالا به شکل زیر خواهد بود :




پنل های متنی موقعیتی :

مانند دیگر اجزاء ، همچنین میتوانید کلاس های متنی موقعیتی مانند panel-primary. ، panel-success. ، panel-info. ، panel-warning. یا panel-danger. را به پنل اضافه کنید تا مفهومی تر شده و توجه کاربر را بیشتر جلب کند.



























خروجی مثال بالا به شکل زیر خواهد بود :





















جایگذاری جداول داخل پنل ها :

میتوانید هر نوع جدول بدون لبه (border) را داخل یک پنل اضافه کنید تا جداولی با اطلاعات بهتر و کارآمدتر ایجاد کنید.































خروجی مثال بالا به شکل زیر خواهد بود :










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





















خروجی مثال بالا به شکل زیر خواهد بود :












مطلب بعدی -> ایجاد راهنمای ناوبری در Bootstrap

تاکنون نظری ارسال نشده است،شما اولین نفر باشید

سؤال یا نظر خود را ارسال کنید

  • Telegram
  • Google Plus
  • Linked In