Obrovská aktualizace bootstrapu na Twitteru

Nemusí být připraven k výrobě, ale kandidát na vydání verze 3 Twitter Bootstrap je obrovskou změnou oproti verzi 2.3 a velmi mě těší z její budoucnosti. Je smutné, že s JavaScriptem udělali jen velmi málo, ale to neznamená, že si to nemůžu užít. Pojďme se rychle podívat na některé z hlavních změn, které se objevují v Twitteru Bootstrap 3, CSS a JavaScriptu.

První věc, kterou si musíte uvědomit, je, že verze 3 ještě není plně vydána. Právě zpřístupnili Release Candidate 1 – v podstatě o krok blíže k produkční připravenosti než beta verze. Očekávají přítomnost chyb a doufají, že lidé jako vy jim pomohou tyto chyby najít. NEPOUŽÍVEJTE NA VÝROBNÍCH STRÁNKÁCH… zatím.

Změny

Pokud nedůvěřujete tomu, co říkám (nedokážu si to představit) nebo chcete vidět úplný seznam změn, podívejte se na tento dokument, který se průběžně aktualizuje, jak jsou prováděny změny. Hlavní dokumentace je také aktualizována, aby předváděla funkce verze 3.

Toto není drop-in upgrade na 2.3. Ve skutečnosti, pokud jen vyměníte CSS a JS s touto novou verzí, je docela pravděpodobné, že většina webu bude poškozena. V této verzi je NUMEROUS zásadních změn, takže můžete začít znovu.

Systém mřížky

Bootstrap 3 je mobilní. Dříve existovala při zahrnutí samostatné šablony stylů responzivní mřížka. Nyní neexistuje způsob, jak mít mřížku, která nereaguje. Šablona stylů je určena především pro mobily, což znamená, že základní styly se vztahují na malé obrazovky a styly se mění, když se obrazovka zvětšuje. Pro někoho, kdo to používá, to pravděpodobně nebude velký rozdíl, ale může. Pro lepší podporu responzivního designu mají sloupce vždy velikost v procentech, i když v různých bodech přerušení je .row prvky mohou mít pevnou šířku. Skutečnost, že sloupce mají velikost v procentech, znamená, že když sloupce vnoříte, i vnořené vrstvy budou mít 12 sloupců.

Ponechali mřížku s 12 sloupci, ale odstranili span* class a nahradil jej col-* , col-sm-* a col-lg-* . Proč byl nahrazen 3 různými třídami? Protože jsou úžasné, proto! Umožňuje vám určit počet sloupců, které má prvek zabírat v různých bodech přerušení. Můžete si o tom přečíst v dokumentech, ale není v nich příliš jasné, jak to všechno funguje.

Za prvé, existují 4 body přerušení:<768px,>=768px,>=992px,>=1200px. Když jsme pod 768 pixelů, mřížka je zcela plynulá, ale nad tím mají řádkové kontejnery pevné velikosti podle bodu přerušení. Pokud použijete, zadejte prvku col-4 třídy by to zabralo 4 sloupce (1/3 šířky) v každém jednotlivém bodu přerušení, a to i na malých obrazovkách. Pokud jste přidali col-sm-3 na stejný prvek, pak by zabral 4 sloupce v nejmenším zarážkovém bodu, ale cokoliv o velikosti 768 pixelů nebo více, col-sm-* přepíše col-* , takže to zabere 3 sloupce. Pokud jste pak přidali col-lg-2 třídy, pak při velikosti 992 pixelů nebo vyšší by prvek zabíral pouze 2 sloupce.

Co se tedy stane, když zadáte pouze col-sm-* nebo col-lg-* na prvku? Pokud zadáte col-lg-* , pak se bude vztahovat na vše, co má velikost 992 pixelů nebo vyšší, a pokud je rozlišení nižší, pak bude mít prvek šířku 100 % a bude se skládat vertikálně (nebude vůbec plavat).

je to docela chytré. Vždy jsem byl zklamán tím, jak se tyto rámce v určitém okamžiku stanou jediným sloupcem. Neexistoval způsob, jak mít více sloupců na malé obrazovce, i když některé věci by fungovaly dobře ve více sloupcích na menších obrazovkách. 992px je zajímavá volba bodu zlomu, ale ve skutečnosti na tom příliš nezáleží. Jsem mírně zklamaný, že neexistuje další třída, která by se vztahovala pouze na největší bod zlomu, ale není to velká ztráta.

V praxi mě však více zklamalo, že neexistuje bod přerušení pod 768 pixelů. Dokážu si představit nespočet situací, kdy by někdo preferoval mít více sloupců nad 500px nebo tak, ale skládat vše pod to. Nakonec však vždy můžete body přerušení přizpůsobit svým potřebám. Čtyři body přerušení by měly stačit, takže stačí změnit několik číselných hodnot.

Čistý styl

