Bootstrap lietotāja saskarnes

Lietotāju saskarnes ir viena no vissvarīgākajām lietojumprogrammu daļām, jo ​​tas ir veids, kā lietotāji mijiedarbojas ar mūsu radītajiem, bet turklāt labs interfeiss padara mūsu lietojumprogrammas pieredzi pozitīvu. No otras puses, apšaubāms interfeiss nozīmē ka labu aplikāciju vairs nevar izmantot.
Bootstrap Tas nedod mums iebūvētas saskarnes, tas ir jāprojektē mums pašiem, tomēr tas dod mums komponentus, lai tos varētu izveidot, un, lai gan lielākā daļa tā sastāvdaļu ir paredzētas tīmekļa lietojumprogrammu projektēšanai, tai faktiski ir citas sastāvdaļas uzlabot lietotājvārda pieredzi.
Šo komponentu pamatā ir JavaScript Y jQuery, tāpēc mēs pieprasīsim, lai šī pēdējā bibliotēka varētu izmantot šos mūsu minētos elementus, tomēr, kad būsim redzējuši dažus rezultātus, mēs pamatosim šo iekļaušanu.
Kā mēs esam norādījuši ievadā, tas ir jāizmanto jQuery Lai izmantotu šos komponentus, tāpēc vispirms mēs definēsim, kādai jābūt mūsu etiķetei galvu no visiem piemēriem, kurus mēs redzēsim. Apskatīsim tā kodu:

Pirmkārt, mēs iekļaujam bootstrap.css tās saīsinātajā versijā un pēc tam tēma.css, līdz šim viss ir bijis ierasts, bet tad jāiekļauj jQuery un mums arī jāiekļauj bootstrap.js šādā veidā šī sistēma dos mums iespēju iekļaut mūsu saskarņu komponentus.
Šos ieslēgumus var veikt, kā redzams kodā no mūsu mašīnas mapes, kurā mēs glabājam projektu, vai arī varam izmantot CDN, kā mēs redzam šādā koda daļā:

Jebkura mūsu izmantotā iespēja ir piemērota, ir svarīgi ievērot bibliotēku iekļaušanas secību, pretējā gadījumā mūsu komponenti nedarbosies tā, kā mēs vēlamies.
Labam interfeisam vienmēr vajadzētu būt noderīgam lietotājam, tam vienmēr būtu jāparāda, kurā virzienā iet un kādiem mērķiem tas darbojas, tādā veidā tas ir intuitīvs un izvairās no lietotāja minējumiem, mēģinot pogas un izvēlnes kaut ko atrast. .
Rīka padomsRīks, kas ļauj mums no tā izvairīties, ir Rīka padoms, kas ir nekas cits kā mazas uznirstošās kastes, kas palīdz mums izskaidrot mūsu lietojumprogrammas sadaļas, tās ir pazīstamas arī kā palīdzības kastes, ideja ir tāda, ka šajās mazajās kastītēs mēs pievienojam nelielas frāzes, kas piešķir nozīmi darbībai, ko mēs varam veikt mūsu saskarnē.
Apskatīsim nelielu kodu, kurā mēs parādīsim, kā izveidot rīka padomu, izmantojot Bootstrap:

 Rīka padoma saglabāšanas piemērs

Mūsu kodā mēs esam iekļāvuši minētās bibliotēkas un pēc tam etiķetē skripts mēs izmantojam pasākumu dokuments.gatavs lai izveidotu mūsu rīka padoms kas attieksies uz visu, kas ir klasē rīks1, šo klases nosaukumu var pielāgot ikviens, kuru vēlamies, un papildus mēs kā opciju pievienojam, ka tam ir izkārtojums labajā pusē, tas ir, mūsu palīdzība tiks parādīta labajā pusē. Tad mēs izveidojam vispārēju ķermeņa stilu, lai mūsu saturs būtu labāk redzams ekrānā demonstrācijas nolūkos.
Beidzot iekšā ķermenis mēs izveidojam elementu pogu, tam ir atribūts ar nosaukumu datu pārslēgšana un mēs norādām, ka tas būs a rīka padoms kur atribūtā titulu mēs ievietojam tekstu, kas jāparāda mūsu palīdzības lodziņā, un, protams, atribūtā klase mums jāiekļauj rīks1 kuru klasi mēs definējām sākumā. Kad viss ir savās vietās, novietojot peli virs mūsu pogas, mēs varam vizualizēt izveidoto rīka padomu, kuram, izpildot mūsu pārlūkprogrammā, vajadzētu izskatīties šādi:

Kā redzam, šis komponents ir diezgan noderīgs, jo tas dod mums iespēju, izmantojot palīdzības lodziņus, izskaidrot lietotājam, kā viņi darbojas vai kādam nolūkam daži elementi tiek izmantoti mūsu saskarnē.
Lietotāja saskarnē ir vēl viena ļoti svarīga sastāvdaļa, un tā ir akordeons, Šī elementa mērķis ir saglabāt tekstu zem mūsu lietojumprogrammas sastāvdaļas, tādējādi iegūstot pirmo iespaidu par mūsu saskarnes kārtību un tīrību, kur lietotājs, noklikšķinot uz tā, tiek parādīts saturs.
Tas ir svarīgi, jo laba kvalitāte, kas nepieciešama labai lietotāja saskarnei, ir tīrība, jo tīrs interfeiss nozīmē, ka lietotājs nejūtas apstulbis, un tāpēc to būs patīkamāk izmantot.
Akordeona uzbūve ir vienkārša, šajā gadījumā mums nav jāveido scenārijs kā tāds, mums vienkārši jāizveido struktūra divs kas ļauj mums norādīt, ka tie ir šāda veida panelis, mūsu akordeona nosaukums būs šāda veida divs paneļu virsraksts un mūsu saturs būs vēl viens šāda veida divs paneļa saturs, kas mums jāatkārto attiecībā uz elementu daudzumu, ko vēlamies parādīt.
Apskatīsim nākamajā piemērā, kur mēs izveidojam divu elementu akordeonu:

 Akordeona piemērs
Pirmais elements
Tas ir mūsu akordeona pirmais elements
Otrais elements
Tas ir mūsu otrā akordeona elementa saturs

Vissvarīgākais, lai akordeons darbotos pēc struktūras, ir identifikatori, ja paskatāmies uz akordeona nosaukumu, mums ir enkurs, un tas piemērā ir norādīts 1. postenis Y elements2 ja katrs no šiem enkuriem atbilst satura identifikatoram, mēs redzam, kā katra satura bloks ir iet šie divi vārdi, kas nozīmē, ka, noklikšķinot uz nosaukumiem, tiek parādīts saturs. Apskatīsim, kā tas izskatās mūsu pārlūkprogrammā, izpildot mūsu piemēru:

PALIELINĀT

Kā redzam, elements1 bez problēmām parāda savu saturu, savukārt elements2 neuzrāda nekādu informāciju, ja, noklikšķinot uz tā, mēs redzam, kā tiek slēpts 1. elementa saturs un tiek parādīts 2. elementa saturs:

PALIELINĀT

Visbeidzot, vēl viens no lieliskajiem lietotāja saskarņu komponentiem ir modālie attēliŠie ir elementi, kas tiek izsaukti, noklikšķinot uz pogas vai enkura, un to funkcionalitāte ir parādīt mums sava veida uznirstošo logu.
Šis logs ir ļoti noderīgs, jo tas ļauj mums parādīt tekstu, kas tā garuma dēļ nav praktisks a rīka padoms, vai varbūt mums ir nepieciešams, lai lietotājs aizpildītu kādu informāciju, un mēs nevēlamies to nosūtīt uz citu lapu. Šāda veida komponenti palīdz mums uzturēt mūsu lietojumprogrammas tīrību, bet arī palīdz mums piespiest lietotāju pievērst uzmanību kaut kam, kas var būt ļoti svarīgs.
Protams, šeit ir jāpiemēro veselā saprāta noteikumi, jo, lai gan modāls var pacelt citu modālu, tas ir sliktas gaumes dēļ un kaitē lietotāja navigācijai, arī tad, ja mums ir jāiekļauj vairāk nekā četri lauki tādā formā lai to izdarītu jaunā lapā, nevis modālā veidā, lai minētu dažus piemērus. Tālāk redzēsim, kā izveidot modālu:

 Modālās diagrammas×
Kad esat pārgājis uz nākamo posmu, visas jūsu darbības būs galīgas.
Es nevaru atsaukt jūsu atbildes

Iziet Turpināt

Šajā gadījumā modāls ir konfigurēts sadaļā dokuments.gatavs lai tiktu parādīts tieši, šāda veida ieviešana tiek plaši izmantota, lai brīdinātu, pirms lietotājs turpina. Tad mūsu modāls sastāv no trim daļām; augšējā daļa (galvene), ķermenis (ķermenis) un kājeni (kājene).
Parasti galvene Ir nosaukums ar izmēru, kas izceļas, lai norādītu modālā iemeslu ķermenis paskaidrojumu vai saturu, piemēram, veidlapu vai ziņojumu, un kājene darbības pogas, piemēram, turpināt vai aizvērt. Tātad, redzēsim, kā izskatās mūsu modālais logs, kad to izpildām pārlūkprogrammā:

Šis komponents ir diezgan vienkārši īstenojams un piešķir mūsu lietojumprogrammai profesionālu stilu, tomēr ir svarīgi zināt, kā izmantot savu loģiku, lai to novietotu vietā, kas nepārtrauc lietojumprogrammas harmoniju.
Ar to mēs noslēdzam šo apmācību, kurā esam efektīvi izstrādājuši trīs lielas sastāvdaļas, kas palīdz mums izveidot lietotāja saskarnes, lai panāktu labāku mūsu lietojumprogrammas darbību organizāciju un izpratni, tādējādi uzlabojot pārlūkošanas pieredzi un tās izmantošanu.