Konečný průvodce Bootstrapem
Bootstrap je silný, mobilní první, citlivý front-end framework, který je vybudován pomocí CSS, HTML a JavaScript. Nabízí tu výhodu oproti začátku od nuly a dokonce i v mnoha dalších rámcích.
Bootstrap byl původně vytvořen vývojářem a vývojářem z Twitteru, stal se jedním z nejpopulárnějších front-end rámců na světě. To bylo poprvé známé jako Twitter Blueprint, předtím, než se stane open-source, a sloužil jako vnitřní styl průvodce Twitter více než rok předtím, než byl zveřejněn.
Pokud jste se Bootstrapem neznali, zdroje a informace vám pomohou dosáhnout rychlosti.
Proč Bootstrap?
Bootstrap má spoustu výhod, než začne od nuly vaše projekty web dev. Jedním z největších důvodů je obrovský počet dostupných zdrojů pro Bootstrap, obzvláště ve srovnání s řadou dalších rámců a kotlů (k nim se dostaneme později).
Ale za dostupnými prostředky existuje spousta dalších důvodů, proč se Bootstrap používá:
- Je to snadné použití: Začínáme s Bootstrapem je velmi rychlý a snadný proces. A je to flexibilní: můžete je použít s Méně nebo CSS a dokonce i Sass (pokud si stáhnete verzi Sass).
- Mřížka: Bootstrap používá mřížku reagující na 12 sloupců. Dokonce podporuje vnořené a odsazené prvky. Mřížka může být stále citlivá, nebo ji můžete snadno změnit na pevné uspořádání.
- Rychlejší vývoj: protože Bootstrap má k dispozici tolik připravených komponent a zdrojů, může výrazně urychlit vývojový proces.
- Základní styly: Bootstrap je dodáván se základními styly pro tón HTML prvků, které budete používat stejně. Obsahuje styly pro typografii, formuláře, obrázky a mnoho dalšího.
- Předem navržené komponenty: Bootstrap je dodáván také s předem stylizovanými komponentami pro dropdowns, nav bar, výstrahy a mnoho dalších.
- Přiložené prvky JavaScriptu: Bootstrap přichází s množstvím komponent JavaScriptu pro přidání funkčnosti. Umožňuje snadné manipulaci s věcmi, jako jsou modální okna, popisky nástrojů, výstrahy a další. Můžete skákat písemně skripty dohromady.
- Vynikající dokumentace: Bootstrap má k dispozici výjimečnou dokumentaci, která je užitečná jak pro začátečníky, tak pro pokročilejší uživatele.
- Snadná integrace: Bootstrap může být integrován s řadou dalších rámců a platforem, a to jak na nových místech, tak na stávajících. Dokonce můžete používat pouze specifické prvky Bootstrapu vedle vašeho existujícího CSS.
Začínáme s aplikací Bootstrap
Existují dva hlavní způsoby, jak můžete stáhnout Boostrap : předkompilovaná verze nebo verze zdrojového kódu. Který z nich si vyberete, závisí na tom, jak chcete začít.
Předkompilovaná verze je připravena k použití v prakticky libovolném projektu a obsahuje kompilované CSS a JS spolu se zkompilovanými a minimalizovanými verzemi každého z nich. Glyphicon fonty jsou zahrnuty spolu s volitelným tématem Bootstrap.
Verze zdrojového kódu zahrnuje předkomplikované CSS a JavaScript, stejně jako fonty písma. Obsahuje také méně, JavaScript a dokumentaci. V podstatě je to úplnější verze, ačkoli křivka učení bude o něco vyšší než předkompilovaná verze.
K dispozici je také verze Bootstrapu, která byla přenesena z Méně na Sass, což je užitečné zejména v případě, že jej chcete zahrnout do projektu Rails, Compass nebo Sass.
Jakmile se rozhodnete, kterou verzi chcete nainstalovat, budete muset nainstalovat Grunt, což je systém, který používá Bootstrap. Nejprve musíte stáhnout a nainstalovat node.js a potom Grunt. Odtud budete mít na dosah ruky různé příkazy Grunt.
Potom můžete začít se základní šablonou Bootstrap HTML nebo jednou z nich příklady šablon . Příkladné šablony zahrnují rozvržení mřížky, rozvržení založené na jumbotronu, různé navbarky a další vlastní komponenty (dokonce i blog a přihlašovací stránku).
Co když nechci reagovat na stránky?
Zatímco Bootstrap je citlivý a mobilní - nejprve přímo z krabice, nemusí zůstat tak, pokud nechcete reagovat na stránky. Jediné, co musíte udělat, je vypnout metaznačku v CSS, překrýt šířku v kontejnerech pro každou úroveň sítě, odstranit jakýkoli sbalený a rozšiřující se chování na vašich navigacích a provést nějaké úpravy rozvržení mřížky, znovu používat. Můžete si přečíst konkrétní pokyny v části Dokumentace pro zahájení práce .
Bootstrap pluginy, rozšíření a komponenty
Bootstrap přichází s množstvím skvělých funkcí, které jsou vestavěny. Ale existuje také mnoho způsobů, jak rozšířit jeho funkčnost tak, aby vyhovovala vašim přesným potřebám.
Palivo UX je sada dalších ovládacích prvků JavaScript pro vaše webové aplikace. Můžete nasadit pouze ovládací prvky, které chcete používat, z více než tuctu dostupných.
Jasný Bootstrap je sada komponent včetně komponenty vertikální navigace a výstrah.
Bootstrap-Modal přidává stackable, reagující modální okna AJAX do vašeho webu Bootstrap. Podporuje plné šířky modálů a dlouhé modály, mezi jinými formáty.
Bootbox.js je malá knihovna, která umožňuje snadné vytváření programových dialogových oken.
Bootstrap Image Gallery je rozšířením Galerie Blueimp, což je grafická galerie reagující na dotyky pomocí modálního dialogového okna Bootstrap.
Bootstrap Lightbox je jednoduchý plugin Lightbox založený na modulu modulu Bootstrap. Zahrnuje možnosti pozadí, způsob, jakým má být světelná schránka uzavřena a další.
Nápověda formátu Bootstrap je sada pluginů jQuery pro vytváření lepších formulářů. Většinu z nich můžete použít nezávisle, nebo společně, aby vyhovovaly vašim potřebám.
Oznámení je rozšíření Bootstrap, které vám umožní snadno přidávat vlastní oznámení na váš web nebo aplikaci. Existují možnosti pro umístění, typ, přechody a další.
Bootstrap-vrčení je plugin jQuery, který přeměňuje běžné upozornění Bootstrap na oznámení typu Growl. Jsou zde upozornění na informace, chyby a styly úspěchu a podporuje několik po sobě jdoucích oznámení.
Bootstrap-select přidá vlastní výběr pro Bootstrap pomocí rozbalovacího tlačítka.
Boostrap Maxlength poskytuje indikátor vizuální zpětné vazby pro atribut maxlength na polním vstupu.
Boostrap Markdown umožňuje snadné přidání podpory značek pro vaše formuláře a jejich bezproblémové převedení do editoru Markdown.
Spínač Bootstrap 3 umožňuje snadné přeměnit zaškrtávací políčka a přepínače na přepínače přepínače.
Nahrávání souboru jQuery přidává widget pro nahrávání souborů jQuery s podporou drag & drop, výběr více souborů a další.
jqBootstrapValidation je plugin pro validaci jQuery pro formuláře Bootstrap, který je snadno použitelný a usnadňuje poskytnutí jasných pokynů při výskytu chyb při validaci.
Bootstrap-wysihtml5 je jednoduchý a krásný editor WYSIWYG HTML5, který je součástí pluginu JavaScriptu.
Bootstrap Multiselect je plugin jQuery pro uživatelské rozhraní, které používají vstupy s více atributy a zobrazují je jako rozbalovací seznam se zaškrtávacími políčkami.
BIC kalendář je jQuery jednoduchý kalendář pro označování událostí.
bootstrap-datetimepicker je jednoduchá součást pro výběr data a času pro Bootstrap.
Clockface je časovač pro Bootstrap s možnostmi pro věci jako formát a spouštění.
Bootstrap Timepicker usnadňuje výběr času pro zadávání textu pomocí myši nebo kláves se šipkami.
Barevná paleta pro Bootstrap je jednoduchý výběr barev, který nabízí základní palety barev, ve stylu Gmail a vlastní palety barev.
Vyber barvu je jQuery výběr barev pro Bootstrap, který umožňuje flexibilní zadávání textu, uložené barvy a další.
Bootstro.js usnadňuje přidání prohlídky s průvodcem k vašemu webu.
Sociální tlačítka pro Twitter Bootstrap 2 vám nabízí tlačítka, která jsou vektorová, zoomovatelná, připravená pro sítnici a přizpůsobitelná.
Flippant.js je knihovna JavaScript a CSS pro převrácení věcí, která se snadno přizpůsobí, bez závislostí.
Záložka Tab pro Bootstrap přemístí karty do rozbalovacích nabídek, pokud nebudou všechny vkládané do přiděleného prostoru.
Utíkat je jQuery obsah plugin, který může být motivován s Bootstrap.
Bootpag je plugin jQuery pro dynamickou stránkování, který pracuje s Bootstrap nebo samostatně.
Typeahead.js je javisková knihovna od Twitter pro vytváření typů.
X-editovatelné umožňuje vytvářet upravitelné prvky na vaší stránce v rámci Bootstrap.
Bootstrap Tree View je jednoduché řešení pro zobrazování hierarchických stromových struktur.
Tokenfield pro Bootstrap je pokročilý tokenizing plugin, který se zaměřuje na podporu klávesnice a kopírování a vkládání.
Bootstrap Star Rating je plugin typu jQuery, který podporuje funkce, jako jsou zlomky a RTL vstupní podpora.
Yamm Megamenu je ještě další Megamenu pro Bootstrap, který používá standardní značku Navbar a třídy systémové mřížky.
Summernote je jednoduchý editor WYSIWYG pro Bootstrap.
Knockout-Bootstrap je sada knockout vazebných ovladačů pro přístup k widgetům Bootstrap JavaScript.
Gridmanager.js umožňuje vytvářet a upravovat rozvržení mřížky v rámci jako Bootstrap.
Posuvník pro Bootstrap je složka jezdce Bootstrap pro formuláře.
WATable je plugin jQuery, který umožňuje rychlé a snadné filtrování, formátování, stránkování a řazení vašich dat.
Bootstrap Datagrid je plugin jQuery pro Bootstrap, který je plně přizpůsobitelný a zároveň zůstává jednoduchý a výkonný.
PNotify je rozšíření o oznámení JavaScriptu pro systém Bootstrap.
Bootstrap Tour je jednoduché rozšíření pro vytváření prohlídek míst s (nebo bez) Bootstrap.
The Bootstrap Accessibility Plugin , od společnosti PayPal, umožňuje spoustu komponent Bootstrap přístupných pro uživatele klávesnic a čteček obrazovky.
Bootstrap Video přehrávač je přizpůsobitelný plugin jQuery pro přehrávač videa HTML5.
Ladda UI je sada indikátorů zatížení, která je většinou určena k použití s formuláři.
Bootstrap témata, šablony a UI sady
Můžete si vytvořit vlastní motivy a šablony od začátku, pokud si to vyberete, nebo si prohlédnete tyto volné a prémiové prostředky, abyste šetřili čas. Některé jsou určeny k použití jako-je, zatímco spousta dalších je určen k tomu, že skákací bod pro vaše vlastní vzory.
Kreativní trh má více než 300 prémiových témat Bootstrap.
BootstrapMade nabízí témata v různých stylech.
BootstrapBay je trh pro prémiové motivy Bootstrap a šablony, kde si můžete koupit nebo prodat.
GridGum je prémiový trh témat s nabídkou desítek témat.
ThemeForest má stovky témat Bootstrap na prodej, počínaje pouhými 4 dolary.
WrapBootstrap nabízí témata pro vše od webů elektronického obchodu po vstupní stránky.
Cardeostrap je obrovská UI kit pro Bootstrap, která obsahuje CSS, komponenty a JavaScript.
Flatstrap je free a open-source Bootstrap tématický rámec bez všech volných okrajů.
Bootmetro je webový rámec, který má vzhled systému Windows 8.
Fbootstrapp je sada nástrojů pro vytváření aplikací v aplikaci iframe ve službě Bootstrap.
Bootplus je styl front-end, který je elegantní a intuitivní.
Získejte šablonu je malá sada šablon HTML5 a CSS3 v různých stylech.
BootstrapTaste je sbírka bezplatných a prvotřídních témat Bootstrap.
Bootstrap Zero je samozvaný největší open-source šablona kolekce pro Bootstrap.
Černá kravata je sbírka bezplatných a prémiových motivů postavených na různých verzích Bootstrapu. Zahrnují vše od témat řídicího panelu až po agregátory zpráv až po portfolio témat.
Startup Framework je jednoduchý, ale výkonný rámec Bootstrap od DesignModo.
Bootswatch je sbírka bezplatných, snadno instalovatelných, modulárních motivů Bootstrap.
Spusťte Bootstrap je sada bezplatných motivů a šablon Bootstrap, včetně tém blogů, témat portfolia a dalších.
Joostrap je sbírka Joomla šablon vytvořených s Bootstrapem.
Téma Armada je sada handcrafted citlivých témat, která jsou postavena s Bootstrap, začínající na pouhých 8 dolarů.
PrepBootstrap je obrovský zdroj volných motivů, šablon a widgetů pro vše od administračních rozhraní až po formuláře kontaktů.
RandThemes je sada prvotřídních motivů Bootstrap včetně návrhů na přední i zadní straně.
Kořeny je WordPress starter téma, které je postaveno na Bootstrap.
UI Bootstrap je sada komponent Bootstrap zapsaných v AngularJS.
Bootstrap je čistý a moderní Bootstrap WordPress téma.
BootstrapWP je pevnou základnou pro vlastní vývoj motivů WordPress založený na Bootstrapu.
StrapPress je téma WordPress, které je mobilní - nejprve reaguje a obsahuje i prvky Bootstrap.
Shoestrap je pokročilé téma WordPress založené na Bootstrapu.
Exponujte rámec je základní téma, které nabízí rozložení tekutin, HTML5 a CSS3 a citlivé nabídky.
Další zdroje Bootstrapu
Kromě základních rozšíření a témat existuje spousta dalších zdrojů služby Bootstrap, které usnadňují a zpříjemňují práci s Bootstrap.
The Bootstrap Style Guide Boilerplate pomáhá vám semi-automaticky vytvářet průvodce živého stylu propojením stylu a vytvářením souborů HTML pro každý vzorek nebo prvek.
Bootstrap Magic je editor témat Bootstrap, který vám umožní rychleji vytvářet motivy.
Akademický je rychlý blog CMS založený na Bootstrapu.
Wright je Joomla 2.5 a 3.x framework postavený na Bootstrapu.
AngularStrap je sada nativních direktiv AngularJS pro Bootstrap 3.
PaintStrap umožňuje vytvářet motivy Bootstrap pomocí barevných palet z aplikací Adobe Kuler nebo COLOURlovers.
Durandal je rámec pro vytváření aplikací pro jednotlivé stránky, které se integrují s Bootstrap.
Lavish umožňuje snadné vytvoření vlastního barevného schématu Bootstrap z obrázku.
LayoutIt! je nástroj pro vytváření rozhraní pro vytváření předdefinovaného kódu.
Pingendo je vizuální desktopová aplikace pro návrhy prototypů reagujících na základě Bootstrapu.
Bootsnip je galerie prvků pro zdroje Bootstrap.
Běžně je hřiště pro budování, testování a prototypování s rámcem Bootstrap.
Dojo pro Bootstrap kombinuje komponenty Bootstrap s vlastními moduly Dojo pro vše od modálních oken po karusely až po tlačítka.
Bootsnipp Form Builder je nástroj pro vytváření formulářů, který používá komponenty drag and drop.
Bootsnip Button Builder je snadno použitelný nástroj pro vytváření tlačítek, který vám umožní přizpůsobit výstup, text tlačítka, barvu, velikost a ikonu.
Ratchet je nástroj pro vytváření mobilních aplikací s komponentami HTML, CSS a JavaScript.
Bootbundle je sada témat, úryvek a komponent pro Bootstrap.
BootSwatchr je vizuální tvůrce motivů pro vytváření motivů Bootstrap od začátku.
Reagujte na Bootstrap je Bootstrap-build populární front-end framework.
Brix.io je prostředník pro Bootstrap. Je založen na cloudových technologiích, je snadno použitelný a nabízí spolupráci v reálném čase.
Některé skvělé projekty Bootstrap
Existuje spousta míst, které už běží na Bootstrapu. Níže uvedené ukazují, kolik rozmanitosti je možné s Bootstrapem.
Plaza klasický filmový festival
Holandská národní opera a balet
Závěr
Bootstrap je pouze jedním z mnoha dostupných rámců pro vytváření citlivých, mobilních prvních webů s HTML, CSS a JavaScript. Udělejte si čas na to, abyste zjistili, co může Bootstrap dělat (a co se s ním cítíte), ve srovnání s jinými rámci a vybrat ten, který vyhovuje vašemu konkrétnímu projektu. A nebojte se vybrat různé rámce pro různé projekty!