آموزشگاه برنامه نویسی تحلیل داده
آموزشگاه برنامه نویسی تحلیل داده

آموزش panel با bootstrap

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

معرفی پنل های twitter bootstrap 3

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

در اینجا مثالی را می بینید از ایجاد پنل ها با تویتر بوت استرپ

    
Look, I'm in a panel!

خروجی مثال بالا مانند زیر می باشد.

Bootstrap

پنل هایی با تیتر

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

مثال:

    
This Page is Disabled
This page is temporarily disabled by the site administrator for some reason.
Click here to enable the page.

خروجی مثال بالا مانند زیر می باشد.

Bootstrap

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

مثال:

    

Panel Title

Loremipsum dolor sit amet, consecteturadipiscingelit. Nam eusemtempor, varius quam at, luctus dui. Mauris magna metus, dapibusnecturpisvel, semper malesuada ante. Vestibulum id metus ac nislbibendumscelerisque non nonpurus.

پنل هایی با فوتر

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

مثال:

This page is temporarily disabled by the site administrator for some reason.

خروجی مثال بالا مانند زیر می باشد.

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

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

مثال:

    

301 Moved Permanently

The requested page has been permanently moved to a new location.

200 OK

The server successfully processed the request.

100 Continue

The client should continue with its request.

400 Bad Request

The request cannot be fulfilled due to bad syntax.

503 Service Unavailable

The server is temporarily unable to handle the request.

خروجی مثال بالا مانند زیر می باشد .

Bootstrap

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

مثال:

User Information

The following table contains some personal information about users.

Row First Name Last Name Email
1 John Carter johncarter@mail.com
2 Peter Parker peterparker@mail.com
3 John Rambo johnrambo@mail.com

خروجی مثال بالا مانند زیر می باشد

Bootstrap

همچنین می توانید گروه های لیست عریض را وارد هر پنلی کنید.

Products

The following products are currently available on our store.

Bootstrap
  • 2692
  •    1812
  • تاریخ ارسال :   1394/07/27

دانلود PDF دانلود سورس کد دانشجویان گرامی اگر این مطلب برای شما مفید بود لطفا ما را در GooglePlus محبوب کنید
رمز عبور: tahlildadeh.com یا www.tahlildadeh.com
ارسال دیدگاه نظرات کاربران
شماره موبایل دیدگاه
عنوان پست الکترونیک

ارسال

آموزشگاه برنامه نویسی تحلیل داده
آموزشگاه برنامه نویسی تحلیل داده

تمامی حقوق این سایت متعلق به آموزشگاه تحلیل داده می باشد .