Боотстрап кориснички интерфејси

Кориснички интерфејси су један од најважнијих делова апликација, јер је то начин на који ће корисници комуницирати са нашим креацијама, али осим тога, добар интерфејс чини искуство са нашом апликацијом позитивним. С друге стране, сумњиво сучеље значи да се добра апликација више не може користити.
Боотстрап Не даје нам изграђена интерфејса, то је нешто што морамо сами конструисати, међутим даје нам компоненте да бисмо их могли изградити и иако је већина његових компоненти намењена дизајну веб апликација, она заправо има и друге компоненте побољшати корисничко име.
Ове компоненте су засноване на ЈаваСцрипт И јКуери, па ћемо од ове последње библиотеке захтевати да може да користи ове елементе које смо споменули, међутим када видимо неке од резултата оправдаћемо ово укључивање.
Као што смо навели у уводу, потребно је користити јКуери Да бисмо користили ове компоненте, зато ћемо прво дефинисати како би требало да изгледа наша ознака глава од свих примера које ћемо видети. Погледајмо његов код:

Пре свега, укључујемо боотстрап.цсс у својој скраћеној верзији, а затим тхеме.цсс, до сада је све било уобичајено, али онда морамо укључити јКуери а морамо и укључити боотстрап.јс што је начин на који ће нам овај оквир дати прилику да уградимо компоненте за наше интерфејсе.
Ове инклузије се могу урадити као што видимо у коду из фасцикле на нашој машини у којој складиштимо пројекат, или можемо користити и ЦДН, као што видимо у следећем делу кода:

Било која од опција коју користимо је у реду, важно је поштовати редослед којим укључујемо библиотеке, у супротном наше компоненте неће радити онако како желимо.
Добро сучеље би увијек требало бити од помоћи кориснику, увијек би му требало показати којим смјером кренути и за шта његове различите компоненте раде, на тај начин је интуитивно и избјегава нагађања корисника приликом покушаја типки и изборника да нешто пронађе. .
ТоолтипАлат који нам омогућава да то избегнемо је Тоолтип, које нису ништа друго до мале искачуће кутије које нам помажу да објаснимо одељке наше апликације, познате су и као кутије за помоћ, идеја је да у ове мале оквире додамо мале фразе које дају смисао радњи коју можемо извршити у нашем интерфејсу.
Хајде да видимо мали код где ћемо показати како да направимо опис помоћу Боотстрап:

 Пример савета Саве

У наш код смо укључили поменуте библиотеке, а затим и ознаку скрипта користимо догађај документ.већ да стварамо наше тоолтип што ће се применити на све што час има тоол1, овај назив класе може прилагодити свако ко жели, а додатно додајемо као опцију да има распоред с десне стране, односно да ће се наша помоћ приказати с десне стране. Затим стварамо општи стил за тело тако да је наш садржај видљивији на екрану у сврху демонстрације.
Коначно унутар тело стварамо елемент дугме, има атрибут тзв дата-тоггле а ми указујемо да ће то бити а тоолтип где у атрибуту наслов постављамо текст који би требало да прикаже наш оквир за помоћ, и наравно у атрибут класа морамо укључити тоол1 што је класа коју смо дефинисали на почетку. Када све поставите на своје место, када пређемо мишем преко нашег дугмета, можемо да визуализујемо креирани опис који би, када се изврши у нашем прегледачу, требало да изгледа овако:

Као што видимо, ова компонента је прилично корисна јер нам даје прилику да објаснимо кориснику кроз оквире за помоћ како они раде или за шта се неки елементи користе у нашем интерфејсу.
Постоји још једна веома важна компонента корисничког интерфејса, а то је хармоника, Сврха овог елемента је да може сачувати текст под компонентом наше апликације, чиме стичемо први утисак о редоследу и чистоћи нашег интерфејса, где се корисник када кликне на њега прикаже садржај.
Ово је важно јер је још један квалитет који је потребан добром корисничком интерфејсу чистоћа, јер чист интерфејс значи да се корисник не осећа запрепашћено, па ће га стога бити пријатније користити.
Конструкција хармонике је једноставна, у овом случају не морамо да правимо скрипту као такву, само морамо да направимо структуру дивс који нам омогућавају да укажемо да су тог типа панел, наслов наше хармонике биће див тог типа панел-хеадинг а наш садржај ће бити још један див тог типа панел-садржај, што морамо поновити за количину елемената које желимо приказати.
Погледајмо у следећем примеру где стварамо хармонику са два елемента:

 Пример хармонике
Први елемент
Ово је први елемент наше хармонике
Други елемент
Ово је садржај нашег другог елемента хармонике

Најважнија ствар да би хармоника радила након структуре су идентификатори, ако погледамо наслов хармонике, имамо сидро, а то је у примеру усмерено на итем1 И елемент2 где свако од ових сидра одговара идентификатору садржаја, тада видимо како садржајни блок сваког од њих има иди ове две речи, што значи да када кликнемо на наслове приказује се садржај. Хајде да видимо како то изгледа у нашем прегледачу када покренемо наш пример:

ЕНЛАРГЕ

Као што видимо, елемент1 приказује свој садржај без проблема, док елемент2 не приказује никакве информације, ако кликнемо на њега, можемо видети како је садржај елемента1 скривен, а садржај елемента2 приказан:

ЕНЛАРГЕ

Коначно, још једна од сјајних компоненти корисничког интерфејса су модалне сликеТо су елементи који се позивају при клику на дугме или сидро и њихова функционалност је да нам прикаже неку врсту искачућег прозора.
Овај прозор је веома користан јер нам омогућава да прикажемо текст који због своје дужине није практичан у а тоолтип, или нам је можда потребан корисник да попуни неке податке и не желимо да их пошаљемо на другу страницу. Ова врста компоненти помаже нам у одржавању чистоће наше апликације, али нам помаже и да приморамо корисника да обрати пажњу на нешто што може бити јако важно.
Наравно, овде се морају применити правила здравог разума, јер иако је могуће да модал подигне још један модалитет, то је лошег укуса и наноси штету корисничкој навигацији, такође ако морамо да уградимо више од четири поља у форму, боље је да то учините на новој страници, а не у модалитету да наведете неколико примера. Погледајмо у следећем коду како можемо да направимо модал:

 Модални графикони×
Када пређете на следећу фазу, све ваше радње ће бити коначне.
Не могу поништити ваше одговоре

Изађи Настави

У овом случају модал је конфигурисан у документ.већ да се прикаже директно, ова врста имплементације се широко користи за давање упозорења пре него што корисник настави. Тада се наш модал састоји од три дела; Горњи део (заглавље), тело (тело) и подножје (подножје).
Обично у заглавље Постоји наслов величине која се истиче како би указала на разлог модалитета, у тело објашњење или садржај, попут обрасца или поруке, и у подножје дугмад за радње попут настављања или затварања. Па да видимо како изгледа наш модални прозор када га извршимо у прегледачу:

Ова компонента је прилично једноставна за имплементацију и даје нашој апликацији професионални стил, међутим важно је да знамо како користити своју логику да је поставимо на место које не нарушава хармонију апликације.
Овим закључујемо овај водич, где смо ефикасно развили три велике компоненте које нам помажу у стварању корисничких интерфејса за постизање боље организације и разумевања радњи у нашој апликацији, побољшавајући тако искуство прегледавања и његову употребу.