Introduzione alla casella di controllo in Bootstrap

Bootstrap utilizzava molti pulsanti con un clic, ma a volte è necessario scegliere un'opzione. La scelta dell'opzione ha due modi in cui uno è il pulsante di opzione e un altro è una casella di controllo. Il pulsante di opzione ha solo un'opzione tra cui scegliere. In qualsiasi condizione, dobbiamo scegliere più di un'opzione che funziona a tempo. La casella di controllo ha più opzioni tra le quali scegliere. La casella di controllo viene utilizzata per scegliere le opzioni in più scelte con un clic sulla casella di controllo. L'uso dei pulsanti della casella di controllo è domande a risposta multipla nell'esame quando la domanda ha più risposte a una domanda. Bootstrap ha una propria classe di pulsante di spunta, vedrai di seguito.

Esempi per implementare la casella di controllo in Bootstrap

Gli utenti possono capire come implementare una casella di controllo e il funzionamento di questi pulsanti. Di seguito sono riportati gli esempi per implementare la casella di controllo in Boostrap:

  1. Casella verticale
  2. Casella di controllo incorporata

1. Casella di controllo verticale

Esempio di casella di controllo verticale è riportato di seguito.

Codice:



Bootstrap Example vertical checkbox

Casella di controllo Esempio 1



Quali sono le sette meraviglie nella seguente lista?


Taj Mahal

Piramide dell'Egitto

ponte di Londra

Torre Eiffel

Produzione:

Descrizione:

  • Puoi vedere l'esempio sopra della casella di controllo verticale. Questa è una casella di controllo predefinita e non richiede alcuna classe o entità speciale.
  • Tutta l'entità del modulo arriva verticalmente una ad una.
  • Viene utilizzato principalmente negli esami a domande a scelta multipla per conoscere chiaramente le opzioni e non confonderle con la casella di controllo e l'etichetta. Ognuno utilizza la classe di casella di controllo con etichetta. Per domanda utilizza l'entità paragrafo

    .

  • È possibile fare clic sul pulsante della casella di controllo, dopo aver fatto clic sul pulsante il segno di spunta diventa visibile.

2. Casella di controllo incorporata

Esempio di casella di controllo in linea è riportato di seguito.

Codice:



Bootstrap Example inline checkbox

Casella di controllo Esempio 2


Hobby:
pittura

danza

lettura

Produzione:

Descrizione:

  • L'esempio sopra è una casella di controllo in linea. Dobbiamo usare la classe form-inline per formare una entità che mostra inline form.
  • Per la casella di controllo in linea, classe checkbox-inline richiesta con ogni etichetta.
  • Se si desidera utilizzare la casella di controllo in qualsiasi forma con altri input, anche quella volta è utile una casella di controllo incorporata.
  • Tutta la casella di controllo è disponibile in una riga.
  • È possibile fare clic sul pulsante della casella di controllo, dopo aver fatto clic sul pulsante il segno di spunta diventa visibile.

Casella di controllo tramite i pulsanti

La casella di controllo nel bootstrap ha anche funzionato con i pulsanti con alcune classi per apparire più elegante ed elegante nella forma. Class button-group-toggle, la classe button deve essere utilizzata in e rispettivamente. Con la classe button-group-toggle, nel modulo è necessaria anche la classe data-toggle = 'buttons'. Nel, il tipo deve essere una casella di controllo per funzionare come casella di controllo. Vediamo alcuni esempi per capire di più su Attiva / Disattiva nella casella di controllo usando bootstrap.

Codice:



Bootstrap Example checkbox




Languages

HTML

CSS

JavaScript

Bootstrap


Produzione:

Descrizione:

  • Per questo esempio, abbiamo utilizzato il pulsante principale, ma è possibile utilizzare qualsiasi pulsante per il checkout, ma 'completamento automatico' deve essere disattivato per non salvare dati aggiuntivi.
  • Se l'utente preme il pulsante, viene automaticamente scelto come opzione e nel pulsante di attivazione / disattivazione, l'utente può scegliere più opzioni semplicemente facendo clic sui pulsanti.
  • Qui abbiamo quattro opzioni per scegliere le lingue, gli utenti possono scegliere più lingue.
  • class = 'btn-group-toggle' è usato per lo stile dell'input del form.
  • Poiché questo interruttore dati, JavaScript consente di passare ai pulsanti in modo da poter interpretare la modalità Attiva e non attiva.

Utilizzando il pulsante attivo della casella di controllo in Bootstrap

Se la classe utente attiva aggiunge il pulsante, questo pulsante viene automaticamente selezionato e gli utenti hanno le opzioni rimanenti da scegliere. Questo pulsante cambia il colore per ottenere il segno attivato.

Vediamo il seguente esempio:

Codice:


Languages

"pulsanti " >
HTML

CSS

JavaScript

bootstrap

Produzione:

Descrizione:

  • In questo esempio è possibile riconoscere il pulsante HTML più scuro di altri, il che significa che questo pulsante è già attivo.
  • In HTML, aggiungi la classe attiva con il pulsante primario.
  • Questo esempio richiede anche button-toggle = "pulsanti" invece di un pulsante, a causa del gruppo del pulsante.

Conclusione

La casella di controllo è utile Se il lavoro ha più opzioni da scegliere per una condizione. L'utente può selezionare più di un'opzione richiesta per l'attività. Casella di controllo Controlla significa Sì o Non selezionata significa no. È possibile selezionare almeno due condizioni reciproche utilizzando una casella di controllo.

Articolo raccomandato

Questa è una guida a Checkbox in Bootstrap. Qui discutiamo l'introduzione alla casella di controllo in Bootstrap e i suoi esempi insieme all'implementazione del codice. Puoi anche consultare i nostri altri articoli suggeriti per saperne di più -

  1. Diversi componenti Bootstrap
  2. Layout Bootstrap con tipi
  3. Flexbox vs Bootstrap | I 10 migliori confronti
  4. Le 10 domande principali per l'intervista a Bootstrap

Categoria:

Sviluppo software