Bootstrap Buton Kullanımı

Bootstrap Buton Kullanımı

Bootstrap Nedir?

Bootstrap Front-End Developerlar için geliştirilmiş açık kaynak kodlu ve ücretsiz bir CSS framework’tür. Bootstrap sayesinde masaüstü, tablet, mobil cihaz ve tüm tarayıcılara uyumlu web siteleri geliştirebiliriz. Bunun yanında bir web sitesi için gerekli olan tüm bileşenleri yapısında barındırır. (Form öğeleri, tablolar, butonlar, uyarılar, navigasyon bar, sayfalandırma, etiketler, açılan menüler vb. tasarım öğeleri.) Bu hazır bileşenleri kullanarak hem gelişmiş bir görünüm hem de her cihaza uygun bir tasarım gerçekleştirmiş oluruz.

Bootstrap Nasıl Kullanılır ?

Öncelikle aşağıda vermiş olduğum kodları sayfamıza ekliyoruz (Temel bootstrap kodları)

Kodlar;

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

    <title>Aliacar.net.tr</title>
  </head>
  <body>
    <h1 class="container">Bootstrap Buton Kullanımı!</h1>


    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
  </body>
</html>

Şuan sitemizde bootstrap dosyaları etkin.

Peki Bootstrap Buton Stilleri Neler ?

Bootstrap’da şuan 9 adet buton stili bulunmaktadır. Bunlar sırasıyla;

  1. Primary
  2. Secondary
  3. Success
  4. Danger
  5. Warning
  6. Info
  7. Light
  8. Dark
  9. Link

Peki kullanımı Nasıl ?

<button type="button" class="btn btn-primary">Primary</button>

Class=”btn btn-BURASI BUTON STİLİ”> ancak bu kelimeler büyük olamaz. Eğer büyük olursa kodumuz çalışmayacaktır.

Bütün Buton Kodları Aşağıda Verilmiştir.

<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-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>
<button type="button" class="btn btn-link">Link</button>

Sayfa içinde kullanırken;

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

    <title>Aliacar.net.tr</title>
  </head>
  <body>
    <h1 class="container">Bootstrap Buton Kullanımı!</h1>
<div class="container">
<button type="button" class="btn btn-primary">Buton1</button>
<button type="button" class="btn btn-secondary">Buton2</button>
<button type="button" class="btn btn-success">Buton3</button>
<button type="button" class="btn btn-danger">Buton4</button>
<button type="button" class="btn btn-warning">Buton5</button>
<button type="button" class="btn btn-info">Buton6</button>
<button type="button" class="btn btn-light">Buton7</button>
<button type="button" class="btn btn-dark">Buton8</button>
<button type="button" class="btn btn-link">Buton9</button>
</div>
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
  </body>
</html>

Kodları ana sayfanıza ekleyip test edebilirsiniz.

Sormak istediğiniz bir soru olursa yorum bölümünden yada iletisim@aliacar.net.tr adresinden ulaştırabilirsiniz. İyi çalışmalar dilerim.

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir