لوحات التمهيد
اللوحات
اللوحة الموجودة في التمهيد عبارة عن صندوق مُحاط ببعض الحشو حول محتواه:
لوحة أساسية
يتم إنشاء اللوحات باستخدام .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