لوحات
لجنة في التمهيد هو مربع يحدها مع بعض الحشو حول مضمونه:
ولوحة بسيطة
يتم إنشاء لوحات مع .panel الصف، والمحتوى داخل لوحة لديه .panel-body الفئة:
مثال
<div class="panel panel-default">
<div class="panel-body">A Basic
Panel</div>
</div>
انها محاولة لنفسك » و .panel-default يستخدم الطبقة أسلوب ولون اللوحة. انظر المثال الأخير على هذه الصفحة لمزيد من الطبقات السياقية.
العنوان وحة
العنوان وحة
المحتوى وحة
و .panel-heading يضيف الطبقة عنوان لوحة:
مثال
<div class="panel panel-default">
<div
class="panel-heading">Panel Heading</div>
<div class="panel-body">Panel
Content</div>
</div>
انها محاولة لنفسك » لوحة تذييل
المحتوى وحة
و .panel-footer يضيف طبقة تذييل إلى لوحة:
مثال
<div class="panel panel-default">
<div class="panel-body">Panel
Content</div>
<div class="panel-footer">Panel Footer</div>
</div>
انها محاولة لنفسك » مجموعة لوحة
لمجموعة العديد من الألواح معا، لف <div> مع الطبقة .panel-group من حولهم.
و .panel-group الطبقة مسح على هامش أسفل كل لوحة:
مثال
<div class="panel-group">
<div class="panel panel-default">
<div class="panel-body">Panel
Content</div>
</div>
<div class="panel panel-default">
<div class="panel-body">Panel
Content</div>
</div>
</div>
انها محاولة لنفسك » لوحات مع فئات السياقية
لتلوين لوحة، استخدام فئات السياقية ( .panel-default ، .panel-primary ، .panel-success ، .panel-info ، .panel-warning ، أو .panel-danger ):
مثال
Panel with panel-default class
Panel Content
Panel with panel-primary class
Panel Content
Panel with panel-success class
Panel Content
Panel with panel-info class
Panel Content
Panel with panel-warning class
Panel Content
Panel with panel-danger class
Panel Content
اختبر نفسك مع تمارين!
التمرين 1 » التمرين 2» التمرين 3 » التمرين 4» التمرين 5 »