Merhaba dostlar bu gün sizlere Bootstrap da Buttonları işliyeceğiz nasıl özelleştiririz gelin yakından bakalım
hemen önceki dersler gibi kurulumumuzu yaptık
şimdi
bir adet buton oluşturdum ve bunun type ına button verdim class a geldiğimizde buton olabilmesi için
btn class ını ekledim sonra ise renk class ını ekledim
evet bunu bütün renkler için geçerli yapabilirsiniz dostlar
peki gelin bide a etiketlerine yani link etiletlerimize buton verelim
pek buton denilemez ancak buton görüntüsü oluşucak
outline özelliğine gelelim bide
kod kısmı bu şekilde btn-primary arasına bir - daha koyup outline yazıp ekliyoruz
üstelik bide hovır olayıda var üstüne fare ile gelince içindeki alan renk ile doluyor aynı görseldeki gibi
gelin bide butonlarımızı boyutlandıralım
şeklinde boyutlandıra biliriz ve elimize görseldeki gibi bir sonuç gelir
gelin bide block buton oluşturalım
bu şekilde oluştura biliriz ve elimize Görseldeki gibi bir sonuç gelir
(KIRMIZI UZUN OLAN)
aktif ve tıklanamaz buton yapalım şimdi gelin
<a class="btn btn-danger btn-lg active" href="">Active Button</a> sanki tıklanmış gibi bir renk çıkar ortaya
<button class="btn btn-success" type="button" disabled>Disabled Button</button> gözükür ancak tıklanamaz
gelin bide buton guruplarına bakalım
sadece div içine alıp dive btn-group class ını veriyoruz
gelin bide bunu alt alta yapalım
div e ek olarak vertical class ını ekledik
yukarıdaki görüntünün aşağıya doğru olanı oluştu
evet dostlar bir konun daha sonuna geldik bir sonraki bölümde margin ve padding olaylarına bakacağız iyi formlar
bu deste kullandığımız bütün kodlar
hemen önceki dersler gibi kurulumumuzu yaptık
şimdi
HTML:
<button class="btn btn-primary" type="button">Primary</button>bir adet buton oluşturdum ve bunun type ına button verdim class a geldiğimizde buton olabilmesi için
btn class ını ekledim sonra ise renk class ını ekledim
evet bunu bütün renkler için geçerli yapabilirsiniz dostlar
HTML:
<button class="btn btn-primary" type="button">Primary</button>
<button class="btn btn-secondary" type="button">secondary</button>
<button class="btn btn-success" type="button">success</button>
<button class="btn btn-danger" type="button">danger</button>
<button class="btn btn-warning" type="button">warning</button>
<button class="btn btn-info" type="button">info</button>
<button class="btn btn-light" type="button">light</button>
<button class="btn btn-link" type="button">link</button>peki gelin bide a etiketlerine yani link etiletlerimize buton verelim
pek buton denilemez ancak buton görüntüsü oluşucak
HTML:
<a href="" class="btn btn-primary">Primary</a>outline özelliğine gelelim bide
HTML:
<button class="btn btn-outline-primary" type="button">Primary</button>
<button class="btn btn-outline-secondary" type="button">secondary</button>
<button class="btn btn-outline-success" type="button">success</button>
<button class="btn btn-outline-danger" type="button">danger</button>
<button class="btn btn-outline-warning" type="button">warning</button>
<button class="btn btn-outline-info" type="button">info</button>
<button class="btn btn-outline-light" type="button">light</button>
<button class="btn btn-outline-link" type="button">link</button>kod kısmı bu şekilde btn-primary arasına bir - daha koyup outline yazıp ekliyoruz
üstelik bide hovır olayıda var üstüne fare ile gelince içindeki alan renk ile doluyor aynı görseldeki gibi
gelin bide butonlarımızı boyutlandıralım
HTML:
<button class="btn btn-success btn-lg" type="button">Large Button</button>
<button class="btn btn-success btn-sm" type="button">Small Button</button>şeklinde boyutlandıra biliriz ve elimize görseldeki gibi bir sonuç gelir
gelin bide block buton oluşturalım
HTML:
<button class="btn btn-danger btn-lg btn-block" type="button">Block Button</button>bu şekilde oluştura biliriz ve elimize Görseldeki gibi bir sonuç gelir
(KIRMIZI UZUN OLAN)
aktif ve tıklanamaz buton yapalım şimdi gelin
<a class="btn btn-danger btn-lg active" href="">Active Button</a> sanki tıklanmış gibi bir renk çıkar ortaya
<button class="btn btn-success" type="button" disabled>Disabled Button</button> gözükür ancak tıklanamaz
gelin bide buton guruplarına bakalım
sadece div içine alıp dive btn-group class ını veriyoruz
HTML:
<div class="btn-group">
<button class="btn btn-primary" type="button">Primary</button>
<button class="btn btn-secondary" type="button">secondary</button>
<button class="btn btn-success" type="button">success</button>
<button class="btn btn-danger" type="button">danger</button>
</div>gelin bide bunu alt alta yapalım
div e ek olarak vertical class ını ekledik
HTML:
<div class="btn-group-vertical">
<button class="btn btn-primary" type="button">Primary</button>
<button class="btn btn-secondary" type="button">secondary</button>
<button class="btn btn-success" type="button">success</button>
<button class="btn btn-danger" type="button">danger</button>
</div>yukarıdaki görüntünün aşağıya doğru olanı oluştu
evet dostlar bir konun daha sonuna geldik bir sonraki bölümde margin ve padding olaylarına bakacağız iyi formlar
bu deste kullandığımız bütün kodlar
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<! CSS >
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<title>www.TürkHackTeam.org/com</title>
<style>
body{
padding: 70px;
}
div{
padding: 20px;
margin-bottom: 20px;
}
</style>
</head>
<body>
<button class="btn btn-primary" type="button">Primary</button>
<button class="btn btn-secondary" type="button">secondary</button>
<button class="btn btn-success" type="button">success</button>
<button class="btn btn-danger" type="button">danger</button>
<button class="btn btn-warning" type="button">warning</button>
<button class="btn btn-info" type="button">info</button>
<button class="btn btn-light" type="button">light</button>
<button class="btn btn-link" type="button">link</button>
<br><br>
<a href="" class="btn btn-primary">Primary</a>
<br><br>
<button class="btn btn-outline-primary" type="button">Primary</button>
<button class="btn btn-outline-secondary" type="button">secondary</button>
<button class="btn btn-outline-success" type="button">success</button>
<button class="btn btn-outline-danger" type="button">danger</button>
<button class="btn btn-outline-warning" type="button">warning</button>
<button class="btn btn-outline-info" type="button">info</button>
<button class="btn btn-outline-light" type="button">light</button>
<button class="btn btn-outline-link" type="button">link</button>
<br><br>
<button class="btn btn-success btn-lg" type="button">Large Button</button>
<button class="btn btn-success btn-sm" type="button">Small Button</button>
<br><br>
<button class="btn btn-danger btn-lg btn-block" type="button">Block Button</button>
<br><br>
<a class="btn btn-danger btn-lg active" href="">Active Button</a>
<button class="btn btn-success" type="button" disabled>Disabled Button</button>
<br><br>
<div class="btn-group">
<button class="btn btn-primary" type="button">Primary</button>
<button class="btn btn-secondary" type="button">secondary</button>
<button class="btn btn-success" type="button">success</button>
<button class="btn btn-danger" type="button">danger</button>
</div>
<br><br>
<div class="btn-group-vertical">
<button class="btn btn-primary" type="button">Primary</button>
<button class="btn btn-secondary" type="button">secondary</button>
<button class="btn btn-success" type="button">success</button>
<button class="btn btn-danger" type="button">danger</button>
</div>
<! JS >
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
</body>
</html>
Son düzenleme:
