Stažení

Bootstrap (aktuálně v3.4.1) 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.

jsDelivr

Lidé z jsDelivr laskavě poskytují podporu CDN pro CSS a JavaScript Bootstrapu. Stačí použít tyto odkazy jsDelivr .

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap-theme.min.css" integrity="sha384-6pzBo3FDv/PJ8r2KRkGHifhEocL+1X2rVCTTkUfGk7/0pbek5mMa1upzvWbrUbOZ" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>

Nainstalujte pomocí Bower

Můžete také nainstalovat a spravovat Bootstrap's Less, CSS, JavaScript a fonty pomocí Bower :

bower install bootstrap

Nainstalujte pomocí npm

Bootstrap můžete také nainstalovat pomocí npm :

npm install bootstrap@3

require('bootstrap')načte všechny zásuvné moduly jQuery Bootstrapu do objektu jQuery. Samotný bootstrapmodul nic neexportuje. Pluginy jQuery Bootstrapu můžete načíst ručně jednotlivě načtením /js/*.jssouborů z adresáře nejvyšší úrovně balíčku.

Bootstrap's package.jsonobsahuje některá další metadata pod následujícími klíči:

• less- cesta k hlavnímu zdrojovému souboru Less Bootstrapu
• style- cesta k neminifikovanému CSS Bootstrapu, který byl předkompilován pomocí výchozího nastavení (bez přizpůsobení)

Nainstalujte pomocí Composer

Můžete také nainstalovat a spravovat Bootstrap's Less, CSS, JavaScript a fonty pomocí Composer :

composer require twbs/bootstrap

Autoprefixer vyžadován pro Less/Sass

Bootstrap používá Autoprefixer k řešení prefixů 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.

Co je zahrnuto

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.

Předkompilovaný Bootstrap

Po stažení rozbalte komprimovanou složku, abyste viděli strukturu (zkompilovaného) Bootstrapu. Uvidíte něco takového:

bootstrap/
├── css/
│   ├── bootstrap.css
│   ├── bootstrap.css.map
│   ├── bootstrap.min.css
│   ├── bootstrap.min.css.map
│   ├── bootstrap-theme.css
│   ├── bootstrap-theme.css.map
│   ├── bootstrap-theme.min.css
│   └── bootstrap-theme.min.css.map
├── js/
│   ├── bootstrap.js
│   └── bootstrap.min.js
└── fonts/
    ├── glyphicons-halflings-regular.eot
    ├── glyphicons-halflings-regular.svg
    ├── glyphicons-halflings-regular.ttf
    ├── glyphicons-halflings-regular.woff
    └── glyphicons-halflings-regular.woff2

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 bootstrapu

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

bootstrap/
├── less/
├── js/
├── fonts/
├── dist/
│   ├── css/
│   ├── js/
│   └── fonts/
└── docs/
    └── examples/

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

Kompilace CSS a JavaScriptu

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

Instalace Gruntu

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.

1. Nainstalujte grunt-cliglobálně pomocí npm install -g grunt-cli.
2. Přejděte do kořenového /bootstrap/adresáře a spusťte npm install. npm se podívá na package.jsonsoubor 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.

Dostupné příkazy Grunt

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 spouští testy QUnit ve skutečných prohlížečích díky Karmě .

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.

Odstraňování problémů

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.

Základní šablona

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.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/html5shiv.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/[email protected]/dest/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
  </body>
</html>

Příklady

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.

Použití rámce

Startovací šablona

Nic než základy: kompilované CSS a JavaScript spolu s kontejnerem.

Bootstrap téma

Načtěte volitelný motiv Bootstrap pro vizuálně vylepšený zážitek.

Mřížky

Několik příkladů rozvržení mřížky se všemi čtyřmi vrstvami, vnořením a dalšími.

Jumbotron

Sestavte kolem jumbotronu pomocí navigační lišty a několika základních sloupců mřížky.

Úzký jumbotron

Vytvořte vlastní stránku zúžením výchozího kontejneru a jumbotronu.

Navbary v akci

Navbar

Super základní šablona, ​​která obsahuje navigační panel spolu s nějakým dalším obsahem.

Statická horní navigační lišta

Super základní šablona se statickým horním navigačním panelem spolu s dalším obsahem.

Opravená navigační lišta

Super základní šablona s pevným horním navigačním panelem spolu s nějakým dalším obsahem.

Vlastní komponenty

Pokrýt

Jednostránková šablona pro vytváření jednoduchých a krásných domovských stránek.

Kolotoč

Přizpůsobte si navigační panel a karusel a poté přidejte některé nové součásti.

Blog

Jednoduché rozložení blogu se dvěma sloupci s vlastní navigací, záhlavím a typem.

Přístrojová deska

Základní struktura pro administrační panel s pevným bočním panelem a navigačním panelem.

Přihlašovací stránka

Vlastní rozvržení a design formuláře pro jednoduchý přihlašovací formulář.

Odůvodněné nav

Vytvořte si vlastní navigační panel se zarovnanými odkazy. Hlavy vzhůru! Ne příliš přátelský k Safari.

Nalepovací zápatí

Připojte zápatí ke spodní části zobrazované oblasti, pokud je obsah kratší než ona.

Nalepovací zápatí s navigační lištou

Připojte zápatí ke spodní části výřezu s pevnou navigační lištou nahoře.

Experimenty

Nereagující Bootstrap

Snadno deaktivujte odezvu Bootstrapu podle našich dokumentů .

Mimo plátno

Vytvořte přepínatelnou navigační nabídku mimo plátno pro použití s ​​Bootstrap.

Nástroje

Bootlint

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.

Společenství

Zůstaňte v obraze o vývoji Bootstrapu a oslovte komunitu pomocí těchto užitečných zdrojů.

• Přečtěte si a přihlaste se k odběru oficiálního blogu Bootstrap .
• Chatujte s ostatními bootstrappery pomocí IRC na irc.freenode.netserveru, v ##bootstrap kanálu .
• Pro pomoc s používáním Bootstrapu se zeptejte na StackOverflow pomocí značkytwitter-bootstrap-3 .
• Vývojáři by měli používat klíčové slovo bootstrapu 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.
• Najděte inspirativní příklady lidí, kteří stavěli s Bootstrap na Bootstrap Expo .

Můžete také sledovat @getbootstrap na Twitteru pro nejnovější drby a úžasná hudební videa.

Deaktivace odezvy

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 .

Kroky k deaktivaci odezvy stránky

1. Vynechejte výřez <meta>zmíněný v dokumentech CSS
2. Přepište widthna .containerpro 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 !importantdotazům na média nebo nějakému selektoru.
3. Pokud používáte navbars, odstraňte veškeré chování navbar sbalení a rozbalení.
4. Pro rozvržení mřížky použijte .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.

Šablona bootstrap s deaktivovanou odezvou

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.

Zobrazit příklad bez odezvy

Podpora prohlížeče a zařízení

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.

Podporované prohlížeče

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.

Mobilní zařízení

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.

Desktopové prohlížeče

Podobně jsou podporovány nejnovější verze většiny prohlížečů pro stolní počítače.

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 .

Internet Explorer 8 a 9

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.

Podrobnosti o podpoře funkcí CSS3 a HTML5 v prohlížeči najdete na stránce Mohu použít....

Internet Explorer 8 a Respond.js

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

Respond.js a CSS mezi doménami

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 .

Respond.js afile://

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 .

Respond.js a@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 .

Internet Explorer 8 a velikost krabice

IE8 plně nepodporuje box-sizing: border-box;v kombinaci s min-width, max-width, min-heightnebo max-height. Z tohoto důvodu od verze 3.0.1 již nepoužíváme max-widthna .containers.

Internet Explorer 8 a @font-face

IE8 má @font-facepř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í 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 .

Režimy kompatibility s IE

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:

<meta http-equiv="X-UA-Compatible" content="IE=edge">

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 ve Windows 8 a Windows Phone 8

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:

@-ms-viewport       { width: device-width; }

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 .

@-ms-viewport       { width: device-width; }
@-o-viewport        { width: device-width; }
@viewport           { width: device-width; }

// Copyright 2014-2019 Twitter, Inc.
// Licensed under MIT (https://github.com/twbs/bootstrap/blob/v3-dev/LICENSE)
if (navigator.userAgent.match(/IEMobile\/10\.0/)) {
  var msViewportStyle = document.createElement('style')
  msViewportStyle.appendChild(
    document.createTextNode(
      '@-ms-viewport{width:auto!important}'
    )
  )
  document.querySelector('head').appendChild(msViewportStyle)
}

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.

Safari procenta zaokrouhlení

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-*-1tří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í:

• Přidejte .pull-rightdo svého posledního sloupce mřížky, abyste získali zarovnání přesně vpravo
• Upravte procenta ručně, abyste získali dokonalé zaokrouhlení pro Safari (obtížnější než první možnost)

Modály, navigační panely a virtuální klávesnice

Přetečení a rolování

Podpora pro overflow: hiddenprvek <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 .

iOS textová pole a rolování

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 .

Virtuální klávesnice

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

Rozbalovací nabídky navigační lišty

Prvek .dropdown-backdropse 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í prohlížeče

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.

Sticky :hover/ :focusna mobilu

I 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, :hoverstyly 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 :hoverstavy Bootstrapu v takových prohlížečích nechtěně „zaseknou“. :focusPodobně 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ů.

Tisk

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

• Přijměte extra malou mřížku a ujistěte se, že pod ní vaše stránka vypadá přijatelně.
• Upravte hodnoty @screen-*proměnných Méně tak, aby byl papír vaší tiskárny považován za větší než extra malý.
• Přidejte vlastní dotazy na média a změňte zarážky velikosti mřížky pouze pro tisková média.

Od Safari v8.0 může také pevná šířka .containers 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:

@media print {
  .container {
    width: auto;
  }
}

Burzovní prohlížeč Android

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

Vyberte nabídky

U <select>prvků nebude prohlížeč akcií Android zobrazovat boční ovládací prvky, pokud je border-radiusa/nebo borderpouž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.

<script>
$(function () {
  var nua = navigator.userAgent
  var isAndroid = (nua.indexOf('Mozilla/5.0') > -1 && nua.indexOf('Android ') > -1 && nua.indexOf('AppleWebKit') > -1 && nua.indexOf('Chrome') === -1)
  if (isAndroid) {
    $('select.form-control').removeClass('form-control').css('width', '100%')
  }
})
</script>

Chcete vidět příklad? Podívejte se na toto demo JS Bin.

Validátory

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 .

Podpora třetích stran

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.

Velikost krabice

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 paddingdě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).

/* Box-sizing resets
 *
 * Reset individual elements or override regions to avoid conflicts due to
 * global box model settings of Bootstrap. Two options, individual overrides and
 * region resets, are available as plain CSS and uncompiled Less formats.
 */

