Začínáme
Přehled Bootstrapu, jak stáhnout a používat, základní šablony a příklady a další.
Přehled Bootstrapu, jak stáhnout a používat, základní šablony a příklady a další.
Bootstrap (aktuálně v3.3.7) má několik jednoduchých způsobů, jak rychle začít, přičemž každý z nich oslovuje jinou úroveň dovedností a případ použití. Přečtěte si, co vyhovuje vašim konkrétním potřebám.
Kompilované a minifikované CSS, JavaScript a fonty. Nejsou zahrnuty žádné dokumenty ani původní zdrojové soubory.
Source Less, JavaScript a soubory písem spolu s našimi dokumenty. Vyžaduje kompilátor Less a nějaké nastavení.
Bootstrap přenesený z Less do Sass pro snadné začlenění do projektů Rails, Compass nebo pouze Sass.
Lidé z jsDelivr laskavě poskytují podporu CDN pro CSS a JavaScript Bootstrapu. Stačí použít tyto odkazy Bootstrap CDN .
Můžete také nainstalovat a spravovat Bootstrap's Less, CSS, JavaScript a fonty pomocí Bower :
Bootstrap můžete také nainstalovat pomocí npm :
require('bootstrap')
načte všechny zásuvné moduly jQuery Bootstrapu do objektu jQuery. Samotný bootstrap
modul nic neexportuje. Pluginy jQuery Bootstrapu můžete načíst ručně jednotlivě načtením /js/*.js
souborů z adresáře nejvyšší úrovně balíčku.
Bootstrap's package.json
obsahuje některá další metadata pod následujícími klíči:
less
- cesta k hlavnímu zdrojovému souboru Less Bootstrapustyle
- cesta k neminifikovanému CSS Bootstrapu, který byl předkompilován pomocí výchozího nastavení (bez přizpůsobení)Můžete také nainstalovat a spravovat Bootstrap's Less, CSS, JavaScript a fonty pomocí Composer :
Bootstrap používá Autoprefixer k řešení předpon dodavatelů CSS . Pokud kompilujete Bootstrap z jeho zdroje Less/Sass a nepoužíváte náš Gruntfile, budete muset do procesu sestavování integrovat Autoprefixer sami. Pokud používáte předkompilovaný Bootstrap nebo používáte náš Gruntfile, nemusíte se o to starat, protože Autoprefixer je již integrován do našeho Gruntfile.
Bootstrap je ke stažení ve dvou formách, ve kterých najdete následující adresáře a soubory, logicky seskupující běžné zdroje a poskytující jak zkompilované, tak zmenšené varianty.
Upozorňujeme, že všechny pluginy JavaScriptu vyžadují zahrnutí jQuery, jak je znázorněno v úvodní šabloně . Chcete-li zjistit, které verze jQuery jsou podporovány, přečtěte si naše .bower.json
Po stažení rozbalte komprimovanou složku, abyste viděli strukturu (zkompilovaného) Bootstrapu. Uvidíte něco takového:
Toto je nejzákladnější forma Bootstrapu: předkompilované soubory pro rychlé použití v téměř jakémkoli webovém projektu. Poskytujeme kompilované CSS a JS ( bootstrap.*
), stejně jako kompilované a minifikované CSS a JS ( bootstrap.min.*
). Zdrojové mapy CSS ( bootstrap.*.map
) jsou k dispozici pro použití s vývojářskými nástroji určitých prohlížečů. Fonty z Glyphicons jsou zahrnuty, stejně jako volitelný motiv Bootstrap.
Zdrojový kód Bootstrap ke stažení obsahuje předkompilované prostředky CSS, JavaScript a písem spolu se zdrojovým kódem Less, JavaScriptem a dokumentací. Konkrétněji zahrnuje následující a další:
, less/
, js/
a fonts/
jsou zdrojovým kódem pro naše CSS, JS a ikonová písma (v tomto pořadí). Složka dist/
obsahuje vše, co je uvedeno v části pro předkompilované stahování výše. Složka docs/
obsahuje zdrojový kód naší dokumentace a examples/
použití Bootstrapu. Kromě toho jakýkoli jiný zahrnutý soubor poskytuje podporu pro balíčky, licenční informace a vývoj.
Bootstrap používá Grunt pro svůj systém sestavení s pohodlnými metodami pro práci s rámcem. Je to způsob, jakým kompilujeme náš kód, spouštíme testy a další.
Chcete-li nainstalovat Grunt, musíte si nejprve stáhnout a nainstalovat node.js (který zahrnuje npm). npm je zkratka pro node packaged modules a je to způsob, jak spravovat vývojové závislosti prostřednictvím node.js.
Poté z příkazového řádku:grunt-cli
globálně pomocí npm install -g grunt-cli
./bootstrap/
adresáře a spusťte npm install
. npm se podívá na package.json
soubor a automaticky nainstaluje potřebné místní závislosti zde uvedené.Po dokončení budete moci spouštět různé příkazy Grunt poskytované z příkazového řádku.
grunt dist
(Stačí zkompilovat CSS a JavaScript)Regeneruje /dist/
adresář pomocí zkompilovaných a miniifikovaných souborů CSS a JavaScript. Jako uživatel Bootstrapu je to obvykle příkaz, který chcete.
grunt watch
(Hodinky)Sleduje zdrojové soubory Less a automaticky je znovu zkompiluje do CSS, kdykoli uložíte změnu.
grunt test
(Spustit testy)Spouští JSHint a bezhlavě spouští testy QUnit v PhantomJS .
grunt docs
(Vytvářejte a testujte podklady dokumentů)Vytváří a testuje CSS, JavaScript a další prostředky, které se používají při spouštění dokumentace lokálně prostřednictvím bundle exec jekyll serve
.
grunt
(Postavte naprosto vše a spusťte testy)Kompiluje a minifikuje CSS a JavaScript, vytváří webové stránky s dokumentací, spouští validátor HTML5 proti dokumentům, regeneruje položky Customizeru a další. Vyžaduje Jekylla . Obvykle je to nutné pouze v případě, že hackujete samotný Bootstrap.
Pokud narazíte na problémy s instalací závislostí nebo spouštěním příkazů Grunt, nejprve smažte /node_modules/
adresář vygenerovaný npm. Poté spusťte znovu npm install
.
Začněte s touto základní HTML šablonou nebo upravte tyto příklady . Doufáme, že si přizpůsobíte naše šablony a příklady a přizpůsobíte je svým potřebám.
Zkopírujte níže uvedený kód HTML a začněte pracovat s minimálním dokumentem Bootstrap.
Stavte na výše uvedené základní šabloně s mnoha komponentami Bootstrapu. Doporučujeme vám přizpůsobit a přizpůsobit Bootstrap tak, aby vyhovoval vašim individuálním potřebám projektu.
Získejte zdrojový kód pro každý příklad níže stažením úložiště Bootstrap . Příklady najdete v docs/examples/
adresáři.
Základní struktura pro administrační panel s pevným bočním panelem a navigačním panelem.
Vytvořte si vlastní navigační panel se zarovnanými odkazy. Hlavy vzhůru! Ne příliš přátelský k Safari.
Bootlint je oficiální nástroj Bootstrap HTML linter . Automaticky kontroluje několik běžných chyb HTML na webových stránkách, které používají Bootstrap poměrně „vanilkovým“ způsobem. Komponenty/widgety Vanilla Bootstrap vyžadují, aby jejich části DOM odpovídaly určitým strukturám. Bootlint kontroluje, zda instance komponent Bootstrap mají správně strukturovaný HTML. Zvažte přidání Bootlint do vašeho Bootstrap vývojářského nástroje pro web, aby žádná z běžných chyb nezpomalila vývoj vašeho projektu.
Zůstaňte v obraze o vývoji Bootstrapu a oslovte komunitu pomocí těchto užitečných zdrojů.
irc.freenode.net
serveru, v ##bootstrap kanálu .twitter-bootstrap-3
.bootstrap
u balíčků, které upravují nebo rozšiřují funkčnost Bootstrapu při distribuci prostřednictvím npm nebo podobných doručovacích mechanismů, aby bylo možné co nejvíce zjistit.Můžete také sledovat @getbootstrap na Twitteru pro nejnovější drby a úžasná hudební videa.
Bootstrap automaticky přizpůsobí vaše stránky různým velikostem obrazovky. Zde je návod, jak tuto funkci zakázat, aby vaše stránka fungovala jako v tomto příkladu nereagujícího .
<meta>
zmíněný v dokumentech CSSwidth
na .container
pro každou vrstvu mřížky jedinou šířkou, například width: 970px !important;
Ujistěte se, že toto následuje za výchozím CSS Bootstrap. Volitelně se můžete vyhnout !important
dotazům na média nebo nějakému selektoru..col-xs-*
třídy vedle nebo místo středních/velkých tříd. Nebojte se, extra malá mřížka zařízení se přizpůsobí všem rozlišením.Stále budete potřebovat Respond.js pro IE8 (protože naše dotazy na média stále existují a je třeba je zpracovat). Tím zakážete aspekty „mobilního webu“ Bootstrapu.
Tyto kroky jsme použili na příkladu. Přečtěte si jeho zdrojový kód, abyste viděli konkrétní implementované změny.
Chcete migrovat ze starší verze Bootstrapu na v3.x? Podívejte se na našeho průvodce migrací .
Bootstrap je navržen tak, aby fungoval nejlépe v nejnovějších prohlížečích pro stolní počítače a mobilní zařízení, což znamená, že starší prohlížeče mohou zobrazovat různé styly, i když jsou plně funkční, vykreslování určitých komponent.
Konkrétně podporujeme nejnovější verze následujících prohlížečů a platforem.
Alternativní prohlížeče, které používají nejnovější verzi WebKit, Blink nebo Gecko, ať už přímo nebo prostřednictvím webového rozhraní API platformy, nejsou výslovně podporovány. Bootstrap by se však měl (ve většině případů) zobrazovat a fungovat správně i v těchto prohlížečích. Podrobnější informace o podpoře jsou uvedeny níže.
Obecně řečeno, Bootstrap podporuje nejnovější verze výchozích prohlížečů každé hlavní platformy. Upozorňujeme, že proxy prohlížeče (jako je Opera Mini, režim Turbo Opera Mobile, UC Browser Mini, Amazon Silk) nejsou podporovány.
Chrome | Firefox | Safari | |
---|---|---|---|
Android | Podporováno | Podporováno | N/A |
iOS | Podporováno | Podporováno | Podporováno |
Podobně jsou podporovány nejnovější verze většiny prohlížečů pro stolní počítače.
Chrome | Firefox | internet Explorer | Opera | Safari | |
---|---|---|---|---|---|
Mac | Podporováno | Podporováno | N/A | Podporováno | Podporováno |
Okna | Podporováno | Podporováno | Podporováno | Podporováno | Není podporováno |
V systému Windows podporujeme Internet Explorer 8-11 .
U Firefoxu kromě nejnovější normální stabilní verze podporujeme také nejnovější verzi Firefoxu s rozšířenou podporou (ESR) .
Neoficiálně by měl Bootstrap vypadat a chovat se dostatečně dobře v Chromiu a Chrome pro Linux, Firefox pro Linux a Internet Explorer 7 a také Microsoft Edge, ačkoli nejsou oficiálně podporovány.
Seznam některých chyb prohlížeče, se kterými se musí Bootstrap potýkat, naleznete v naší Zeď s chybami prohlížeče .
Podporovány jsou také Internet Explorer 8 a 9, mějte však prosím na paměti, že některé vlastnosti CSS3 a prvky HTML5 nejsou těmito prohlížeči plně podporovány. Kromě toho Internet Explorer 8 vyžaduje použití Respond.js k povolení podpory dotazů na média.
Vlastnosti | Internet Explorer 8 | Internet Explorer 9 |
---|---|---|
border-radius |
Není podporováno | Podporováno |
box-shadow |
Není podporováno | Podporováno |
transform |
Není podporováno | Podporováno, s -ms předponou |
transition |
Není podporováno | |
placeholder |
Není podporováno |
Podrobnosti o podpoře funkcí CSS3 a HTML5 v prohlížeči najdete na stránce Mohu použít....
Při používání Respond.js ve vývojovém a produkčním prostředí pro Internet Explorer 8 si dejte pozor na následující upozornění.
Použití Respond.js s CSS hostovaným na jiné (sub)doméně (například na CDN) vyžaduje nějaké další nastavení. Podrobnosti najdete v dokumentaci Respond.js .
file://
Kvůli pravidlům zabezpečení prohlížeče Respond.js nefunguje se stránkami zobrazovanými prostřednictvím file://
protokolu (jako při otevírání místního souboru HTML). Chcete-li otestovat responzivní funkce v IE8, zobrazte své stránky přes HTTP(S). Podrobnosti najdete v dokumentaci Respond.js .
@import
Respond.js nefunguje s CSS, na které se odkazuje přes @import
. Zejména je známo, že některé konfigurace Drupal používají @import
. Podrobnosti najdete v dokumentaci Respond.js .
IE8 plně nepodporuje box-sizing: border-box;
v kombinaci s min-width
, max-width
, min-height
nebo max-height
. Z tohoto důvodu od verze 3.0.1 již nepoužíváme max-width
na .container
s.
IE8 má @font-face
při kombinaci s :before
. Bootstrap používá tuto kombinaci se svými Glyphicons. Pokud je stránka uložena v mezipaměti a načtena bez myši nad oknem (tj. stisknout tlačítko pro obnovení nebo načíst něco do prvku iframe), stránka se vykreslí dříve, než se načte písmo. Po najetí myší na stránku (tělo) se zobrazí některé ikony a při najetí na zbývající ikony se zobrazí také. Podrobnosti viz vydání #13863 .
Bootstrap není podporován ve starých režimech kompatibility aplikace Internet Explorer. Chcete-li mít jistotu, že používáte nejnovější režim vykreslování pro IE, zvažte, zda <meta>
na stránky zahrnout příslušnou značku:
Potvrďte režim dokumentu otevřením nástrojů pro ladění: stiskněte F12a zaškrtněte „Režim dokumentu“.
Tato značka je součástí veškeré dokumentace a příkladů Bootstrapu, aby bylo zajištěno nejlepší možné vykreslování v každé podporované verzi aplikace Internet Explorer.
Další informace naleznete v této otázce StackOverflow .
Internet Explorer 10 nerozlišuje šířku zařízení od šířky zobrazované oblasti, a proto správně neaplikuje dotazy na média v CSS Bootstrapu. Normálně byste to opravili přidáním rychlého úryvku CSS:
To však nefunguje pro zařízení se systémem Windows Phone 8 verzemi staršími než Update 3 (aka GDR3) , protože to způsobuje, že taková zařízení zobrazují převážně zobrazení plochy namísto úzkého zobrazení „telefonu“. Chcete-li tento problém vyřešit, budete muset zahrnout následující CSS a JavaScript, aby se chyba vyřešila .
Další informace a pokyny k použití najdete v části Windows Phone 8 a Device-Width .
Jako upozornění to zahrneme do veškeré dokumentace a příkladů Bootstrapu jako ukázku.
Vykreslovací modul verzí Safari před v7.1 pro OS X a Safari pro iOS v8.0 měl určité potíže s počtem desetinných míst používaných v našich .col-*-1
třídách mřížky. Pokud byste tedy měli 12 jednotlivých sloupců mřížky, všimli byste si, že jsou ve srovnání s jinými řádky sloupců krátké. Kromě upgradu Safari/iOS máte několik možností řešení:
.pull-right
do svého posledního sloupce mřížky, abyste získali zarovnání přesně vpravoPodpora pro overflow: hidden
prvek <body>
je v iOS a Androidu značně omezená. Za tímto účelem, když přejdete za horní nebo dolní část modálu v prohlížeči kteréhokoli z těchto zařízení, <body>
obsah se začne posouvat. Viz chyba Chrome #175502 (opravená v Chrome v40) a chyba WebKit #153852 .
Od iOS 9.3 platí, že když je modal otevřený, pokud je počáteční dotyk gesta posouvání v rámci textu <input>
nebo <textarea>
, <body>
bude se posouvat obsah pod modalem namísto samotného modalu. Viz chyba WebKit #153856 .
Všimněte si také, že pokud používáte pevný navigační panel nebo používáte vstupy v rámci modalu, iOS má chybu vykreslování, která neaktualizuje polohu pevných prvků při spuštění virtuální klávesnice. Mezi několik řešení tohoto problému patří transformace vašich prvků na position: absolute
nebo vyvolání časovače při zaměření, abyste se pokusili opravit umístění ručně. To Bootstrap neřeší, takže je na vás, abyste se rozhodli, které řešení je pro vaši aplikaci nejlepší.
Prvek .dropdown-backdrop
se nepoužívá na iOS v navigaci kvůli složitosti z-indexování. Chcete-li tedy zavřít rozevírací seznamy v navbarech, musíte přímo kliknout na prvek rozevíracího seznamu (nebo jakýkoli jiný prvek, který spustí událost kliknutí v systému iOS ).
Přiblížení stránky nevyhnutelně představuje artefakty vykreslování v některých komponentách, jak v Bootstrapu, tak ve zbytku webu. V závislosti na problému můžeme být schopni jej opravit (nejprve vyhledejte a v případě potřeby otevřete problém). Máme však tendenci je ignorovat, protože často nemají jiné přímé řešení než hacky.
:hover
/ :focus
na mobiluI když skutečné vznášení není na většině dotykových obrazovek možné, většina mobilních prohlížečů podporu vznášení emuluje a vytváří :hover
„lepivé“. Jinými slovy, :hover
styly se začnou používat po klepnutí na prvek a přestanou se používat až poté, co uživatel klepne na jiný prvek. To může způsobit, že se :hover
stavy Bootstrapu v takových prohlížečích nechtěně „zaseknou“. :focus
Podobně lepkavé jsou také některé mobilní prohlížeče . V současné době neexistuje žádné jednoduché řešení těchto problémů, kromě úplného odstranění takových stylů.
I v některých moderních prohlížečích může být tisk nepředvídatelný.
Konkrétně od verze Chrome v32 a bez ohledu na nastavení okrajů používá Chrome při řešení dotazů na média při tisku webové stránky šířku výřezu výrazně užší, než je velikost fyzického papíru. To může mít za následek nečekanou aktivaci extra malé mřížky Bootstrapu při tisku. Některé podrobnosti najdete v tématu č . 12078 a chybě Chrome č. 273306 . Doporučená řešení:
@screen-*
proměnných Méně tak, aby byl papír vaší tiskárny považován za větší než extra malý.Od Safari v8.0 může také pevná šířka .container
s způsobit, že Safari při tisku použije neobvykle malou velikost písma. Další podrobnosti viz #14868 a chyba WebKit #138192 . Jedním z možných řešení je přidání následujícího CSS:
Po vybalení je Android 4.1 (a dokonce i některé novější verze zjevně) dodáván s aplikací Browser jako výchozím webovým prohlížečem (na rozdíl od Chrome). Bohužel má aplikace Prohlížeč mnoho chyb a nesrovnalostí s CSS obecně.
U <select>
prvků nebude prohlížeč akcií Android zobrazovat boční ovládací prvky, pokud je border-radius
a/nebo border
použito. (Podrobnosti naleznete v této otázce StackOverflow .) Pomocí níže uvedeného úryvku kódu odstraňte nevhodný CSS a vykreslete jej <select>
jako prvek bez stylu v prohlížeči Android. Číhání uživatelského agenta zabraňuje interferenci s prohlížeči Chrome, Safari a Mozilla.
Chcete vidět příklad? Podívejte se na toto demo JS Bin.
Aby Bootstrap poskytoval starým a zabugovaným prohlížečům co nejlepší zkušenosti, používá na několika místech hacky prohlížeče CSS k cílení speciálních CSS na určité verze prohlížečů, aby tak odstranil chyby v samotných prohlížečích. Tyto hacky pochopitelně způsobují, že validátoři CSS si stěžují, že jsou neplatné. Na několika místech také používáme nejběžnější funkce CSS, které ještě nejsou plně standardizovány, ale používají se čistě pro postupné vylepšování.
Tato ověřovací varování nejsou v praxi důležitá, protože nehackovaná část našeho CSS se plně ověřuje a hackované části nenarušují správné fungování nehackované části, proto tato konkrétní varování záměrně ignorujeme.
Naše HTML dokumenty mají rovněž některá triviální a nedůležitá varování pro ověření HTML kvůli našemu zahrnutí řešení pro určitou chybu Firefoxu .
I když oficiálně nepodporujeme žádné pluginy nebo doplňky třetích stran, nabízíme několik užitečných rad, které vám pomohou vyhnout se potenciálním problémům ve vašich projektech.
Některý software třetích stran, včetně Map Google a Vlastního vyhledávače Google, je v konfliktu s Bootstrap kvůli * { box-sizing: border-box; }
pravidlu, které to padding
dělá, neovlivňuje konečnou vypočítanou šířku prvku. Zjistěte více o modelu krabice a její velikosti v CSS Tricks .
V závislosti na kontextu můžete přepsat podle potřeby (Možnost 1) nebo resetovat velikost krabice pro celé oblasti (Možnost 2).
Bootstrap se řídí běžnými webovými standardy a – s minimálním úsilím navíc – může být použit k vytváření webů, které jsou přístupné uživatelům AT .
Pokud vaše navigace obsahuje mnoho odkazů a nachází se před hlavním obsahem v DOM, přidejte Skip to main content
odkaz před navigaci (jednoduché vysvětlení najdete v tomto článku projektu A11Y o odkazech přeskočení navigace ). Použití .sr-only
třídy vizuálně skryje přeskočený odkaz a .sr-only-focusable
třída zajistí, že odkaz bude viditelný, jakmile bude zaměřen (pro vidoucí uživatele klávesnice).
Kvůli dlouhodobým nedostatkům/chybám v Chrome (viz problém 262171 v nástroji Chromium bug tracker ) a Internet Exploreru (viz tento článek o odkazech na stránce a pořadí zaměření ) se budete muset ujistit, že cíl vašeho přeskočeného odkazu je alespoň programově zaměřená přidáním tabindex="-1"
.
Kromě toho můžete chtít explicitně potlačit viditelnou indikaci zaměření na cíl (zejména proto, že Chrome v současné době také nastavuje zaměření na prvky tabindex="-1"
, když se na ně klikne myší) pomocí #content:focus { outline: none; }
.
Všimněte si, že tato chyba ovlivní také všechny ostatní odkazy na stránce, které váš web používá, a pro uživatele klávesnice je tak znehodnotí. Můžete zvážit přidání podobné opravné mezery ke všem ostatním pojmenovaným identifikátorům kotev / fragmentů, které fungují jako cíle odkazů.
Při vnořování záhlaví ( <h1>
- <h6>
) by vaše primární záhlaví dokumentu mělo být <h1>
. Následující nadpisy by měly logicky využívat <h2>
– <h6>
tak, aby čtečky obrazovky mohly vytvořit obsah vašich stránek.
Další informace naleznete na stránkách HTML CodeSniffer a AccessAbility Penn State .
V současné době jsou některé z výchozích barevných kombinací dostupných v Bootstrapu (jako jsou různé stylové třídy tlačítek, některé barvy zvýraznění kódu používané pro základní bloky kódu , pomocná třída .bg-primary
kontextového pozadí a výchozí barva odkazu při použití na bílém pozadí) mají nízký kontrastní poměr (pod doporučeným poměrem 4,5:1 ). To může způsobit problémy uživatelům se slabým zrakem nebo barvoslepým. Tyto výchozí barvy může být nutné upravit, aby se zvýšil jejich kontrast a čitelnost.
Bootstrap je vydán pod licencí MIT a je chráněn autorským zákonem z roku 2016 na Twitteru. Svařeno na menší kousky, lze jej popsat za následujících podmínek.
Plná licence Bootstrap se nachází v úložišti projektu, kde najdete další informace.
Členové komunity přeložili dokumentaci Bootstrapu do různých jazyků. Žádné nejsou oficiálně podporovány a nemusí být vždy aktuální.
Nepomáháme s organizací ani hostováním překladů, pouze na ně odkazujeme.
Dokončili jste nový nebo lepší překlad? Otevřete žádost o stažení a přidejte ji do našeho seznamu.