1. Adım
Dashboard içerik yerleşimlerinde bootstrap sayfaları bölmek için bootsrap grid yapısı kullanılmalı. İçeriğin yoğunluğuna göre uygun grid kullanılır.
Ör.:
<div class="row"> <div class="col-md-12"> <!-- ... --> </div> </div> <div class="row"> <div class="col-md-6"> <!-- ... --> </div> <div class="col-md-6"> <!-- ... --> </div> </div> <div class="row"> <div class="col-sm-4 col-md-6"> <!-- ... --> </div> <div class="col-sm-4 col-md-3"> <!-- ... --> </div> <div class="col-sm-4 col-md-3"> <!-- ... --> </div> </div>
2. Adım
Sayfaları istediğimiz yapıda böldükten sonra veri alanlarının yerleştirilmesi için bootsrap panel kullanılmalı. Temaya göre .panel-default, panel-info, panel-primary, panel-danger, panel-success görünümleri tercih edilebilir.
panel-heading altında sub metinler için <small>Sub text</small> kullanılmalı.
Ör.:
<div class="panel panel-default"> <div class="panel-heading"> <h4>Panel Başlığı</h4> <small>Panel açıklama metni</small> </div> <div class="panel-body"> ... Panel İçerik) </div> </div>
3. Sonuç
Ör.:
<div class="row"> <div class="col-md-12"> <!-- panel --> <div class="panel panel-default"> <div class="panel-heading"> <h4>Panel Başlığı</h4> <small>Panel açıklama metni</small> </div> <div class="panel-body"> ... Panel İçerik) </div> </div> <!-- panel and --> </div> </div>
NOTLAR:
Başlık kullanmaya ihtiyacınız yoksa <div class="panel-heading"> kısmını kaldırmanız yeterli olacaktır. Böylece düz beyaz zeminli bir kutu sahibi olursunuz.
Ör.:
<div class="row"> <div class="col-md-3"> <!-- panel --> <div class="panel panel-default"> <div class="panel-body"> ... Panel İçerik) </div> </div> <!-- panel and --> </div> </div>
Sonuç:
Bootstrap paneller <div class="panel-footer"> alanına da sahiptir. Gerekli görülürse bu footer eklenerek de kullanılabilir.
Daha detaylı bilgi için;