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

Come creare un gruppo di input Bootstrap 5?

2

In Bootstrap, il gruppo di input viene utilizzato per raggruppare testo, pulsanti e gruppo di pulsanti nell’elemento. Viene utilizzato principalmente con gli elementi di controllo del modulo per fornire ulteriori informazioni di testo e aggiungere pulsanti. In questo tutorial, esploriamo di più su come utilizzare il gruppo di input in Bootstrap 5.

Esercitazione sul gruppo di input Bootstrap 5

Questo tutorial contiene i seguenti argomenti:

  1. Gruppo di immissione testo
  2. Utilizzo delle variazioni nel gruppo di inserimento del testo
  3. Gruppo input pulsante
  4. Gruppo di input a discesa
  5. Menu a discesa segmentato
  6. Usando la casella di controllo
  7. Inserimento del pulsante di opzione
  8. Gruppo di input più grande

1 gruppo di immissione testo

Per prima cosa raggruppiamo semplici elementi di testo con tag come di seguito:

<div class="input-group"> <span class="input-group-addon">@</span> <input type="text" class="form-control" placeholder="Enter Twitter Username" aria-describedby="twitter"> </div>

Nel codice sopra, viene creata una casella di testo con la classe ".form-control". La classe aggiuntiva ".input-group-addon" viene utilizzata per aggiungere contenuto di testo sul lato sinistro e il codice completo è racchiuso in un

con la classe “.input-group".

L’output sarà simile al seguente sul browser:

Come creare un gruppo di input Bootstrap 5?

2 variazioni nel gruppo di immissione testo

Ci sono molte varianti possibili dall’esempio di base sopra. Mostreremo altri tre casi:

  • Invece di usare @, usa $ per gli importi
  • Posiziona l’addon sul lato destro dell’elemento
  • Mostra gli addon su entrambi i lati dell’elemento

Di seguito è riportato il codice per la creazione di tre variazioni nel gruppo di input di testo:

<div class="input-group"> <span class="input-group-addon">$</span> <input type="text" class="form-control" placeholder="Enter Amount in Dollars" aria-describedby="amount"> </div> <div class="input-group"> <input type="text" class="form-control" placeholder="Enter Amount in Dollars" aria-describedby="amount1"> <span class="input-group-addon">$</span> </div> <div class="input-group"> <span class="input-group-addon">$</span> <input type="text" class="form-control" placeholder="Enter Amount in Dollars" aria-describedby="amount2"> <span class="input-group-addon">.00</span> </div>

E il risultato sarà il seguente:

Come creare un gruppo di input Bootstrap 5?

3 Utilizzo dei pulsanti con input

Abbiamo usato l’addon di testo in tutti gli esempi precedenti. Ora aggiungiamo un pulsante all’elemento.

<div class="input-group"> <input type="text" class="form-control" placeholder="Keyword"> <span class="input-group-btn"> <button class="btn btn-secondary" type="button">Search</button> </span> </div>

Devi solo aggiungere la classe ".input-group-btn" al tag per creare un pulsante. Produrrà il seguente risultato:

Come creare un gruppo di input Bootstrap 5?

Simile alle varianti di addon di testo, puoi posizionare il pulsante su qualsiasi lato o su entrambi i lati.

4 Utilizzo del menu a discesa con input

L’opzione successiva è utilizzare il pulsante a discesa accanto all’elemento di input. Fare riferimento al tutorial a discesa per la creazione di pulsanti a discesa.

<div class="input-group"> <div class="input-group-btn"> <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown </button> <div class="dropdown-menu"> <a class="dropdown-item" href="#">Link 1</a> <a class="dropdown-item" href="#">Link 2</a> <div role="separator" class="dropdown-divider"></div> <a class="dropdown-item" href="#">Link 3</a> </div> </div> <input type="text" class="form-control" placeholder="Dropdown with Text Input" aria-label="Dropdown Input Group"> </div>

Il pulsante a discesa con l’elemento di input apparirà come di seguito:

Come creare un gruppo di input Bootstrap 5?

5 Utilizzo del pulsante a discesa segmentato

Il pulsante a discesa segmentato avrà una freccia a discesa lungo il testo del pulsante. Questo darà un’area di testo più ampia per l’elemento di input. È possibile creare il gruppo di input del pulsante segmentato con il seguente codice:

<div class="input-group"> <div class="input-group-btn"> <button type="button" class="btn btn-secondary">Segment</button> <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <span class="sr-only">Toggle Dropdown</span> </button> <div class="dropdown-menu"> <a class="dropdown-item" href="#">Link 1</a> <a class="dropdown-item" href="#">Link 2</a> <div role="separator" class="dropdown-divider"></div> <a class="dropdown-item" href="#">Link 3</a> </div> </div> <input type="text" class="form-control" placeholder="Segmented Dropdown with Text Input" aria-label="Segmented Dropdown Input Group"> </div>

Produrrà il seguente risultato:

Come creare un gruppo di input Bootstrap 5?

6 Utilizzo della casella di controllo con input

Di seguito è riportato il codice per creare un elemento di input con la casella di controllo davanti:

<div class="input-group"> <span class="input-group-addon"> <input type="checkbox" aria-label="Checkbox Input Group"> </span> <input type="text" class="form-control" placeholder="Checkbox with Text Input" aria-label="Checkbox Input Group"> </div>

Il codice produrrà il seguente risultato:

Come creare un gruppo di input Bootstrap 5?

7 Utilizzo del pulsante di opzione con ingresso

L’ultima opzione è mostrare il pulsante di opzione davanti alla casella di input.

<div class="input-group"> <span class="input-group-addon"> <input type="radio" aria-label="Radio Button Input Group"> </span> <input type="text" class="form-control" placeholder="Radio Button with Text Input" aria-label="Radio Button Input Group"> </div>

Il pulsante di opzione con la casella di input dovrebbe apparire come di seguito:

Come creare un gruppo di input Bootstrap 5?

8 gruppi di input più grandi

Puoi aumentare le dimensioni degli elementi del gruppo di input completo aggiungendo la classe ".input-group-lg" all’esterno

<div class="input-group input-group-lg"> <span class="input-group-addon" id="sizing-addon1">@</span> <input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon1"> </div>

Impara Bootstrap 5 (Indice )


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