Johdanto Bootstrap-lomakkeen asetteluun

HTML ja CSS ovat verkkosivujen muotoilun peruskielet. Kaikki HTML: n tekemät perusmallit, mutta meidän on suunniteltava ja luotava ainutlaatuinen silloin tarvittava CSS-tiedosto. Tämä menetelmä on monimutkainen luokka- ja tunnusviitteiden vuoksi. Kaikkien HTML- ja CSS-tiedostojen ongelmien ratkaisemiseksi on käynnistyslokero. Bootstrap on edistyksellinen tekniikka web-suunnitteluun. Validointia ja vaadittua muodomuotoa varten käynnistyslokerossa on oma luokka Textarea-ohjelmalle, syöttö- ja muille säätimille, kuten lomakeohjaus, syöttöryhmä jne. Käynnistäjännän asettelun avulla voidaan päättää lomakkeen muoto. Voimme tehdä helposti pysty-, vaaka- ja rivimuotoformaatteja bootstrap-ohjelmalla.

Bootstrap-muodon tyypit

Bootstrap-lomakeasettelu muodostaa erityyppisen lomakkeen. se tekee suunnittelun ja validoinnin ilman CSS- ja JavaScript-tiedostoja. Vähennä koodausta ja komplikaatioita lomakeasettelun takia. Bootstrapilla on oma luokka kaikkien monimutkaisten CSS- ja JavaScript-koodien voittamiseen.

Bootstrap-mallissa on kolmen tyyppisiä lomakeasetteluja.

  • Pystymuoto
  • Vaaka-muoto
  • Sisäinen muoto

Katsotaanpa nämä kolme tyyppiä yksityiskohtaisesti:

1. Pystymuoto

Pystysuorassa muotoilussa tarra ja tekstielementit ovat pystysuorassa ja jokainen lomakeryhmä on pystysuora. Pystysuora muoto on oletusmuoto käynnistyslokerossa. Pystysuoraan muotoon ei ole lisäsääntöä.

2. Vaakamuoto

Vaakamuodossa tarra ja tekstielementit ovat vaakasuorassa, mutta jokainen lomakeryhmä on pystysuora . Lisää kaksi pääluokkaa vaakamuotoon.

Lisää luokka lomakeelementtiin.

Lisää luokka tarraelementteihin.

3. Sisäinen muoto

Inline-muodossa etiketti ja elementit ovat inline-linjassa ja vasemmalla. Ainakin näyttöportin leveys on 768 kuvapistettä. Lisää luokka sisäiseen muotoon.

Lisää luokka lomakeelementteihin.

Bootstrap-lomakeasettelulla on joitain alla mainittujen mallien oletusluokkia:

  • .muoto-ryhmä: Tätä luokkaa käytetään lomakeväliin ja sidotaan etiketti. Se on joustava, jotta voidaan sitoa,, lomakkeen validointiviestit ja muu lomakkeelle.
  • . lomakeohjaus: Tätä luokkaa käytetään kaikille tekstielementeille ja muodotilalle jne. Sitä käytetään kaikissa tyyleissä, kuten koko, tarkennus.
  • .form-control-lg ja .form-control-sm käytetään syöttöelementin kokoon vastaavasti.

Tuettu elementti ja luokka

Jotkut Bootstrap-muodon validoinnin tuetut elementit ja luokat ilman JavaScriptiä. Se tekee helpoksi ja välttää paljon palvelinpuolen validointikoodauksia.

1) .form-control-tiedosto: Tätä luokkaa käytetään lisäämään tiedosto, kuten pdf, Docx jne., Sen sijaan, että käytettäisiin luokan form-control-tiedostoa, tiedostotiedoissa, joita tämä luokka käyttää.

Esimerkki:

2) Vain luku: Tämä on Boolean-määrite, jota käytetään syöttöelementeille . Tässä määritteessä käyttäjä ei voi muuttaa arvoa ja estää osoittimen kirjoittamista.

Esimerkki:

3) .muoto-ohjaus-selkeä teksti: tämä luokka toimii kuin vain luku -tyyppinen, mutta mukana tulee oikea marginaali ja pehmuste.

Esimerkki:

Esimerkki Bootstrap-muodon asettelusta

Annetut esimerkit on annettu alla:

1. Esimerkki pystysuorasta muodosta (oletusmuoto)


