Versions Compared

Old Version 6

changes.mady.by.user Reyhan Balcı

Saved on

compared with

New Version 7

changes.mady.by.user Reyhan Balcı

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

Section


Column

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.:


Code Block
languagexml
linenumberstrue
<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>Sub text</small> kullanılmalı.

Ör.:

Code Block
languagexml
linenumberstrue
<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
languagexml
linenumberstrue
<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
languagexml
linenumberstrue
<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.


Note

Daha detaylı bilgi için;

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



...