آموزش پانل ها در بوت استرپ
آموزش پانل ها در بوت استرپ
در این درس از مجموعه آموزش برنامه نویسی سایت سورس باران، به آموزش پانل ها در بوت استرپ خواهیم پرداخت.
این فصل در مورد پانل های بوت استرپ بحث خواهد کرد. وقتی می خواهید مولفه DOM خود را در یک جعبه قرار دهید، از اجزای صفحه استفاده می شود. برای دریافت یک پنل اساسی، کافی است کلاس panel. را به عنصر <div> اضافه کنید. همانطور که در مثال زیر نشان داده شده است ، کلاس panel-default. را نیز به این عنصر اضافه کنید –
|
1 2 3 4 5 |
<div class = "panel panel-default"> <div class = "panel-body"> This is a Basic panel </div> </div> |
دو روش برای اضافه کردن عنوان صفحه وجود دارد –
- از کلاس panel-heading. استفاده کنید تا یک ظرف عنوان را به راحتی به صفحه خود اضافه کنید.
- از هر <h1> – <h6> با کلاس panel-title. برای اضافه کردن عنوان پیش فرم استفاده کنید.
مثال زیر هر دو روش را نشان می دهد –
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<div class = "panel panel-default"> <div class = "panel-heading"> Panel heading without title </div> <div class = "panel-body"> Panel content </div> </div> <div class = "panel panel-default"> <div class = "panel-heading"> <h3 class = "panel-title"> Panel With title </h3> </div> <div class = "panel-body"> Panel content </div> </div> |
پانل با فوتر
با قرار دادن دکمه ها یا متن ثانویه در <div> حاوی کلاس panel-footer. می توانید فوتر ها را به پانل ها اضافه کنید. مثال زیر این را نشان می دهد.
|
1 2 3 4 5 6 7 |
<div class = "panel panel-default"> <div class = "panel-body"> This is a Basic panel </div> <div class = "panel-footer">Panel footer</div> </div> |
هنگام استفاده از تغییرات متنی ، رنگ و مرز را به ارث نمی برند زیرا قرار نیست در پیش زمینه قرار گیرند.
گزینه های متنی پنل
از کلاسهای حالت متنی مانند ،panel-primary, panel-success, panel-info, panel-warning, panel-dangerاستفاده کنید تا یک پنل برای متن خاصی معنادارتر شود.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 |
<div class = "panel panel-primary"> <div class = "panel-heading"> <h3 class = "panel-title">Panel title</h3> </div> <div class = "panel-body"> This is a Basic panel </div> </div> <div class = "panel panel-success"> <div class = "panel-heading"> <h3 class = "panel-title">Panel title</h3> </div> <div class = "panel-body"> This is a Basic panel </div> </div> <div class = "panel panel-info"> <div class = "panel-heading"> <h3 class = "panel-title">Panel title</h3> </div> <div class = "panel-body"> This is a Basic panel </div> </div> <div class = "panel panel-warning"> <div class = "panel-heading"> <h3 class = "panel-title">Panel title</h3> </div> <div class = "panel-body"> This is a Basic panel </div> </div> <div class = "panel panel-danger"> <div class = "panel-heading"> <h3 class = "panel-title">Panel title</h3> </div> <div class = "panel-body"> This is a Basic panel </div> </div> |
پنل با جدول
برای بدست آوردن یک جدول بدون مرز در یک صفحه ، از کلاس table. در صفحه استفاده کنید. فرض کنید یک <div> حاوی بدنه پنل وجود دارد ، ما یک حاشیه اضافی برای جداسازی به بالای جدول اضافه می کنیم. اگر هیچ <div> حاوی .panel-body وجود نداشته باشد ، آن قطعه از هدر صفحه به جدول جدا می شود.
مثال زیر این را نشان می دهد –
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 |
<div class = "panel panel-default"> <div class = "panel-heading"> <h3 class = "panel-title">Panel title</h3> </div> <div class = "panel-body"> This is a Basic panel </div> <table class = "table"> <tr> <th>Product</th> <th>Price </th> </tr> <tr> <td>Product A</td> <td>200</td> </tr> <tr> <td>Product B</td> <td>400</td> </tr> </table> </div> <div class = "panel panel-default"> <div class = "panel-heading">Panel Heading</div> <table class = "table"> <tr> <th>Product</th> <th>Price </th> </tr> <tr> <td>Product A</td> <td>200</td> </tr> <tr> <td>Product B</td> <td>400</td> </tr> </table> </div> |
پنل با گروه های لیست
می توانید گروه های لیست را در هر پنلی قرار دهید. با افزودن کلاس panel. به عنصر <div> یک پانل ایجاد کنید. همچنین کلاس panel-default. را به این عنصر اضافه کنید. اکنون در این پنل گروه های لیست خود را قرار دهید.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<div class = "panel panel-default"> <div class ="panel-heading">Panel heading</div> <div class = "panel-body"> <p>This is a Basic panel content. This is a Basic panel content. This is a Basic panel content. This is a Basic panel content. This is a Basic panel content. This is a Basic panel content. This is a Basic panel content.</p> </div> <ul class = "list-group"> <li class = "list-group-item">Free Domain Name Registration</li> <li class = "list-group-item">Free Window Space hosting</li> <li class = "list-group-item">Number of Images</li> <li class = "list-group-item">24*7 support</li> <li class = "list-group-item">Renewal cost per year</li> </ul> </div> |
لیست جلسات قبل آموزش بوت استرپ
- آموزش بوت استرپ
- بررسی اجمالی بوت استرپ
- آموزش راه اندازی بوت استرپ
- آموزش سیستم شبکه در بوت استرپ
- بررسی اجمالی CSS در بوت استرپ
- آموزش تایپوگرافی در بوت استرپ
- آموزش کد در بوت استرپ
- آموزش جدول در بوت استرپ
- آموزش فرم ها در بوت استرپ
- آموزش دکمه ها در بوت استرپ
- آموزش تصاویر در بوت استرپ
- آموزش کلاس های کمکی در بوت استرپ
- آموزش ابزارهای پاسخگو در بوت استرپ
- آموزش Glyphicons در بوت استرپ
- آموزش منوهای کشویی در بوت استرپ
- آموزش گروه های دکمه ای در بوت استرپ
- آموزش گروه های ورودی در بوت استرپ
- آموزش عناصر ناوبری در بوت استرپ
- آموزش Navbar در بوت استرپ
- آموزش Breadcrumbs در بوت استرپ
- آموزش صفحه بندی در بوت استرپ
- آموزش لیبل ها در بوت استرپ
- آموزش بج ها در بوت استرپ
- آموزش Jumbotron در بوت استرپ
- آموزش تصاویر کوچک در بوت استرپ
- آموزش هشدارها در بوت استرپ
- آموزش نوارهای پیشرفت در بوت استرپ
- آموزش شی Media در بوت استرپ
- آموزش گروه لیست در بوت استرپ
.svg)
دیدگاه شما