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ü :
UstaDerslik
