Valintaruutu Bootstrap - Esimerkkejä Bootstrap-valintaruudun toteuttamisesta

Johdanto Bootstrap-valintaruutuun

Bootstrap käytti useita painikkeita yhdellä napsautuksella, mutta joskus meidän on valittava vaihtoehto. Valinnalla on kaksi tapaa: yksi on valintanappi ja toinen on valintaruutu. Radiopainikkeella on vain yksi vaihtoehto valita muista. Joka tapauksessa meidän on valittava useampi kuin yksi vaihtoehto, joka on aika-valintaruutu. Valintaruudussa on useita vaihtoehtoja valita monista vaihtoehdoista. Valintaruutua käytetään monien vaihtoehtojen valintaan napsauttamalla valintaruutua. Valintaruudun painikkeiden käyttö on tentissä monivalintakysymyksiä, kun kysymykseen on vastattu useita kysymyksiä yhdestä kysymyksestä. Bootstrapilla on oma valintaruudun painikkeiden luokka, näet alla.

Esimerkkejä Bootstrap-valintaruudun toteuttamisesta

Käyttäjät ymmärtävät valintaruudun toteuttamisen ja näiden painikkeiden toiminnan. Alla on esimerkkejä Boostrap-valintaruudun toteuttamisesta:

1. Pystyvalintaruutu
2. Inline-valintaruutu

1. Pystyvalintaruutu

Seuraavassa on esimerkki pystysuorasta valintaruudusta.

Koodi:



Bootstrap Example vertical checkbox





Valintaruutu Esimerkki 1

Mitkä ovat seitsemän ihmettä seuraavassa luettelossa?

Taj Mahal

Egyptin pyramidi

Lontoon silta

Eiffel torni

lähtö:

Kuvaus:

• Näet yllä olevan vertikaalisen valintaruudun esimerkin. Tämä on oletusvalintaruutu, eikä se tarvitse mitään erityistä luokkaa tai kokonaisuutta.
• Kaikki muotoyksiköt tulevat pystysuunnassa yksi kerrallaan.
• Tätä käytetään enimmäkseen monivalintakyselyissä, jotta tiedät vaihtoehdot selvästi, eikä niitä pidä sekoittaa valintaruutuun ja etikettiin. Jokainen käyttää luokkaa valintaruutua etiketillä. Kysymykseen käyttää kappalekokonaisuutta

  .

• Voit napsauttaa valintaruutua -painiketta, kun napsautat painiketta -valintaruutu tulee näkyviin.

2. Inline-valintaruutu

Seuraavassa on esimerkki sisäisestä valintaruudusta.

Koodi:



Bootstrap Example inline checkbox





Valintaruutu Esimerkki 2

harrastukset:
maalaus

tanssi

lukeminen

lähtö:

Kuvaus:

• Yllä oleva esimerkki on sisäinen valintaruutu. Meidän on käytettävä muoto-inline-luokkaa muille, jotka muodostavat kokonaisuuden, joka näyttää inline-muodossa.
• Inline-valintaruudussa luokan valintaruutu inline vaaditaan jokaisen tarran kanssa.
• Jos haluat käyttää valintaruutua missä tahansa muodossa muiden tulojen kanssa, myös silloin inline-valintaruutu on hyödyllinen.
• Kaikki valintaruudut ovat yhdellä rivillä.
• Voit napsauttaa valintaruutua -painiketta, kun napsautat painiketta -valintaruutu tulee näkyviin.

Valintaruutu painikkeilla

Käynnistyslokeron valintaruutu toimi myös joidenkin luokkien painikkeilla, jotta ne näyttäisivät muodoltaan tyylikkäitä ja tyylikkäitä. Class-painike-group-vaihtaa, painikkeella on käytettävä luokassa ja vastaavasti. Painikkeilla-ryhmä-vaihtamisluokalla data-toggle = 'painikkeet' -luokka on myös tarpeen muodossa. Kohdassa tyypin on oltava valintaruutu, jotta se toimii valintaruuduna. Katsotaanpa joitain esimerkkejä ymmärtääksesi lisää valintaikkunan vaihtamisesta käynnistyslokeroa käyttämällä.

Koodi:



Bootstrap Example checkbox




Languages

HTML

CSS

JavaScript

Bootstrap




lähtö:

Kuvaus:

• Tässä esimerkissä käytimme ensisijaista painiketta, mutta mitä tahansa painiketta voidaan käyttää kassalle, mutta automaattisen täydennyksen on oltava pois päältä, jotta ylimääräistä tietoa ei tallenneta.
• Jos käyttäjä painaa painiketta, se valitaan automaattisesti vaihtoehtona ja kytkentäpainikkeessa käyttäjä voi valita lisää vaihtoehtoja napsauttamalla vain painikkeita.
• Täällä on neljä vaihtoehtoa valita kielet, käyttäjät voivat valita useita kieliä.
• class = 'btn-group-toggle' käytetään lomakkeen syöttämiseen tyyliin.
• Koska tämä tietojenvaihto, JavaScript sallii siirtymisen painikkeisiin, jotta aktiivinen ja ei aktiivinen tila voidaan tulkita.

Valintaruudun aktiivisen painikkeen käyttö Bootstrapissa

Jos käyttäjän aktiivinen luokka lisää painikkeen, tämä painike tarkistetaan automaattisesti ja käyttäjillä on jäljellä vaihtoehtoja valita. Tämä painike muuttaa väriä saadaksesi aktivoidun merkin.

Katsotaanpa seuraava esimerkki:

Koodi:


Languages