Bootstrap Ders-2 Butonlar
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-2 Butonlar

profil
cArleone
BEĞEN(0)
BEĞENME(0)
GÖRÜNTÜLENME(3696)
RAPOR ET
Bootstrap serimiz de komutlara başlıyoruz.İlk olarak buton yapılarını inceleyeceğiz.Buton oluşturmak için a ve button taglarının classına btn vermemiz yeterlidir.

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

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

<a href="#" class="btn">Buton</a>
<button type="button" class="btn">Buton</button>

Şimdi buton özelliştirmelerine bakalım.

1-Boyut


Butonlar için normal boyut dışında lg,sm,xs diye 3 boyut bulunmakta.Boyut vermediğimiz zaman standar bit boyutu vardır.Ama lg ile büyütebilir veya sm ve xs ile küçülte biliyoruz.Boyutu btn-boyut şeklinde class olarak atıyoruz.

<button type="button" class="btn btn-lg">Buton</button>
<button type="button" class="btn">Buton</button>
<button type="button" class="btn btn-sm">Buton</button>
<button type="button" class="btn btn-xs">Buton</button>


2-Tema


Butonlar için primary,success,info,warning,danger,link diye temalarımız mevcut.Temaları butona btn-temaismi şeklinde class olarak atıyoruz.Tema atamazsak butona,default tema görünür.

<button type="button" class="btn btn-primary">Buton</button>
<button type="button" class="btn btn-success">Buton</button>
<button type="button" class="btn btn-info">Buton</button>
<button type="button" class="btn btn-warning">Buton</button>
<button type="button" class="btn btn-danger">Buton</button>
<button type="button" class="btn btn-link">Link</button>


Buton özelliklerimiz bu kadar.

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:100px;margin:auto;margin-top:25px;}
</style>
</head>
<body>

<div class="ortala">
<button type="button" class="btn btn-lg">Buton</button> <br /> <br />
<button type="button" class="btn btn-success">Buton</button> <br /> <br />
<button type="button" class="btn btn-sm btn-info">Buton</button> <br /> <br />
<button type="button" class="btn btn-xs btn-danger">Buton</button> <br /> <br />
<button type="button" class="btn btn-xs btn-link">Link</button>
</div>

</body>
</html>

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