Потребителски интерфейси на Bootstrap

Потребителските интерфейси са една от най -важните части на приложенията, тъй като това е начинът, по който потребителите ще взаимодействат с нашите творения, но освен това, добрият интерфейс прави опита с нашето приложение положителен. От друга страна, съмнителен интерфейс означава че добро приложение вече не може да се използва.
Bootstrap Той не ни дава изградени интерфейси, това е нещо, което трябва да проектираме сами, но ни дава компонентите, за да можем да ги изградим и въпреки че повечето от неговите компоненти са предназначени за проектиране на уеб приложения, той всъщност има и други компоненти подобрете опита на потребителското име.
Тези компоненти се основават на JavaScript Y jQuery, така че ще изискваме тази последна библиотека да може да използва тези елементи, които споменахме, но след като видим някои от резултатите, ще оправдаем това включване.
Както посочихме във въведението, е необходимо да се използва jQuery За да използваме тези компоненти, ето защо първото нещо, което ще определим, е как трябва да бъде нашият етикет глава от всички примери, които ще видим. Нека да видим кода му:

На първо място включваме bootstrap.css в неговата минифицирана версия и след това theme.css, досега всичко беше обичайното, но тогава трябва да включим jQuery и ние също трябва да включим bootstrap.js което е начинът, по който тази рамка ще ни даде възможност да включим компонентите за нашите интерфейси.
Тези включвания могат да бъдат направени, както виждаме в кода от папка на нашата машина, където съхраняваме проекта, или можем да използваме и CDN, както виждаме в следния код:

Всяка от опциите, които използваме, е добра, важното е да спазваме реда, в който включваме библиотеките, в противен случай нашите компоненти няма да работят така, както искаме.
Добрият интерфейс винаги трябва да е в помощ на потребителя, винаги трябва да му показва кой път да отиде и за какво работят различните му компоненти, по този начин той е интуитивен и избягва предположенията на потребителя, когато опитва бутони и менюта, за да намери нещо. .
ПодсказкаИнструмент, който ни позволява да избегнем това, е Подсказка, които не са нищо повече от малки изскачащи кутии, които ни помагат да обясним раздели на нашето приложение, те са известни и като помощни кутии, идеята е, че в тези малки кутии добавяме малки фрази, които придават смисъл на действието, което можем да извършим в нашия интерфейс.
Нека да видим малък код, където демонстрираме как да изградим подсказка с помощта на Bootstrap:

 Пример за подсказка Запазване

В нашия код сме включили споменатите библиотеки и след това в етикета скрипт използваме събитието документ.готов да създадем нашите подсказка което ще се прилага за всичко, което има класа инструмент1, това име на клас може да бъде персонализирано от всеки, който искаме, и допълнително добавяме като опция, че има оформление вдясно, тоест нашата помощ ще се показва от дясната страна. След това създаваме общ стил за тялото, така че съдържанието ни да е по -видимо на екрана за демонстрационни цели.
Най -накрая вътре в тяло създаваме елемент бутон, има атрибут, наречен превключване на данни и ние посочваме, че ще бъде a подсказка където в атрибута заглавие поставяме текста, който трябва да показва полето ни за помощ, и разбира се в атрибута клас трябва да включим инструмент1 който беше класът, който определихме в началото. След като всичко е на мястото си, когато прекараме мишката върху нашия бутон, можем да визуализираме създадената подсказка, която при изпълнение в нашия браузър трябва да изглежда така:

Както виждаме, този компонент е доста полезен, тъй като ни дава възможност да обясним на потребителя чрез полетата за помощ как работят или за какво се използват някои елементи в нашия интерфейс.
Има още един много важен компонент на потребителския интерфейс и той е акордеон, Целта на този елемент е да може да запише текста под компонент на нашето приложение, с което получаваме първо впечатление както за реда, така и за чистотата на нашия интерфейс, където потребителят, когато кликне върху него, се показва съдържанието.
Това е важно, защото друго качество, от което се нуждае добрият потребителски интерфейс, е чистотата, тъй като чистият интерфейс означава, че потребителят не се чувства зашеметен и затова ще бъде по -приятно да го използвате.
Конституцията на акордеона е проста, в този случай не е нужно да изграждаме скрипт като такъв, просто трябва да направим структура от див които ни позволяват да посочим, че са от този тип панел, заглавието на нашия акордеон ще бъде div от типа заглавие на панела и нашето съдържание ще бъде друг div от този тип панелно съдържание, което трябва да повторим за количеството елементи, които искаме да покажем.
Нека да видим в следния пример къде създаваме двуелементен акордеон:

 Пример за акордеон
Първи елемент
Това е първият елемент от нашия акордеон
Втори елемент
Това е съдържанието на втория ни елемент от акордеона

Най -важното нещо, за да накараме акордеона да работи след структурата, са идентификаторите, ако погледнем заглавието на акордеона, имаме котва и това е насочено в примера към т.1 Y елемент2 където всяка от тези котви съответства на идентификатора на съдържанието, тогава виждаме как блокът със съдържание на всяка от тях има като отивам тези две думи, което означава, че когато щракнем върху заглавията, се показва съдържанието. Нека да видим как изглежда в нашия браузър, когато изпълним нашия пример:

Увеличете

Както виждаме, element1 показва съдържанието си без проблеми, докато element2 не показва никаква информация, ако щракнем върху него, можем да видим как съдържанието на element1 е скрито и съдържанието на element2 се показва:

Увеличете

И накрая, друг от големите компоненти за потребителските интерфейси са модални снимкиТова са елементи, които се извикват при щракване върху бутон или котва и тяхната функционалност е да ни покаже един вид изскачащ прозорец.
Този прозорец е много полезен, защото ни позволява да показваме текст, който поради дължината си не е практичен в a подсказка, или може би се нуждаем от потребителя да попълни някаква информация и не искаме да я изпращаме на друга страница. Този тип компонент ни помага да поддържаме чистотата на нашето приложение, но също така ни помага да принудим потребителя да обърне внимание на нещо, което може да бъде много важно.
Разбира се, тук трябва да се прилагат правилата на здравия разум, тъй като въпреки че е възможно модалът да повдигне друг модал, това е в лош вкус и уврежда навигацията на потребителя, също така, ако трябва да включим повече от четири полета във форма, е по -добре да го направите в нова страница, а не в модален да споменете няколко примера. Нека да видим в следния код как можем да създадем модал:

 Модални диаграми×
След като преминете към следващата фаза, всички ваши действия ще бъдат окончателни.

Не мога да отменя отговорите ви
Изход Продължи

В този случай модалът е конфигуриран в документ.готов за да се показва директно, този тип изпълнение се използва широко за предупреждения, преди потребителят да продължи. Тогава нашият модал се състои от три части; Горна част (заглавка), тяло (тяло) и долен колонтитул (долен колонтитул).
Обикновено в заглавка Има заглавие с размер, който се откроява, за да посочи причината за модала, в тяло обяснението или съдържанието, като формуляр или съобщение, и в долен колонтитул бутони за действие като продължаване или затваряне. Така че нека да видим как изглежда нашият модален прозорец, когато го изпълним в браузъра:

Този компонент е доста лесен за изпълнение и придава на нашето приложение професионален стил, но е важно да знаем как да използваме нашата логика, за да го поставим на място, което не нарушава хармонията на приложението.
С това приключваме този урок, където ефективно разработихме три големи компонента, които ни помагат да създаваме потребителски интерфейси, за да постигнем по -добра организация и разбиране на действията в нашето приложение, като по този начин подобряваме сърфирането и използването му.