Bootstrap Ders-10 Panel
UstaDerslik Soru-Cevap Yararlı Araçlar
arama ikon
Diller
Türkçe Türkçe

bilgi UstaDerslik
Bu uyari kutusudur.
Tamam
Anasayfa
İletişim
Üyeler

Bootstrap Ders-10 Panel

profil
cArleone
BEĞEN(0)
BEĞENME(0)
GÖRÜNTÜLENME(2040)
RAPOR ET
Bootstrap derslerimize devam ediyoruz.Bu derste panel eklemeyi göreceğiz.Paneller header,content,footer olmak üzere 3 kısımda oluşuyor.Paneli uyarı vermek veya bilgilendirme gibi şeylerde kullanabiliriz.Şimdi kullanımına geçelim.

İncele : http://ustaderslik.com/ornek/bootstrap-Panel/

İndir : http://ustaderslik.com/dosya/bootstrap-Panel.zip

<div class="panel panel-default">
<div class="panel-body"> Panel </div>
</div>

Bir div oluşturup classına panel panel-default verip,içine bir div daha açıp classına panel-body vererek paneli oluşturuyoruz.

<div class="panel panel-default">
<div class="panel-heading">Başlık</div>
<div class="panel-body">Panel</div>
<div class="panel-footer">Footer</div>
</div>

Header kısmını ise bir divin classına panel-heading vererek oluşturuyoruz.Footer'ı ise,bir divin classına panel-footer vererek oluşturuyoruz.

5 tane panel teması mevcut.Bunlar : panel-primary,panel-success,panel-info,panel-warning,panel-danger.Bunları classı panel olan ana divimiz de panel-default yerine yazıyoruz.Tema sadece headerı ve içeriği kapsıyor.Footerı etki etmiyor.

Genel örnek :
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/bootstrap.min.css" />
<link rel="stylesheet" href="css/bootstrap-theme.min.css" />
<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<title>UstaDerslik.com</title>
<style type="text/css">
.ortala{width:100%;max-width:400px;margin:auto;margin-top:75px;text-align:Center;}
</style>
</head>
<body>

<div class="ortala">

<div class="panel panel-default">
<div class="panel-body"> Panel </div>
</div>

<div class="panel panel-default">
<div class="panel-heading"><h1 class="panel-title">Başlık</h1></div>
<div class="panel-body">Panel</div>
</div>

<div class="panel panel-default">
<div class="panel-heading">Başlık</div>
<div class="panel-body">Panel</div>
<div class="panel-footer">Footer</div>
</div>



<div class="panel panel-primary">
<div class="panel-body">Panel</div>
</div>

<div class="panel panel-success">
<div class="panel-heading"><h1 class="panel-title">Başlık</h1></div>
<div class="panel-body">Panel</div>
</div>

<div class="panel panel-info">
<div class="panel-body">Panel</div>
</div>

<div class="panel panel-warning">
<div class="panel-heading"><h1 class="panel-title">Başlık</h1></div>
<div class="panel-body">Panel</div>
</div>

<div class="panel panel-danger">
<div class="panel-heading"><h1 class="panel-title">Başlık</h1></div>
<div class="panel-body">Panel</div>
</div>


</div>

</body>
</html>

Görüntüsü :
http://ustaderslik.com/resim/ders/52s1d1c0v.png



Kod
Kalın
Vurgu
Resim
Video
Url
CEVAPLA
Tüm Hakları Saklıdır. ©Arleone 2013-2014 UstaDerslik






Giriş
Şifremi Unuttum...
Şifre Talep
  Kuralları Kabul Ediyorum.
Kaydol