/* Option 1A: Override a single element's box model via CSS */
.element {
  -webkit-box-sizing: content-box;
     -moz-box-sizing: content-box;
          box-sizing: content-box;
}

/* Option 1B: Override a single element's box model by using a Bootstrap Less mixin */
.element {
  .box-sizing(content-box);
}

/* Option 2A: Reset an entire region via CSS */
.reset-box-sizing,
.reset-box-sizing *,
.reset-box-sizing *:before,
.reset-box-sizing *:after {
  -webkit-box-sizing: content-box;
     -moz-box-sizing: content-box;
          box-sizing: content-box;
}

/* Option 2B: Reset an entire region with a custom Less mixin */
.reset-box-sizing {
  &,
  *,
  *:before,
  *:after {
    .box-sizing(content-box);
  }
}
.element {
  .reset-box-sizing();
}

Přístupnost

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 .

Přeskočit navigaci

Pokud vaše navigace obsahuje mnoho odkazů a nachází se před hlavním obsahem v DOM, přidejte Skip to main contentodkaz před navigaci (jednoduché vysvětlení najdete v tomto článku projektu A11Y o odkazech přeskočení navigace ). Použití .sr-onlytřídy vizuálně skryje přeskočený odkaz a .sr-only-focusabletřída zajistí, že odkaz bude viditelný, jakmile bude zaměřen (pro vidoucí uživatele klávesnice).