Name:

Email:

  • Pystymuoto on yksinkertainen ja oletusmuoto bootstrap-muodossa.
  • Yllä olevassa esimerkissä on kaksi syöttökenttää ja kirjautumispainike pystysuunnassa tarran kanssa.
  • Luodaan pystysuora muoto käyttämällä vain luokkamuoto-ryhmää ja luokkamuoto-ohjausta.
  • Voit muokata syöttöelementtien kokoa ilman CSS-tiedoston koon säätämistä. Käyttäjä tarvitsee vain luokan, joka on .form-control-lg ja .form-control-sm vastaavasti suurelle ja pienelle koolle.

2. Esimerkki vaakamuodosta

class=”form-horizontal”>
Name:


Email:


  • Käyttämällä luokkamuotoa vaaka, käyttäjä tekee vaakamuodon. Tunniste ja syöttöelementti ovat rivillä, mutta luokkamuodoryhmä on pystysuora. Luokka ”vertailutarra col-sm-2” ja = ”col-sm-10” käytetään jaettuun sarakkeeseen. Kahden sarakkeen määritys tarralle ja kymmenen saraketta osoitus syöttöelementeille.
  • Kirjautumispainikkeessa käytetty luokka ”col-sm-offset-2 col-sm-10”. Tilaan käytetty offset, col-sm-offset-2 käytti kahden sarakkeen välilyöntejä vasemmalta muodossa.
  • Katso vaakamuodon esimerkki ja sen tuloste ymmärtääksesi asettelua. Sen näkyvä nimi ja syötetty teksti ovat yhdellä rivillä, sitten sähköposti ja elementit toisella rivillä.
  • Suurella ja keskikokoisella näytöllä muoto näyttää vaakasuunnassa, mutta pienellä näytöllä (767px ja alapuolella) muoto näyttää pystysuunnassa.
  • Vaakasuuntainen muoto on monimutkainen perinteistä menetelmää käyttämällä, mutta bootstrap-asettelu auttaa tekemään helppoa luokan ja etiketinhallinnan avulla.

3. Esimerkki rivimuodosta

class=”form-inline”>
Name:

Email:
placeholder=”Enter email”>
 class=”form-inline”>
Name:

Email:
placeholder=”Enter email”>

  • Inline-muodossa kaikki tarrat ja elementit ovat yhdessä rivissä. Kaikki lomakeryhmät ovat yhdessä rivissä. Luokan muotoinen inline on tämän asettelun oletusarvo. Käyttäjä asetti tämän luokan sisään. Inline-muotoa käytetään enemmän valintanappien, tarkistuspainikkeiden ja niin edelleen.
  • Tämä muoto toimii pääosin ainakin 576 kuvapisteen näyttöportissa, sen jälkeen se näyttää oletusmuodolla. Etiketissä käytetään vain luokkaa sr. Tämä luokka on näytönlukija, jota käytetään tarran piilottamiseen ja joka näyttää ainoan elementin.
  • Jos syöttöelementti on inline-muodossa, käyttäjän on oltava mukana tuloelementin paikkamerkinnällä elementin tunnistamiseksi.

Johtopäätös - Bootstrap mallinnuksesta

Bootstrap-tekniikan ymmärtämiseksi käyttäjän on tiedettävä HTML, CSS ja JavaScript. Käynnistyslomake on helpoin tapa työskennellä vakiomuotoisessa muodossa. Sillä on omat luokat koodauksen poistamiseksi, eikä CSS- ja JavaScript-tiedostoja tarvita. Bootstrap-muodossa käyttäjä saa nopeuden koodaukseen ja estää lohkokoodauksen suunnittelun ja tyylin. Bootstrap on kehys etusivun web-suunnitteluun, joka on kevyt ja itse toteutettu.

Suositellut artikkelit

Tämä on opas Bootstrap-lomakkeen asetteluun. Tässä keskustellaan Bootstrap-lomakeasettelun johdannosta sekä tyypeistä ja esimerkkeistä. Voit myös käydä läpi muiden ehdotettujen artikkeleidemme saadaksesi lisätietoja -

  1. Bootstrap-typografia
  2. Bootstrap-asettelu
  3. Bootstrap-ruudukkojärjestelmä
  4. Bootstrap-komponentit

Luokka:

Ohjelmistokehitys