Dashboard hazırlarken dikkat edilmesi gerekenler
- Reyhan Balcı (Unlicensed)
- serdar ak
- Özgür Balcı
Mevcut arayüzlerde Bootstrap kullanılmaktadır. Hazırlanan Dashboard'ın temalarla uyumlu olması için burada belirtilen adımlara uyulmalıdır.
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-6"> <!-- 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 class="col-md-6"> <!-- ... --> </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-6"> <!-- panel --> <div class="panel panel-default"> <div class="panel-body"> <!-- Panel İçerik --> </div> </div> <!-- panel and --> </div> <div class="col-md-6"> <!-- ... --> </div> </div>
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;