Bootstrapowe interfejsy użytkownika

Interfejsy użytkownika są jedną z najważniejszych części aplikacji, ponieważ to sposób, w jaki użytkownicy będą wchodzić w interakcję z naszymi kreacjami, ale poza tym dobry interfejs sprawia, że ​​wrażenia z naszej aplikacji są pozytywne. że nie można już używać dobrej aplikacji.
Bootstrap Nie daje nam wbudowanych interfejsów, jest to coś, co musimy sami zaprojektować, jednak daje nam komponenty, aby móc je zbudować i chociaż większość jego komponentów jest przeznaczona do projektowania aplikacji internetowych, w rzeczywistości ma inne komponenty do poprawić doświadczenie nazwy użytkownika.
Te komponenty są oparte na JavaScript Tak jQuery, więc będziemy wymagać, aby ta ostatnia biblioteka mogła korzystać z tych elementów, o których wspomnieliśmy, jednak gdy zobaczymy niektóre wyniki, uzasadnimy to włączenie.
Jak wskazaliśmy we wstępie, konieczne jest użycie jQuery Aby wykorzystać te komponenty, pierwszą rzeczą, którą zamierzamy zdefiniować, jest to, jak powinna wyglądać nasza etykieta głowa wszystkich przykładów, które zobaczymy. Zobaczmy jego kod:

Przede wszystkim uwzględniamy bootstrap.css w wersji zminimalizowanej, a następnie motyw.css, do tej pory wszystko było normalne, ale musimy to uwzględnić jQuery i musimy również uwzględnić bootstrap.js w ten sposób ten framework da nam możliwość włączenia komponentów dla naszych interfejsów.
Te inkluzje można wykonać, jak widzimy w kodzie z folderu na naszym komputerze, w którym przechowujemy projekt, lub możemy również użyć CDN, jak widzimy w następującym fragmencie kodu:

Każda z używanych przez nas opcji jest w porządku, ważne jest przestrzeganie kolejności dołączania bibliotek, w przeciwnym razie nasze komponenty nie będą działać tak, jak chcemy.
Dobry interfejs powinien zawsze być pomocny dla użytkownika, powinien zawsze pokazywać mu, w którą stronę iść i do czego służą poszczególne jego komponenty, w ten sposób jest intuicyjny i pozwala uniknąć zgadywania przez użytkownika podczas próbowania przycisków i menu, aby coś znaleźć. .
EtykietkaNarzędziem, które pozwala nam tego uniknąć, jest Etykietka, które są niczym innym jak małymi wyskakującymi okienkami, które pomagają nam wyjaśnić sekcje naszej aplikacji, są również znane jako okienka pomocy, chodzi o to, że w tych małych okienkach dodajemy małe frazy, które nadają sens czynności, którą możemy wykonać w naszym interfejsie.
Zobaczmy mały kod, w którym pokazujemy, jak zbudować podpowiedź za pomocą Bootstrap:

 Przykładowa podpowiedź Zapisz

W naszym kodzie umieściliśmy wspomniane biblioteki, a następnie w etykiecie scenariusz korzystamy z wydarzenia dokument.gotowy stworzyć nasz podpowiedź co będzie miało zastosowanie do wszystkiego, co ma klasa narzędzie1, ta nazwa klasy może być dostosowana przez kogo chcemy, a dodatkowo dodajemy jako opcję, że ma ona układ po prawej stronie, czyli nasza pomoc będzie wyświetlana po prawej stronie. Następnie tworzymy ogólny styl ciała, aby nasze treści były bardziej widoczne na ekranie w celach demonstracyjnych.
Wreszcie w środku ciało tworzymy element przycisk, ma atrybut o nazwie przełącznik danych i wskazujemy, że będzie to a podpowiedź gdzie w atrybucie tytuł umieszczamy tekst, który ma pokazywać nasze okno pomocy i oczywiście w atrybucie klasa musimy uwzględnić narzędzie1 to była klasa, którą zdefiniowaliśmy na początku. Gdy wszystko jest na swoim miejscu, gdy najedziemy myszką na nasz przycisk, możemy zwizualizować utworzoną podpowiedź, która po uruchomieniu w naszej przeglądarce powinna wyglądać tak:

Jak widzimy, ten komponent jest bardzo przydatny, ponieważ daje nam możliwość wyjaśnienia użytkownikowi za pomocą okien pomocy, jak działają lub do czego służą niektóre elementy w naszym interfejsie.
Jest jeszcze jeden bardzo ważny składnik interfejsu użytkownika i jest to akordeon, Celem tego elementu jest możliwość zapisania tekstu pod komponentem naszej aplikacji, dzięki czemu uzyskujemy pierwsze wrażenie zarówno porządku, jak i czystości naszego interfejsu, gdzie użytkownik po kliknięciu w niego wyświetla się treść.
Jest to ważne, ponieważ kolejną cechą, której potrzebuje dobry interfejs użytkownika, jest czystość, ponieważ czysty interfejs oznacza, że ​​użytkownik nie czuje się oszołomiony, a zatem korzystanie z niego będzie przyjemniejsze.
Budowa akordeonu jest prosta, w tym przypadku nie musimy budować skryptu jako takiego, wystarczy stworzyć strukturę div które pozwalają nam wskazać, że są tego typu płyta, tytuł naszego akordeonu będzie divem tego typu nagłówek panelu a nasza zawartość będzie kolejnym divem tego typu zawartość panelu, które musimy powtórzyć dla ilości elementów, które chcemy pokazać.
Zobaczmy w poniższym przykładzie, gdzie tworzymy akordeon dwuelementowy:

 Przykład akordeonu
Pierwszy element
To pierwszy element naszego akordeonu
Drugi element
To jest zawartość naszego drugiego elementu akordeonu

Najważniejszą rzeczą, aby akordeon działał po strukturze, są identyfikatory, jeśli spojrzymy na tytuł akordeonu to mamy kotwicę i jest to skierowane w przykładzie do przedmiot 1 Tak element2 gdzie każda z tych kotwic odpowiada identyfikatorowi treści, to widzimy, jak blok treści każdej z nich ma jako iść te dwa słowa, co oznacza, że ​​po kliknięciu w tytuły wyświetlają się treści. Zobaczmy, jak to wygląda w naszej przeglądarce, gdy uruchomimy nasz przykład:

POWIĘKSZAĆ

Jak widać, element1 pokazuje swoją zawartość bez problemów, podczas gdy element2 nie pokazuje żadnych informacji, jeśli klikniemy na niego, możemy zobaczyć, jak zawartość element1 jest ukryta, a zawartość element2 jest wyświetlana:

POWIĘKSZAĆ

Wreszcie, kolejnym ze świetnych komponentów interfejsów użytkownika są zdjęcia modalneSą to elementy, które są wywoływane po kliknięciu przycisku lub kotwicy, a ich funkcjonalnością jest pokazanie nam swego rodzaju wyskakującego okienka.
Okno to jest bardzo przydatne, ponieważ pozwala nam wyświetlić tekst, który ze względu na swoją długość jest niepraktyczny w a podpowiedź, a może potrzebujemy, aby użytkownik uzupełnił jakieś informacje i nie chcemy ich przesyłać na inną stronę. Ten rodzaj komponentu pomaga nam utrzymać czystość naszej aplikacji, ale także pomaga nam zmusić użytkownika do zwrócenia uwagi na coś, co może być bardzo ważne.
Oczywiście muszą tu obowiązywać zdroworozsądkowe zasady, bo chociaż możliwe jest, że modalny podniesie inny modalny, jest to w złym guście i szkodzi nawigacji użytkownika, również jeśli potrzebujemy uwzględnić więcej niż cztery pola w formularzu, lepiej zrobić to na nowej stronie, a nie w trybie modalnym, żeby wymienić kilka przykładów. Zobaczmy w poniższym kodzie, jak możemy utworzyć modalny:

 Wykresy modalne×
Gdy przejdziesz do następnej fazy, wszystkie twoje działania będą ostateczne.

Nie mogę cofnąć twoich odpowiedzi
Wyjdź Kontynuuj

W tym przypadku mod jest konfigurowany w dokument.gotowy do bezpośredniego wyświetlania, ten typ implementacji jest szeroko stosowany do wysyłania ostrzeżeń, zanim użytkownik przejdzie dalej. Wtedy nasz modalny składa się z trzech części; Górna część (nagłówek), ciało (ciało) i stopkę (stopka).
Zwykle w nagłówek Istnieje tytuł o rozmiarze, który wyróżnia się, aby wskazać przyczynę modalności, w ciało wyjaśnienie lub treść, taką jak formularz lub wiadomość, a w stopka przyciski akcji, takie jak kontynuuj lub zamknij. Zobaczmy więc, jak wygląda nasze okno modalne, gdy wykonujemy je w przeglądarce:

Ten komponent jest dość prosty w implementacji i nadaje naszej aplikacji profesjonalny styl, jednak ważne jest, abyśmy wiedzieli, jak wykorzystać naszą logikę, aby umieścić go w miejscu, które nie zakłóca harmonii aplikacji.
Tym kończymy ten samouczek, w którym skutecznie opracowaliśmy trzy duże komponenty, które pomagają nam tworzyć interfejsy użytkownika, aby osiągnąć lepszą organizację i zrozumienie działań w naszej aplikacji, poprawiając w ten sposób przeglądanie i korzystanie z niej.