TechBlogSD - Kaikki WordPressin ja WEB: n kehittämiseen
WEB- ja WordPress - ohjeet, uutiset, arvostelut teemoista ja laajennuksista

Kuinka luoda Bootstrap 5 -syöttöryhmä?

15

In Bootstrap, tulo ryhmää käytetään ryhmään tekstiä, painikkeita ja painike ryhmän elementtiin. Sitä käytetään pääasiassa lomakkeen ohjauselementtien kanssa lisätietojen antamiseen ja painikkeiden lisäämiseen. Tässä opetusohjelmassa tutustutaan tarkemmin syöttöryhmän käyttöön Bootstrap 5: ssä.

Bootstrap 5 -syöttöryhmän opetusohjelma

Tämä opetusohjelma sisältää seuraavat aiheet:

  1. Tekstinsyöttöryhmä
  2. Muunnelmien käyttäminen tekstinsyöttöryhmässä
  3. Painikkeiden syöttöryhmä
  4. Avattava syöttöryhmä
  5. Segmentoitu pudotusvalikko
  6. Käyttämällä valintaruutua
  7. Valintapainikkeen asettaminen
  8. Suurempi syöttöryhmä

1 Tekstinsyöttöryhmä

Ensin ryhmitellään yksinkertaiset tekstielementit alla olevalla tunnisteella:

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

Yllä olevassa koodissa luodaan tekstikenttä, jossa on luokka ".form-control". Lisäluokkaa ".input-group-addon" käytetään tekstisisällön lisäämiseen vasemmalle puolelle ja koko koodi on kääritty

.input-group-luokalla.

Tulos näyttää alla selaimessa:

Kuinka luoda Bootstrap 5 -syöttöryhmä?

2 Tekstin syöttöryhmän muunnelmia

Edellisestä perusesimerkistä on paljon muunnelmia. Näytämme vielä kolme tapausta:

  • Käytä @-merkin sijaan summia $
  • Aseta lisäosa elementin oikealle puolelle
  • Näytä lisäosat elementin molemmilla puolilla

Alla on koodi kolmen muunnelman luomiseksi tekstinsyöttöryhmään:

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

Ja tulos näyttää tältä:

Kuinka luoda Bootstrap 5 -syöttöryhmä?

3 Syöttöpainikkeiden käyttäminen

Olemme käyttäneet tekstin lisäystä kaikissa yllä olevissa esimerkeissä. Lisäämme nyt elementtiin painikkeen.

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

Sinun tarvitsee vain lisätä ".input-group-btn" -luokka tunnisteeseen painikkeen luomiseksi. Se tuottaa seuraavan tuloksen:

Kuinka luoda Bootstrap 5 -syöttöryhmä?

Tekstin lisävariaatioiden tapaan voit sijoittaa painikkeen kummallekin puolelle tai molemmille puolille.

4 Pudotusvalikon käyttäminen syötteen kanssa

Seuraava vaihtoehto on käyttää syöttöelementin vieressä olevaa avattavaa painiketta. Katso avattavasta painikkeesta avattavasta opetusohjelmasta.

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

Tuloelementin sisältävä pudotusvalikko näyttää tältä:

Kuinka luoda Bootstrap 5 -syöttöryhmä?

5 Segmentoidun pudotuspainikkeen käyttäminen

Segmentoidun pudotusvalikon painikkeen tekstissä on avattava nuoli. Tämä antaa suuremman tekstialueen syöttöelementille. Voit luoda segmentoidun painikkeen syöttöryhmän seuraavalla koodilla:

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

Se tuottaa seuraavan tuloksen:

Kuinka luoda Bootstrap 5 -syöttöryhmä?

6 Valintaruudun käyttäminen tulon kanssa

Alla on koodi syöttöelementin luomiseksi, jonka edessä on valintaruutu:

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

Koodi tuottaa seuraavan tuloksen:

Kuinka luoda Bootstrap 5 -syöttöryhmä?

7 Radiopainikkeen käyttö tulon kanssa

Viimeinen vaihtoehto on näyttää valintanappi syöttölaatikon edessä.

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

Syöttölaatikolla varustetun valintanapin pitäisi näyttää seuraavalta:

Kuinka luoda Bootstrap 5 -syöttöryhmä?

8 Suurempi syöttöryhmä

Voit suurentaa koko syöttöryhmän elementtien kokoa lisäämällä ".input-group-lg" -luokan ulompaan

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

Opi Bootstrap 5 (hakemisto )


Leave A Reply

Tämä verkkosivusto käyttää evästeitä parantaakseen käyttökokemustasi. Oletamme, että olet kunnossa, mutta voit halutessasi kieltäytyä. Hyväksyä Lisätietoja