bootstrap.png-Boostrapta buton uygulamaları
Bu yazımızda boostrapta buton uygulama şekillerini (buton çeşitlerini, sınıfları, boyutları ve örnek kullanımları) açıklamaya çalışacağım.

Bootsrapta buton sitilleri (seçenek) aşağıdaki gibidir:

            • Default
            • Primary
            • Success
            • İnfo
            • Warning
            • Danger
            • Link

Kodları ise aşağıda ki şekilde kullanılır:





<button type="button" class="btn btn-default">Default</button>



<button type="button" class="btn btn-primary">Primary</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-link">Link</button>

Bootstrapta buton etiketlerini aşağıdaki örnekte ki gibi (a, button veya input)
elemanlarıyla kullanabiliriz.

Kodları:


<a href="#" class="btn btn-info" role="button">Link Button</a>



<button type="button" class="btn btn-info">Button</button>



<input type="button" class="btn btn-info" value="Input Button">



<input type="submit" class="btn btn-info" value="Submit Button">

Bootstrapta 4 buton boyutu vardır.

  • btn-lg
  • btn-md
  • btn-sm
  • btn-xs

Farklı butonların kodları aşağıdaki şekilde kullanılır:


<button type="button" class="btn btn-primary btn-lg">Large</button>



<button type="button" class="btn btn-primary btn-md">Medium</button>



<button type="button" class="btn btn-primary btn-sm">Small</button>



<button type="button" class="btn btn-primary btn-xs">XSmall</button>

Bootstrapta butonlar aktif iken basılı olarak görünür ve daha koyu arka plan, koyu kenarlık ve ilave gölgeli olur. Bu işlem kodlara aşağıdaki örnek de ki gibi active sınıfı eklemekle olur.


<button type="button" class="btn btn-info">Info button</button>



<button type="button" class="btn btn-info active">Active info button</button>

Sınıfı disable olan butonlar aşağıdaki örnekte ki gibi tıklanamayan (devredışı) olur.


<button type="button" class="btn btn-lg btn-primary" disabled="disabled">



Primary button</button>



<button type="button" class="btn btn-default btn-lg" disabled="disabled">



Button</button>







Anlatımı aşağıda ki videodan  görsel olarak izleyebilirsiniz.