Letöltés

A Bootstrap (jelenleg v3.4.1) néhány egyszerű módszert kínál a gyors kezdéshez, mindegyik más-más képzettségi szinthez és használati esethez vonzó. Olvassa el, hogy megtudja, mi felel meg az Ön egyedi igényeinek.

jsDelivr

A jsDelivr munkatársai készségesen CDN-támogatást nyújtanak a Bootstrap CSS-hez és JavaScript-hez. Csak használja ezeket a jsDelivr hivatkozásokat.

<!-- 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>

Telepítse Bowerrel

Telepítheti és kezelheti a Bootstrap Less-t, a CSS-t, a JavaScriptet és a betűtípusokat a Bower használatával is :

bower install bootstrap

Telepítse npm-mel

A Bootstrap programot az npm segítségével is telepítheti :

npm install bootstrap@3

require('bootstrap')betölti a Bootstrap összes jQuery beépülő modulját a jQuery objektumra. Maga a bootstrapmodul nem exportál semmit. A Bootstrap jQuery beépülő moduljait manuálisan is betöltheti egyenként, ha betölti a /js/*.jsfájlokat a csomag legfelső szintű könyvtárába.

A Bootstrap package.jsonnéhány további metaadatot tartalmaz a következő kulcsok alatt:

• less- a Bootstrap fő Less forrásfájljának elérési útja
• style- a Bootstrap nem kicsinyített CSS-jének elérési útja, amelyet az alapértelmezett beállításokkal előre lefordítottak (nincs testreszabás)

Telepítse a Composer segítségével

Telepítheti és kezelheti a Bootstrap Less-t, a CSS-t, a JavaScriptet és a betűtípusokat a Composer segítségével is :

composer require twbs/bootstrap

Autoprefixer szükséges a Less/Sass-hoz

A Bootstrap az Autoprefixert használja a CSS szállítói előtagok kezelésére . Ha a Bootstrap-ot Less/Sass forrásból fordítja, és nem a Grunt-fájlunkat használja, akkor magának kell integrálnia az Autoprefixert a felépítési folyamatába. Ha előre lefordított Bootstrap-et vagy Grunt-fájlunkat használja, akkor nem kell aggódnia emiatt, mert az Autoprefixer már integrálva van a Grunt-fájlunkba.

Amit tartalmaz

A Bootstrap kétféle formában tölthető le, amelyeken belül a következő könyvtárakat és fájlokat találja, amelyek logikusan csoportosítják a közös erőforrásokat, és lefordított és kicsinyített változatokat is biztosítanak.

Előre lefordított Bootstrap

A letöltés után bontsa ki a tömörített mappát a (lefordított) Bootstrap szerkezetének megtekintéséhez. Valami ehhez hasonlót fog látni:

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

Ez a Bootstrap legalapvetőbb formája: előre lefordított fájlok a gyors beugró használathoz szinte bármilyen webes projektben. Lefordított CSS-t és JS-t ( bootstrap.*), valamint lefordított és minimalizált CSS-t és JS-t ( bootstrap.min.*) biztosítunk. A CSS - forrástérképek ( bootstrap.*.map) bizonyos böngészők fejlesztői eszközeivel használhatók. A Glyphicons betűtípusait tartalmazza, csakúgy, mint az opcionális Bootstrap témát.

Bootstrap forráskód

A Bootstrap forráskód letöltése tartalmazza az előre lefordított CSS-, JavaScript- és betűkészlet-elemeket, valamint a forrás Less-t, a JavaScript-et és a dokumentációt. Pontosabban a következőket és még sok mást tartalmazza:

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

A less/, js/, és fonts/a CSS, JS és ikon betűtípusaink forráskódja (illetve). A dist/mappa mindent tartalmaz, ami a fenti előre lefordított letöltési részben szerepel. A mappa tartalmazza a dokumentációnk és a Bootstrap használatának docs/forráskódját . examples/Ezen túlmenően minden más mellékelt fájl támogatja a csomagokat, a licencinformációkat és a fejlesztést.

CSS és JavaScript fordítása

A Bootstrap a Gruntot használja felépítési rendszeréhez, amely kényelmes módszerekkel dolgozik a keretrendszerrel. Így fordítjuk le a kódunkat, futtatunk teszteket és így tovább.

Grunt telepítése

A Grunt telepítéséhez először le kell töltenie és telepítenie kell a node.js fájlt (amely tartalmazza az npm-et is). Az npm a csomópontba csomagolt modulok rövidítése, és a fejlesztési függőségek node.js-en keresztüli kezelésére szolgál.

1. grunt-cliGlobális telepítés a következővel npm install -g grunt-cli:.
2. Navigáljon a gyökérkönyvtárba /bootstrap/, majd futtassa a parancsot npm install. Az npm megnézi a package.jsonfájlt, és automatikusan telepíti az ott felsorolt ​​szükséges helyi függőségeket.

Ha elkészült, futtathatja a különböző Grunt-parancsokat a parancssorból.

Elérhető Grunt parancsok

grunt dist(Csak fordítsa le a CSS-t és a JavaScriptet)

Újragenerálja a /dist/könyvtárat lefordított és minimalizált CSS- és JavaScript-fájlokkal. Bootstrap felhasználóként általában ez a kívánt parancs.

grunt watch(Néz)

Figyeli a Kevesebb forrásfájlokat, és automatikusan újrafordítja őket CSS-be, amikor elmenti a változtatást.

grunt test(Futtasson teszteket)

Futtatja a JSHint -et és futtatja a QUnit teszteket valódi böngészőkben a Karmának köszönhetően .

grunt docs(A dokumentumelemek létrehozása és tesztelése)

Létrehozza és teszteli a CSS-t, a JavaScriptet és más eszközöket, amelyeket a dokumentáció helyi futtatásakor használ a következőn keresztül bundle exec jekyll serve.

grunt(Abszolút mindent megépít, és teszteket futtat)

Összeállítja és kicsinyíti a CSS-t és a JavaScriptet, elkészíti a dokumentációs webhelyet, futtatja a HTML5-ellenőrzőt a dokumentumokon, újragenerálja a testreszabó eszközöket, és így tovább. Jekyll szükséges . Általában csak akkor szükséges, ha magát a Bootstrapet hackeli.

Hibaelhárítás

Ha problémákat tapasztal a függőségek telepítése vagy a Grunt parancsok futtatása során, először törölje az /node_modules/npm által generált könyvtárat. Ezután futtassa újra npm install.

Alap sablon

Kezdje ezzel az alapvető HTML-sablonnal, vagy módosítsa ezeket a példákat . Reméljük, hogy sablonjainkat és példáinkat személyre szabja, az Ön igényeihez igazítva azokat.

Másolja ki az alábbi HTML-kódot, hogy elkezdjen dolgozni egy minimális Bootstrap dokumentummal.

<!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éldák

Építsen a fenti alapsablonra a Bootstrap számos összetevőjével. Javasoljuk, hogy testreszabja és adaptálja a Bootstrapet az egyéni projekt igényeihez.

Szerezze meg az alábbi példák forráskódját a Bootstrap lerakat letöltésével . Példák a docs/examples/könyvtárban találhatók.

A keret használata

Kezdő sablon

Semmi, csak az alapok: lefordított CSS és JavaScript egy tárolóval együtt.

Bootstrap téma

Töltse be az opcionális Bootstrap témát a vizuálisan továbbfejlesztett élmény érdekében.

Rácsok

Több példa rácselrendezésre mind a négy szinttel, egymásba ágyazással és még sok mással.

Jumbotron

Építsen a jumbotron köré egy navigációs sáv és néhány alapvető rácsoszlop segítségével.

Keskeny jumbotron

Hozzon létre egy egyedibb oldalt az alapértelmezett tároló és a jumbotron szűkítésével.

Navbarok működés közben

Navbar

Szuper alapsablon, amely tartalmazza a navigációs sávot néhány további tartalommal együtt.

Statikus felső navigációs sáv

Szuper alapsablon statikus felső navigációs sávval és további tartalommal.

Javítva a navigációs sáv

Szuper alapsablon rögzített felső navigációs sávval és további tartalommal.

Egyedi alkatrészek

Borító

Egyoldalas sablon egyszerű és gyönyörű kezdőlapok készítéséhez.

Körhinta

Szabja testre a navigációs sávot és a körhintat, majd adjon hozzá néhány új összetevőt.

Blog

Egyszerű, kétoszlopos blogelrendezés egyéni navigációval, fejléccel és típussal.

Irányítópult

Rögzített oldalsávval és navigációs sávval rendelkező adminisztrátori műszerfal alapvető szerkezete.

Bejelentkezési oldal

Egyedi űrlapelrendezés és -tervezés egy egyszerű bejelentkezési űrlaphoz.

Igazolt nav

Hozzon létre egyéni navigációs sávot igazított hivatkozásokkal. Fel a fejjel! Nem túl Safari-barát.

Ragadós lábléc

Rögzítsen láblécet a nézetablak aljára, ha a tartalom rövidebb nála.

Ragadós lábléc navigációs sávval

Rögzítsen egy láblécet a nézetablak aljára úgy, hogy a tetején egy rögzített navigációs sáv található.

Kísérletek

Nem reagáló Bootstrap

Könnyen letilthatja a Bootstrap reakciókészségét a dokumentumaink szerint .

Vászonon kívül

Hozzon létre egy váltható off-vászon navigációs menüt a Bootstrap használatához.

Eszközök

Bootlint

A Bootlint a hivatalos Bootstrap HTML linter eszköz. Automatikusan ellenőrzi számos gyakori HTML-hibát azokon a weboldalakon, amelyek meglehetősen "vanília" módon használják a Bootstrapet. A Vanilla Bootstrap komponensei/widgetjei megkövetelik, hogy a DOM részeik megfeleljenek bizonyos struktúráknak. A Bootlint ellenőrzi, hogy a Bootstrap összetevők példányai megfelelően strukturált HTML-lel rendelkeznek-e. Fontolja meg a Bootlint hozzáadását a Bootstrap webfejlesztői eszközláncához, hogy a gyakori hibák egyike se lassítsa le projektje fejlődését.

Közösség

Legyen naprakész a Bootstrap fejlesztésével kapcsolatban, és forduljon a közösséghez ezekkel a hasznos forrásokkal.

• Olvassa el és iratkozzon fel a The Official Bootstrap Blogra .
• Csevegés a többi Bootstrapperrel IRC használatával a irc.freenode.netszerveren, a ##bootstrap csatornán .
• A Bootstrap használatához kérjen segítséget a StackOverflow webhelyen a címke használatávaltwitter-bootstrap-3 .
• A fejlesztőknek a kulcsszót bootstrapazokon a csomagokon kell használniuk, amelyek módosítják vagy bővítik a Bootstrap funkcióit, amikor npm -en vagy hasonló kézbesítési mechanizmusokon keresztül terjesztik a maximális felfedezhetőség érdekében.
• Keressen inspiráló példákat arra, hogyan építkeznek a Bootstrap segítségével a Bootstrap Expón .

A Twitteren is követheti a @getbootstrap oldalt a legújabb pletykákért és fantasztikus zenei videókért.

A válaszkészség letiltása

A Bootstrap automatikusan igazítja oldalait a különböző képernyőméretekhez. Így kapcsolhatja ki ezt a funkciót, hogy oldala úgy működjön, mint ez a nem reagáló példa .

Az oldal válaszkészségének letiltásának lépései

1. Hagyja ki a CSS-dokumentumokban<meta> említett nézetablakot
2. Minden rácsszintnél felülírja a widthbe- .containert egyetlen szélességgel, például width: 970px !important;Győződjön meg arról, hogy ez az alapértelmezett Bootstrap CSS után jön. Opcionálisan elkerülheti a !importantmédialekérdezésekkel vagy néhány Selector-fu-val.
3. Navigációs sávok használata esetén távolítsa el az összes navigációs sáv összecsukási és kibontási viselkedését.
4. Rácselrendezésekhez használjon .col-xs-*osztályokat a közepesek/nagyok mellett vagy azok helyett. Ne aggódjon, az extra kicsi készülékrács minden felbontásra méretezhető.

Továbbra is szüksége lesz a Respond.js fájlra az IE8-hoz (mivel a médialekérdezéseink továbbra is jelen vannak, és fel kell dolgozni őket). Ezzel letiltja a Bootstrap „mobilwebhely” szempontjait.

Bootstrap-sablon a válaszkészség letiltásával

Ezeket a lépéseket egy példára alkalmaztuk. Olvassa el a forráskódját a végrehajtott konkrét változtatások megtekintéséhez.

Tekintse meg a nem reagáló példát

Böngésző és eszköz támogatás

A Bootstrap úgy készült, hogy a legjobban a legújabb asztali és mobil böngészőkben működjön, ami azt jelenti, hogy a régebbi böngészők bizonyos összetevők eltérő stílusú, bár teljesen működőképes megjelenítését jeleníthetik meg.

Támogatott böngészők

Konkrétan a következő böngészők és platformok legújabb verzióit támogatjuk.

Azok az alternatív böngészők, amelyek a WebKit, Blink vagy Gecko legújabb verzióját használják, akár közvetlenül, akár a platform webnézet API-ján keresztül, nem támogatottak kifejezetten. A Bootstrapnak azonban (a legtöbb esetben) ezekben a böngészőkben is megfelelően kell megjelennie és működnie. Az alábbiakban részletesebb támogatási információk találhatók.

Mobil eszközök

Általánosságban elmondható, hogy a Bootstrap támogatja az egyes nagyobb platformok alapértelmezett böngészőinek legújabb verzióit. Vegye figyelembe, hogy a proxy böngészők (például Opera Mini, Opera Mobile Turbo mód, UC Browser Mini, Amazon Silk) nem támogatottak.

Asztali böngészők

Hasonlóképpen, a legtöbb asztali böngésző legújabb verziója támogatott.

Windows rendszeren támogatjuk az Internet Explorer 8-11 böngészőt .

A Firefox esetében a legújabb normál stabil kiadás mellett a Firefox legújabb kiterjesztett támogatási kiadását (ESR) is támogatjuk .

Nem hivatalosan a Bootstrapnek elég jól kell kinéznie és viselkednie a Chromiumban és a Chrome for Linuxban, a Firefox for Linuxban és az Internet Explorer 7-ben, valamint a Microsoft Edge-ben, bár ezek hivatalosan nem támogatottak.

Azon böngészőhibák listájáért, amelyekkel a Bootstrapnak meg kell küzdenie, tekintse meg a böngészőhibák falát .

Internet Explorer 8 és 9

Az Internet Explorer 8 és 9 is támogatott, azonban ne feledje, hogy egyes CSS3-tulajdonságokat és HTML5-elemeket ezek a böngészők nem támogatnak teljes mértékben. Ezenkívül az Internet Explorer 8 a Respond.js fájl használatát igényli a médialekérdezések támogatásának engedélyezéséhez.

Látogassa meg a Használhatom... oldalt a CSS3 és HTML5 funkciók böngészők támogatásával kapcsolatos részletekért.

Internet Explorer 8 és Respond.js

Ügyeljen a következő figyelmeztetésekre, ha a Respond.js fájlt használja az Internet Explorer 8 fejlesztői és éles környezetében.

Respond.js és domainek közötti CSS

A Respond.js használata egy másik (al)domainben (például CDN-en) tárolt CSS-sel néhány további beállítást igényel. A részletekért lásd a Respond.js dokumentumokat .

Válasz.js ésfile://

A böngésző biztonsági szabályai miatt a Respond.js nem működik a file://protokollon keresztül megtekintett oldalakkal (például helyi HTML-fájl megnyitásakor). Az IE8 reszponzív funkcióinak teszteléséhez tekintse meg oldalait HTTP(S) protokollon keresztül. A részletekért lásd a Respond.js dokumentumokat .

Válasz.js és@import

A Respond.js nem működik a következőn keresztül hivatkozott CSS-sel @import. Közelebbről ismert, hogy egyes Drupal konfigurációk használnak @import. A részletekért lásd a Respond.js dokumentumokat .

Internet Explorer 8 és dobozméretezés

Az IE8 nem támogatja teljes mértékben , ha a , , , vagy elemekkel box-sizing: border-box;kombinálja . Emiatt a v3.0.1-től már nem használjuk az s-en.min-widthmax-widthmin-heightmax-heightmax-width.container

Internet Explorer 8 és @font-face

Az IE8-nak van néhány problémája a -val @font-facekombinálva :before. A Bootstrap ezt a kombinációt használja a Glyphicon-jaival. Ha egy oldal gyorsítótárban van, és anélkül tölti be, hogy az egeret az ablak fölé viszi (pl. megnyomja a frissítés gombot vagy betölt valamit egy iframe-be), akkor az oldal a betűtípus betöltése előtt renderelődik. Ha az oldal (törzs) fölé viszi az egeret, néhány ikon megjelenik, és a többi ikon fölé viszi azokat is. A részletekért lásd a 13863 -as számot.

IE kompatibilitási módok

A Bootstrap nem támogatott az Internet Explorer régi kompatibilitási módjaiban. Annak érdekében, hogy biztosan a legújabb IE megjelenítési módot használja, fontolja meg a megfelelő <meta>címke elhelyezését az oldalakon:

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

Erősítse meg a dokumentum módot a hibakereső eszközök megnyitásával: nyomja meg F12és jelölje be a „Dokumentum mód” lehetőséget.

Ezt a címkét a Bootstrap összes dokumentációja és példája tartalmazza, hogy biztosítsa a lehető legjobb megjelenítést az Internet Explorer minden támogatott verziójában.

További információért tekintse meg ezt a StackOverflow kérdést .

Internet Explorer 10 Windows 8 és Windows Phone 8 rendszerben

Az Internet Explorer 10 nem különbözteti meg az eszköz szélességét a nézetablak szélességétől , ezért nem alkalmazza megfelelően a médialekérdezéseket a Bootstrap CSS-jében. Általában csak egy gyors CSS-részletet kell hozzáadnia a probléma megoldásához:

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

Ez azonban nem működik a 3-as frissítésnél (más néven GDR3) régebbi Windows Phone 8-verziót futtató eszközökön , mivel az ilyen eszközök többnyire asztali nézetet jelenítenek meg a szűk "telefon" nézet helyett. Ennek megoldásához a következő CSS-t és JavaScriptet kell megadnia a hiba kikerüléséhez .

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

További információért és használati útmutatóért olvassa el a Windows Phone 8 és az Eszközszélesség című részt .

Figyelmeztetésként ezt bemutatjuk a Bootstrap összes dokumentációjában és példájában.

Safari százalékos kerekítés

A Safari 7.1-es OS X-hez és Safari iOS 8.0-hoz verziói előtti verzióinak problémái voltak a .col-*-1rácsosztályainkban használt tizedesjegyek számával. Tehát ha 12 különálló rácsoszlopa lenne, észrevehetné, hogy azok rövidebbek a többi oszlopsorhoz képest. A Safari/iOS frissítése mellett van néhány lehetőség a megoldásra:

• Adja .pull-righthozzá az utolsó rácsoszlopot, hogy megkapja a kemény jobb oldali igazítást
• Módosítsa manuálisan a százalékokat, hogy a tökéletes kerekítést kapja a Safarihoz (nehezebb, mint az első lehetőség)

Modálok, navigációs sávok és virtuális billentyűzetek

Túlcsordulás és görgetés

overflow: hiddenAz <body>elem támogatása meglehetősen korlátozott iOS és Android rendszeren. Ebből a célból, ha valamelyik eszköz böngészőjében átgörget egy modál tetején vagy alján, a <body>tartalom gördülni kezd. Lásd : 175502. számú Chrome-hiba (javítva a Chrome v40-ben) és 153852. számú WebKit-hiba .

iOS szövegmezők és görgetés

Az iOS 9.3-tól kezdve, amíg a modális nyitva van, és ha a görgetés kezdeti érintése egy szöveg <input>vagy egy szöveg határain belül van <textarea>, <body>akkor a modális alatti tartalom görgetésre kerül a modális helyett. Lásd a WebKit 153856. számú hibáját .

Virtuális billentyűzetek

Azt is vegye figyelembe, hogy ha rögzített navigációs sávot vagy modális bemeneteket használ, az iOS-ben van egy olyan megjelenítési hiba, amely nem frissíti a rögzített elemek helyzetét a virtuális billentyűzet aktiválásakor. Ennek néhány megkerülő megoldása az elemek átalakítása position: absolutevagy fókuszidőzítő meghívása a pozicionálás manuális korrigálása érdekében. Ezt nem a Bootstrap kezeli, így Ön dönti el, melyik megoldás a legjobb az alkalmazásához.

Navbar Legördülő menük

A .dropdown-backdropz-indexelés összetettsége miatt az elemet nem használják iOS rendszeren a navigációban. Így a navigációs sávok legördülő menüinek bezárásához közvetlenül a legördülő elemre kell kattintania (vagy bármely más elemre, amely kattintási eseményt indít el iOS rendszerben ).

Böngésző nagyítása

Az oldalnagyítás elkerülhetetlenül renderelési műtermékeket tartalmaz egyes összetevőkben, mind a Bootstrapben, mind az internet többi részén. A problémától függően lehetséges, hogy ki tudjuk javítani (először keressen, majd ha szükséges, nyissa meg a problémát). Ezeket azonban hajlamosak vagyunk figyelmen kívül hagyni, mivel gyakran nincs közvetlen megoldásuk, csak a trükkös megoldások.

Ragadós :hover/ :focusmobilon

Annak ellenére, hogy a valódi lebegés nem lehetséges a legtöbb érintőképernyőn, a legtöbb mobilböngésző emulálja a lebegés támogatását, és :hover„ragadóssá” teszi. Más szavakkal, a :hoverstílusok alkalmazása egy elem megérintése után kezdődik, és csak akkor áll le, ha a felhasználó megérint egy másik elemet. Ez azt okozhatja, hogy a Bootstrap :hoverállapotai nemkívánatos módon „leragadnak” az ilyen böngészőkön. Egyes mobilböngészők is :focushasonlóan ragadóssá teszik. Jelenleg nincs más egyszerű megoldás ezekre a problémákra, mint az ilyen stílusok teljes eltávolítása.

Nyomtatás

Még néhány modern böngészőben is furcsa lehet a nyomtatás.

A Chrome v32-től kezdve és a margóbeállításoktól függetlenül a Chrome a fizikai papírméretnél lényegesen szűkebb nézetablakszélességet használ a médialekérdezések megoldása során egy weboldal nyomtatása közben. Ez azt eredményezheti, hogy a Bootstrap rendkívül kicsi rácsja váratlanul aktiválódik nyomtatás közben. Nézze meg a 12078-as számú kiadást és a 273306 - os Chrome-hibát néhány részletért. Javasolt megoldások:

• Fogja meg az extra kicsi rácsot, és győződjön meg róla, hogy az oldala elfogadhatóan néz ki alatta.
• Szabja testre a @screen-*Less változók értékeit, hogy a nyomtató papírja nagyobb legyen, mint az extra kicsi.
• Adjon hozzá egyéni médialekérdezéseket a rácsméret töréspontjainak módosításához, csak a nyomtatási médiára vonatkozóan.

Ezenkívül a Safari v8.0-tól kezdve a rögzített szélességű .containers miatt a Safari szokatlanul kis betűméretet használhat a nyomtatás során. További részletekért lásd az 14868 -as számú és a 138192 -es számú WebKit-hibát. Ennek egyik lehetséges megoldása a következő CSS hozzáadása:

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

Android részvényböngésző

A dobozból kivéve az Android 4.1-et (és még néhány újabb kiadást is) a Böngésző alkalmazással szállítják alapértelmezett webböngészőként (a Chrome-mal ellentétben). Sajnos a Böngésző alkalmazásban sok hiba és inkonzisztencia van a CSS-sel általában.

Menük kiválasztása

Az <select>elemeken az Android készletböngészője nem jeleníti meg az oldalsó vezérlőket, ha van border-radiusés/vagy borderalkalmazzák. (A részletekért lásd ezt a StackOverflow-kérdést .) Az alábbi kódrészlet segítségével távolítsa el a sértő CSS- t, és <select>jelenítse meg stílustalan elemként az Android tőzsdei böngészőjében. A felhasználói ügynök szippantása elkerüli a Chrome, a Safari és a Mozilla böngészők interferenciáját.

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

Szeretne példát látni? Nézze meg ezt a JS Bin bemutatót.

Validátorok

Annak érdekében, hogy a lehető legjobb élményt nyújtsa a régi és hibás böngészőknek, a Bootstrap több helyen CSS-böngésző-feltöréseket használ , hogy speciális CSS-t célozzon meg bizonyos böngészőverziókra, hogy kikerülje a böngészők hibáit. Ezek a feltörések érthető módon arra késztetik a CSS-ellenőrzőket, hogy érvénytelenek legyenek. Néhány helyen olyan élvonalbeli CSS-szolgáltatásokat is használunk, amelyek még nincsenek teljesen szabványosítva, de ezeket pusztán progresszív fejlesztésre használjuk.

Ezek az érvényesítési figyelmeztetések a gyakorlatban nem számítanak, mivel CSS-ünk nem feltört része teljes mértékben érvényesít, és a feltört részek nem zavarják a nem feltört rész megfelelő működését, ezért szándékosan figyelmen kívül hagyjuk ezeket a figyelmeztetéseket.

HTML-dokumentumaink szintén tartalmaznak néhány triviális és lényegtelen HTML-érvényesítési figyelmeztetést, mivel egy bizonyos Firefox-hiba megoldását tartalmaztuk .

Harmadik fél támogatása

Bár hivatalosan nem támogatunk harmadik féltől származó beépülő modulokat vagy kiegészítőket, adunk néhány hasznos tanácsot a projektek esetleges problémáinak elkerülésére.

Dobozméretezés

Néhány harmadik féltől származó szoftver, beleértve a Google Térképet és a Google Egyéni Keresőmotort, ütközik a Bootstrap programmal a miatt * { box-sizing: border-box; }, amely szabály paddingnem befolyásolja az elem végső számított szélességét. Tudjon meg többet a dobozmodellről és a méretezésről a CSS Tricks oldalon .

A kontextustól függően szükség szerint felülírhatja (1. lehetőség), vagy visszaállíthatja a teljes régiók dobozméretét (2. lehetőség).

/* 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();
}

Megközelíthetőség

A Bootstrap az általános webes szabványokat követi, és minimális extra erőfeszítéssel olyan webhelyek létrehozására használható, amelyek elérhetők az AT -t használók számára .

Navigáció kihagyása

Ha a navigációja sok hivatkozást tartalmaz, és a fő tartalom elé kerül a DOM-ban, adjon hozzá egy Skip to main contenthivatkozást a navigáció elé (egyszerű magyarázatért lásd ezt az A11Y projektet a navigációs hivatkozások kihagyásáról szóló cikkében ). Az .sr-onlyosztály használata vizuálisan elrejti a kihagyó hivatkozást, és az .sr-only-focusableosztály gondoskodik arról, hogy a hivatkozás láthatóvá váljon a fókuszálás után (a látó billentyűzetet használók számára).

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

Beágyazott címsorok

A címsorok ( <h1>- <h6>) beágyazásakor az elsődleges dokumentumfejlécnek an<h1> . A későbbi címsoroknak logikusan kell használniuk <h2>– <h6>így a képernyőolvasók tartalomjegyzéket készíthetnek az oldalaihoz.

Tudjon meg többet a HTML CodeSniffer és a Penn State AccessAbility oldalán .

Színkontraszt

Jelenleg a Bootstrapben elérhető néhány alapértelmezett színkombináció (például a különböző stílusú gombosztályok, az alapvető kódblokkokhoz használt kódkiemelő színek némelyike , a .bg-primary kontextuális háttér segítő osztálya és az alapértelmezett hivatkozásszín, ha fehér alapon használjuk) alacsony kontrasztarányuk van (az ajánlott 4,5:1 arány alatt). ). Ez problémákat okozhat a gyengénlátó vagy színvakok felhasználók számára. Lehetséges, hogy ezeket az alapértelmezett színeket módosítani kell kontrasztjuk és olvashatóságuk növelése érdekében.

További források

• "HTML Codesniffer" könyvjelző a kisegítő lehetőségek azonosításához
• A Chrome Kisegítő lehetőségek Fejlesztői eszközök bővítménye
• Színkontraszt analizátor
• Az A11Y projekt
• MDN akadálymentesítési dokumentáció

Licenc GYIK

A Bootstrap az MIT licence alatt jelenik meg, és szerzői joga a 2019 Twitter. Kisebb darabokra főzve a következő feltételekkel írható le.

Ez megköveteli, hogy:

• Tartsa meg a Bootstrap CSS- és JavaScript-fájljaiban található licencet és szerzői jogi megjegyzést, amikor azokat munkáiban használja

Lehetővé teszi, hogy:

• Ingyenesen töltse le és használja a Bootstrap-et részben vagy egészben személyes, privát, vállalati belső vagy kereskedelmi célokra
• A Bootstrap használata a létrehozott csomagokban vagy disztribúciókban
• Módosítsa a forráskódot
• Adjon allicencet a Bootstrap módosítására és a licencben nem szereplő harmadik felek részére történő terjesztésére

Megtiltja, hogy:

• A szerzők és a licenctulajdonosok felelőssége a károkért, mivel a Bootstrap garancia nélkül biztosított
• Vonja felelősségre a Bootstrap alkotóit vagy szerzői jogainak tulajdonosait
• A Bootstrap bármely részét megfelelő forrásmegjelölés nélkül terjesztheti újra
• Használja a Twitter tulajdonában lévő védjegyeket bármilyen módon, amely azt állítja vagy sugallja, hogy a Twitter támogatja az Ön terjesztését
• Használja a Twitter tulajdonában lévő védjegyeket bármilyen módon, amely azt állítja vagy sugallja, hogy Ön hozta létre a kérdéses Twitter-szoftvert

Nem követeli meg, hogy:

• Tartalmazza magának a Bootstrapnek vagy a rajta végzett bármilyen módosításnak a forrását minden olyan újraterjesztésbe, amelyet magában foglal.
• A Bootstrap-on végrehajtott módosítások visszaküldése a Bootstrap projekthez (bár az ilyen visszajelzést javasoljuk)

További információkért a teljes Bootstrap licenc a projekt tárházában található .

Fordítások

A közösség tagjai különböző nyelvekre fordították le a Bootstrap dokumentációját. Egyik sem támogatott hivatalosan, és előfordulhat, hogy nem mindig naprakész.

• Bootstrap 中文文档 (kínai)
• Bootstrap på Dansk (dán)
• Bootstrap en Français (francia)
• Bootstrap auf Deutsch (német)
• Bootstrap olasz nyelven (olasz)
• Bootstrap 한국어 (koreai)
• Bootstrap em Português do Brasil (brazil portugál)
• Bootstrap по-русски (orosz)
• Bootstrap en Español (spanyol)
• Türkçe Bootstrap (török)
• Bootstrap українською (ukrán)
• Bootstrap bằng tiếng Việt (vietnami)

Nem segítünk a fordítások megszervezésében vagy fogadásában, csak linkeljük őket.

Befejezett egy új vagy jobb fordítást? Nyisson meg egy lehívási kérelmet, hogy hozzáadja a listánkhoz.