Download

Bootstrap (aktuell v3.4.1) huet e puer einfach Weeër fir séier unzefänken, jidderee appelléiert op en anere Fäegkeetsniveau a Gebrauchsfall. Liest duerch fir ze kucken wat Äre Besoinen entsprécht.

jsDelivr

D'Leit iwwer jsDelivr bidden gnädeg CDN Ënnerstëtzung fir Bootstrap's CSS a JavaScript. Benotzt just dës jsDelivr Linken.

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

Installéiert mat Bower

Dir kënnt och Bootstrap's Less, CSS, JavaScript, a Schrëften mat Bower installéieren a verwalten :

bower install bootstrap

Installéiert mat npm

Dir kënnt och Bootstrap mat npm installéieren :

npm install bootstrap@3

require('bootstrap')lued all Bootstrap's jQuery Plugins op den jQuery Objet. De bootstrapModul selwer exportéiert näischt. Dir kënnt Bootstrap's jQuery Plugins manuell individuell lueden andeems Dir d' /js/*.jsDateien ënner dem Top-Level Verzeichnis vum Package lued.

Bootstrap's package.jsonenthält e puer zousätzlech Metadaten ënner de folgende Schlësselen:

• less- Wee op d'Bootstrap Haaptmanner Quelldatei
• style- Wee op Bootstrap's net-minifizéiert CSS dee virkompiléiert gouf mat de Standardastellungen (keng Personnalisatioun)

Installéiert mat Composer

Dir kënnt och Bootstrap's Less, CSS, JavaScript, a Schrëften mat Composer installéieren a verwalten :

composer require twbs/bootstrap

Autoprefixer néideg fir Manner / Sass

Bootstrap benotzt Autoprefixer fir mat CSS Verkeefer Präfixe ze këmmeren . Wann Dir Bootstrap aus senger Less / Sass Quell kompiléiert an eis Gruntfile net benotzt, musst Dir Autoprefixer selwer an Äre Bauprozess integréieren. Wann Dir prekompiléiert Bootstrap benotzt oder eis Gruntfile benotzt, musst Dir Iech keng Suergen doriwwer maachen, well Autoprefixer ass schonn an eiser Gruntfile integréiert.

Wat ass mat abegraff

Bootstrap ass an zwou Formen erofzelueden, an deenen Dir déi folgend Verzeichnisser a Dateien fannt, logesch gemeinsam Ressourcen gruppéiere a béid kompiléiert a minifizéiert Variatiounen ubidden.

Prekompiléiert Bootstrap

Eemol erofgelueden, unzip de kompriméierten Dossier fir d'Struktur vum (de kompiléierten) Bootstrap ze gesinn. Dir gesitt esou eppes:

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

Dëst ass déi elementarst Form vu Bootstrap: virkompiléiert Dateie fir séier Drop-in Notzung a bal all Webprojet. Mir bidden kompiléiert CSS a JS ( bootstrap.*), souwéi kompiléiert a minifizéiert CSS a JS ( bootstrap.min.*). CSS Quell Kaarten ( bootstrap.*.map) si verfügbar fir ze benotzen mat bestëmmte Browser Entwéckler Tools. Schrëfte vu Glyphicons sinn abegraff, sou wéi dat optional Bootstrap Thema.

Bootstrap Quellcode

De Bootstrap Quellcode Download enthält déi virkompiléiert CSS, JavaScript, a Schrëftverméigen, zesumme mat Quelle Manner, JavaScript, an Dokumentatioun. Méi spezifesch enthält et déi folgend a méi:

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

D' less/, js/, a fonts/sinn de Quellcode fir eis CSS, JS, an Ikon Schrëften (respektiv). Den dist/Dossier enthält alles wat an der virkompiléierter Downloadsektioun uewen opgezielt ass. Den docs/Dossier enthält de Quellcode fir eis Dokumentatioun, a examples/vun der Bootstrap Benotzung. Doriwwer eraus bitt all aner abegraff Datei Ënnerstëtzung fir Packagen, Lizenzinformatioun an Entwécklung.

CSS a JavaScript kompiléieren

Bootstrap benotzt Grunt fir säi Bausystem, mat praktesche Methoden fir mam Kader ze schaffen. Et ass wéi mir eise Code kompiléieren, Tester ausféieren, a méi.

