Paneller, NUI ızgara sisteminde oluşturmuş olduğunuz düzen --> genişliklerin içerisinde içeriğe yer vermek adına düzenli kutular oluşturmanızı sağlar.

Panel; kendide dahil olmak üzere üç parçadan oluşur;

• Panelin kendisi --> .panel
• Panel Başlığı --> .panel-baslik
• Panel İşareti --> .panel-isaret

Örnek bir panel oluşturalım;

`

`

Panel; düzen ile beraber kullanım için hazırlanmıştır. Paneli düzen içerisinde kullanımı için örnek oluşturalım;

`

`

Panel kutuları görünüm .css dosyasında yer alan bir değiştiricidir. Panellere halihazır da görsel bir destek sağlar. Örnek kullanımını oluşturalım;

<div class="panel panel-kutu">...</div>

Panel kutuları için görünüm değiştiriciler mevcuttur. Bu değiştiriciler butonlarla aynı görünümde hazırlanmıştır. Belirli amaçlar dışında görünüm .css dosyasından kendi tasarımınıza uyarlamanız amaçlanmıştır. Basit bir örnek oluşturalım;

<div class="panel panel-kutu panel-kutu-birincil">...</div>

Hazır Panel Kutu Görünüm Değiştiriciler Listesi

• Birincil --> panel-kutu-birincil
• İkincil --> panel-kutu-ikincil
• Başarı --> panel-kutu-basari
• Uyarı --> panel-kutu-uyari
• Tehlike --> panel-kutu-tehlike
• Ters --> panel-kutu-ters

Panel başlık kısmında basit bir görsel düzenleme Örnek kullanım; <div class="panel panel-ust">...</div>

Panel etrafında ki boşlukları arttırmak için .panel-bosluk etiketi kullanılabilir. Örnek kullanım; <div class="panel panel-bosluk">...</div>

Paneller arası ayırıcı kullanımı. Örnek kullanım; <div class="duzen"> <div class="genislik-m-2-1"> <div class="panel panel-ayirici">...</div> <div class="panel panel-ayirici">...</div> <div class="panel panel-ayirici">...</div> </div> </div>

Örnek kullanım; <div class="panel"> <h3 class="panel-baslik"><i class="ikon-"></i>...</h3> </div>