Bootstrap ile Buton Oluşturma - Mobil, Php, Android, ios ve Teknoloji Bloğu

Bootstrap ile Buton Oluşturma

Gönderen: Kaan   Tarih: 2018-08-09 10:21 Kategori: Php-Html5-Css-jQuery-Mysql | Okundu: 938 Onay sırasına at Düzenle Kopyası

BootStrap ile Buton Kullanımı

Bootstrap bizlere farklı buton stilleri sunmaktadır. Bu stilleri a, button, input gibi etiketlere uygulayabiliriz.


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

Yukarıda Bootstrap 3'ün bize sunduğu buton sınıflarını görmektesiniz. Alt tarafta ise Bootstrap 4 butonlarını görüyorsunuz.

<button type="button" class="btn">normal</button>
  <button type="button" class="btn btn-primary">primary</button>
  <button type="button" class="btn btn-secondary">secondary</button>
  <button type="button" class="btn btn-success">success</button>
  <button type="button" class="btn btn-info">info</button>
  <button type="button" class="btn btn-warning">warning</button>
  <button type="button" class="btn btn-danger">danger</button>
  <button type="button" class="btn btn-dark">dark</button>
  <button type="button" class="btn btn-light">light</button>
  <button type="button" class="btn btn-link">link</button>   

Gördüğünüz gibi 3 ve 4 versiyonları arasında aynı isme sahip stillerde bile bazı farklar bulunmakta.

Buton oluşturmak için .btn seçicisi (class) kullanılır. Örneğin;

<a href="#" class="btn" >Buton 1</a>

.btn seçicisi ile beraber default, primary, success, info, warning, danger, link seçicileri kullanarak butonun görünümünü yukarıdakilerden biri gibi yapabilirsiniz. Bootstrap4 kullanıyorsanız light, dark ve secondary seçicileri de kullanabilirsiniz.

<a href="#" class="btn btn-danger" >Buton 1</a>

Farklı buton boyutları için btn-lg, btn-md, btn-sm ve btn-xs seçicileri kullanılabilir.

   

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

.btn-block seçicisi, buton genişliğinin %100 olmasını sağlar.

.active seçicisi butonun basıldığı andaki haliyle görünmesini sağlar. .disabled seçicisi ise butonu pasif hale getirir.

 

Bootstrap 4'te tüm bunlara ek olarak dolgusuz, sadece kenarlıklı (outline) butonlar kullanılabilir. Üzerine gelindiğinde ise dolgu rengi görünmektedir:

  <button type="button" class="btn btn-outline-primary">Primary</button>
  <button type="button" class="btn btn-outline-secondary">Secondary</button>
  <button type="button" class="btn btn-outline-success">Success</button>
  <button type="button" class="btn btn-outline-info">Info</button>
  <button type="button" class="btn btn-outline-warning">Warning</button>
  <button type="button" class="btn btn-outline-danger">Danger</button>
  <button type="button" class="btn btn-outline-dark">Dark</button>
  <button type="button" class="btn btn-outline-light text-dark">Light</button>

Gördüğünüz gibi buton konusunda uygulaması kolay pek çok alternatif bulunmakta. 

Kendi css kodlarımızla bu butonların görünümlerinde değişiklikler yapabileceğimizi unutmayınız.



Yorumlar: