Úvod do komponent Bootstrap
Původně nazvaný jako Twitter Blueprint, byl vyvinut Markem Otto a Jacobem Throntonem na Twitteru. Bootstrap je bezplatný rámec CSS, který propůjčuje webovým stránkám odezvu. Díky citlivosti to znamená, že různé DOM prvky se mění podle toho, jak se mění velikost obrazovky, aniž by byla ohrožena elegance webové stránky, protože jinak by se to tradičně stalo s metodami CSS v pixelech nebo procentech.
Tomu se říká také „CSS framework„ první mobilní “, protože je navržen tak, aby měl mřížku CSS definováním řádků a sloupců. Tento rámec obsahuje také komponenty jazyka JavaScript spolu s třídami CSS. Abyste mohli tento rámec využít, musíte povinně propojit jQuery a JavaScript Framework pro Bootstrap spolu s ostatními soubory Bootstrap CSS. Tyto soubory CSS jsou k dispozici ke stažení i ve formě CDN (Network Delivery Network).
Různé součásti zaváděcího systému:
Bootstrap je dodáván s desítkami komponent, které lze znovu použít, aby poskytovaly dobrý uživatelský dojem a uživatelské interakce na webové stránce, jako jsou navigační lišty, vyskakovací okna, rozevírací seznamy, ikony, tlačítka, předem navržené formuláře a také možnosti změny velikosti pro různé prvky DOM.
1) Glyphicons - Toto jsou ikony ve formátu písma, které jsou k dispozici v Bootstrapu. Jejich počet je asi 200. Tyto glyfikony lze nalézt na adrese https://glyphicons.com.
Jak to použít?
Existují glyfikony, které označují téměř všechny akce, jako je přiblížení, úpravy, varování, soubor, odstranění atd. A jsou definovány v jednotlivé třídě. Musíte tedy použít základní třídu a individuální třídu, nejlépe v rozpětí a použít tyto glyfikony.
Syntax:
2) Rozevírací seznamy - Toto jsou seznamy s přepínáním a seznamem odkazů. Ty jsou dynamičtější pluginem JS a najdete je na http: // getbootstrap / javascript / # dropdowns
Jak to použít?
Musíte použít třídu .dropdown, protože třída prvku obsahuje položky seznamu pod touto třídou .dropdown-menu.
Syntax:
3) Skupiny tlačítek - S touto komponentou Bootstrap můžete seskupit sadu tlačítek do řady vedle sebe.
Jak to použít?
Definujte prvky dělení pomocí třídy .btn-group a vnořte tyto prvky tlačítkem s třídou .btn. Opravit
Špatně
4) Rozbalovací tlačítka - Tato komponenta se používá k použití prvku tlačítka ke spuštění rozbalovacího seznamu.
Syntax:
5) Skupiny vstupů - Rozšiřuje třídu ovládání formulářů a přidává text nebo tlačítka na obou stranách vstupního pole vstupního prvku. Abyste mohli používat tyto vstupní skupiny, musíte použít třídu .input-group s třídou .input-group-addon.
Syntax:
@
6) Navbar - Tyto komponenty slouží jako navigační hlavičky pro váš web. Sbalí se, aby se vertikálně rozšířily pomocí přepínajícího se hamburgerového menu v zařízeních menších velikostí obrazovky a při zvětšování šířky obrazovky se staly vodorovnými.
Syntax:
7) Jumbotron - Jedná se o bootstrapovou komponentu, která se může rozšířit po celé obrazovce (nebo výřezu) a zobrazit tak určitý obsah klíče.
Syntax:
8) Upozornění - Jedná se o komponentu Bootstrap s pluginem jQuery, který poskytuje kontextové zpětné zprávy v závislosti na akci uživatele. V zásadě se používá k zobrazení výstražných zpráv.
Syntaxe: …
9) Indikátory průběhu - Tato složka se používá k poskytování vizuálních údajů o průběhu práce nebo akce pomocí ukazatele průběhu.
Synatx:
Příklad:
10) Odznaky - Jedná se o komponentu, která zvýrazňuje něco jako nepřečtené položky přidáním třídy .badge do prvku DOM, nejlépe rozpětí.
Syntax:
Zprávy 3
11) Paginace - Tato komponenta dává vašemu webu vícestránkové stránkování, aby obsah mohl
být rozdělen na více stránek a snadno se pohybovat. Element DOM pro neuspořádané seznamy je obvykle definován pomocí této třídy .pagination.
Syntax:
Jak to pomůže ve vaší kariéře?
Všechny firmy se nyní zaměřují na uživatelské interakce a uživatelské zkušenosti (UI / UX). Protože drtivá většina populace používá ruční zařízení, jako jsou tablety a smartphony, které se značně liší, pokud jde o rozlišení pixelů a velikost obrazovky. To je důvod, proč je opravdu důležité mít front-end design, který je dostatečně citlivý na to, aby se přizpůsobil libovolnému druhu obrazovky, aniž by to ohrozilo eleganci webové stránky.
To znamená, že být zkušený v Bootstrapu by pro vás znamenal přidanou hodnotu v technické kariéře a společnosti by se těšily, že vás najmou hezkou výplatou. A protože je to bezplatný a open-source, existuje spousta možností, jak přispívat jako vývojář a dělat to ještě lépe, než jaké je dnes.
Závěr-
Bootstrap framework je velmi užitečný nástroj, který umožňuje reagovat na webové stránky. Komponenty vysvětlené v tomto blogu jsou některé z velmi často používaných, které vám pomohou psát méně kódu pro větší funkčnost a dodávají více elegance webové stránce, kterou stavíte.
Doporučené články
Toto byl průvodce komponenty Bootstrap. Tady také diskutujeme úvod a různé komponenty bootstrapu spolu s jeho syntaxí. Další informace naleznete také v dalších navrhovaných článcích -
- Jak nainstalovat Bootstrap
- Úhlové vs Bootstrap
- Tréninkový kurz Bootstrap
- Rozhovor s Bootstrap rozhovory
- Jak používat Bootstrap Layout?
- Top 5 typů Boostrap se ukázkovým kódem