Önyükleme Panelleri
Paneller
Önyüklemedeki bir panel, içeriğinin etrafında bir miktar dolgu bulunan, kenarlıklı bir kutudur:
Temel Panel
Paneller sınıfla birlikte oluşturulur .panel
ve panelin içindeki içeriğin bir
.panel-body
sınıfı vardır:
Örnek
<div class="panel panel-default">
<div class="panel-body">A Basic Panel</div>
</div>
Sınıf .panel-default
, panelin rengini biçimlendirmek için kullanılır. Daha bağlamsal sınıflar için bu sayfadaki son örneğe bakın.
Panel Başlığı
Panel Başlığı
Panel İçeriği
Sınıf .panel-heading
, panele bir başlık ekler:
Örnek
<div class="panel panel-default">
<div class="panel-heading">Panel Heading</div>
<div class="panel-body">Panel Content</div>
</div>
Panel Altbilgisi
Panel İçeriği
Sınıf .panel-footer
, panele bir altbilgi ekler:
Örnek
<div class="panel panel-default">
<div class="panel-body">Panel Content</div>
<div class="panel-footer">Panel Footer</div>
</div>
Panel Grubu
Birçok paneli bir arada gruplandırmak için etraflarına bir with <div>
sınıfı sarın.
.panel-group
Sınıf .panel-group
, her panelin alt kenar boşluğunu temizler:
Örnek
<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>
Bağlamsal Sınıflı Paneller
Paneli renklendirmek için bağlamsal sınıfları kullanın ( .panel-default
, .panel-primary
, .panel-success
, .panel-info
, .panel-warning
, veya .panel-danger
):
Örnek
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