Stiahnuť ▼

Bootstrap (aktuálne v3.4.1) má niekoľko jednoduchých spôsobov, ako rýchlo začať, pričom každý z nich je vhodný pre inú úroveň zručností a prípad použitia. Prečítajte si, čo vyhovuje vašim konkrétnym potrebám.

jsDelivr

Ľudia zo spoločnosti jsDelivr láskavo poskytujú podporu CDN pre CSS a JavaScript Bootstrapu. Stačí použiť tieto 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>

Nainštalujte pomocou Bower

Môžete tiež nainštalovať a spravovať Bootstrap's Less, CSS, JavaScript a fonty pomocou Bower :

bower install bootstrap

Nainštalujte pomocou npm

Bootstrap môžete nainštalovať aj pomocou npm :

npm install bootstrap@3

require('bootstrap')načíta všetky zásuvné moduly jQuery Bootstrapu do objektu jQuery. Samotný bootstrapmodul nič neexportuje. Doplnky jQuery od Bootstrapu môžete načítať manuálne jednotlivo načítaním /js/*.jssúborov do adresára najvyššej úrovne balíka.

Bootstrap package.jsonobsahuje niektoré ďalšie metadáta pod nasledujúcimi kľúčmi:

• less- cesta k hlavnému zdrojovému súboru Less Bootstrapu
• style- cesta k neminifikovanému CSS Bootstrapu, ktorý bol predkompilovaný pomocou predvolených nastavení (bez prispôsobenia)

Nainštalujte pomocou programu Composer

Môžete tiež nainštalovať a spravovať Bootstrap's Less, CSS, JavaScript a fonty pomocou Composer :

composer require twbs/bootstrap

Pre Less/Sass sa vyžaduje automatická predpona

Bootstrap používa Autoprefixer na riešenie prefixov dodávateľov CSS . Ak kompilujete Bootstrap z jeho zdroja Less/Sass a nepoužívate náš súbor Gruntfile, budete musieť do procesu zostavovania integrovať Autoprefixer sami. Ak používate predkompilovaný Bootstrap alebo používate náš Gruntfile, nemusíte sa o to starať, pretože Autoprefixer je už integrovaný do nášho Gruntfile.

Čo je zahrnuté

Bootstrap je možné stiahnuť v dvoch formách, v rámci ktorých nájdete nasledujúce adresáre a súbory, ktoré logicky zoskupujú bežné zdroje a poskytujú kompilované aj minimizované variácie.

Predkompilovaný bootstrap

Po stiahnutí rozbaľte komprimovaný priečinok, aby ste videli štruktúru (skompilovaného) Bootstrapu. Uvidíte niečo takéto:

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 najzákladnejšia forma Bootstrapu: predkompilované súbory na rýchle použitie v takmer akomkoľvek webovom projekte. Poskytujeme kompilované CSS a JS ( bootstrap.*), ako aj kompilované a minifikované CSS a JS ( bootstrap.min.*). Zdrojové mapy CSS ( bootstrap.*.map) sú k dispozícii na použitie s vývojovými nástrojmi určitých prehliadačov. Písma z Glyphicons sú zahrnuté, rovnako ako voliteľná téma Bootstrap.

Bootstrap zdrojový kód

Zdrojový kód Bootstrap na stiahnutie obsahuje predkompilované prvky CSS, JavaScript a písma spolu so zdrojovým kódom Less, JavaScript a dokumentáciou. Konkrétnejšie zahŕňa nasledujúce a ďalšie:

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

, less/, js/a fonts/sú zdrojovým kódom našich CSS, JS a ikonových fontov (v tomto poradí). Priečinok dist/obsahuje všetko, čo je uvedené v predkompilovanej sekcii sťahovania vyššie. Priečinok docs/obsahuje zdrojový kód pre našu dokumentáciu a examples/používanie Bootstrapu. Okrem toho každý ďalší zahrnutý súbor poskytuje podporu pre balíky, licenčné informácie a vývoj.

Kompilácia CSS a JavaScriptu

Bootstrap používa Grunt pre svoj systém zostavovania s pohodlnými metódami práce s rámcom. Takto kompilujeme náš kód, spúšťame testy a podobne.

Inštalácia Grunt

Ak chcete nainštalovať Grunt, musíte si najprv stiahnuť a nainštalovať node.js (ktorý zahŕňa npm). npm znamená moduly zabalené v uzloch a je to spôsob, ako spravovať závislosti vývoja prostredníctvom node.js.

1. Nainštalujte grunt-cliglobálne pomocou npm install -g grunt-cli.
2. Prejdite do koreňového /bootstrap/adresára a potom spustite npm install. npm sa pozrie na package.jsonsúbor a automaticky nainštaluje potrebné lokálne závislosti, ktoré sú tam uvedené.

Po dokončení budete môcť spustiť rôzne príkazy Grunt poskytované z príkazového riadku.

Dostupné príkazy Grunt

grunt dist(Stačí skompilovať CSS a JavaScript)

Regeneruje /dist/adresár pomocou kompilovaných a miniifikovaných súborov CSS a JavaScript. Ako používateľ Bootstrapu je to zvyčajne príkaz, ktorý chcete.

grunt watch(sledovať)

Sleduje zdrojové súbory Less a automaticky ich prekompiluje do CSS vždy, keď uložíte zmenu.

grunt test(Spustiť testy)

Spúšťa JSHint a spúšťa testy QUnit v skutočných prehliadačoch vďaka Karme .

grunt docs(Vytvorte a otestujte podklady dokumentov)

Vytvára a testuje CSS, JavaScript a ďalšie prvky, ktoré sa používajú pri lokálnom spúšťaní dokumentácie cez bundle exec jekyll serve.

grunt(Postavte úplne všetko a spustite testy)

Kompiluje a minimalizuje CSS a JavaScript, vytvára webovú stránku s dokumentáciou, spúšťa validátor HTML5 v porovnaní s dokumentmi, regeneruje prvky Customizer a ďalšie. Vyžaduje Jekylla . Zvyčajne je to potrebné iba vtedy, ak hackujete samotný Bootstrap.

Riešenie problémov

Ak narazíte na problémy s inštaláciou závislostí alebo spustením príkazov Grunt, najprv odstráňte /node_modules/adresár vygenerovaný npm. Potom znova spustite npm install.

Základná šablóna

Začnite s touto základnou šablónou HTML alebo upravte tieto príklady . Dúfame, že si prispôsobíte naše šablóny a príklady a prispôsobíte ich tak, aby vyhovovali vašim potrebám.

Skopírujte nižšie uvedený kód HTML a začnite pracovať s minimálnym dokumentom 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>

Príklady

Stavte na základnej šablóne vyššie s mnohými komponentmi Bootstrap. Odporúčame vám prispôsobiť a prispôsobiť Bootstrap tak, aby vyhovoval vašim individuálnym potrebám projektu.

Získajte zdrojový kód pre každý príklad nižšie stiahnutím úložiska Bootstrap . Príklady nájdete v docs/examples/adresári.

Používanie rámca

Štartovacia šablóna

Nič okrem základov: skompilované CSS a JavaScript spolu s kontajnerom.

Téma bootstrap

Nahrajte si voliteľnú tému Bootstrap pre vizuálne vylepšený zážitok.

Mriežky

Viacero príkladov rozloženia mriežky so všetkými štyrmi vrstvami, vnorením a ďalšími.

Jumbotron

Stavajte okolo jumbotronu pomocou navigačnej lišty a niekoľkých základných stĺpcov mriežky.

Úzky jumbotron

Vytvorte si vlastnú stránku zúžením predvoleného kontajnera a jumbotronu.

Navigačné lišty v akcii

Navbar

Super základná šablóna, ktorá obsahuje navigačný panel spolu s ďalším obsahom.

Statická horná navigačná lišta

Super základná šablóna so statickým horným navigačným panelom spolu s nejakým ďalším obsahom.

Pevná navigačná lišta

Super základná šablóna s pevnou hornou navigačnou lištou spolu s nejakým ďalším obsahom.

Vlastné komponenty

Kryt

Jednostránková šablóna na vytváranie jednoduchých a krásnych domovských stránok.

Kolotoč

Prispôsobte si navigačný panel a karusel a potom pridajte nejaké nové komponenty.

Blog

Jednoduché rozloženie blogu v dvoch stĺpcoch s vlastnou navigáciou, hlavičkou a typom.

Dashboard

Základná štruktúra pre administračný panel s pevným bočným panelom a navigačným panelom.

Prihlasovacia stránka

Vlastné rozloženie a dizajn formulára pre jednoduchý prihlasovací formulár.

Zdôvodnené nav

Vytvorte si vlastný navigačný panel so zarovnanými odkazmi. Hlavy hore! Nie príliš priateľský k Safari.

Lepiaca päta

Keď je obsah kratší, pripojte pätu k spodnej časti zobrazovanej oblasti.

Lepiaca päta s navigačným panelom

Pripojte pätu k spodnej časti výrezu s pevnou navigačnou lištou v hornej časti.

Experimenty

Nereagujúci bootstrap

Jednoducho zakážte odozvu Bootstrapu podľa našich dokumentov .

Mimo plátna

Vytvorte prepínateľnú navigačnú ponuku mimo plátna na použitie s Bootstrapom.

Nástroje

Bootlint

Bootlint je oficiálny nástroj Bootstrap HTML linter . Automaticky kontroluje niekoľko bežných chýb HTML na webových stránkach, ktoré používajú Bootstrap pomerne „vanilkovým“ spôsobom. Komponenty/widgety Vanilla Bootstrap vyžadujú, aby ich časti DOM vyhovovali určitým štruktúram. Bootlint kontroluje, či inštancie komponentov Bootstrap majú správne štruktúrované HTML. Zvážte pridanie Bootlint do svojho reťazca nástrojov na vývoj webu Bootstrap, aby žiadna z bežných chýb nespomalila vývoj vášho projektu.

Spoločenstva

Zostaňte v obraze o vývoji Bootstrapu a oslovte komunitu pomocou týchto užitočných zdrojov.

• Prečítajte si a prihláste sa na odber oficiálneho blogu Bootstrap .
• Chatujte s ostatnými bootstrapermi pomocou IRC na irc.freenode.netserveri, v kanáli ##bootstrap .
• Ak potrebujete pomoc pri používaní Bootstrapu, požiadajte o StackOverflow pomocou značkytwitter-bootstrap-3 .
• Vývojári by mali používať kľúčové slovo bootstrapna balíkoch, ktoré upravujú alebo pridávajú funkcie Bootstrapu pri distribúcii prostredníctvom npm alebo podobných mechanizmov doručovania, aby bola dosiahnutá maximálna viditeľnosť.
• Nájdite inšpiratívne príklady budovania ľudí pomocou Bootstrap na Bootstrap Expo .

Môžete tiež sledovať @getbootstrap na Twitteri , kde nájdete najnovšie klebety a úžasné hudobné videá.

Vypnutie odozvy

Bootstrap automaticky prispôsobí vaše stránky rôznym veľkostiam obrazovky. Tu je postup, ako túto funkciu zakázať, aby vaša stránka fungovala ako v tomto príklade, keď nereaguje .

Kroky na zakázanie odozvy stránky

1. Vynechajte zobrazenú oblasť <meta>uvedenú v dokumentoch CSS
2. Prepíšte widthna .containerpre každú vrstvu mriežky jednou šírkou, napríklad width: 970px !important;Uistite sa, že toto nasleduje za predvoleným CSS Bootstrap. Voliteľne sa môžete vyhnúť !importantdopytom na médiá alebo niektorým selektorom.
3. Ak používate navigačné lišty, odstráňte všetky stláčacie a rozširujúce sa lišty.
4. Pre rozloženie mriežky použite .col-xs-*triedy okrem alebo namiesto stredných/veľkých tried. Nebojte sa, extra malá mriežka zariadenia sa prispôsobí všetkým rozlíšeniam.

Stále budete potrebovať Respond.js pre IE8 (keďže naše mediálne dopyty stále existujú a je potrebné ich spracovať). Toto zakáže aspekty „mobilnej stránky“ Bootstrapu.

Bootstrap šablóna so zakázanou odozvou

Tieto kroky sme použili na príklade. Prečítajte si jeho zdrojový kód, aby ste videli konkrétne implementované zmeny.

Zobraziť príklad nereagovania

Podpora prehliadača a zariadenia

Bootstrap je navrhnutý tak, aby čo najlepšie fungoval v najnovších prehliadačoch pre stolné počítače a mobilné zariadenia, čo znamená, že staršie prehliadače môžu zobrazovať rôzne štýlové, aj keď plne funkčné vykreslenia určitých komponentov.

Podporované prehliadače

Konkrétne podporujeme najnovšie verzie nasledujúcich prehliadačov a platforiem.

Alternatívne prehliadače, ktoré používajú najnovšiu verziu WebKit, Blink alebo Gecko, či už priamo alebo cez webové rozhranie API platformy, nie sú výslovne podporované. Bootstrap by sa však mal (vo väčšine prípadov) správne zobrazovať a fungovať aj v týchto prehliadačoch. Podrobnejšie informácie o podpore sú uvedené nižšie.

Mobilné zariadenia

Všeobecne povedané, Bootstrap podporuje najnovšie verzie predvolených prehliadačov každej hlavnej platformy. Upozorňujeme, že proxy prehliadače (ako Opera Mini, Turbo režim Opera Mobile, UC Browser Mini, Amazon Silk) nie sú podporované.

Desktopové prehliadače

Podobne sú podporované najnovšie verzie väčšiny prehliadačov pre stolné počítače.

V systéme Windows podporujeme Internet Explorer 8-11 .

V prípade Firefoxu okrem najnovšieho normálneho stabilného vydania podporujeme aj najnovšiu verziu Firefoxu s rozšírenou podporou (ESR) .

Neoficiálne by mal Bootstrap vyzerať a správať sa dostatočne dobre v prehliadačoch Chromium a Chrome pre Linux, Firefox pre Linux a Internet Explorer 7, ako aj Microsoft Edge, hoci nie sú oficiálne podporované.

Zoznam niektorých chýb prehliadača, s ktorými sa musí Bootstrap potýkať, nájdete v našej Nástenke s chybami prehliadača .

Internet Explorer 8 a 9

Podporované sú aj Internet Explorer 8 a 9, avšak uvedomte si, že niektoré vlastnosti CSS3 a prvky HTML5 tieto prehliadače plne nepodporujú. Okrem toho Internet Explorer 8 vyžaduje použitie Respond.js na povolenie podpory mediálnych dopytov.

Podrobnosti o podpore funkcií CSS3 a HTML5 v prehliadači nájdete na stránke Môžem použiť....

Internet Explorer 8 a Respond.js

Pri používaní Respond.js vo vývojových a produkčných prostrediach pre Internet Explorer 8 si dávajte pozor na nasledujúce upozornenia.

Respond.js a CSS medzi doménami

Používanie Respond.js s CSS hosteným na inej (sub)doméne (napríklad na CDN) si vyžaduje dodatočné nastavenie. Podrobnosti nájdete v dokumentoch Respond.js .

Respond.js afile://

Kvôli bezpečnostným pravidlám prehliadača Respond.js nefunguje so stránkami zobrazovanými cez file://protokol (napríklad pri otváraní lokálneho súboru HTML). Ak chcete otestovať responzívne funkcie v prehliadači IE8, zobrazte svoje stránky cez HTTP(S). Podrobnosti nájdete v dokumentoch Respond.js .

Respond.js a@import

Respond.js nefunguje s CSS, na ktoré sa odkazuje cez @import. Najmä je známe, že niektoré konfigurácie Drupal používajú @import. Podrobnosti nájdete v dokumentoch Respond.js .

Internet Explorer 8 a veľkosť krabice

IE8 plne nepodporuje box-sizing: border-box;v kombinácii s min-width, max-width, min-heightalebo max-height. Z tohto dôvodu od verzie 3.0.1 už nepoužívame max-widthna .containers.

Internet Explorer 8 a @font-face

IE8 má @font-facev kombinácii s :before. Bootstrap používa túto kombináciu so svojimi Glyphicons. Ak sa stránka uloží do vyrovnávacej pamäte a načíta sa bez myši nad oknom (tj stlačíte tlačidlo obnovenia alebo načítate niečo do prvku iframe), stránka sa vykreslí pred načítaním písma. Po umiestnení kurzora myši na stránku (telo) sa zobrazia niektoré ikony a pri umiestnení kurzora myši na zostávajúce ikony sa zobrazia tiež. Podrobnosti nájdete vo vydaní #13863 .

Režimy kompatibility s IE

Bootstrap nie je podporovaný v starých režimoch kompatibility programu Internet Explorer. Ak chcete mať istotu, že používate najnovší režim vykresľovania pre IE, zvážte zahrnutie vhodnej <meta>značky na svoje stránky:

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

Potvrďte režim dokumentu otvorením nástrojov na ladenie: stlačte F12a začiarknite „Režim dokumentu“.

Táto značka je súčasťou celej dokumentácie a príkladov Bootstrapu, aby sa zabezpečilo najlepšie možné vykreslenie v každej podporovanej verzii Internet Explorera.

Viac informácií nájdete v tejto otázke StackOverflow .

Internet Explorer 10 v systéme Windows 8 a Windows Phone 8

Internet Explorer 10 nerozlišuje šírku zariadenia od šírky zobrazovanej oblasti, a preto správne neaplikuje mediálne dotazy v CSS Bootstrapu. Normálne by ste to vyriešili pridaním krátkeho úryvku CSS:

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

Toto však nefunguje pre zariadenia so systémom Windows Phone 8 verzie staršie ako aktualizácia 3 (známa ako GDR3) , pretože to spôsobuje, že takéto zariadenia zobrazujú väčšinou zobrazenie pracovnej plochy namiesto úzkeho zobrazenia „telefónu“. Aby ste to vyriešili, budete musieť zahrnúť nasledujúce CSS a JavaScript, aby ste túto chybu vyriešili .

@-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)
}

Ďalšie informácie a pokyny na používanie nájdete v časti Windows Phone 8 a Device-Width .

V prvom rade to zahrnieme do celej dokumentácie a príkladov Bootstrapu ako ukážku.

Safari percent zaokrúhľovanie

Vykresľovacie jadro verzií Safari starších ako 7.1 pre OS X a Safari pre iOS v8.0 malo určité problémy s počtom desatinných miest používaných v našich .col-*-1triedach mriežky. Ak by ste teda mali 12 jednotlivých stĺpcov mriežky, všimli by ste si, že sú v porovnaní s inými riadkami stĺpcov krátke. Okrem inovácie Safari/iOS máte niekoľko možností na riešenia:

• Pridajte .pull-rightdo posledného stĺpca mriežky, aby ste dosiahli zarovnanie presne vpravo
• Upravte percentá manuálne, aby ste dosiahli dokonalé zaokrúhlenie pre Safari (ťažšie ako prvá možnosť)

Modály, navigačné panely a virtuálne klávesnice

Pretečenie a rolovanie

Podpora overflow: hiddenprvku <body>je v systémoch iOS a Android dosť obmedzená. Za týmto účelom, keď prejdete za hornú alebo spodnú časť modálu v jednom z prehliadačov týchto zariadení, <body>obsah sa začne posúvať. Pozrite si chybu Chrome č. 175502 (opravená v Chrome v40) a chybu WebKit č. 153852 .

iOS textové polia a rolovanie

Od iOS 9.3, keď je modálny režim otvorený, ak je prvý dotyk posúvacieho gesta v rámci textu <input>alebo <textarea>, <body>bude sa posúvať obsah pod modálom namiesto samotného modálu. Pozrite si chybu WebKit č. 153856 .

Virtuálne klávesnice

Upozorňujeme tiež, že ak používate pevnú navigačnú lištu alebo používate vstupy v rámci modálu, iOS má chybu vykresľovania, ktorá neaktualizuje polohu pevných prvkov pri spustení virtuálnej klávesnice. Niekoľko riešení tohto problému zahŕňa transformáciu vašich prvkov na position: absolutealebo spustenie časovača so zameraním, aby ste sa pokúsili manuálne opraviť umiestnenie. Bootstrap to nerieši, takže je na vás, aby ste sa rozhodli, ktoré riešenie je pre vašu aplikáciu najlepšie.

Rozbaľovacie ponuky navigačného panela

Prvok .dropdown-backdropsa nepoužíva v systéme iOS v navigácii kvôli zložitosti indexovania z. Ak teda chcete zatvoriť rozbaľovacie ponuky v navigačných paneloch, musíte priamo kliknúť na prvok rozbaľovacej ponuky (alebo na akýkoľvek iný prvok, ktorý spustí udalosť kliknutia v systéme iOS ).

Priblíženie prehliadača

Zväčšovanie stránky nevyhnutne predstavuje artefakty vykresľovania v niektorých komponentoch, v Bootstrape aj vo zvyšku webu. V závislosti od problému ho možno budeme vedieť opraviť (najskôr vyhľadajte a potom v prípade potreby otvorte problém). Máme však tendenciu ich ignorovať, pretože často nemajú žiadne priame riešenie okrem hackingových riešení.

Sticky :hover/ :focusna mobile

Aj keď skutočné vznášanie nie je možné na väčšine dotykových obrazoviek, väčšina mobilných prehliadačov emuluje podporu vznášania a vytvára :hover„lepkavý“. Inými slovami, :hoverštýly sa začnú používať po klepnutí na prvok a prestanú sa používať až po klepnutí používateľa na iný prvok. To môže spôsobiť, že :hoverstavy Bootstrapu sa v takýchto prehliadačoch nežiaduco „zaseknú“. :focusPodobne lepkavé sú aj niektoré mobilné prehliadače . V súčasnosti neexistuje žiadne jednoduché riešenie týchto problémov, okrem úplného odstránenia takýchto štýlov.

Tlač

Dokonca aj v niektorých moderných prehliadačoch môže byť tlač nepredvídateľná.

Najmä od prehliadača Chrome v32 a bez ohľadu na nastavenia okrajov používa prehliadač Chrome pri riešení mediálnych dopytov počas tlače webovej stránky šírku výrezu výrazne užšiu, než je veľkosť fyzického papiera. To môže mať za následok neočakávanú aktiváciu extra malej mriežky Bootstrapu pri tlači. Niektoré podrobnosti nájdete vo vydaní č. 12078 a chybe prehliadača Chrome č. 273306 . Navrhované riešenia:

• Využite extra malú mriežku a uistite sa, že vaša stránka pod ňou vyzerá prijateľne.
• Prispôsobte hodnoty @screen-*premenných Menej tak, aby sa papier vašej tlačiarne považoval za väčší ako extra malý.
• Pridajte vlastné dotazy na médiá, aby ste zmenili zarážky veľkosti mriežky iba pre tlačové médiá.

Od verzie Safari 8.0 môže pevná šírka .containers spôsobiť, že Safari pri tlači použije nezvyčajne malú veľkosť písma. Ďalšie podrobnosti nájdete v č. 14868 a chybe WebKit č. 138192 . Jedným z možných riešení je pridanie nasledujúceho CSS:

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

Burzový prehliadač Android

Po vybalení sa Android 4.1 (a dokonca aj niektoré novšie vydania zjavne) dodáva s aplikáciou Prehliadač ako predvoleným webovým prehliadačom (na rozdiel od prehliadača Chrome). Aplikácia Prehliadač má bohužiaľ veľa chýb a nezrovnalostí s CSS vo všeobecnosti.

Vyberte ponuky

Na <select>prvkoch nebude prehliadač akcií Android zobrazovať bočné ovládacie prvky, ak je border-radiusa/alebo borderaplikované. (Podrobnosti nájdete v tejto otázke StackOverflow .) Pomocou úryvku kódu nižšie odstráňte nevhodný CSS a vykreslite <select>prvok ako neštylizovaný prvok v prehliadači Android. Čuchanie používateľského agenta zabraňuje interferencii s prehliadačmi 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 vidieť príklad? Pozrite si toto demo JS Bin.

Validátori

S cieľom poskytnúť najlepší možný zážitok starým a chybným prehliadačom používa Bootstrap na niekoľkých miestach hacky prehliadača CSS na zacielenie špeciálnych CSS na určité verzie prehliadačov, aby obišiel chyby v samotných prehliadačoch. Tieto hacky pochopiteľne spôsobujú, že validátory CSS sa sťažujú, že sú neplatné. Na niekoľkých miestach používame aj špičkové funkcie CSS, ktoré ešte nie sú úplne štandardizované, ale používajú sa výlučne na progresívne vylepšenie.

Tieto upozornenia na overenie v praxi nie sú dôležité, pretože nehacknutá časť nášho CSS sa plne overuje a hacknuté časti nezasahujú do správneho fungovania nehacknutej časti, preto tieto konkrétne upozornenia zámerne ignorujeme.

Naše dokumenty HTML tiež obsahujú triviálne a bezvýznamné upozornenia na overenie kódu HTML, pretože sme zahrnuli riešenie pre určitú chybu Firefoxu .

Podpora tretích strán

Aj keď oficiálne nepodporujeme žiadne doplnky alebo doplnky tretích strán, ponúkame niekoľko užitočných rád, ktoré vám pomôžu vyhnúť sa potenciálnym problémom vo vašich projektoch.

Veľkosť krabice

Niektorý softvér tretích strán, vrátane Google Maps a Google Custom Search Engine, je v konflikte s Bootstrap kvôli * { box-sizing: border-box; }, pravidlu, ktoré to robí, paddingnemá vplyv na konečnú vypočítanú šírku prvku. Viac informácií o modeli krabice a veľkosti nájdete na stránke CSS Tricks .

V závislosti od kontextu môžete podľa potreby prepísať (možnosť 1) alebo zmeniť veľkosť polí pre celé oblasti (možnosť 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();
}

Prístupnosť

Bootstrap sa riadi bežnými webovými štandardmi a – s minimálnym úsilím navyše – sa dá použiť na vytváranie stránok, ktoré sú prístupné pre používateľov AT .

Preskočiť navigáciu

Ak vaša navigácia obsahuje veľa odkazov a nachádza sa pred hlavným obsahom v DOM, pridajte Skip to main contentodkaz pred navigáciu (jednoduché vysvetlenie nájdete v tomto článku projektu A11Y o preskočení navigačných odkazov ). Použitím .sr-onlytriedy sa odkaz na preskočenie vizuálne skryje a .sr-only-focusabletrieda zaistí, že po zameraní bude odkaz viditeľný (pre vidiacich používateľov 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>

Vnorené nadpisy

Pri vnorení hlavičiek ( <h1>- <h6>) by hlavička primárneho dokumentu mala byť <h1>. Nasledujúce nadpisy by mali logicky využívať <h2>– <h6>tak, aby čítačky obrazovky mohli zostaviť obsah vašich stránok.

Viac informácií nájdete na stránkach HTML CodeSniffer a AccessAbility Penn State .

Farebný kontrast

V súčasnosti sú v Bootstrape dostupné niektoré z predvolených farebných kombinácií (ako sú rôzne štýlové triedy tlačidiel, niektoré farby zvýrazňovania kódu používané pre základné bloky kódu , .bg-primary kontextová pomocná trieda pozadia a predvolená farba odkazu pri použití na bielom pozadí) majú nízky kontrastný pomer (pod odporúčaným pomerom 4,5:1 ). To môže spôsobiť problémy používateľom so slabým zrakom alebo farboslepým. Tieto predvolené farby možno bude potrebné upraviť, aby sa zvýšil ich kontrast a čitateľnosť.

Dodatočné zdroje

• Bookmarklet „HTML Codesniffer“ na identifikáciu problémov s prístupnosťou
• Rozšírenie Accessibility Developer Tools pre Chrome
• Analyzátor farebného kontrastu
• Projekt A11Y
• Dokumentácia o dostupnosti MDN

Časté otázky o licenciách

Bootstrap je vydaný pod licenciou MIT a vlastní autorské práva na Twitter z roku 2019. Rozvarené na menšie kúsky, možno ho opísať za nasledujúcich podmienok.

Vyžaduje sa, aby ste:

• Uchovajte si licenciu a upozornenie o autorských právach zahrnuté v súboroch CSS a JavaScript Bootstrapu, keď ich používate vo svojich dielach

Umožňuje vám:

• Voľne si stiahnite a používajte Bootstrap, celý alebo jeho časť, na osobné, súkromné, firemné interné alebo komerčné účely
• Použite Bootstrap v balíkoch alebo distribúciách, ktoré vytvoríte
• Upravte zdrojový kód
• Udeľte sublicenciu na úpravu a distribúciu Bootstrapu tretím stranám, ktoré nie sú zahrnuté v licencii

Zakazuje vám:

• Držte autorov a vlastníkov licencií na zodpovednosť za škody, pretože Bootstrap sa poskytuje bez záruky
• Držte tvorcov alebo držiteľov autorských práv Bootstrap na zodpovednosť
• Redistribuujte akúkoľvek časť Bootstrapu bez riadneho uvedenia zdroja
• Používajte akékoľvek známky, ktoré vlastní Twitter, akýmkoľvek spôsobom, ktorý by mohol tvrdiť alebo naznačovať, že Twitter podporuje vašu distribúciu
• Používajte akékoľvek značky, ktoré vlastní Twitter, akýmkoľvek spôsobom, ktorý by mohol tvrdiť alebo naznačovať, že ste daný softvér Twitter vytvorili vy

Nevyžaduje sa, aby ste:

• Zahrňte zdroj samotného Bootstrapu alebo akýchkoľvek úprav, ktoré ste na ňom vykonali, do akejkoľvek redistribúcie, ktorú môžete zostaviť a ktorá ho obsahuje
• Odošlite zmeny, ktoré vykonáte v Bootstrap, späť do projektu Bootstrap (hoci takúto spätnú väzbu odporúčame)

Úplná licencia Bootstrap sa nachádza v úložisku projektu, kde nájdete ďalšie informácie.

Preklady

Členovia komunity preložili dokumentáciu Bootstrapu do rôznych jazykov. Žiadne z nich nie sú oficiálne podporované a nemusia byť vždy aktuálne.

• Bootstrap 中文文档 (čínština)
• Bootstrap på Dansk (dánčina)
• Bootstrap en Français (francúzština)
• Bootstrap auf Deutsch (nemčina)
• Bootstrap v Italiano (taliančina)
• Bootstrap 한국어 (kórejčina)
• Bootstrap em Português do Brasil (brazílska portugalčina)
• Bootstrap по-русски (ruština)
• Bootstrap en Español (španielčina)
• Türkçe Bootstrap (turečtina)
• Bootstrap українською (ukrajinský)
• Bootstrap bằng tiếng Việt (vietnamčina)

Nepomáhame organizovať alebo hostiť preklady, len na ne odkazujeme.

Dokončili ste nový alebo lepší preklad? Otvorte žiadosť o stiahnutie a pridajte ju do nášho zoznamu.