Mevcut arayüzlerde Bootstrap kullanılmaktadır. Hazırlanan Dashboard'ın temalarla uyumlu olması için burada belirtilen adımlara uyulmalıdır.
Section |
---|
Column |
---|
1. AdımDashboard 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.:
Code Block |
---|
language | xml |
---|
linenumbers | true |
---|
| <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ımSayfaları 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.: Code Block |
---|
language | xml |
---|
linenumbers | true |
---|
| <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.:
Code Block |
---|
language | xml |
---|
linenumbers | true |
---|
| <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.:
Code Block |
---|
language | xml |
---|
linenumbers | true |
---|
| <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> |
Sonuç:
Tip |
---|
Bootstrap paneller <div class="panel-footer"> alanına da sahiptir. Gerekli görülürse bu footer eklenerek de kullanılabilir. |
|
|
...