Page Comparison

Mevcut arayüzlerde Bootstrap kullanılmaktadır. Hazırlanan Dashboard'ın temalarla uyumlu olması için burada belirtilen adımlara uyulmalıdırBootstrap is used in existing interfaces. The following steps must be followed to ensure that the prepared Dashboard is compatible with the themes.

Section

Column

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

Step 1

. Adım

Bootstrap grid structure should be used to split bootstrap pages in dashboard content placements. The appropriate number of grids is used according to the density of the content.

Ex.:

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>

Step 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

After dividing the pages into the desired structure, bootstrap panels should be used to place the data fields. panel-default, panel-info, panel-primary, panel-danger, panel-success görünümleri tercih edilebilir.panel-heading altında sub metinler için looks can be preferred depending on the theme.

<small>Sub text</small> kullanılmalı.Ör should be used for subtexts under panel-heading

Ex.:

Code Block

language	xml
linenumbers	true

<div class="panel panel-default">
	<div class="panel-heading">
		<h4>Panel Başlığı<Heading</h4>
		<small>Panel açıklamaexplanation metni<text</small>
	</div>
	<div class="panel-body">
		<!-- Panel İçerikContent -->
	</div>
</div>

3. Sonuç

Result

ÖrEx.:

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ığı<Heading</h4>
				<small>Panel  açıklamaexplanation metni<text</small>
			</div>
			<div class="panel-body">
				<!-- Panel İçerikContent -->
			</div>
		</div>
		<!-- panel and -->
	</div>

	<div class="col-md-6">
		<!-- ... -->
	</div>
</div>

Image RemovedImage Added

NOTLAR:

Başlık kullanmaya ihtiyacınız yoksa

Notes:

If you don't need to have a heading, you can simply delete the <div class="panel-heading"> kısmını kaldırmanız yeterli olacaktır. Böylece düz beyaz zeminli bir kutu sahibi olursunuz.

Ör

part. This way you can havea box with a solid white background.

Ex.:

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 İçerikContent -->
			</div>
		</div>
		<!-- panel and -->
	</div>

	<div class="col-md-6">
		<!-- ... -->
	</div>
</div>

SonuçResult:

Image RemovedImage Added

Tip
Bootstrap paneller panels also have a <div class="panel-footer"> alanına da sahiptir. Gerekli görülürse bu footer eklenerek de kullanılabilir field. This footer can also be used if necessary.

Note

Daha detaylı bilgi içinFor detailed information;

https://bootstrapdocs.com/v3.3.1/docs/components/#panels

...

Versions Compared

Old Version 1

New Version 2

Key

Step 1

Step 2

Result