Použití komponent Bootstrap

Bootstrap Má dvě skvělé pevné základny, které nám dávají standardní výchozí bod pro různá řešení webového designu, která potřebujeme nebo chceme dělat, to jsou Grid a základní CSS, pomocí těchto dvou nástrojů můžeme vybudovat velkou centrální základnu, kde můžeme umístěte jej tak, aby odpočíval se všemi různými prvky, které tvoří naše rozhraní.
Jako všechny základny, ani tyto samy o sobě nedělají zbytek konstrukce, k dosažení většího stupně propracovanosti a detailů je nutné použít další komponenty, které jsou umístěny na naší základně a jejich síla bude samozřejmě ovlivněna solidností. posledně jmenovaného.
V případě Bootstrap Máme několik komponent, které nám pomáhají maximalizovat detaily našich návrhů, komponenty od ikon, panelů až po záhlaví. Prvky, které nám pomáhají odlišit a zvýraznit naši aplikaci od ostatních.
Komponenty v Bootstrap Lze je použít na našich stránkách nezávisle na ostatních, to znamená, že v jednom dokumentu můžeme vygenerovat tolik komponent, kolik potřebujeme, aniž by byly v konfliktu s ostatními.
Základní styl je ve výchozím nastavení již předem definován, takže můžeme naši aplikaci stavět rychle a bez velkého úsilí, kde nakonec můžeme celou naši aplikaci přizpůsobit změnou základního stylu pro naše vlastní styly.
Komponenty mohou být z CSS, JavaScript nebo obojí, takže někteří kromě Základní CSS budou vyžadovat knihovny třetích stran, jako je jQueryTo se může zdát poněkud nepohodlné, ale realita je taková, že implementace je tak jednoduchá, že si ani neuvědomíme, že používáme více věcí, než jaké jsou ve výchozím nastavení Bootstrap.
Jednou z prvních součástí, které musíme porozumět, jsou ikony, protože s těmito malými částmi obrázku můžeme uživatele přimět porozumět funkcím jakékoli části našeho designu, tedy když vidíme ikonu velkého X víme, že souvisí s uzavřením aktuální sekce nebo v případě, že vidíme ikonu ve tvaru + budeme vědět, že to je něco přidat.
Glyphiconsv Bootstrap existuje knihovna ikon Glyphicons„Velmi populární ve webovém designu, který nám nabízí prakticky ikonu pro každou akci, kterou můžeme na webové stránce provést, což nám přináší spoustu práce, protože nemusíme přemýšlet o hledání někoho, kdo by navrhoval grafické kousky, které slouží tyto účely.
Na následujícím obrázku můžeme vidět ikony, které máme přímo na webu Bootstrap:

ZVĚTŠIT

Toto je jen malá ukázka ikon, které máme k dispozici, ale když procházíme oficiální stránku, uvidíme všechny možnosti, které máme pro naše použití.
Použití těchto ikon je velmi jednoduché, stačí přidat třídu glyphicon k živlu HTML a poté přidejte třídu odpovídající ikony z dostupného seznamu. Ikony se obvykle přidávají k položkám jako nebo protože tímto způsobem zajistíme, aby byly pouze vizuální, čímž získáme nejlepší možný výsledek. Podívejme se tedy v následujícím kódu na příklad použití této komponenty v HTML.

 Použití Glyphicons v Bootstrapu
Zaplaťte
Pošta
Uživatelé
Odpadkový koš
Odhlásit se

V tomto kódu jsme jednoduše umístili inkluze z našich knihoven Bootstrap odpovídající, doplňující jQuery jako knihovnu jiného výrobce a poté knihovnu přidejte js z Bootstrap, je důležité zachovat toto pořadí, protože knihovna js Bootstrap potřeba jQuery a pokud je zahrnut, pak nám to způsobí chybu v implementaci.
Pak jsme v rámci našich vytvořili několik sekcí, kde jsme přidali GlyphiconsPro naše účely postačilo umístění ikon na štítek. Pokud spustíme v našem prohlížeči, získáme následující výsledek:

Jak vidíme, ikony doprovázejí zprávy, což jim dává větší váhu a porozumění, například ve vyhledávacím poli, pokud někdo nemluví anglicky, nerozumí zprávě VyhledáváníPokud ale používáte počítačové systémy a hned vidíte ikonu lupy, víte, že se týká vyhledávání, to je skutečná síla této komponenty.
Další důležitou součástí jsou navigační karty, které nám umožňují organizovat náš obsah na stejné stránce, čímž se vyhneme spoustě místa a uživatelům tak usnadníme život tím, že se v naší webové aplikaci nemusí učit velké množství sekcí.
K používání těchto karet potřebujeme pomoc třídy nav, to, co dělá, je odebrat výchozí styl HTML prvků a jeho synové , čímž usnadňujeme používání a jeho následné přizpůsobení našemu designu. Abychom to mohli použít, musíme jednoduše přidat třídy nav Y navigační karty k prvku a tím získáme příslušný výsledek.
Podívejme se na následující kód, kde implementujeme toto řešení, stejně jako předchozí příklad musíme zahrnout soubory bootstrap.css, bootstrap-theme.css, bootstrap.js Y jquery.js, podívejme se na náš kód:

 Použití Glyphicons v Bootstrapu

Bezpečnostní
Evidence
Obsah

Jak jsme si všimli použití prvku s touto třídou nám umožňuje vytvořit strukturu HTML normální, ale výsledek, jak uvidíme níže, nám dává další způsob, jak uspořádat informace. Můžeme zdůraznit další zajímavý aspekt našeho kódu, a to je kombinace Glyphicons tímto řešením demonstrujeme, co vysvětlujeme o nezávislosti prvků.

ZVĚTŠIT

Další velmi užitečnou součástí jsou rozbalovací nabídky, které nám umožňují zhušťovat mnoho možností do malého prostoru, zejména pro webové stránky, které mají mnoho kategorií, které potřebují uspořádat.
Rozevírací seznamSložka Bootstrap tomu se říká, kdo to řeší Rozevírací seznam a stejně jako předchozí komponenta je použita v prvku jeho konstrukce je však o něco složitější, i když nepřesahuje pracovní styl HTML.
Nejprve musíme mít prvek, který je záhlavím rozevíracího seznamu, pak musíme mít který bude obsahovat možnosti, které se mají zobrazit. Za tímto účelem přeformulujeme předchozí příklad a přidáme rozevírací seznam na kartě obsahu, čímž lépe porozumíme našemu příkladu.
Abychom to trochu shrnuli, ukážeme pouze obsah, protože záhlaví bude stejné. Podívejme se tedy na kód pro naši funkci rozevírací nabídky:

Bezpečnostní
Evidence
Obsah

Videa
snímky
Zvuk

Potom vidíme, jak v prvku zahájili jsme rozevírací seznam se třídou rozevírací seznam, pak v rámci toho definujeme prvek jako možnost spouštění při přidávání třídy rozevírací-přepínací a nakonec jsme vytvořili a co má třída rozevírací nabídka identifikovat, že má všechny možnosti, které uvidíme. Pokud spustíme náš příklad v prohlížeči, dostaneme následující výsledek:

ZVĚTŠIT

Samozřejmě je to jen malá část toho, čeho můžeme dosáhnout, protože je možné zahrnout více efektů as různými styly změnit jejich vizuální podobu. Tímto dokončujeme tento tutoriál, kde jsme viděli tři nejužitečnější komponenty, ve kterých můžeme použít Bootstrap, čímž dosáhneme mnohem většího přizpůsobení naší aplikace.