Grunt installéieren

Fir Grunt z'installéieren, musst Dir als éischt node.js eroflueden an installéieren (wat npm enthält). npm steet fir Node packed Moduler an ass e Wee fir Entwécklungsabhängegkeeten duerch node.js ze managen.

1. Installéiert grunt-cliglobal mat npm install -g grunt-cli.
2. Navigéiert an de Root /bootstrap/Verzeichnis, da lafen npm install. npm wäert d' package.jsonDatei kucken an automatesch déi néideg lokal Ofhängegkeeten installéieren déi do opgelëscht sinn.

Wann Dir fäerdeg sidd, kënnt Dir déi verschidde Grunt Kommandoen aus der Kommandozeil ausféieren.

Verfügbar Grunt Kommandoen

grunt dist(Kompiléiere just CSS a JavaScript)

Regeneréiert den /dist/Verzeechnes mat kompiléierten a minifizéierte CSS a JavaScript Dateien. Als Bootstrap Benotzer ass dëst normalerweis de Kommando deen Dir wëllt.

grunt watch(Kuckt)

Kuckt déi Manner Quelldateien a kompiléiert se automatesch op CSS wann Dir eng Ännerung späichert.

grunt test(Tester lafen)

Leeft JSHint a leeft d' QUnit Tester an real Browser dank Karma .

