Sissejuhatus alglaadimisvormi vormi paigutusse
Veebisaidi vormikujunduse põhikeelteks on HTML ja CSS. Kõik HTML-i tehtud põhimallid, kuid peame kujundama ja looma kordumatud, siis vajaliku CSS-faili. See meetod on keeruline klassi- ja id-viidete tõttu. Kõigist HTML- ja CSS-failides esinevatest probleemidest ülesaamiseks pakutakse alglaadimist. Bootstrap on arenenud tehnika veebidisaini loomiseks. Valideerimise ja vormi vajaliku vormingu jaoks on alglaaduril oma klass Textarea jaoks, sisend ja muud juhtnupud, näiteks vormikontroll, sisendrühm jne. Kasutades alglaadimiste paigutust, saame otsustada vormi vormi. Saame alglaadimise abil hõlpsalt vertikaalseid, horisontaalseid ja rivilisi vorminguid.
Bootstrap-i vormi paigutuse tüübid
Bootstrap-i vormi paigutus muudab teist tüüpi vormi. see teeb kavandamise ja valideerimise ilma CSS-i ja JavaScripti failideta. Vormi paigutuse tõttu vähendage rohkem kodeerimist ja komplikatsioone. Bootstrapil on oma klass, et ületada kogu keerukas CSS ja JavaScripti kood.
Bootstrapil on kolme tüüpi vormipaigutus.
- Vertikaalne vorm
- Horisontaalne vorm
- Sisekujuline vorm
Vaatame neid kolme tüüpi üksikasjalikult:
1. vertikaalne vorm
Vertikaalse vormi paigutuse korral on etikett ja tekstilised elemendid vertikaalsed ja iga vormirühm vertikaalne. Vertikaalne vorm on alglaadimisprogrammi vaikimisi vorm. Vertikaalse vormingu jaoks pole täiendavaid reegleid.
2. horisontaalne vorm
Horisontaalse vormi paigutuse korral on sildi ja teksti elemendid horisontaalselt, kuid iga vormirühm on vertikaalne . Lisage horisontaalse vormi jaoks kaks põhiklassi.
Lisage klass vormi elementi.
Lisage klass sildielementidesse.
3. Sisevorm
Siseses vormis on silt ja elemendid sirgjoonelised ja vasakule joondatud. Vähemalt vaateakna laius on 768 pikslit. Lisage klassisisese vormi klass.
Lisage klass vormi elementidele.
Bootstrap-i vormipaigutusel on mõni allpool nimetatud vormikonventsiooni vaikeklass:
- .vormigrupp: Seda klassi kasutatakse tühikute vormistamiseks ja sildi sidumiseks. See on paindlik vormi, vormingusõnumite ja muu vormi sidumiseks.
- . vormikontroll: Seda klassi kasutatakse kõigi tekstiliste elementide jaoks ja vormi jaoks jne. Seda kasutatakse kõigi stiilide jaoks, näiteks suurus, fookus.
- .form-control-lg ja .form-control-sm kasutatakse vastavalt suurte ja väikeste sisendielementide jaoks.
Toetatud element ja klass
Mõned toetatud elemendid ja klassid alglaadimiste vormi valideerimiseks ilma JavaScriptita. See teeb lihtsaks ja ületab serveripoolse valideerimise kodeerimise.
1) .form-control-file: seda klassi kasutatakse faili andmetes, mida see klass kasutab, faili andmetes faili lisamiseks, näiteks pdf, Docx jne.
Näide:
2) Ainult lugemiseks: see on tõeväärtuse atribuut, mida kasutatakse sisendielementide jaoks. Selles atribuudis ei saa kasutaja väärtust muuta ja kursori kirjutamist keelata.
Näide:
3) vorm-kontroll-tavaline tekst: see klass töötab nagu ainult kirjutuskaitstud, kuid on varustatud õige veerise ja polstriga.
Näide:
Bootstrap-i vormi paigutuse näide
Allpool on toodud näited:
1. Vertikaalse vormi näide (vaikevorm)
Name:
Email:
- Vertikaalne vorm on alglaadimisvormis lihtne ja vaikimisi vorm.
- Ülaltoodud näitel on kaks sisestusvälja ja sildiga vertikaalselt sisselogimisnupp.
- Kasutades ainult klassi vormirühma ja klassi vormi kontrolli, loodi vertikaalne vorm.
- Sisendielementide suurust saate muuta ilma CSS-faili suurust kohandamata. Kasutajal on vaja ainult klassi, mis on vastavalt .form-control-lg ja .form-control-sm vastavalt suurtele ja väikestele.
2. Näide horisontaalsest vormist
class=”form-horizontal”>
Name:
Email:
- Kasutades klassi-horisontaalset vormi, teeb kasutaja horisontaalse vormi. Silt ja sisestuselement on rivis, kuid klassi vormirühm on vertikaalne. Klass “kontroll-silt col-sm-2” ja = “col-sm-10”, mida kasutatakse jagatud kolonni jaoks. Kaheveeruline määramine sildi jaoks ja kümme veergu määramiseks sisestuselementide jaoks.
- Klassi “col-sm-offset-2 col-sm-10” kasutatakse sisselogimisnupu jaoks. Tühiku jaoks kasutatud nihe, col-sm-offset-2 kasutas vasakpoolses vormis kaheveerulisi tühikuid.
- Paigutuse mõistmiseks vaadake horisontaalset vormi näidet ja selle väljundit. Selle nähtav nimi ja sisestustekst on ühel real, siis e-kiri ja elemendid teisel real.
- Suure ja keskmise ekraaniga vorm näeb horisontaalset paigutust, kuid väikesel ekraanil (767 pikslit ja all) näib vorm vertikaalset vormi.
- Horisontaalne vorm on traditsioonilisel meetodil keeruline, kuid alglaadimiste paigutus aitab klassi ja sildi juhtimist hõlpsalt muuta.
3. Ridavormi näide
class=”form-inline”>
Name:
Email:
placeholder=”Enter email”>class=”form-inline”>
Name:
Email:
placeholder=”Enter email”>
- Siseses vormis on kõik sildid ja elemendid ühes reas. Kõik vormirühmad on ühes reas. Selle paigutuse vaikeseade on klassivorm. Kasutaja asetas selle klassi sisse. Sisevormi kasutatakse rohkem raadionuppude, kontrollnuppude jms jaoks.
- See vorm töötab enamasti vähemalt 576 pikslise vaatepordiga, pärast seda kuvatakse nagu vaikevormis. Sildis kasutatakse ainult klassi sr. See klass on ekraanilugeja, seda kasutatakse sildi peitmiseks ja see kuvab ainsa elemendi.
- Kui sisendielement on rivis, peab kasutaja elemendi äratundmiseks kaasnema sisestuselemendis oleva kohahoidjaga.
Järeldus - alglaadimine küljest
Bootstrap-tehnoloogia mõistmiseks peab kasutaja teadma HTML-i, CSS-i ja JavaScripti. Alglaadimisvorm on lihtsaim viis töötada standardses vormingus vormis. Sellel on kodeerimise eemaldamiseks oma klassid ning CSS ja JavaScripti erinev fail pole vajalik. Bootstrap-vormi kasutades saab kasutaja kodeerimise kiiruse ja vältida plokkkodeerimise kujundust ja stiili. Bootstrap on kasutajaliidese veebidisaini raamistik, mis on kerge ja ise teostatud.
Soovitatavad artiklid
See on juhend Bootstrap Vormi kujunduse kohta. Siin käsitleme Bootstrap'i vormi paigutuse sissejuhatust koos tüüpide ja näidetega. Lisateavet leiate ka meie muudest soovitatud artiklitest -
- Bootstrap-tüpograafia
- Bootstrap-i paigutus
- Bootstrap Grid System
- Bootstrap-i komponendid