Pulsanti bootstrap | Spiegato
Questo articolo ti istruirà:
- Come fare 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 a stato attivo in bootstrap?
- Come creare pulsanti di stato disabilitato in bootstrap?
Come fare pulsanti in bootstrap?
Il bootstrap "btn"La classe viene utilizzata per creare pulsanti. Per aggiungere pulsanti in stile, è possibile utilizzare "btn"Classe con la classe di colore, come"Btn-Success"Per creare un pulsante verde.
In HTML, il "","", E ""Tag con il tipo"pulsante"Sono utilizzati per creare pulsanti. IL "btn"La classe ha uno stile predefinito che aggiunge uno stile di base agli elementi dei pulsanti.
Per un concetto chiaro, dai un'occhiata all'esempio di seguito.
Esempio
Nel file HTML, seguire i passaggi per creare pulsanti usando tag diversi:
- Aggiungere "" E ""Elementi e assegnali"btn" E "BTN-PRIMARY" classi.
- Quindi, aggiungi un "Tag con il tipo "pulsante". Assegnalo il "btn" E "Btn-Success"Per lo styling come primi due pulsanti come blu e il terzo come verde:
Aprire
Produzione
Come creare pulsanti di contorno in bootstrap?
Per aggiungere i contorni del pulsante, il bootstrap "btn-outline-*"La classe viene utilizzata. Nella sua sintassi, "*"Qui rappresenta il colore del contorno. Ad esempio, "BTN-Outline-Danger"Posiziona il contorno rosso,"btn-outline-primary"Imposta il contorno blu e altro ancora.
Analizza il codice indicato di seguito:
Si può osservare che il "ProssimoIl pulsante "ha un contorno blu, il"AnnullaPulsante "con schema rosso e"Successo"Il pulsante è stato disegnato con uno schema verde:
Come regolare le dimensioni dei pulsanti bootstrap?
Alcune classi bootstrap vengono applicate per regolare le dimensioni dei pulsanti, come ad esempio:
- "btn-lg"La classe viene applicata per creare un pulsante di grandi dimensioni. Questa classe può aumentare le dimensioni e l'imbottitura dei caratteri.
- "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:
Produzione
Come creare un pulsante a livello di blocco in bootstrap?
I pulsanti a livello di blocco sono quelli che contengono la dimensione a tutta larghezza. Per creare i pulsanti a livello di blocco, il “BTN-Block"La classe è utilizzata come segue
Produzione
Come creare pulsanti a stato attivo in bootstrap?
I pulsanti di stato attivo si riferiscono ai pulsanti attualmente attivi. Questi pulsanti sono leggermente più scuri del normale. Per creare tali pulsanti, il bootstrap "attivo"La classe è utilizzata.
Esempio
Il codice seguente crea due pulsanti. Il primo è nello stato normale mentre l'altro viene applicato con il "attivo" classe:
Produzione
Come creare pulsanti di stato disabilitato in bootstrap?
I pulsanti a stato disabilitato si riferiscono ai pulsanti che sono chiare e inutilizzabili. In bootstrap, il "Disabilitato"La classe viene utilizzata per creare un pulsante di stato disabilitato. IL "Disabilitato"L'attributo può anche essere usato 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"Classe per creare un pulsante di stato disabilitato.
- Il terzo usa il "Disabilitato"Attributo:
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 di contorno, il “btn-*" E "btn-outline-*"Le lezioni sono utilizzate dove"*"Simboleggia qualsiasi classe di colore. Ad esempio, "btn-warning"Crea un pulsante giallo,"btn-outline-warning"Crea un pulsante delineato giallo e molti altri. Per rendere i pulsanti attivi o disabilitati, vengono applicate le classi "attive" e "disabilitate", rispettivamente. Questo post ha fornito una guida completa sui pulsanti bootstrap.