Ö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 .panelve panelin içindeki içeriğin bir .panel-bodysı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

Egzersizlerle Kendinizi Test Edin

Egzersiz yapmak:

"Merhaba Dünya" kelimeleriyle temel (varsayılan) bir Önyükleme Paneli oluşturun.

<div class="">
  <div class="">Hello World</div>
</div>