Bootstrap odstranil některé stylističtější kousky, aby se více zaměřil na strukturu a umožnil vám přidat svůj vlastní styl, aniž byste museli přepisovat nebo odstraňovat výchozí styly. Udělali také styly plošší. Podívejte se například na tlačítka. Jsou plné barvy; žádné přechody nebo stíny. No, to není tak úplně pravda. Když je tlačítko aktivní, je tam vložený stín, ale jinak jsou ploché. Také odstranili styl „obráceného“ tlačítka a místo toho udělali výchozí styl tlačítka černý (ve skutečnosti velmi tmavě šedý, ale cokoli). Chápu, že to bereme jako „převrácené“, protože to nemá žádnou sémantickou hodnotu, ale teď mi žádné z tlačítek opravdu nepřipadá druhořadé. Všichni vyskakují do pozornosti. Vyskytl se problém, který se pokouší získat btn-secondary třída přidána, abychom mohli mít tlačítko světlejší barvy, které nebude tolik vyčnívat. Jsem pro to, a pokud souhlasíte, měli byste jít dát své slovo a zajistit, aby se tak stalo.

Ikony

Ikony byly z Bootstrapu zcela odstraněny. Jakkoli bylo hezké, že to bylo automaticky zahrnuto do Bootstrapu, mají pro toto rozhodnutí nějaké slušné zdůvodnění.

Toto jsou nejpozoruhodnější a nejpozoruhodnější změny související s CSS. Tak co my JavaScripteři?

Změny JavaScriptu

V JavaScriptu není mnoho změn, i když existuje několik změn, které souvisejí do JavaScriptu. Odebrali přítele, provedli nějaké změny v modalech a karuselech a přidali lepší podporu Bower.

Už žádné TypeAhead

Dříve Bootstrap obsahoval zásuvný modul pro automatické dokončování, ale ten byl nyní odstraněn. Proč? Protože Twitter již vyrábí jiný zásuvný modul pro automatické dokončování, který je výkonnější. Nechtěli mít dva samostatné projekty pracující na stejné funkcionalitě, a tak to upustili ve prospěch Twitter TypeAhead. To je podle mě v pořádku, protože nakonec byste měli zřetězit všechny své JavaScripty dohromady a neměli byste slepě zahrnovat všechny pluginy Twitter Bootstrap, pokud je stejně nebudete všechny používat. Od uživatelů bylo mnoho stížností, ale pokud děláte věci správně, měl by to být menší problém.

Pokud se chystáte nahradit TypeAhead od Bootstrapu Twitterem TypeAhead, budete se chtít podívat na dokumentaci API, protože nejsou plně kompatibilní.

Modaly a karusely

Změny těchto dvou pluginů jsou zcela založené na stylu, ale protože jsou poháněny pluginy JavaScriptu, napadlo mě, že je vložím do této sekce. Pro začátek byly modály navrženy tak, aby fungovaly mnohem lépe na mobilních zařízeních. Pokud je modal příliš velký a nevejde se na obrazovku, hlavní část stránky se nemůže posouvat, takže když posouváte, posouvá se zbytek modálu se posune do zobrazení a stránka za ním zůstane nehybná. . Došlo také k několika drobným změnám značek a stylu.

Kolotoče prošly velkou stylizací. Bodové indikátory, předchozí a následující šipky a titulky byly docela změněny. Jak jsem viděl, v JavaScriptu nedošlo k žádným změnám a jedinou změnou ve značení je, že musíte mít další prvek v rámci .carousel-control prvky.

Použitelnost Bower

Pokud Bower neznáte, měli byste si o něm přečíst. Je to podobné jako npm pro front-end (a potenciálně i back-end). Pomocí Bower stačí zadat bower install jquery a načte úložiště pro jQuery a načte jej do složky ve vašem projektu. Až do tohoto nového vydání neobsahovalo úložiště Bootstrapu zkompilované soubory CSS a JavaScript. Místo toho jste měli složku plnou mnoha souborů LESS a složku se samostatnými soubory JavaScriptu pro každý plugin, takže bower install bootstrap byl pro většinu lidí většinou k ničemu.

Vlastně mě to bavilo, protože jsem pak mohl ve svých projektech MÉNĚ a stahovat pouze pluginy Bootstrap, které jsem potřeboval s RequireJS. Ale velmi málo lidí používá LESS a mnoho lidí dává přednost zahrnutí celého souboru zásuvných modulů Bootstrap pro pohodlí, takže Twitter přidal dist složku do úložiště, kde budou uloženy zkompilované CSS a JavaScript.

Také změnili svůj kompilační nástroj z MAKE na Grunt, aby byl více kompatibilní mezi operačními systémy. Také mnoho vývojářů JavaScriptu a front-end webových vývojářů se nyní učí Grunt, takže může být dokonce více chápán než MAKE (toto je samozřejmě čistě spekulace). Pokud tedy nyní používáte Bower k natažení Bootstrapu, můžete provést přizpůsobení a sestavit jej sami, podobně jako nová možnost sestavení jQuery.

Závěr

Twitter Bootstrap vypadá, že má velmi zářnou budoucnost. Ačkoli je tato aktualizace do značné míry nekompatibilní s předchozími verzemi, je to proto, že tvrdě pracují na tom, aby byl Bootstrap tím nejlepším nástrojem, jaký může být. Jsem z těchto změn velmi nadšený. Velmi uvažuji o nové šabloně pro tento blog, a pokud/až se k tomu dostanu, určitě použiji Bootstrap, abych tuto práci zvládl. Bůh žehnej a šťastné kódování!


No