Uživatelská rozhraní bootstrap

Uživatelská rozhraní jsou jednou z nejdůležitějších součástí aplikací, protože je to způsob, jakým budou uživatelé interagovat s našimi výtvory, ale kromě toho dobré rozhraní pozitivně ovlivňuje zážitek z naší aplikace. Na druhou stranu pochybné rozhraní znamená že dobrou aplikaci již nelze použít.
Bootstrap Nedává nám vestavěná rozhraní, je to něco, co si musíme sami navrhnout, ale dává nám to komponenty, abychom je mohli stavět, a přestože většina jeho součástí je určena pro návrh webových aplikací, ve skutečnosti má další komponenty zlepšit zážitek z uživatelského jména.
Tyto komponenty jsou založeny na JavaScript Y jQuery, takže budeme vyžadovat, aby tato poslední knihovna mohla využívat tyto prvky, které jsme zmínili, ale jakmile uvidíme některé výsledky, ospravedlníme toto zařazení.
Jak jsme naznačili v úvodu, je nutné použít jQuery Abychom mohli tyto komponenty používat, první věc, kterou definujeme, je, jak by měl náš štítek vypadat hlava ze všech příkladů, které uvidíme. Podívejme se na jeho kód:

Nejprve zahrneme bootstrap.css ve své zmenšené verzi a poté téma.css„Až dosud bylo vše obvyklé, ale pak musíme zahrnout jQuery a musíme také zahrnout bootstrap.js což je způsob, jakým nám tento rámec poskytne příležitost začlenit komponenty pro naše rozhraní.
Tyto inkluze lze provést, jak vidíme v kódu ze složky na našem počítači, kam projekt ukládáme, nebo také můžeme použít CDN, jak vidíme v následujícím kousku kódu:

Každá z možností, které používáme, je v pořádku, důležité je respektovat pořadí, ve kterém knihovny zahrnujeme, jinak naše komponenty nebudou fungovat tak, jak chceme.
Dobré rozhraní by mělo uživateli vždy pomoci, mělo by mu vždy ukázat, kudy se vydat a k čemu slouží jeho různé komponenty, tímto způsobem je intuitivní a vyhýbá se dohadům uživatele při zkoušení tlačítek a nabídek, aby něco našel. .
PopisekNástroj, který nám umožňuje tomu zabránit, je Popisek, což nejsou nic jiného než malá vyskakovací pole, která nám pomáhají vysvětlit části naší aplikace, jsou také známá jako pomocná pole, myšlenka je, že do těchto malých políček přidáme malé fráze, které dávají smysl akci, kterou můžeme provádět v našem rozhraní.
Podívejme se na malý kód, kde předvádíme, jak vytvořit popis pomocí Bootstrap:

 Příklad Popisek Uložit

Do našeho kódu jsme zahrnuli zmíněné knihovny a poté do štítku skript používáme událost document.ready vytvořit naše popisek což se bude týkat všeho, co třída má nástroj 1, tento název třídy může upravit kdokoli, koho chceme, a navíc přidáme jako možnost, že má rozvržení vpravo, to znamená, že naše pomoc se zobrazí na pravé straně. Poté vytvoříme obecný styl pro tělo, aby byl náš obsah pro demonstrační účely viditelnější na obrazovce.
Konečně uvnitř tělo vytváříme prvek knoflík, má atribut s názvem přepínání dat a naznačujeme, že to bude a popisek kde v atributu titul umístíme text, který by měl zobrazovat náš rámeček nápovědy, a samozřejmě do atributu třída musíme zahrnout nástroj 1 což byla třída, kterou jsme definovali na začátku. Jakmile je vše na svém místě, když přejdeme myší nad naše tlačítko, můžeme si zobrazit vytvořený popisek, který by po spuštění v našem prohlížeči měl vypadat takto:

Jak vidíme, tato komponenta je docela užitečná, protože nám dává příležitost vysvětlit uživateli prostřednictvím políček nápovědy, jak fungují nebo k čemu se v našem rozhraní používají některé prvky.
V uživatelském rozhraní je ještě jedna velmi důležitá součást, a tou je akordeon„Účelem tohoto prvku je umět uložit text pod součást naší aplikace, čímž získáme první dojem jak o pořadí, tak o čistotě našeho rozhraní, kde se uživateli po kliknutí na něj zobrazí obsah.
To je důležité, protože další vlastností, kterou dobré uživatelské rozhraní potřebuje, je čistota, protože čisté rozhraní znamená, že se uživatel necítí ohromen, a proto bude jeho používání příjemnější.
Konstrukce akordeonu je jednoduchá, v tomto případě nepotřebujeme vytvářet skript jako takový, stačí vytvořit strukturu divs které nám umožňují naznačit, že jsou tohoto typu panel, název našeho akordeonu bude div typu záhlaví panelu a náš obsah bude další div tohoto typu obsah panelu, které musíme opakovat pro množství prvků, které chceme ukázat.
Podívejme se v následujícím příkladu, kde vytvoříme dvouprvkový akordeon:

 Harmonický příklad
První prvek
Toto je první prvek našeho akordeonu
Druhý prvek
Toto je obsah našeho druhého prvku harmoniky

Nejdůležitější věcí, aby harmonika fungovala po struktuře, jsou identifikátory, pokud se podíváme na název harmoniky, máme kotvu a to je v příkladu zaměřeno na položka 1 Y prvek 2 kde každé z těchto kotev odpovídá identifikátoru obsahu, pak vidíme, jak má blok obsahu každého z nich jako jít tato dvě slova, což znamená, že když klikneme na názvy, zobrazí se obsah. Podívejme se, jak to vypadá v našem prohlížeči, když spustíme náš příklad:

ZVĚTŠIT

Jak vidíme, element1 zobrazuje svůj obsah bez problémů, zatímco element2 nezobrazuje žádné informace, pokud na něj klikneme, vidíme, jak je obsah element1 skrytý a obsah element2 je zobrazen:

ZVĚTŠIT

Nakonec další ze skvělých komponent pro uživatelská rozhraní jsou modální obrázkyJedná se o prvky, které se vyvolávají po kliknutí na tlačítko nebo ukotvení a jejich funkcí je ukázat nám jakési vyskakovací okno.
Toto okno je velmi užitečné, protože nám umožňuje zobrazit text, který vzhledem ke své délce není v souboru a popisek, nebo možná potřebujeme, aby uživatel vyplnil nějaké informace, a nechceme je posílat na jinou stránku. Tento typ součásti nám pomáhá udržovat čistotu naší aplikace, ale také nám pomáhá přinutit uživatele věnovat pozornost něčemu, co může být velmi důležité.
Samozřejmě zde musí platit pravidla zdravého rozumu, protože ačkoliv je možné, aby modál zvýšil jiný modál, je to ve špatném vkusu a poškozuje to navigaci uživatele, i když potřebujeme začlenit více než čtyři pole do formy, je to lepší udělat to na nové stránce a ne modálně, abych zmínil několik příkladů. Podívejme se v následujícím kódu, jak můžeme vytvořit modální:

 Modální grafy×
Jakmile přejdete do další fáze, všechny vaše akce budou konečné.
Vaše odpovědi nemohu vrátit zpět

Ukončit Pokračovat

V tomto případě je modal nakonfigurován v document.ready k přímému zobrazení je tento typ implementace široce používán k poskytování varování před tím, než uživatel pokračuje. Pak se náš modal skládá ze tří částí; horní část (záhlaví), tělo (tělo) a zápatí (zápatí).
Normálně v záhlaví Existuje název s velikostí, která vystihuje důvod modality v souboru tělo vysvětlení nebo obsah, jako je formulář nebo zpráva, a v zápatí akční tlačítka jako pokračování nebo zavření. Podívejme se tedy, jak vypadá naše modální okno, když ho spustíme v prohlížeči:

Tato komponenta je poměrně jednoduchá na implementaci a dodává naší aplikaci profesionální styl, nicméně je důležité, abychom věděli, jak pomocí naší logiky umístit ji na místo, které nepřeruší harmonii aplikace.
Tímto ukončujeme tento tutoriál, kde jsme efektivně vyvinuli tři velké komponenty, které nám pomáhají vytvářet uživatelská rozhraní, abychom dosáhli lepší organizace a porozumění akcí v naší aplikaci, a tím zlepšili zážitek z procházení a jeho používání.