Uvod u izgled obrasca za pokretanje sustava
HTML i CSS osnovni su jezici za dizajn obrasca web mjesta. Sve osnovne predloške izrađene u HTML-u, ali moramo dizajnirati i stvoriti jedinstvenu, tada posebno potrebnu CSS datoteku. Ova je metoda složena zbog reference klase i ID-a. Za prevladavanje svih problema u HTML i CSS datotekama dolazi pokretanje sustava. Bootstrap je napredna tehnika za web dizajn. Za provjeru valjanosti i potreban format obrasca, bootstrap ima vlastitu klasu za Textarea, unos i druge kontrole poput kontrole oblika, grupe unosa itd. Pomoću izgleda bootstrapa možemo odlučiti o obliku obrasca. Lako možemo napraviti vertikalne, vodoravne i inline formate oblika pomoću bootstrap-a.
Vrste izgleda obrasca za pokretanje
Izgled obrasca za pokretanje sustava čini drugačiju formu. omogućuje dizajn i provjeru bez CSS i JavaScript datoteka. Zbog izgleda oblika smanjite više kodiranja i komplikacija. Bootstrap ima svoju klasu za svladavanje svih složenih CSS i JavaScript koda.
Bootstrap ima tri vrste izgleda oblika.
- Okomiti oblik
- Vodoravni oblik
- Inline obrazac
Pogledajmo detaljno ove tri vrste:
1. Okomiti oblik
U vertikalnom obliku oblika, elementi etikete i teksta su okomiti i svaka grupa oblika je vertikalna. Okomiti oblik je zadani oblik u bootstrapu. Ne postoji dodatno pravilo za vertikalni format oblika.
2. Horizontalni oblik
U horizontalnom rasporedu oblika, elementi etikete i teksta su horizontalni, ali svaka grupa oblika je vertikalna . Dodajte dvije glavne klase za vodoravni oblik.
Dodajte klasu u element forme.
Dodajte klasu u elemente oznaka.
3. Inline obrazac
Inline oblik, naljepnica i elementi su unutarnji i lijevo poredani. Širina prikaza barem 768 piksela. Dodajte klasu za inline obrazac.
Dodajte klasu elementima obrasca.
Izgled obrasca za pokretanje sustava ima određenu zadanu klasu za konvenciju oblika koja je spomenuta u nastavku:
- .form-group: Ova klasa koristi se za razmak oblika i vezanje oznake. Prilagodljiv je za povezivanje,, provjeru valjanosti obrazaca i još više za obrazac.
- , kontrola oblika: Ova klasa se koristi za sve tekstualne elemente i prostor za formu itd. Koristi se za sve stilove poput veličine, fokusa.
- .form-control-lg i .form-control-sm koriste se za veličinu ulaznih elemenata velika i mala.
Podržani element i klasa
Neki podržani elementi i klase za provjeru valjanosti Bootstrap oblika bez JavaScript. To olakšava i prevladava puno kodiranja provjere na strani poslužitelja.
1) .form-control-file: Ova klasa koristi se za dodavanje datoteke poput pdf, Docx itd. Umjesto korištenja klase oblika kontrole u podatke datoteka u kojima se koristi ova klasa.
Primjer:
2) Samo za čitanje: Ovo je boolov atribut koji se koristi za ulazne elemente. U ovom atributu korisnik ne može mijenjati vrijednost i onemogućiti kursoru da piše.
Primjer:
3) .form-control-plaintext: ova klasa radi poput načina samo za čitanje, ali dolazi s ispravnom marginom i paddingom.
Primjer:
Primjer izgleda obrasca za pokretanje
Niže su navedeni primjeri:
1. Primjer vertikalnog oblika (zadani obrazac)
Name:
Email:
- Vertikalni oblik je jednostavan i zadani oblik u bootstrapu.
- Gornji primjer ima dva polja za unos i gumb za prijavu okomito s naljepnicom.
- Koristeći se samo skupinom oblika klase i kontrolom oblika klase, stvoren je vertikalni oblik.
- Možete mijenjati veličinu ulaznih elemenata bez podešavanja veličine CSS datoteke. Korisniku je potrebna samo klasa koja je .form-control-lg i .form-control-sm za velike i male veličine.
2. Primjer horizontalnog oblika
class=”form-horizontal”>
Name:
Email:
- Koristeći oblik klase-horizontalno, korisnik pravi vodoravni oblik. Element oznake i unosa je unutarnji, ali grupa oblika klase je vertikalna. Klasa "kontrolna oznaka col-sm-2" i = "col-sm-10" koja se koristi za podijeljeni stupac. Dodjela u dva stupca Za oznaku i Deset stupaca dodjeljuju se za ulazne elemente.
- Razred "col-sm-offset-2 col-sm-10" koristi se za gumb za prijavu. Pomak koji se koristi za prostor, col-sm-offset-2 je koristio prostore s dva stupca s lijeva u obliku.
- Pogledajte primjer horizontalnog oblika i njegov izlaz da biste razumjeli izgled. Vidjeno ime i uneseni tekst nalaze se u jednom retku, a zatim e-pošta, a elementi u drugom retku.
- Na velikom i srednjem zaslonu oblik izgleda horizontalno, ali na malom zaslonu (767px i ispod) oblik izgleda okomito.
- Vodoravni oblik je kompliciran tradicionalnom metodom, ali izgled početnog sustava olakšava korištenje kontrole klase i oznaka.
3. Primjer umetnutog oblika
class=”form-inline”>
Name:
Email:
placeholder=”Enter email”>class=”form-inline”>
Name:
Email:
placeholder=”Enter email”>
- Inline oblik, sve oznake i elementi su u jednom redu. Sve grupe oblika nalaze se u jednom redu. Oblik klase klase zadan je za ovaj izgled. Korisnik je stavio ovu klasu u. Inline obrazac koristi se više za radio gumbe, gumbe za provjeru i tako dalje.
- Ovaj obrazac uglavnom radi na barem 576px prikaznom polju nakon čega se prikazuje kao zadani obrazac. U naljepnici se koristi samo klasa sr. Ova klasa je čitač zaslona, koristi se za skrivanje naljepnice i prikazuje jedini element.
- Ako je ulazni element u inline obliku, tada korisnik mora prepoznati element s rezerviranim rezervi u ulaznom elementu.
Zaključak - Bootstrap from Layout
Da bi razumio Bootstrap tehnologiju, korisnik mora znati o HTML-u, CSS-u i JavaScript-u. Obrazac za pokretanje sustava najlakši je način za rad u standardnom obliku. Ima vlastite klase za uklanjanje kodiranja, a ne zahtijeva se CSS i JavaScript drugačija datoteka. Koristeći obrazac za pokretanje sustava, korisnik dobiva brzinu kodiranja i izbjegava dizajn i stil blokovskog kodiranja. Bootstrap je okvir za prednji dizajn web stranica koji je lagan i samo implementiran.
Preporučeni članci
Ovo je vodič za izgled obrasca za pokretanje. Ovdje smo raspravljali o uvodu Bootstrap obrasca oblika, zajedno s vrstama i primjerima. Možete i proći kroz naše druge predložene članke da biste saznali više -
- Tipografija za podizanje sustava
- Izgled pokretanja
- Mrežni sustav za pokretanje sustava
- Dijelovi za podizanje sustava