در این بخش نحوه ایجاد پنل ها را با استفاده از Bootstrap خواهید آموخت.
پنل های Bootstrap :
گاهی اوقات به هر دلیل نیاز دارید که محتوای مورد نظر خود را داخل یک جعبه (box) قرار دهید. در این حالت پنل بوت استرپ میتواند بسیار کارآمد باشد. در ساده ترین حالت، پنل مقداری لبه (border) و padding به اطراف محتوا اضافه میکند.
خروجی مثال بالا به شکل زیر خواهد بود :
پنل های دارای سرفصل (عنوان) :
همچنین با استفاده از کلاس panel-heading. میتوانید به پنل ها عنوان اضافه کنید.
خروجی مثال بالا به شکل زیر خواهد بود :
همچنین میتوانید از تگ های h1-h6 همراه با کلاس panel-title. استفاده نمایید.
پنل های دارای فوتر :
مانند هدر، همچنین با استفاده از کلاس panel-foorter. میتوانید به پنل، فوتر اضافه کنید. فوتر پنل میتواند برای در بر گرفتن دکمه ها و زیرنویس ها به کار رود.
خروجی مثال بالا به شکل زیر خواهد بود :
پنل های متنی موقعیتی :
مانند دیگر اجزاء ، همچنین میتوانید کلاس های متنی موقعیتی مانند panel-primary. ، panel-success. ، panel-info. ، panel-warning. یا panel-danger. را به پنل اضافه کنید تا مفهومی تر شده و توجه کاربر را بیشتر جلب کند.
خروجی مثال بالا به شکل زیر خواهد بود :
جایگذاری جداول داخل پنل ها :
میتوانید هر نوع جدول بدون لبه (border) را داخل یک پنل اضافه کنید تا جداولی با اطلاعات بهتر و کارآمدتر ایجاد کنید.
خروجی مثال بالا به شکل زیر خواهد بود :
به طور مشابه میتوانید گروه های لیست با پهنای کامل را داخل هر پنل اضافه کنید.
.png "لوگو")