<body>
  <a href="#content" class="sr-only sr-only-focusable">Skip to main content</a>
  ...
  <div class="container" id="content" tabindex="-1">
    <!-- The main page content -->
  </div>
</body>

Vnořené nadpisy

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 .

Barevný kontrast

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.

Dodatečné zdroje

• Bookmarklet "HTML Codesniffer" pro identifikaci problémů s přístupností
• Rozšíření Accessibility Developer Tools pro Chrome
• Analyzátor barevného kontrastu
• Projekt A11Y
• Dokumentace přístupnosti MDN

Časté dotazy týkající se licencí

Bootstrap je vydán pod licencí MIT a je chráněn autorským zákonem z roku 2019 na Twitteru. Svařeno na menší kousky, lze jej popsat za následujících podmínek.

Vyžaduje, abyste:

• Uschovejte si licenci a upozornění na autorská práva obsažené v souborech CSS a JavaScript Bootstrapu, když je používáte ve svých dílech

Umožňuje vám:

• Zdarma si stáhněte a používejte Bootstrap, jako celek nebo jeho část, pro osobní, soukromé, firemní interní nebo komerční účely
• Použijte Bootstrap v balíčcích nebo distribucích, které vytvoříte
• Upravte zdrojový kód
• Udělte sublicenci k úpravě a distribuci Bootstrapu třetím stranám, které nejsou součástí licence

