Bootstrap 5: Gombok

Tartalomjegyzék

    Tartalomjegyzék megjelenítése

Gombstílusok

A Bootstrap 5 különböző stílusú gombokat kínál:

Példa

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

Próbálja ki Ön is →

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

A gombosztályok használhatók a <a>, <button> vagy <input> elemek:

Példa

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

Próbálja ki Ön is →

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

Miért teszünk # karaktert a link href attribútumába?

Mióta nincs oldalunk, amelyre linkelhetnénk, és nem akarunk "404"-et kapni üzenetben a #-t adjuk meg hivatkozásként. A való életben természetesen valódi URL-nek kell lennie a „Keresés” oldalra.

Gomb vázlat

A Bootstrap 5 nyolc körvonalas/szegélyezett gombot is tartalmaz.

Vigye rájuk az egeret egy további „lebegés” effektus megtekintéséhez:

Példa

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

Próbálja ki Ön is →

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

Gombok méretei

Használja a .btn-lg osztályt a nagy gombokhoz, vagy a .btn-sm osztályt a kis gombokhoz:

Példa

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

Próbálja ki Ön is →

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

Blokk szint gombok

A szülőelem teljes szélességét lefedő blokkszintű gomb létrehozásához használja a .d-grid "helper" osztályt a szülőelemen:

Példa

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

Próbálja ki Ön is →

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

Ha sok blokkszintű gombja van, a közöttük lévő helyet a .gap-* osztállyal szabályozhatja:

Példa

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

Próbálja ki Ön is →

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

Aktív/Letiltott gombok

Egy gomb aktív (lenyomva jelenik meg) vagy letiltott (nem kattintható) állapotba állítható:

A .active osztály hatására a gomb megnyomva jelenik meg, a disabled attribútum pedig kattinthatatlanná teszi a gombot. Vegye figyelembe, hogy az <a> elemek nem támogatják a tiltott attribútumot, ezért a .disabled osztályt kell használniuk, hogy vizuálisan letiltottnak tűnjenek.

Példa

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

Próbálja ki Ön is →

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

Spinner gombok

"Spinners"-t is hozzáadhat egy gombhoz, amelyről többet megtudhat a BS5 Spinners oktatóanyagunkból:

Példa

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

Próbálja ki Ön is →

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