Questo articolo ti istruirà:
- Come creare pulsanti in Bootstrap?
- Come creare pulsanti di contorno in Bootstrap?
- Come regolare le dimensioni dei pulsanti Bootstrap?
- Come creare un pulsante a livello di blocco in Bootstrap?
- Come creare pulsanti di stato attivo in Bootstrap?
- Come creare pulsanti di stato disabilitati in Bootstrap?
Come creare pulsanti in Bootstrap?
Lo Stivaletto” btn La classe ” viene utilizzata per creare pulsanti. Per aggiungere pulsanti di stile, puoi utilizzare il ' btn ” class con la classe color, ad esempio “ btn-successo ” per creare un pulsante verde.
In HTML, il '
Per un concetto chiaro, controlla l'esempio qui sotto.
Esempio
Nel file HTML, segui i passaggi per creare pulsanti utilizzando tag diversi:
- Aggiungere '
' e ' ” elementi e assegnarli “ btn ' e ' btn-primario ' classi. - Quindi, aggiungi un ' ” etichetta con il tipo “ pulsante ”. Assegnagli il ' btn ' e ' btn-successo ” per lo styling come i primi due pulsanti come blu e il terzo come verde:
< un classe = 'btn btn-primario' href = '#' > Aprire < / un >
< ingresso genere = 'pulsante' classe = 'btn btn-successo' valore = 'Ricerca' >
Produzione
Come creare pulsanti di contorno in Bootstrap?
Per aggiungere i contorni dei pulsanti, il Bootstrap ' btn-contorno-* ” viene utilizzata la classe. Nella sua sintassi,“ * ” qui rappresenta il colore del contorno. Ad esempio, ' btn-contorno-pericolo ” posiziona il contorno rosso, “ btn-outline-primario ' imposta il contorno blu e altro ancora.
Analizza il codice riportato di seguito:
< pulsante genere = 'pulsante' classe = 'btn btn-outline-primario' >Avanti< / pulsante >< pulsante genere = 'pulsante' classe = 'btn btn-outline-pericolo' >Annulla< / pulsante >
< pulsante genere = 'pulsante' classe = 'btn btn-contorno-successo' >Successo< / pulsante >
Si può osservare che il “ Prossimo ” ha un contorno blu, il “ Annulla pulsante ' con contorno rosso e il pulsante ' Successo Il pulsante ” è stato disegnato con un contorno verde:
Come regolare le dimensioni dei pulsanti Bootstrap?
Alcune classi Bootstrap vengono applicate per regolare le dimensioni dei pulsanti, ad esempio:
- “ btn-lg La classe ” viene applicata per creare un pulsante grande. Questa classe può aumentare la dimensione del carattere e il riempimento.
- “ btn-md ” crea un pulsante di medie dimensioni.
- “ btn-sm ” crea un piccolo pulsante.
Esempio
Ora creeremo tre pulsanti con dimensioni diverse e nomi autoesplicativi:
< pulsante genere = 'pulsante' classe = 'btn btn-secondario btn-lg' >Grande< / pulsante >< pulsante genere = 'pulsante' classe = 'btn btn-avviso btn-md' >medio< / pulsante >
< pulsante genere = 'pulsante' classe = 'btn btn-pericolo btn-sm' >Piccolo< / pulsante >
Produzione
Come creare un pulsante a livello di blocco in Bootstrap?
I pulsanti a livello di blocco sono quelli che mantengono la dimensione a tutta larghezza. Per creare i pulsanti a livello di blocco, il ' blocco btn La classe ” viene utilizzata come segue
< pulsante genere = 'pulsante' classe = 'btn btn-avviso blocco btn' > pulsante< / pulsante >< pulsante genere = 'pulsante' classe = 'btn btn-blocco btn secondario' >pulsante< / pulsante >
Produzione
Come creare pulsanti di stato attivo in Bootstrap?
I pulsanti dello stato attivo si riferiscono ai pulsanti attualmente attivi. Questi pulsanti sono leggermente più scuri del normale. Per creare tali pulsanti, il Bootstrap ' attivo ” classe è utilizzata.
Esempio
Il codice seguente crea due pulsanti. Il primo è nello stato normale mentre l'altro è applicato con il ' attivo ' classe:
< pulsante genere = 'pulsante' classe = 'btn btn-successo' >Successo< / pulsante >< pulsante genere = 'pulsante' classe = 'btn btn-successo attivo' >Successo< / pulsante >
Produzione
Come creare pulsanti di stato disabilitati in Bootstrap?
I pulsanti di stato disabilitati si riferiscono ai pulsanti non cliccabili e inutilizzabili. In Bootstrap, il ' Disabilitato La classe ” viene utilizzata per creare un pulsante di stato disabilitato. Il ' Disabilitato L'attributo ” può essere utilizzato anche per questo scopo.
Esempio
Dai un'occhiata all'esempio fornito di seguito:
- Il primo pulsante non è in uno stato disabilitato.
- Il secondo utilizza il “ Disabilitato ” per creare un pulsante di stato disabilitato.
- Il terzo utilizza il ' Disabilitato 'attributo:
< pulsante genere = 'pulsante' classe = 'btn btn-success disabilitato' >Successo< / pulsante >
< pulsante genere = 'pulsante' classe = 'btn btn-successo' disabilitato>Successo< / pulsante >
Produzione
Abbiamo coperto diversi aspetti relativi ai pulsanti Bootstrap e al loro stile in CSS.
Conclusione
Il ' btn La classe ” viene utilizzata per creare pulsanti Bootstrap con un design semplice. Per creare pulsanti colorati e con contorno, il simbolo ' btn-* ' e ' btn-contorno-* Le classi 'sono utilizzate dove' * ' simboleggia qualsiasi classe di colore. Ad esempio, ' avviso btn ” crea un pulsante giallo, “ btn-outline-avviso ” crea un pulsante con contorno giallo e molti altri. Per rendere i pulsanti attivi o disabilitati, vengono applicate rispettivamente le classi “attivo” e “disabilitato”. Questo post ha fornito una guida completa sui pulsanti Bootstrap.