Uvod v postavitev obrazca Bootstrap

HTML in CSS sta osnovna jezika za oblikovanje obrazca spletnega mesta. Vse osnovne predloge, ki jih je naredil HTML, vendar moramo oblikovati in ustvariti edinstveno, nato pa ločeno potrebno datoteko CSS. Ta metoda je zapletena zaradi referenc za razred in id. Za premagovanje vseh težav v datotekah HTML in CSS prihaja zagonski program. Bootstrap je napredna tehnika spletnega oblikovanja. Za preverjanje veljavnosti in zahtevano obliko obrazca ima zagonski program lastni razred za Textarea, vnos in druge kontrole, kot so nadzor obrazca, skupina vnosov itd. S pomočjo postavitve zagonske različice se lahko odločimo za obliko obrazca. Z bootstrapom lahko enostavno naredimo vertikalne, vodoravne in inline oblike.

Vrste postavitve obrazca za začetno uporabo

Postavitev obrazca Bootstrap naredi drugačno obliko. omogoča oblikovanje in potrjevanje brez datotek CSS in JavaScript. Zaradi postavitve obrazca zmanjšajte več kodiranja in zapletov. Bootstrap ima svoj razred za premagovanje vseh zapletenih kod CSS in JavaScript.

Bootstrap ima tri vrste postavitve obrazca.

  • Navpična oblika
  • Vodoravna oblika
  • Inline oblika

Poglejmo podrobneje te tri vrste:

1. Navpična oblika

V navpični postavitvi oblike so elementi nalepk in besedila navpično in vsaka skupina oblik je navpična. Navpična oblika je privzeti obrazec v začetnem sistemu. Za vertikalno obliko obrazca ni nobenega dodatnega pravila.

2. Vodoravna oblika

V vodoravni postavitvi obrazcev so elementi nalepk in besedila vodoravno, vendar je vsaka skupina oblik navpična . Dodajte dva glavna razreda za vodoravno obliko.

Dodajte razred v element obrazca.

Dodajte razred v elemente nalepk.

3. Inline obrazec

V obliki črke so nalepke in elementi v obliki črke in levi. Športni pogled ima vsaj 768px. Dodajte razred za inline form.

Elementom obrazca dodajte razred.

Postavitev obrazca Bootstrap ima nekaj privzetega razreda za konvencijo obrazca, navedeno spodaj:

  • .form-group: Ta razred se uporablja za razmik obrazca in vezavo nalepke. Je prilagodljiv za vezavo sporočil, potrditev obrazca in več za obrazec.
  • . oblika nadzora: Ta razred se uporablja za vse besedilne elemente in prostor za obliko itd. Uporablja se za vse sloge, kot so velikost, ostrenje.
  • .form-control-lg in .form-control-sm se uporabljata za velikosti vhodnih elementov, velike in majhne.

Podprti elementi in razred

Nekaj ​​podprtih elementov in razredov za preverjanje obrazca Bootstrap brez JavaScript. To omogoča enostavno in premaga veliko kodiranje preverjanja na strani strežnika.

1) .form-control-file: Ta razred se uporablja za dodajanje datoteke, kot so pdf, Docx itd., Namesto da bi uporabljal razred-control control, v podatke datotek, ki jih ta razred uporablja.

Primer:

2) Samo za branje: to je logični atribut, uporabljen za vhodne elemente. V tem atributu uporabnik ne more spremeniti vrednosti in onemogočiti kurzorju pisanja.

Primer:

3) .form-control-plainintext: ta razred deluje kot samo za branje, vendar ima pravilno robo in oblazinjenje.

Primer:

Primer postavitve obrazca Bootstrap

Spodaj so navedeni primeri:

1. Primer navpične oblike (privzeti obrazec)


Name:

Email:

  • Navpična oblika je enostavna in privzeta oblika v začetnem sistemu.
  • Zgornji primer ima dve vhodni polji in gumb za prijavo navpično z nalepko.
  • Vertikalna oblika je bila ustvarjena z uporabo samo skupine obrazcev skupine in razreda obrazca.
  • Velikost vhodnih elementov lahko spremenite brez nastavitve velikosti datoteke CSS. Uporabnik potrebuje le razred, ki je .form-control-lg in .form-control-sm za velike in majhne velikosti.

2. Primer vodoravne oblike

class=”form-horizontal”>
Name:


Email:


  • Uporabnik z uporabo razredne oblike vodoravno oblikuje vodoravni obrazec. Element nalepke in vnosa je vgrajen, skupina oblik razreda pa je navpična. Razreda „kontrolna nalepka col-sm-2“ in = „col-sm-10“, ki se uporablja za deljeni stolpec. Dodelavanje v dveh stolpcih Za oznako in Deset stolpcev za vnosne elemente.
  • Razred "col-sm-offset-2 col-sm-10", ki se uporablja za gumb za prijavo. Zamak, uporabljen za prostor, col-sm-offset-2 uporablja obrazec z dvema stolpcema od leve v obliki.
  • Za razumevanje postavitve si oglejte primer horizontalne oblike in njen izhod. Njegovo vidno ime in vnos besedila sta v eni vrstici, nato pa e-pošta in elementi v drugi vrstici.
  • Na velikem in srednje velikem zaslonu je oblika vodoravna postavitev, na majhnem zaslonu (767 slikovnih pik in manj) pa se zdi navpična oblika.
  • Vodoravna oblika je zapletena z uporabo tradicionalne metode, toda postavitev zagonske plošče pomaga enostavno upravljanje razreda in oznak.

3. Primer obrazca Inline

class=”form-inline”>
Name:

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

Email:
placeholder=”Enter email”>

  • V obliki črke so vse nalepke in elementi v eni vrsti. Vse skupine obrazcev so v eni vrsti. Za to postavitev je privzeta oblika razreda inline. Uporabnik je ta razred namestil v. Vročni obrazec se uporablja bolj za radijske gumbe, gumbe za preverjanje ipd.
  • Ta obrazec večinoma deluje na vsaj 576px prikaznem polju, potem pa se prikaže kot privzeti obrazec. V nalepki se uporablja le razred sr. Ta razred je bralnik zaslona, ​​ki se uporablja za skrivanje nalepke in prikazuje edini element.
  • Če je vhodni element v vstavljeni obliki, potem mora uporabnik z vstavljenim nadomestkom v vhodnem elementu pripoznati element.

Zaključek - Zagon s postavitve

Za razumevanje tehnologije Bootstrap mora uporabnik vedeti o HTML, CSS in JavaScript. Obrazec za zagon zagona je najlažji način za uporabo standardnega obrazca. Ima lastne razrede za odstranjevanje kodiranja in ne zahtevane datoteke CSS in JavaScript. Z uporabo obrazca Bootstrap uporabnik doseže hitrost kodiranja in prepreči oblikovanje in slog blokovnega kodiranja. Bootstrap je okvir za oblikovanje spletnih strani, ki je lahek in se sam izvaja.

Priporočeni članki

To je vodnik za postavitev obrazca Bootstrap. Tukaj razpravljamo o uvodu Bootstrap Oblika obrazca skupaj z vrstami in primeri. Obiščite lahko tudi druge naše predlagane članke, če želite izvedeti več -

  1. Tipografija škorenj
  2. Postavitev zagonske črpalke
  3. Sistem mrežnega zagona
  4. Komponente zagonske trakove

Kategorija:

Razvoj programske opreme