Práce s webovými stránkami vyžaduje mnohem více než jen znalost jazyků, které musíme používat. Existuje řada milníků, které musíme splnit, abychom vyvinuli produkt s výjimečným výsledkem. Jedním z těchto milníků je design a uspořádání prvků, které se zobrazí na obrazovce.
Představme si, že musíme navrhnout webovou stránku, pokud začínáme od nuly, musíme vzít v úvahu, jak by měla vypadat nabídka, tabulky, tlačítka, věci tak jednoduché jako ikony, které umístíme na některá akční tlačítka atd.
Jak vidíme, je to tvrdá práce, zvláště pokud chceme, aby vypadala optimálně a měla přitažlivost, musíme být také podrobní, abychom webu dodali osobní nádech. Co když nejsme designéři? To je velká otázka, existují vývojáři, kteří zavírají oči, pokud jde o dobrý vkus a design, a tyto typy profilů mají zakázáno vytvářet kvalitní webová vystoupení. Nebo co když máme dobrý vkus, ale málo času na design?
K vyřešení těchto dvou velkých požadavků máme Bootstrap což není nic jiného než a CSS framework to nám umožňuje získat základní aspekt naší stránky najednou, aniž bychom museli trpět designem, ale kromě toho nám to také pomáhá se základními efekty a velmi zvláštním způsobem strukturování obsahu, který budeme prezentovat.
Výhody bootstrapuTo už víme Bootstrap to je CSS framework a to nám pomáhá stanovit základní aspekty našich webových stránek, ale kromě toho má určité výhody, pokud jde o použití, níže uvidíme některé pozitivní věci, které nám přináší Bootstrap:
1. Opakované použitíS Bootstrap Ve výchozím nastavení máme vyrobeno mnoho komponent, abychom je mohli používat bez úprav v různých částech našich webových stránek, čímž se snižuje čas a množství kódu, který používáme. To také podporuje modulární vývoj našich aplikací.
2. KonzistenceDíky tomu, že máme mnoho komponent vyrobených generickým způsobem, je kód konzistentní, to znamená, že zpracovává velmi podobné struktury, takže při jeho čtení nebo údržbě aplikace již budeme vědět, jak funguje mnohem jednodušeji.
3. Flexibilní designMobilní design je velmi důležitý a Bootstrap bere to v úvahu od začátku, máme flexibilitu, že se naše stránky automaticky přizpůsobí různým rozlišením a rozložení obrazovky, což nám ušetří spoustu práce od nutnosti navrhovat mobilní zobrazení úplně od začátku.
4. KomunitaDalším aspektem, který je třeba vzít v úvahu, je dokumentace, když používáme rámec třetí strany, je velmi důležité, kam se obrátit, když máme pochybnosti a v tomto smyslu Bootstrap Nemá to srovnání, protože na naše pochybnosti můžeme dostat téměř jakoukoli odpověď bez velkého úsilí.
Nevýhody BootstrapuPřestože je téměř vše dobré, musíme si také promluvit o nevýhodách nebo ne tak dobrých aspektech, se kterými se při používání setkáváme CSS frameworkPodívejme se na některé jeho slabiny níže.
1. Malý originálPokud nebudeme mít trochu času na to, abychom vytvořili náš design, můžeme zůstat stejně originální, pokud ho použijeme Bootstrap bez dalšího, i když je tento rámec k tomu určen, vzhledem k velkému přijetí, které má, musíme pracovat trochu víc, abychom nevypadali jako kopie kopie.
2. Křivka učeníJako všechno musíme projít křivkou učení, pokud z ní chceme vytěžit maximum, problém je v tom, že pokud chceme přejít od základního aspektu k pokročilému, je šok trochu silný.
3. Špatná kompatibilita mezi verzemiKdyž dojde ke změně verze, předchozí verze ztratí velkou platnost a pokud ji chceme aktualizovat, bude nás to stát, zvláště pokud jsme provedli důležité změny, aby náš web vypadal jinak.
InstalaceJakmile víme, co to je Bootstrap, a výhody a nevýhody používání v našich projektech, musíme se dostat k praktické části tutoriálu, nyní se naučíme, odkud můžeme tento rámec získat a jak jej můžeme zahrnout do našeho projektu.
Získání bootstrapuPrvní věc, kterou musíme udělat, je získat potřebné soubory k zahrnutí Bootstrap v našem projektu proto musíme navštívit jejich web getbootstrap.com a stáhnout si potřebné soubory, případně použít CDN abychom se vyhnuli hostování souborů na našem serveru a omezili využití naší šířky pásma.
Ať už je možnost jakákoli, musíme být na stránce podobné následující, pokud při návštěvě stránky rámce klikneme na tlačítko počátečního stažení:
ZVĚTŠIT
Abychom usnadnili práci, předpokládejme, že jsme projekt stáhli, přichází v komprimovaném souboru, který musíme extrahovat na místo, které můžeme použít a které by mělo být něco podobného následujícímu:
Jak vidíme, v našem projektu musí existovat tři složky, jedna pro CSS, další pro použité zdroje a nakonec jeden pro JS nutné. S tímto již máme k dispozici Bootstrap, což není nic jiného než zkopírování projektu do naší složky zdrojů.
Začněte s BootstrapProtože máme všechny zdroje, které máme k dispozici, musíme je zahrnout do našeho návrhu, proto můžeme vytvořit soubor HTML a tam provést nezbytná začlenění, můžeme to vidět podrobněji v následujícím kódu:
Instalace BootstrapuJak vidíme, jediné, co jsme udělali, bylo zahrnout tři soubory, konkrétně dva .css a a .jsTo je to, co potřebujeme, abychom mohli začít používat celou strukturu, pokud nyní otevřeme náš soubor v prohlížeči, uvidíme, jak se písmo písmen liší od toho, co bychom normálně viděli u štítku H1:
Mřížka BootstrapAbychom dosáhli organizace našich návrhů, Bootstrap použijte mřížku nebo mřížkaSkládá se z 12 sloupců, takže vše, co vidíme na naší obrazovce, musí být organizováno tímto způsobem. Tím je dosaženo toho, že stránka může být strukturována tak, abychom mohli využívat nástroje, které jsou nám nabízeny. velmi transparentním způsobem.
Samozřejmě je to adaptační proces, ale důležité je, že můžeme vytvářet sloupce, které seskupují několik, stejně jako když pracujeme s tabulkami HTML že pomocí vlastnosti span můžeme vytvořit sloupce s několika spoji. K vytvoření webu, který používá tuto strukturu, musíme mít pouze následující:
Div se třídou kontejner, uvnitř toho div se třídou řádek, a nakonec uvnitř jednoho nebo více divů se třídou zelí, podívejme se v následujícím kódu na příklad stránky se 3 sloupci, pro tento každý sloupec musí skupina 4 přidat celkem 12, což je to, co jsme vysvětlili, je výchozí hodnota Bootstrap.
Sloupce v BootstrapuVýsledkem je stránka, kde jsou tři vnitřní divy v jednom řádku rozděleny do tří stejných sloupců, jak můžeme vidět na následujícím obrázku:Příklad použití sloupců v bootstrapu
Lorem ipsum dolor sit amet, consectetur adipiscing elite. Více a více od srpna. Aliquam mi usnadňuje lorem pharetra, ut volutpat magna laoreet. Fusce sed mi ut turpis bibendum dictum. Lorem ipsum dolor sit amet, consectetur adipiscing elite. Vestibulum eu sapien sit amet mauris aliquet elementum. Celočíselný alikvotní metus eget orci egestas varius. Fusce suscipit id ex iaculis vulputate. Nullam rhoncus eu nibh vel dignissim. Ut euismod purus vitae elit feugiat imperdiet. Vivamus sed pharetra massa. Nam jen ex, žádost o efektivitu, posaďte se sedět purus. Cras id semper felis. Buďte ac hendrerit purus. Vestibulum congue dui vel maximus convallis. Celé číslo eu eleifend mauris.Lorem ipsum dolor sit amet, consectetur adipiscing elite. Více a více od srpna. Aliquam mi usnadňuje lorem pharetra, ut volutpat magna laoreet. Fusce sed mi ut turpis bibendum dictum. Lorem ipsum dolor sit amet, consectetur adipiscing elite. Vestibulum eu sapien sit amet mauris aliquet elementum. Celočíselný alikvotní metus eget orci egestas varius. Fusce suscipit id ex iaculis vulputate. Nullam rhoncus eu nibh vel dignissim. Ut euismod purus vitae elit feugiat imperdiet. Vivamus sed pharetra massa. Nam jen ex, žádost o efektivitu, posaďte se sedět purus. Cras id semper felis. Buďte ac hendrerit purus. Vestibulum congue dui vel maximus convallis. Celé číslo eu eleifend mauris.Lorem ipsum dolor sit amet, consectetur adipiscing elite. Více a více od srpna. Aliquam mi usnadňuje lorem pharetra, ut volutpat magna laoreet. Fusce sed mi ut turpis bibendum dictum. Lorem ipsum dolor sit amet, consectetur adipiscing elite. Vestibulum eu sapien sit amet mauris aliquet elementum. Celočíselný alikvotní metus eget orci egestas varius. Fusce suscipit id ex iaculis vulputate. Nullam rhoncus eu nibh vel dignissim. Ut euismod purus vitae elit feugiat imperdiet. Vivamus sed pharetra massa. Nam jen ex, žádost o výkon, nebo placerat sit amet purus. Cras id semper felis. Buďte ac hendrerit purus. Vestibulum congue dui vel maximus convallis. Celé číslo eu eleifend mauris.
ZVĚTŠIT
Tato struktura, přestože vypadá trochu hranatě, je velmi flexibilní, protože k dosažení požadovaných výsledků musíme pouze provést jakousi hru s kontejnery a jejich sloupci. Tím tento tutoriál dokončujeme, efektivně jsme provedli naše první kroky s Bootstrap a nyní můžeme začít využívat jeho výhod více přímo na našich projektech nebo webových aplikacích.
