Bootstrap 5: Düğmeler

İçindekiler

Düğme Stilleri

Bootstrap 5 farklı düğme stilleri sağlar:

Örnek

<button type="button" class="btn">Basic</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>

Kendiniz Deneyin →

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="container mt-3">
  <h2>Button Styles</h2>
  <button type="button" class="btn">Basic</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>      
</div>

</body>
</html>

Düğme sınıfları <a>, <button> veya <input> öğeleri:

Örnek

<a href="#" class="btn btn-success">LinkButton</a>
<button type="button" class="btn btn-success">Button</button>
<input type="button" class="btn btn-success" value="Input Button">
<input type="submit" class="btn btn-success" value="Submit Button">
<input type="reset" class="btn btn-success" value="Reset Button">

Kendiniz Deneyin →

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="container mt-3">
  <h2>Button Elements</h2>
  <a href="#" class="btn btn-success">Link Button</a>
  <button type="button" class="btn btn-success">Button</button>
  <input type="button" class="btn btn-success" value="Input Button">
  <input type="submit" class="btn btn-success" value="Submit Button">
  <input type="reset" class="btn btn-success" value="Reset Button">
</div>

</body>
</html>

Bağlantının href özelliğine neden # işareti koyuyoruz?

Çünkü bağlayabileceğimiz herhangi bir sayfamız yok ve "404" almak istemiyoruz mesaja bağlantı olarak # koyduk. Gerçek hayatta elbette "Arama" sayfasının gerçek URL'si olmalıdır.

Düğme Anahattı

Bootstrap 5 ayrıca sekiz anahat/kenarlıklı düğme sağlar.

Ek bir "havada kalma" efekti görmek için fareyi üzerlerine getirin:

Örnek

<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>

Kendiniz Deneyin →

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="container mt-3">
  <h2>Button Outline</h2>
  <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>
</div>

</body>
</html>

Düğme Boyutları

Büyük düğmeler için .btn-lg sınıfını veya küçük düğmeler için .btn-sm sınıfını kullanın:

Örnek

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

Kendiniz Deneyin →

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="container mt-3">
  <h2>Button Sizes</h2>
  <button type="button" class="btn btn-primary btn-lg">Large</button>
  <button type="button" class="btn btn-primary btn-md">Default</button>    
  <button type="button" class="btn btn-primary btn-sm">Small</button>
</div>

</body>
</html>

Blok Seviyesi Düğmeleri

Ana öğenin tüm genişliğini kapsayan blok düzeyinde bir düğme oluşturmak için üst öğedeki .d-grid "helper" sınıfını kullanın:

Örnek

<div class="d-grid">
	  <button type="button" class="btn btn-primary btn-block">Full-Width Button</button>
</div>

Kendiniz Deneyin →

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="container mt-3">
  <h2>Block Level Buttons</h2>
  <p>To create a block level button that spans the entire width of the parent element, use the .d-grid "helper" class on the parent element:</p>
  <div class="d-grid">
    <button type="button" class="btn btn-primary btn-block">Full-Width Button</button>
  </div>
</div>

</body>
</html>

Çok sayıda blok düzeyinde düğmeniz varsa, aralarındaki boşluğu .gap-* sınıfıyla kontrol edebilirsiniz:

Örnek

<div class="d-grid gap-3">
  <button type="button" class="btn btn-primary btn-block">Full-Width Button</button>
  <button type="button" class="btn btn-primary btn-block">Full-Width Button</button>
  <button type="button" class="btn btn-primary btn-block">Full-Width Button</button>
</div>

Kendiniz Deneyin →

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="container mt-3">
  <h2>Block Level Buttons</h2>
  <p>If you have many block-level buttons, you can control the space between them with the .gap-* class:</p>
  <div class="d-grid gap-3">
    <button type="button" class="btn btn-primary btn-block">Full-Width Button</button>
    <button type="button" class="btn btn-primary btn-block">Full-Width Button</button>
    <button type="button" class="btn btn-primary btn-block">Full-Width Button</button>
  </div>
</div>

</body>
</html>

Aktif/Devre Dışı Butonlar

Bir düğme etkin (basılı görünüyor) veya devre dışı (tıklanamaz) duruma ayarlanabilir:

.active sınıfı, bir düğmenin basılı görünmesini sağlar ve disabled özelliği, düğmenin tıklatılamaz olmasını sağlar. <a> öğelerinin devre dışı özelliğini desteklemediğini ve bu nedenle görsel olarak devre dışı görünmesi için .disabled sınıfını kullanması gerektiğini unutmayın.

Örnek

<button type="button" class="btn btn-primary active">Active Primary</button>
<button type="button" class="btn btn-primary" disabled>Disabled Primary</button>
<a href="#" class="btn btn-primary disabled">Disabled Link</a>

Kendiniz Deneyin →

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="container mt-3">
  <h2>Button States</h2>
  <button type="button" class="btn btn-primary">Primary Button</button>
  <button type="button" class="btn btn-primary active">Active Primary</button>
  <button type="button" class="btn btn-primary" disabled>Disabled Primary</button>
  <a href="#" class="btn btn-primary disabled">Disabled Link</a>
</div>

</body>
</html>

Döndürücü Düğmeler

Ayrıca bir düğmeye "döndürücüler" de ekleyebilirsiniz; bunun hakkında daha fazla bilgiyi BS5 Döndürücüler Eğitimimizde öğreneceksiniz:

Örnek

   <button class="btn btn-primary">
  <span class="spinner-border 
    spinner-border-sm"></span>
</button>
<button class="btn 
    btn-primary">
  <span class="spinner-border 
    spinner-border-sm"></span>
  Loading..
</button>
<button 
    class="btn btn-primary" disabled>
  <span class="spinner-border 
    spinner-border-sm"></span>
  Loading..
</button>
    
<button class="btn btn-primary" disabled>
  <span 
    class="spinner-grow spinner-grow-sm"></span>
  Loading..
    </button>

Kendiniz Deneyin →

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap Example</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="container mt-3">
  <h2>Spinner Buttons</h2>
  <p>Add spinners to buttons:</p>
                                        
  <button class="btn btn-primary">
    <span class="spinner-border spinner-border-sm"></span>
  </button>

  <button class="btn btn-primary">
    <span class="spinner-border spinner-border-sm"></span>
    Loading..
  </button>
  
  <button class="btn btn-primary" disabled>
    <span class="spinner-border spinner-border-sm"></span>
    Loading..
  </button>
  
  <button class="btn btn-primary" disabled>
    <span class="spinner-grow spinner-grow-sm"></span>
    Loading..
  </button>
</div>

</body>
</html>