grunt docs(Build & Test d'Dokumenter Verméigen)

Baut a testt CSS, JavaScript, an aner Verméigen déi benotzt gi wann Dir d'Dokumentatioun lokal iwwer bundle exec jekyll serve.

grunt(Baut absolut alles a lafen Tester)

Kompiléiert a miniméiert CSS a JavaScript, baut d'Dokumentatiounswebsäit, leeft den HTML5 Validator géint d'Dokumenter, regeneréiert d'Customizer Verméigen, a méi. Verlaangt Jekyll . Normalerweis nëmmen néideg wann Dir op Bootstrap selwer hackt.

Troubleshooting

Sollt Dir Probleemer mat Ofhängegkeeten installéieren oder Grunt Kommandoen ausféieren, läscht als éischt de /node_modules/Verzeechnes generéiert vun npm. Dann, widderhuelen npm install.

Basis Schabloun

Fänkt mat dëser Basis HTML Schabloun un, oder ännert dës Beispiller . Mir hoffen, datt Dir eis Templates a Beispiller personaliséiere wäert, se un Äre Besoinen upassen.

Kopéiert den HTML hei ënnen fir mat engem minimale Bootstrap Dokument ze schaffen.

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

Beispiller

Baut op der Basis Schabloun uewen mat Bootstrap vill Komponenten. Mir encouragéieren Iech Bootstrap ze personaliséieren an unzepassen fir Ären individuellen Projet seng Bedierfnesser ze passen.

Kritt de Quellcode fir all Beispill hei ënnen andeems Dir de Bootstrap Repository erofluet . Beispiller kënnen am docs/examples/Dossier fonnt ginn.

Benotzt de Kader

Starter Schabloun

Näischt mee d'Basis: kompiléiert CSS a JavaScript zesumme mat engem Container.

Bootstrap Thema

Luet d'optional Bootstrap Thema fir eng visuell verbessert Erfahrung.

Gitter

Multiple Beispiller vu Gitter Layouten mat alle véier Stäck, Nesting, a méi.

Jumbotron

Baut ronderëm de Jumbotron mat enger Navbar an e puer Basis Gitter Sailen.

Schmuel Jumbotron

Baut eng méi personaliséiert Säit andeems Dir de Standardcontainer a Jumbotron schmuel.

Navbars an Aktioun

Navbar

Super Basis Schabloun déi d'Navbar zesumme mat e puer zousätzlechen Inhalt enthält.

Statesch Top Navbar

Super Basis Schabloun mat enger statesch Top Navbar zesumme mat e puer zousätzlech Inhalter.

Fixéiert Navbar

Super Basis Schabloun mat enger fixer Top Navbar zesumme mat e puer zousätzlech Inhalter.

Benotzerdefinéiert Komponente

Cover

Eng eenzeg Säit Schabloun fir einfach a schéin Heemsäiten ze bauen.

Karussell

Passt d'Navbar a Karussell un, füügt dann e puer nei Komponenten derbäi.

Blog

Einfach zwee-Kolonn Blog Layout mat personaliséiert Navigatioun, Header, an Typ.

Dashboard

Basis Struktur fir en Admin Dashboard mat fixen Sidebar an Navbar.

Umellen Säit

Benotzerdefinéiert Form Layout an Design fir eng einfach Zeechen an Form.

Gerechtegt nav

Erstellt eng personaliséiert Navbar mat gerechtfäerdegt Linken. Kapp erop! Net ze Safari frëndlech.

Sticky Fousszeilen

Befestegt e Fousszeilen um Enn vum Viewport wann den Inhalt méi kuerz ass wéi et.

Sticky Fousszeilen mat Navbar

Befestegt e Fousszeilen um Enn vum Viewport mat enger fixer Navbar uewen.

Experimenter

Net reaktiounsfäeger Bootstrap

Einfach d'Responsabilitéit vum Bootstrap deaktivéieren per eis Dokumenter .

Off-Canvas

Baut e toggleable Off-Canvas Navigatiounsmenü fir mat Bootstrap ze benotzen.

Tools

Bootlint

Bootlint ass den offiziellen Bootstrap HTML Linter Tool. Et kontrolléiert automatesch op verschidde gemeinsam HTML Feeler op Websäiten déi Bootstrap op eng zimlech "Vanille" Manéier benotzen. Vanilla Bootstrap Komponenten / Widgets erfuerderen hir Deeler vun der DOM fir bestëmmte Strukturen ze konforméieren. Bootlint kontrolléiert datt Instanzen vu Bootstrap Komponenten korrekt strukturéiert HTML hunn. Bedenkt d'Bootlint an Ärem Bootstrap Webentwécklungs-Toolchain ze addéieren sou datt keng vun den allgemenge Feeler d'Entwécklung vun Ärem Projet verlangsamen.

Communautéit

Bleift um Lafenden iwwer d'Entwécklung vu Bootstrap an erreecht d'Gemeinschaft mat dësen hëllefräichen Ressourcen.

• Liesen an abonnéieren op The Official Bootstrap Blog .
• Chat mat Matbierger Bootstrapper benotzt IRC um irc.freenode.netServer, am ##bootstrap Kanal .
• Fir Hëllef mat Bootstrap, frot op StackOverflow mam Tagtwitter-bootstrap-3 .
• D'Entwéckler sollten d'Schlësselwuert bootstrapop Packagen benotzen déi d'Funktionalitéit vum Bootstrap änneren oder addéieren wann se duerch npm oder ähnlech Liwwermechanismen verdeelen fir maximal Entdeckbarkeet.
• Fannt inspiréierend Beispiller vu Leit déi mam Bootstrap op der Bootstrap Expo bauen .

Dir kënnt och @getbootstrap op Twitter verfollegen fir déi lescht Klatsch an genial Museksvideoen.

Reaktiounsfäegkeet auszeschalten

Bootstrap passt automatesch Är Säite fir verschidde Bildschirmgréissten un. Hei ass wéi Dir dës Fonktioun deaktivéiert sou datt Är Säit funktionnéiert wéi dëst net-reaktiounsfäeger Beispill .

Schrëtt fir Säit Reaktiounsfäegkeet auszeschalten

1. Loosst de Viewport <meta>ernimmt an den CSS Dokumenter
2. Iwwerdribblen widthop der .containerfir all Gitter Tier mat enger eenzeger Breet, zum Beispill width: 970px !important;Gitt sécher datt dëst no der Standard Bootstrap CSS kënnt. Dir kënnt optional !importantmat Medienufroen oder e puer Selektor-Fu vermeiden.
3. Wann Dir navbars benotzt, ewechzehuelen all navbar Zesummebroch an erweidert Verhalen.
4. Fir Gitter Layouten, benotzt .col-xs-*Klassen zousätzlech zu oder amplaz vun de mëttel / grouss. Maacht Iech keng Suergen, den extra-klengen Apparatraster skaléiert op all Resolutiounen.

Dir braucht nach ëmmer Respond.js fir IE8 (well eis Medienufroen nach ëmmer do sinn a musse veraarbecht ginn). Dëst deaktivéiert de "mobile Site" Aspekter vum Bootstrap.

Bootstrap Schabloun mat Reaktiounsfäegkeet behënnert

Mir hunn dës Schrëtt op e Beispill applizéiert. Liest säi Quellcode fir déi spezifesch Ännerungen ze gesinn déi ëmgesat goufen.

View Net-reaktiounsfäeger Beispill

Browser an Apparat Ënnerstëtzung

Bootstrap ass gebaut fir am beschten an de leschten Desktop- a mobilen Browser ze schaffen, dat heescht eeler Browser kënnen ënnerschiddlech stylesch, awer voll funktionell, Rendering vu bestëmmte Komponenten weisen.

Ënnerstëtzt Browser

Speziell ënnerstëtzen mir déi lescht Versioune vun de folgende Browser a Plattformen.

Alternativ Browser déi déi lescht Versioun vu WebKit, Blink oder Gecko benotzen, egal ob direkt oder iwwer d'Webview API vun der Plattform, ginn net explizit ënnerstëtzt. Wéi och ëmmer, Bootstrap soll (an de meeschte Fäll) och an dëse Browser korrekt affichéieren a funktionnéieren. Méi spezifesch Ënnerstëtzungsinformatioun gëtt hei ënnen geliwwert.

Mobil Apparater

Allgemeng ënnerstëtzt Bootstrap déi lescht Versioune vun de Standardbrowser vun all grousse Plattform. Bedenkt datt Proxy Browser (wéi Opera Mini, Opera Mobile's Turbo Modus, UC Browser Mini, Amazon Silk) net ënnerstëtzt ginn.

Desktop Browser

Ähnlech ginn déi lescht Versioune vun de meescht Desktop-Browser ënnerstëtzt.

Op Windows ënnerstëtzen mir Internet Explorer 8-11 .

Fir Firefox, zousätzlech zu der leschter normaler stabiler Verëffentlechung, ënnerstëtzen mir och déi lescht Extended Support Release (ESR) Versioun vu Firefox.

Inoffiziell sollt Bootstrap gutt genuch ausgesinn a behuelen a Chromium a Chrome fir Linux, Firefox fir Linux, an Internet Explorer 7, souwéi Microsoft Edge, obwuel se net offiziell ënnerstëtzt ginn.

Fir eng Lëscht vun e puer vun de Browser Käfere mat deem Bootstrap ze kämpfen huet, kuckt eis Wall of Browser Bugs .

Internet Explorer 8 an 9

Internet Explorer 8 an 9 ginn och ënnerstëtzt, awer w.e.g. bewosst datt e puer CSS3 Eegeschaften an HTML5 Elementer net voll vun dëse Browser ënnerstëtzt ginn. Zousätzlech erfuerdert Internet Explorer 8 d'Benotzung vu Respond.js fir d'Media Query Support z'aktivéieren.

Besicht Kann ech benotzen ... fir Detailer iwwer Browser Ënnerstëtzung vun CSS3 an HTML5 Funktiounen.

Internet Explorer 8 an Respond.js

Opgepasst op déi folgend Virwarnungen wann Dir Respond.js an Ären Entwécklungs- a Produktiounsëmfeld fir Internet Explorer 8 benotzt.

Respond.js a Cross-Domain CSS

Benotzen Respond.js mat CSS gehost op engem aneren (Sub) Domain (zum Beispill, op engem CDN) erfuerdert e puer zousätzlech Setup. Kuckt d'Respond.js Dokumenter fir Detailer.

Äntwert.js anfile://

Wéinst Browser Sécherheetsregelen funktionnéiert Respond.js net mat Säiten déi iwwer de file://Protokoll gekuckt ginn (wéi wann Dir eng lokal HTML Datei opmaacht). Fir reaktiounsfäeger Funktiounen am IE8 ze testen, kuckt Är Säiten iwwer HTTP(S). Kuckt d'Respond.js Dokumenter fir Detailer.

Äntwert.js an@import

Respond.js funktionéiert net mat CSS déi iwwer referenzéiert ass @import. Besonnesch sinn e puer Drupal Konfiguratiounen bekannt fir ze benotzen @import. Kuckt d'Respond.js Dokumenter fir Detailer.

Internet Explorer 8 a Këschtgréisst

IE8 ënnerstëtzt net voll box-sizing: border-box;wann se kombinéiert mat min-width, max-width, min-height, oder max-height. Aus deem Grond, wéi vun v3.0.1, benotzen mir net méi max-widthop .containers.

Internet Explorer 8 an @font-face

IE8 huet e puer Problemer mat @font-facewann kombinéiert mat :before. Bootstrap benotzt dës Kombinatioun mat senge Glyphicons. Wann eng Säit cache ass, an ouni d'Maus iwwer d'Fënster gelueden ass (dh op den Update Knäppchen dréckt oder eppes an engem iframe lued) da gëtt d'Säit rendered ier d'Schrëft lued. Hovering iwwer d'Säit (Kierper) wäert e puer vun den Ikonen weisen an iwwer déi verbleiwen Ikonen hänken déi och. Kuckt d'Nummer 13863 fir Detailer.

IE Kompatibilitéitsmodi

Bootstrap gëtt net an den alen Internet Explorer Kompatibilitéitsmodi ënnerstëtzt. Fir sécher ze sinn datt Dir den neiste Renderingmodus fir IE benotzt, betruecht de passenden <meta>Tag an Äre Säiten:

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

Bestätegt den Dokumentmodus andeems Dir d'Debugging-Tools opmaacht: Press F12a kontrolléiert den "Dokumentmodus".

Dësen Tag ass an all Bootstrap Dokumentatioun a Beispiller abegraff fir déi bescht Rendering méiglech an all ënnerstëtzt Versioun vum Internet Explorer ze garantéieren.

Gesinn dës StackOverflow Fro fir méi Informatiounen.

Internet Explorer 10 op Windows 8 a Windows Phone 8

Internet Explorer 10 differenzéiert net Apparat Breet vun Viewport Breet , an dofir gëllen d'Medien Ufroen net richteg an Bootstrap d'CSS. Normalerweis géift Dir just e schnelle Snippet vun CSS derbäi fir dëst ze fixéieren:

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

Wéi och ëmmer, dëst funktionnéiert net fir Apparater déi Windows Phone 8 Versioune méi al wéi Update 3 (alias GDR3) lafen , well et verursaacht datt esou Apparater eng meeschtens Desktop-Vue weisen anstatt eng schmuel "Telefon" Vue. Fir dëst unzegoen, musst Dir déi folgend CSS an JavaScript enthalen fir ronderëm de Feeler ze schaffen .

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

Fir méi Informatiounen a Gebrauch Richtlinnen, liesen Windows Telefon 8 an Apparat-Breet .

Als Heads up, mir enthalen dëst an all Bootstrap Dokumentatioun a Beispiller als Demonstratioun.

Safari Prozent Ronn

De Renderingmotor vu Versioune vu Safari virum v7.1 fir OS X a Safari fir iOS v8.0 hat e puer Probleemer mat der Unzuel vun Dezimalplazen, déi an eise .col-*-1Gitterklassen benotzt goufen. Also wann Dir 12 eenzel Raster Sailen hutt, géift Dir feststellen datt se kuerz opkomm sinn am Verglach mat anere Sailen Reihen. Nieft dem Upgrade vun Safari / iOS, hutt Dir e puer Optiounen fir Léisungen:

• Füügt .pull-rightop Är lescht Gitterkolonne fir déi haart-riets Ausrichtung ze kréien
• Tweak Är Prozentzuelen manuell fir déi perfekt Ronn fir Safari ze kréien (méi schwéier wéi déi éischt Optioun)

Modals, Navbars a virtuelle Tastaturen

Iwwerschwemmung a Scrollen

Ënnerstëtzung fir overflow: hiddenop d' <body>Element ass zimlech limitéiert op iOS an Android. Zu dësem Zweck, wann Dir laanscht den Top oder ënnen vun engem Modal an engem vun dësen Apparater Browser scrollt, fänkt den <body>Inhalt un ze scrollen. Kuckt de Chrome Bug #175502 (fix am Chrome v40) a WebKit Bug #153852 .

iOS Textfelder a Scrollen

Zënter iOS 9.3, wärend e Modal op ass, wann den initialen Touch vun engem Scrollgeste bannent der Grenz vun engem Text <input>oder engem <textarea>, gëtt den <body>Inhalt ënner dem Modal gerullt amplaz vum Modal selwer. Kuckt WebKit Käfer #153856 .

Virtuell Tastatur

Notéiert och datt wann Dir eng fix Navbar benotzt oder Inputen an engem Modal benotzt, iOS huet e Rendering-Bug deen d'Positioun vu fixen Elementer net aktualiséieren wann déi virtuell Tastatur ausgeléist gëtt. E puer Léisunge fir dëst enthalen d'Transformatioun vun Ären Elementer op position: absoluteoder en Timer op de Fokus ze ruffen fir ze probéieren d'Positionéierung manuell ze korrigéieren. Dëst gëtt net vu Bootstrap gehandhabt, also ass et un Iech fir ze entscheeden wéi eng Léisung am Beschten fir Är Applikatioun ass.

Navbar Dropdowns

D' .dropdown-backdropElement gëtt net op iOS am nav benotzt wéinst der Komplexitéit vun der z-Indexéierung. Also, fir Dropdowns an Navbars zouzemaachen, musst Dir direkt op d'Dropdown-Element klickt (oder all aner Element, deen e Klick-Event am iOS brennt ).

Browser zoomen

Säit Zooming präsentéiert zwangsleefeg Rendering Artefakte an e puer Komponenten, souwuel am Bootstrap wéi och am Rescht vum Internet. Ofhängeg vum Problem, kënne mir et vläicht fixéieren (fir d'éischt sichen an dann en Thema opmaachen wann néideg). Wéi och ëmmer, mir tendéieren dës ze ignoréieren well se dacks keng direkt Léisung hunn ausser hacky Léisungen.

Sticky :hover/ :focusop Handy

Och wann richteg Schweef op de meeschte Touchscreens net méiglech ass, emuléieren déi meescht mobil Browser d'Hovering Support a maachen :hover"klebig". An anere Wierder, :hoverStiler fänken un ze gëllen nodeems Dir en Element tippt a stoppen nëmmen opzemaachen nodeems de Benotzer en anert Element tippt. Dëst kann dozou féieren datt d' :hoverStaaten vum Bootstrap onerwënscht op esou Browser "hänken". E puer mobil Browser maachen och :focusähnlech plakeg. Et gëtt de Moment keng einfach Léisung fir dës Themen ausser esou Stiler komplett ze läschen.

Dréckerei

Och an e puer modernen Browser kann Dréckerei sprëtzeg sinn.

Besonnesch, wéi vu Chrome v32 an onofhängeg vun Margin-Astellungen, benotzt Chrome eng Viewport Breet wesentlech méi schmuel wéi déi kierperlech Pabeiergréisst wann Dir Medienufroen léist beim Drock vun enger Websäit. Dëst kann dozou féieren datt dem Bootstrap säin extra-klenge Gitter onerwaart aktivéiert gëtt beim Drock. Kuckt d'Ausgab #12078 a Chrome Bug #273306 fir e puer Detailer. Virgeschloe Léisunge:

• Ëmfaasst dat extra-klengt Gitter a gitt sécher datt Är Säit akzeptabel ausgesäit drënner.
• Passt d'Wäerter vun de @screen-*Manner Variabelen un, sou datt Äert Dréckerpabeier méi grouss wéi extra-kleng ugesi gëtt.
• Füügt personaliséiert Medienufroen un fir d'Gittergréisst Breakpoints nëmme fir Dréckmedien z'änneren.

Och, wéi vun Safari v8.0, fix-Breet .containers kann Ursaach Safari eng ongewéinlech kleng Schrëftgréisst benotzt wann Dréckerei. Kuckt #14868 a WebKit Käfer #138192 fir méi Detailer. Eng potenziell Léisung fir dëst ass déi folgend CSS derbäi:

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

Android Stock Browser

Aus der Këscht, Android 4.1 (a souguer e puer méi nei Verëffentlechungen anscheinend) schéckt mat der Browser App als Standard Webbrowser vun der Wiel (am Géigesaz zu Chrome). Leider huet d'Browser App vill Bugs an Inkonsistenz mat CSS am Allgemengen.

Wielt Menüen

Op <select>Elementer weist den Android Aktiebrowser d'Säitkontrolle net wann et eng border-radiusan / oder borderapplizéiert gëtt. (Kuckt dës StackOverflow Fro fir Detailer.) Benotzt d'Snippet vum Code hei ënnen fir déi beleidegend CSS ze läschen an <select>als onstiléiert Element am Android Aktiebrowser ze maachen. De Benotzer Agent snifft vermeit Interferenz mat Chrome, Safari a Mozilla Browser.

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

Wëllt Dir e Beispill gesinn? Préift dës JS Bin Demo.

Validateuren

Fir déi bescht méiglech Erfahrung fir al a buggy Browser ze bidden, benotzt Bootstrap CSS Browser Hacks op verschiddene Plazen fir speziell CSS op bestëmmte Browser Versiounen ze zielen fir Bugs an de Browser selwer ëmzegoen. Dës Hacks verursaachen verständlech datt CSS Valideuren beschwéieren datt se ongëlteg sinn. Op e puer Plazen benotze mir och bluddeg-Rand CSS Features déi nach net voll standardiséiert sinn, awer dës gi reng fir progressiv Verbesserung benotzt.

Dës Validatiounswarnunge sinn an der Praxis egal well den net-hacky Deel vun eiser CSS voll validéiert an déi hacky Portiounen stéieren net mat der richteger Funktioun vum net-hacky Deel, dofir firwat mir dës speziell Warnungen bewosst ignoréieren.

Eis HTML Dokumenter hunn och e puer trivial an onkonsequent HTML Validatioun Warnungen wéinst eiser Inklusioun vun enger Léisung fir e bestëmmte Firefox Käfer .

Drëtt Partei Ënnerstëtzung

Och wa mir keng Drëtt Partei Plugins oder Add-ons offiziell ënnerstëtzen, bidde mir e puer nëtzlech Rotschléi fir potenziell Themen an Äre Projeten ze vermeiden.

Këscht Gréisst

E puer Drëtt Partei Software, dorënner Google Maps a Google Custom Search Engine, Konflikt mat Bootstrap wéinst * { box-sizing: border-box; }, eng Regel déi et esou paddingmécht, beaflosst net déi lescht berechnen Breet vun engem Element. Léiert méi iwwer Këschtmodell a Gréisst bei CSS Tricks .

Ofhängeg vum Kontext, kënnt Dir wéi néideg iwwerschreiden (Optioun 1) oder d'Këschtgréisst fir ganz Regiounen zrécksetzen (Optioun 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();
}

Accessibilitéit

Bootstrap follegt gemeinsame Webnormen a - mat minimalem extra Effort - ka benotzt ginn fir Siten ze kreéieren déi zougänglech sinn fir déi déi AT benotzen .

Navigatioun iwwersprangen

Wann Är Navigatioun vill Linken enthält a virun den Haaptinhalt an der DOM kënnt, füügt e Skip to main contentLink virun der Navigatioun derbäi (fir eng einfach Erklärung, kuckt dësen A11Y Project Artikel iwwer Skip Navigatioun Linken ). D'Benotzung vun der .sr-onlyKlass verstoppt de Spranglink visuell, an d' .sr-only-focusableKlass suergt dofir datt de Link siichtbar gëtt eemol fokusséiert (fir gesinn Tastatur Benotzer).

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

Nestéiert Rubriken

Wann Dir Rubriken nestéiert ( <h1>- <h6>), sollt Äre primäre Dokument Header en <h1>. Spéider Rubriken solle logesch Notzung maachen <h2>- <h6>sou datt Écran Lieser en Inhaltsverzeechnes fir Är Säiten konstruéieren.

Léiere méi op HTML CodeSniffer an Penn State AccessAbility .

Faarf Kontrast

De Moment sinn e puer vun de Standardfaarfkombinatiounen, déi am Bootstrap verfügbar sinn (wéi déi verschidde stylesch Knäppercher Klassen, e puer vun de Code Highlight Faarwen benotzt fir Basis Code Blocks , déi .bg-primary kontextuell Hannergrond Helper Klass, an d'Standard Link Faarf wann se op engem wäissen Hannergrond benotzt ginn) hunn e klengt Kontrastverhältnis (ënnert dem recommandéierte Verhältnis vu 4,5:1 ). Dëst kann Probleemer fir Benotzer mat gerénger Visioun verursaachen oder déi faarweg blann sinn. Dës Standardfaarwen mussen eventuell geännert ginn fir hire Kontrast an d'Liesbarkeet ze erhéijen.

Zousätzlech Ressourcen

• "HTML Codesniffer" Bookmarklet fir Accessibilitéitsprobleemer z'identifizéieren
• Chrome's Accessibility Developer Tools Extensioun
• Faarf Kontrast Analyzer
• Den A11Y Projet
• MDN Accessibilitéit Dokumentatioun

Lizenz FAQs

Bootstrap gëtt ënner der MIT Lizenz verëffentlecht an ass Copyright 2019 Twitter. Op méi kleng Stécker gekacht, kann et mat de folgende Konditioune beschriwwe ginn.

Et erfuerdert Iech:

• Halt d'Lizenz an d'Urheberrechter Notiz a Bootstrap's CSS a JavaScript Dateien abegraff wann Dir se an Äre Wierker benotzt

Et erlaabt Iech:

• Gratis eroflueden a benotzt Bootstrap, ganz oder deelweis, fir perséinlech, privat, intern oder kommerziell Zwecker
• Benotzt Bootstrap a Packagen oder Verdeelungen déi Dir erstellt
• Änneren de Quellcode
• Gitt eng Ënnerlizenz fir Bootstrap un Drëttubidder ze änneren an ze verdeelen, déi net an der Lizenz abegraff sinn

Et verbitt Iech:

• Halt d'Auteuren an d'Lizenzbesëtzer haftbar fir Schued, well Bootstrap gëtt ouni Garantie geliwwert
• Halt d'Creatoren oder d'Auteursrechter vu Bootstrap verantwortlech
• Ëmverdeelt all Stéck Bootstrap ouni richteg Attributioun
• Benotzt all Marken déi vun Twitter gehéieren op iergendeng Manéier déi soen oder implizéieren datt Twitter Är Verdeelung ënnerstëtzt
• Benotzt all Marken déi vun Twitter gehéieren op iergendeng Manéier déi soen oder implizéieren datt Dir d'Twitter Software a Fro erstallt hutt

Et erfuerdert Iech net:

• Gitt d'Quell vum Bootstrap selwer, oder vun all Ännerungen, déi Dir derzou gemaach hutt, an all Ëmverdeelung, déi Dir sammelt, déi et enthält
• Gitt Ännerungen un, déi Dir op Bootstrap maacht, zréck an de Bootstrap-Projet (och wann esou Feedback encouragéiert ass)

Déi komplett Bootstrap Lizenz ass am Projet Repository fir méi Informatioun.

Iwwersetzungen

Gemeinschaftsmemberen hunn dem Bootstrap seng Dokumentatioun a verschidde Sproochen iwwersat. Keen gëtt offiziell ënnerstëtzt a si kënnen net ëmmer aktuell sinn.

• Bootstrap 中文文档 (Chinesesch)
• Bootstrap op Dansk (Dänesch)
• Bootstrap en Français (Franséisch)
• Bootstrap auf Deutsch (Däitsch)
• Bootstrap an Italienesch (Italienesch)
• Bootstrap 한국어 (Koreanesch)
• Bootstrap em Português do Brasil (Brasilianesch Portugisesch)
• Bootstrap по-русски (Russesch)
• Bootstrap en Español (Spuenesch)
• Türkçe Bootstrap (tierkesch)
• Bootstrap українською (Ukrainesch)
• Bootstrap bằng tiếng Việt (Vietnamesesch)

Mir hëllefen net d'Iwwersetzungen z'organiséieren oder ze hosten, mir verlinke just hinnen.

Hutt Dir eng nei oder besser Iwwersetzung fäerdeg? Öffnen eng Pull-Ufro fir et op eis Lëscht ze addéieren.