Bootstrap Ders-14 Jumbotron
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-14 Jumbotron

profil
cArleone
BEĞEN(0)
BEĞENME(0)
GÖRÜNTÜLENME(1828)
RAPOR ET
Bootstrap serimize devam ediyoruz.Bu dersimiz de Jumbotron özelliğini işleyeceğiz.Jumbotron sitelerdeki büyük header kısmı gibi alan yapmamızı sağlıyor.Örneği incelerseniz daha iyi anlarsınız.Kullanımına geçelim.

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

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

<div class="jumbotron">
//içerik
</div>

Bu şekil de bir divin classına jumbotron vererek hemen oluşturabiliyoruz.İçine h1 ile başlık ve p ile açıklama ekleyebiliriz.Ana divimize background vererek arkaplan rengini color vererek yazı rengini değiştirebilirsiniz.

Kullanımı bu kadar basit ve kolay.

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{text-align:center;}
</style>
</head>
<body>

<div class="jumbotron">
<div class="container">
<h1>UstaDerslik</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean iaculis odio vitae sodales eleifend. Nulla posuere nisl eu lorem lobortis ornare.</p>
<p class="ortala"><a class="btn btn-success btn-lg" role="button">&nbsp;&nbsp; İndir &nbsp;&nbsp;</a></p>
</div>
</div>

<div class="jumbotron" style="background:#15d4f5;color:#fff;">
<div class="container">
<h1>UstaDerslik</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean iaculis odio vitae sodales eleifend. Nulla posuere nisl eu lorem lobortis ornare.</p>
<p class="ortala"><a class="btn btn-success btn-lg" role="button">&nbsp;&nbsp; İndir &nbsp;&nbsp;</a></p>
</div>
</div>

</body>
</html>

Görüntüsü :
http://ustaderslik.com/resim/ders/sd282sdfsa.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