TechBlogSD - Allt för WordPress- och WEB -utveckling
WEB- och WordPress - instruktioner, nyheter, recensioner av teman och plugins

Hur skapar jag inmatningsgrupp för Bootstrap 5?

2

I Bootstrap används inmatningsgrupp för att gruppera text, knappar och knappgrupp till elementet. Det används främst med formulärkontrollelement för att tillhandahålla ytterligare textinformation och lägga till knappar. I den här självstudien, låt oss utforska mer om hur du använder inmatningsgrupp i Bootstrap 5.

Bootstrap 5 Inmatningsgruppshandledning

Denna handledning innehåller följande ämnen:

  1. Textinmatningsgrupp
  2. Använda variationer i textinmatningsgruppen
  3. Knappinmatningsgrupp
  4. Nedrullningsbar ingångsgrupp
  5. Segmenterad rullgardinsmeny
  6. Använd kryssrutan
  7. Sätter i radioknappen
  8. Större ingångsgrupp

1 Textinmatningsgrupp

Låt oss först gruppera enkla textelement med taggen som nedan:

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

I koden ovan skapas en textruta med klassen ".form-control". Ytterligare ".input-group-addon" -klass används för att lägga till textinnehåll på vänster sida och hela koden är insvept i en

med klassen ".input-group".

Utdata kommer att se ut nedan i webbläsaren:

Hur skapar jag inmatningsgrupp för Bootstrap 5?

2 variationer i textinmatningsgruppen

Det finns många variationer möjliga från ovanstående exempel. Vi kommer att visa ytterligare tre fall:

  • Istället för att använda @, använd $ för belopp
  • Placera tilläggets högra sida av elementet
  • Visa tilläggen på båda sidor av elementet

Nedan är koden för att skapa tre variationer i textinmatningsgruppen:

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

Och resultatet kommer att se ut nedan:

Hur skapar jag inmatningsgrupp för Bootstrap 5?

3 Använda knappar med ingång

Vi har använt texttillägg i alla ovanstående exempel. Låt oss nu lägga till en knapp till elementet.

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

Du behöver bara lägga till ".input-group-btn" -klassen i taggen för att skapa en knapp. Det ger följande resultat:

Hur skapar jag inmatningsgrupp för Bootstrap 5?

På samma sätt som texttilläggsvarianter kan du placera knappen på valfri sida av eller båda sidorna.

4 Använda rullgardinsmenyn med inmatning

Nästa alternativ är att använda rullgardinsmenyn bredvid inmatningselementet. Se rullgardinsmenyn för att skapa nedrullningsknappar.

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

Nedrullningsknappen med inmatningselement kommer att se ut nedan:

Hur skapar jag inmatningsgrupp för Bootstrap 5?

5 Använda segmenterad rullgardinsmeny

Den segmenterade rullgardinsmenyn har en nedrullningspil nedåt i knapptexten. Detta ger större textyta för inmatningselementet. Du kan skapa den segmenterade knappinmatningsgruppen med följande kod:

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

Det ger följande resultat:

Hur skapar jag inmatningsgrupp för Bootstrap 5?

6 Använda kryssrutan med inmatning

Nedan är koden för att skapa ett inmatningselement med kryssrutan framför:

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

Koden ger följande resultat:

Hur skapar jag inmatningsgrupp för Bootstrap 5?

7 Använda radioknapp med ingång

Det sista alternativet är att visa alternativknappen framför inmatningsrutan.

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

Radioknappen med inmatningsbox ska se ut nedan:

Hur skapar jag inmatningsgrupp för Bootstrap 5?

8 Större ingångsgrupp

Du kan göra hela ingångsgruppselementets storlek större genom att lägga till ".input-group-lg" -klassen i det yttre

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

Lär dig Bootstrap 5 (Index )


Inspelningskälla: webnots.com
Leave A Reply

Denna webbplats använder cookies för att förbättra din upplevelse. Vi antar att du är ok med detta, men du kan välja bort det om du vill. Jag accepterar Fler detaljer