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á:

  1. 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).
  2. 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í.
  3. Rychlejší vývoj: protože Bootstrap má k dispozici tolik připravených komponent a zdrojů, může výrazně urychlit vývojový proces.
  4. 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.
  5. 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.
  6. 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.
  7. 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.
  8. 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.

palivo ux

Jasný Bootstrap je sada komponent včetně komponenty vertikální navigace a výstrah.

Jasný Bootstrap

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.

bootstrap-modal

Bootbox.js je malá knihovna, která umožňuje snadné vytváření programových dialogových oken.

bootbox.js

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 galerie obrázků

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ší.

Bootstrap Lightbox

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.

bootstrap tvoří pomocníky

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ší.

oznámení

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

Bootstrap-select přidá vlastní výběr pro Bootstrap pomocí rozbalovacího tlačítka.

boostrap-select

Boostrap Maxlength poskytuje indikátor vizuální zpětné vazby pro atribut maxlength na polním vstupu.

boostlap maxlength

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.

bootstrap 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.

spínač bootstrap

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ší.

Nahrát soubor jquery

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.

jqbootstrapvalidace

Bootstrap-wysihtml5 je jednoduchý a krásný editor WYSIWYG HTML5, který je součástí pluginu JavaScriptu.

bootstrap-wysihtml5

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.

bootstrap multiselect

BIC kalendář je jQuery jednoduchý kalendář pro označování událostí.

bicový kalendář

bootstrap-datetimepicker je jednoduchá součást pro výběr data a času pro Bootstrap.

bootstrap-datetimepicker

Clockface je časovač pro Bootstrap s možnostmi pro věci jako formát a spouštění.

clockface

Bootstrap Timepicker usnadňuje výběr času pro zadávání textu pomocí myši nebo kláves se šipkami.

bootstrap timepicker

Barevná paleta pro Bootstrap je jednoduchý výběr barev, který nabízí základní palety barev, ve stylu Gmail a vlastní palety barev.

paleta barev pro bootstrap

Vyber barvu je jQuery výběr barev pro Bootstrap, který umožňuje flexibilní zadávání textu, uložené barvy a další.

vyber barvu

Bootstro.js usnadňuje přidání prohlídky s průvodcem k vašemu webu.

bootstro

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á.

sociální tlačítka

Flippant.js je knihovna JavaScript a CSS pro převrácení věcí, která se snadno přizpůsobí, bez závislostí.

flippant.js

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.

záložka pro bootstrap

Utíkat je jQuery obsah plugin, který může být motivován s Bootstrap.

tocify

Bootpag je plugin jQuery pro dynamickou stránkování, který pracuje s Bootstrap nebo samostatně.

bootpag

Typeahead.js je javisková knihovna od Twitter pro vytváření typů.

typeahead.js

X-editovatelné umožňuje vytvářet upravitelné prvky na vaší stránce v rámci Bootstrap.

x-editovatelné

Bootstrap Tree View je jednoduché řešení pro zobrazování hierarchických stromových struktur.

bootstrap tree view

Tokenfield pro Bootstrap je pokročilý tokenizing plugin, který se zaměřuje na podporu klávesnice a kopírování a vkládání.

tokenfield

Bootstrap Star Rating je plugin typu jQuery, který podporuje funkce, jako jsou zlomky a RTL vstupní podpora.

hvězdičkový

Yamm Megamenu je ještě další Megamenu pro Bootstrap, který používá standardní značku Navbar a třídy systémové mřížky.

yamm megamenu

Summernote je jednoduchý editor WYSIWYG pro Bootstrap.

summernote

Knockout-Bootstrap je sada knockout vazebných ovladačů pro přístup k widgetům Bootstrap JavaScript.

knokaut

Gridmanager.js umožňuje vytvářet a upravovat rozvržení mřížky v rámci jako Bootstrap.

gridmanager

Posuvník pro Bootstrap je složka jezdce Bootstrap pro formuláře.

posuvník pro bootstrap

WATable je plugin jQuery, který umožňuje rychlé a snadné filtrování, formátování, stránkování a řazení vašich dat.

spolehlivé

Bootstrap Datagrid je plugin jQuery pro Bootstrap, který je plně přizpůsobitelný a zároveň zůstává jednoduchý a výkonný.

bootstrap datagrid

PNotify je rozšíření o oznámení JavaScriptu pro systém Bootstrap.

pnotify

Bootstrap Tour je jednoduché rozšíření pro vytváření prohlídek míst s (nebo bez) Bootstrap.

bootstrap tour

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 přístupnost plugin

Bootstrap Video přehrávač je přizpůsobitelný plugin jQuery pro přehrávač videa HTML5.

bootstrap video přehrávač

Ladda UI je sada indikátorů zatížení, která je většinou určena k použití s ​​formuláři.

ladda ui

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.

Kreativní trh

BootstrapMade nabízí témata v různých stylech.

bootstrapmade

BootstrapBay je trh pro prémiové motivy Bootstrap a šablony, kde si můžete koupit nebo prodat.

bootstrapbay

GridGum je prémiový trh témat s nabídkou desítek témat.

gridgum

ThemeForest má stovky témat Bootstrap na prodej, počínaje pouhými 4 dolary.

themeforest

WrapBootstrap nabízí témata pro vše od webů elektronického obchodu po vstupní stránky.

wrapbootstrap

Cardeostrap je obrovská UI kit pro Bootstrap, která obsahuje CSS, komponenty a JavaScript.

kardeostrap

Flatstrap je free a open-source Bootstrap tématický rámec bez všech volných okrajů.

