Bootstrap Framework uzlabota tīmekļa saskarnes izstrāde

Citā apmācībā tika izskaidrots ievads Bootstrap lietotāja saskarnēs, kā arī apmācība par to, kā veidot tīmekļa projektu ar Bootstrap 2.0.
Mēs varam lejupielādēt Bootstrap un ievietot to mūsu vietnes direktorijā vai izmantot, saistot to ar jūsu tiešsaistes bibliotēku.
Bootstrap ir atvērtā koda sistēma un atvērta ātrākai un vieglākai tīmekļa izstrādei.
Meklējot, mēs varam atrast daudzus css kopienas ieguldījumus un pielāgotus komponentus un dizaina veidnes, ko citi lietotāji ir izveidojuši un padara tos pieejamus. Ir arī daudz komponentu, lai izveidotu navigācijas joslas, modālos logus un uznirstošos logus, attēlu karuseļus, izvēlnes un daudzus citus. kā JavaScript un Jquery spraudņus, lai apstiprinātu formas un citas funkcijas

Tabulas un rindas ar efektiem

Bootstrap jau ir ieprogrammēti CSS stili un efekti, kurus mēs varam izmantot, piemēram, lai mainītu tabulas rindu krāsu un kad pele tam pāriet.

Kods būs šāds:

Tabula un rindas ar efektu
 

 
 
Transportlīdzeklis
 
Avots
 
Stāvoklis
 
Cena
 

 

 

 
 
Fiat 500
 
Madride
 
Lietots
 
9690€
 

 
 
Honda vienošanās
 
Barselona
 
Lietots
 
14500€
 

 
 
Renault laguna
 
Toledo
 
Lietots
 
2800€
 

 

 

Tālāk mēs izveidosim izvēlni ar apakšizvēlni, izmantojot tikai Bootstrap CSS:

PALIELINĀT

Kods būs šāds:

Daudzlīmeņu izvēlne, izmantojot Css Bootstrap
Klientu pārdošanas administrators 

Sistēma
Lietotāji
Iestatījumi

Atļaujas
Serveri

Vps serveris A.
Vps serveris B.


Resursu patēriņš
Dublēšana

Mēs izskaidrojam struktūru un tās iepriekš noteiktās klases. Klase nosaka tīmekļa lielumu, kas pēc noklusējuma ir atrasts Bootstrap.

 .konteiners {platums: 1170 pikseļi; } 

Šādas rindu klases nodrošina kreiso un labo malu visā lapā:

 .row {; mala pa labi: -15 pikseļi; } 

Nolaižamās izvēlnes klasei jau ir Bootstrap un btn btn primāro pogu klases. Mēs pievienosim apakšizvēlni un līmeņu klases, lai varētu ģenerēt apakšizvēlni. Atcerieties, ka klasēm ir hierarhijas, tādēļ, ja mēs nosaucam to pašu klasi, kas mums ir Bootstrap, un pievienojam tai kādu atribūtu, dominē pēdējā deklarācija.
Tas attiecas uz gadījumu, kad mēs pievienojam atribūtu shift left, lai gan klase jau ir definēta bootstrap.min.css

 .dropdown-menu {pa kreisi: 150px; } 

Css un jquery uznirstošais logs ar html saturu
Mēs izmantosim popover funkciju, kas parāda uznirstošo logu, kad ar peli tiek novietota saite, un satura mainīgajam ir jāparāda html.
Mēs ņemsim iepriekšējo tabulu un pievienosim sleju tehniskai lapai.
Katrā saitē mums būs šāds teikums, un pēc tam ar ID mēs izsauksim skriptu.

 
 

 
 
Transportlīdzeklis
 
Avots
 
Stāvoklis
 
Cena
 
Fotogrāfijas
 

 

 

 
 
Fiat 500
 
Madride
 
Lietots
 
9690€
 
Datu lapas
 

 
 
Honda vienošanās
 
Barselona
 
Lietots
 
14500€
 
Datu lapas
 

 

 

 

Ja mums ir plašs saraksts, mēs varam izveidot JQuery funkciju, kur mēs varam nosūtīt dinamisku saturu, piemēram, izvilktu no datu bāzes.

Kolonnas un bloki lapā

Bootstrap pamatā ir 1200 pikseļu platums, kas sadalīts 12 blokos, kas aptver 99% tīmekļa struktūras, katrs bloks aptver 8,33333%, kas atbilst 100 pikseļiem, un tajā ir arī 1 pikseļa atstarpe.
Vienmēr kombinācijas vienā rindā, lai pievienotu 12, piemēram:
Divi bloki pa 3 un viens no 6

Bootstrap bloki
Col-md-3 bloks ar 300 pikseļiem.
Col-md-6 bloks ar 600 pikseļiem.
Col-md-3 bloks ar 300 pikseļiem.
800 pikseļu col-md-8 bloks.

Zemāk mēs ievietojam 8. bloka izmēru, kas ir 800 pikseļi:

Šie bloki ir atsaucīgi, jo tie ir konfigurēti Bootstrap css. Šeit mēs varam redzēt paraugu, kā bloki pielāgojas mobilās ierīces ekrāna maiņai.

Kā pielāgot Bootstrap, lai mainītu stilus un funkcionalitāti

Lai radītu stilus un funkcionalitāti, kas būtu saderīga ar Bootstrap, mums tā ir jāizmanto tāpat kā jebkura cita css vai js bibliotēka kā cits projekta ietvars, šajā gadījumā tā tiks izmantota dizaina un funkcionalitātes nodrošināšanai lietotāja pārlūkprogrammā. Mums vajadzētu izvairīties no sākotnējo bibliotēku reformēšanas, bet dokot mūsu pašu, tāpēc, kad Bootstrap izstrādātāji izlaidīs atjauninājumu, mums nebūs problēmu iekļaut jauno, ja saglabāsim izmaiņas atsevišķi.
Lai definētu savas stila lapas, mums ir jāizveido jauns CSS stilu fails, lai definētu izmaiņas, neietekmējot sākotnējo CSS. Atcerēsimies, piemēram, hierarhiju.
Ja Bootstrap css bootstrap.min.css

 .col-md-3 {platums: 25%; } 

Un mēs vēlamies, lai tai būtu robeža, tad atsevišķā failā my styles.css mēs varam paziņot:

 .borderojo {robeža: 1px nepārtraukti sarkans} 

Pēc tam lapā mēs izsaucam abus failus

Blokā mēs to piemērojam šādi:

Col-md-3 bloks ar 300 pikseļiem.

Tas būtu līdzvērtīgi tā deklarēšanai:

 col-md-3 {platums: 25%; apmale: 1px nepārtraukti sarkana; } 

Tagad, ja kāda iemesla dēļ tai bija divi līdzīgi apgalvojumi, pieņemsim

 .borderojo {robeža: 1px nepārtraukti sarkans; } .klientu bloks {robeža: 1px zils; }
Col-md-3 bloks ar 300 pikseļiem.

Uzvarētājs ir teikums, kas tika pasludināts par pēdējo. Tāpēc blokam būs zila apmale.Vai jums patika šī apmācība un palīdzējāt tai?Jūs varat apbalvot autoru, nospiežot šo pogu, lai sniegtu viņam pozitīvu punktu