Zakazuje vám:

• Držte autory a vlastníky licencí odpovědnými za škody, protože Bootstrap je poskytován bez záruky
• Čiňte k odpovědnosti tvůrce nebo držitele autorských práv k Bootstrap
• Redistribuujte jakoukoli část Bootstrapu bez řádného uvedení zdroje
• Používejte jakékoli známky vlastněné Twitterem jakýmkoli způsobem, který by mohl uvádět nebo naznačovat, že Twitter podporuje vaši distribuci
• Používejte jakékoli známky vlastněné Twitterem jakýmkoli způsobem, který by mohl uvádět nebo naznačovat, že jste daný software Twitter vytvořili vy

Nevyžaduje, abyste:

• Zahrňte zdroj samotného Bootstrapu nebo jakýchkoli úprav, které jste na něm provedli, v jakékoli redistribuci, kterou můžete sestavit a která jej obsahuje
• Odešlete změny, které provedete v Bootstrap, zpět do projektu Bootstrap (i když takovou zpětnou vazbu doporučujeme)

Plná licence Bootstrap se nachází v úložišti projektu, kde najdete další informace.

Překlady

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

• Bootstrap 中文文档 (čínština)
• Bootstrap på Dansk (dánština)
• Bootstrap en Français (francouzština)
• Bootstrap auf Deutsch (německy)
• Bootstrap v Italiano (italsky)
• Bootstrap 한국어 (korejština)
• Bootstrap em Português do Brasil (brazilská portugalština)
• Bootstrap по-русски (ruština)
• Bootstrap en Español (španělština)
• Türkçe Bootstrap (turečtina)
• Bootstrap українською (ukrajinsky)
• Bootstrap bằng tiếng Việt (vietnamština)

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.