flatstrap

Bootmetro je webový rámec, který má vzhled systému Windows 8.

bootmetro

Fbootstrapp je sada nástrojů pro vytváření aplikací v aplikaci iframe ve službě Bootstrap.

fbootstrap

Bootplus je styl front-end, který je elegantní a intuitivní.

bootplus

Získejte šablonu je malá sada šablon HTML5 a CSS3 v různých stylech.

Získejte šablonu

BootstrapTaste je sbírka bezplatných a prvotřídních témat Bootstrap.

bootstraptaste

Bootstrap Zero je samozvaný největší open-source šablona kolekce pro Bootstrap.

bootstrap nula

Č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.

Černá kravata

Startup Framework je jednoduchý, ale výkonný rámec Bootstrap od DesignModo.

spuštění

Bootswatch je sbírka bezplatných, snadno instalovatelných, modulárních motivů Bootstrap.

bootswatch

Spusťte Bootstrap je sada bezplatných motivů a šablon Bootstrap, včetně tém blogů, témat portfolia a dalších.

start bootstrap

Joostrap je sbírka Joomla šablon vytvořených s Bootstrapem.

joostrap

Téma Armada je sada handcrafted citlivých témat, která jsou postavena s Bootstrap, začínající na pouhých 8 dolarů.

Téma Armada

PrepBootstrap je obrovský zdroj volných motivů, šablon a widgetů pro vše od administračních rozhraní až po formuláře kontaktů.

prepbootstrap

RandThemes je sada prvotřídních motivů Bootstrap včetně návrhů na přední i zadní straně.

randthemes

Kořeny je WordPress starter téma, které je postaveno na Bootstrap.

kořeny

UI Bootstrap je sada komponent Bootstrap zapsaných v AngularJS.

ui bootstrap

Bootstrap je čistý a moderní Bootstrap WordPress téma.

bootstrap

BootstrapWP je pevnou základnou pro vlastní vývoj motivů WordPress založený na Bootstrapu.

bootstrapwp

StrapPress je téma WordPress, které je mobilní - nejprve reaguje a obsahuje i prvky Bootstrap.

strappress

Shoestrap je pokročilé téma WordPress založené na Bootstrapu.

shoestrap

Exponujte rámec je základní téma, které nabízí rozložení tekutin, HTML5 a CSS3 a citlivé nabídky.

odhalit

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.

stylový návod k obsluze

Bootstrap Magic je editor témat Bootstrap, který vám umožní rychleji vytvářet motivy.

bootstrap magie

Akademický je rychlý blog CMS založený na Bootstrapu.

akademický

Wright je Joomla 2.5 a 3.x framework postavený na Bootstrapu.

wright

AngularStrap je sada nativních direktiv AngularJS pro Bootstrap 3.

úhlový prvek

PaintStrap umožňuje vytvářet motivy Bootstrap pomocí barevných palet z aplikací Adobe Kuler nebo COLOURlovers.

barva barvy

Durandal je rámec pro vytváření aplikací pro jednotlivé stránky, které se integrují s Bootstrap.

durandal

Lavish umožňuje snadné vytvoření vlastního barevného schématu Bootstrap z obrázku.

bohatý

LayoutIt! je nástroj pro vytváření rozhraní pro vytváření předdefinovaného kódu.

layoutit

Pingendo je vizuální desktopová aplikace pro návrhy prototypů reagujících na základě Bootstrapu.

pingendo

Bootsnip je galerie prvků pro zdroje Bootstrap.

bootsnip

Běžně je hřiště pro budování, testování a prototypování s rámcem Bootstrap.

bootply

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.

dojo pro bootstrap

Bootsnipp Form Builder je nástroj pro vytváření formulářů, který používá komponenty drag and drop.

bootsnip form builder

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.

bootsnip button builder

Ratchet je nástroj pro vytváření mobilních aplikací s komponentami HTML, CSS a JavaScript.

rohatka

Bootbundle je sada témat, úryvek a komponent pro Bootstrap.

bootbundle

BootSwatchr je vizuální tvůrce motivů pro vytváření motivů Bootstrap od začátku.

bootswatchr

Reagujte na Bootstrap je Bootstrap-build populární front-end framework.

reagovat

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.

brix.io

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.

Lexigramy

lexigramy

BabySitMyDog.com

babysitmydog

EasyGenerator

easygenerator

MobStyle

mobstyle

Africký akciový fond

aef

WebXtrap

webxtrap

Paul V

paul v

High Rollers Fun Casino

vysoké válce

Vansh

vansh

Noel Hanna

noel Hanna

Prusik

prusik

HIP reklama

hip reklama

Prací den

prací den

Akademie výroby plachetnic

filtr

Usměrnit

usměrnit

Kuchyně

kuchyně

DSTLD

dstld

Nas Ferias

nas ferias

Vertty

vertty

Montere

montere

Drury Budovy

pitné budovy

Plaza klasický filmový festival

plaza klasický filmový festival

1Bite2Go

1bite2go

Riot Design

vzbuzení nepokojů

Codiqa

codiqa

Sean Halpin

sean halpin

Simplebots

simplebots

Velkoryse

magicky

Crafting Type

řemeslný typ

Surreal CMS

surreal cms

Kývnutí

kývnutí

Markt

markt

Uvedení do provozu Turecko

startovací krůtí

Felix Morelo

felix morelo

Škola Happy Startup

šťastná startovací škola

Kontest

Kontest

Holandská národní opera a balet

holandský národní

Dagobert Renouf

dagobert renouf

Rolling Stones

válcovací kameny

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!