TechBlogSD - Wszystko do WordPressa i tworzenia stron internetowych
Instrukcje WEB i WordPress, nowości, recenzje motywów i wtyczek

Jak tworzyć przyciski w Bootstrap 5?

34

Przyciski są jednym z podstawowych elementów każdego frameworka UI. W naszym innym artykule widzieliśmy wiele przykładów przycisków Bootstrap 3. W Bootstrap 4 wprowadzono drobne zmiany w klasach przycisków, aby poprawić wrażenia użytkownika. Na przykład, domyślna klasa przycisku „.btn-dafault" jest zmieniana na drugorzędny przycisk z klasą „.btn-secondary”, a dodatkowa klasa małego przycisku „.btn-xs” jest usuwana. Nie ma zbyt wielu zmian do przycisków w Bootstrap 5. W tym samouczku przyjrzyjmy się bliżej tworzeniu różnych typów przycisków za pomocą Bootstrap 5.

Podstawy guzików Bootstrap

Przed utworzeniem przycisków pamiętaj o następujących punktach:

  • W celu zidentyfikowania dowolnego elementu jako przycisku należy dołączyć przynajmniej klasę „.btn”.
  • Dodatkowe klasy będą określać tylko dalszą stylizację przycisku oprócz klasy „.btn”.
  • Klasę „.btn” można dodać do elementów HTML, takich jak
  • Potrzebujesz plików skryptów Bootstrap tylko dla sekcji „Bootstrap Plugins”, aby utworzyć efekt przełączania, inne przyciski będą po prostu działać z CSS. Zapoznaj się z szablonem startowym Bootstrap 5, aby uzyskać więcej informacji.

Podstawowe domyślne przyciski

Możesz tworzyć różne kolory przycisków, używając klas narzędziowych w tle do klasy „.btn”.

  • Podstawowy – jest to główny lub główny przycisk używany z niebieskim kolorem .
  • Wtórny – biały przycisk jest przyciskiem wtórnym lub alternatywnym.
  • Sukces – zielony przycisk służący do pozytywnych działań.
  • Info – jasnoniebieski przycisk służący do wyświetlania informacji.
  • Ostrzeżenie – żółty przycisk służący do działań ostrzegawczych.
  • Niebezpieczeństwo — czerwony przycisk używany do działań związanych z błędami.
  • Światło – przycisk o jasnoszarym kolorze.
  • Ciemny – przycisk z ciemnym tłem.
  • Link — oprócz kolorów tła możesz również utworzyć przycisk linku bez tła.

Kod głównego przycisku powinien wyglądać tak:

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Bootstrap 5 CSS --> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous"> </head> <body> <!-- Start of Button --> <button type="button" class="btn btn-primary">Primary</button> <!-- End of Button --> <!-- Bootstrap 5 Scripts --> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script> </body> </html>

Jak wyjaśniono, klasa „.btn” identyfikuje element jako przycisk, a klasa „.btn-primary” służy do tworzenia przycisku w kolorze podstawowym (niebieskim). Podobnie inne kody przycisków są podane poniżej:

<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-light">Light Button</button> <button type="button" class="btn btn-dark">Dark Button</button> <button type="button" class="btn btn-link">Link</button>

Ostatnim elementem jest przycisk linku, który na wyświetlaczu będzie wyglądał jak link tekstowy, ale po kliknięciu lub najechaniu kursorem będzie działał jak przycisk. Domyślne przyciski będą wyglądać jak poniżej w przeglądarce:

Jak tworzyć przyciski w Bootstrap 5?

Tagi przycisków — używanie klas przycisków z różnymi tagami

Klasy przycisków są obsługiwane w

Źródło nagrywania: www.webnots.com
Leave A Reply

Ta strona korzysta z plików cookie, aby poprawić Twoje wrażenia. Zakładamy, że nie masz nic przeciwko, ale możesz zrezygnować, jeśli chcesz. Akceptuję Więcej szczegółów