TechBlogSD - Tutto per WordPress e sviluppo WEB
Istruzioni WEB e WordPress, notizie, recensioni di temi e plugin

Come creare pulsanti in Bootstrap 5?

2

I pulsanti sono uno degli elementi di base di qualsiasi framework dell’interfaccia utente. Nel nostro altro articolo abbiamo visto molti esempi di pulsanti Bootstrap 3. In Bootstrap 4, ci sono piccoli cambiamenti nelle classi dei pulsanti per migliorare l’esperienza dell’utente. Ad esempio, la classe di pulsanti predefinita ".btn-dafault" viene modificata in un pulsante secondario con la classe ".btn-secondary" e la classe di pulsanti extra piccoli ".btn-xs" viene eliminata. Non ci sono molti cambiamenti ai pulsanti in Bootstrap 5. In questo tutorial, esploriamo di più sulla creazione di diversi tipi di pulsanti con Bootstrap 5.

Nozioni di base sui pulsanti Bootstrap

Prima di creare i pulsanti ricorda i seguenti punti:

  • Per identificare qualsiasi elemento come pulsante, è necessario includere almeno la classe ".btn".
  • Classi aggiuntive determineranno solo un ulteriore stile del pulsante oltre alla classe ".btn".
  • La classe ".btn" può essere aggiunta a elementi HTML come
  • Hai bisogno dei file di script Bootstrap solo per la sezione "Plugin Bootstrap" per creare l’effetto di attivazione/disattivazione, altri pulsanti funzioneranno semplicemente con il CSS. Fare riferimento al modello di avvio Bootstrap 5 per maggiori dettagli.

Pulsanti predefiniti di base

È possibile creare diversi colori di pulsanti utilizzando le classi di utilità in background fino alla classe ".btn".

  • Primario: questo è il pulsante principale o principale utilizzato con il colore blu.
  • Secondario: il pulsante di colore bianco è un pulsante secondario o alternativo.
  • Successo: pulsante verde utilizzato per azioni positive.
  • Info – Pulsante azzurro utilizzato per mostrare le informazioni.
  • Avviso: pulsante giallo utilizzato per le azioni di avviso.
  • Pericolo: pulsante rosso utilizzato per le azioni di errore.
  • Luce – Pulsante con colore grigio chiaro.
  • Scuro – Pulsante con sfondo scuro.
  • Collegamento: oltre ai colori di sfondo, puoi anche creare un pulsante di collegamento senza sfondo.

Il codice del pulsante principale dovrebbe essere simile

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

Come spiegato, la classe ".btn" identifica l’elemento come un pulsante e la classe ".btn-primary" viene utilizzata per creare il pulsante con il colore primario (blu). Allo stesso modo altri codici dei pulsanti sono riportati di seguito:

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

L’ultimo elemento è un pulsante di collegamento che apparirà come un collegamento di testo sul display ma agirà come un pulsante quando si fa clic o si passa sopra. I pulsanti predefiniti appariranno come di seguito sul browser:

Come creare pulsanti in Bootstrap 5?

Tag dei pulsanti: utilizzo di classi di pulsanti con tag diversi

Le classi di pulsanti sono supportate in

Fonte di registrazione: webnots.com
Lascia una risposta

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Accept Read More