Download

Bootstrap (op it stuit v3.4.1) hat in pear maklike manieren om fluch te begjinnen, elk oansprekkend op in oar feardigensnivo en gebrûksgefal. Lês troch om te sjen wat by jo spesifike behoeften past.

jsDelivr

De minsken by jsDelivr jouwe genedich CDN-stipe foar Bootstrap's CSS en JavaScript. Brûk gewoan dizze jsDelivr- keppelings.

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

Ynstallearje mei Bower

Jo kinne ek Bootstrap's Less, CSS, JavaScript en lettertypen ynstallearje en beheare mei Bower :

bower install bootstrap

Ynstallearje mei npm

Jo kinne ek Bootstrap ynstallearje mei npm :

npm install bootstrap@3

require('bootstrap')sil alle jQuery-plugins fan Bootstrap op it jQuery-objekt laden. De bootstrapmodule sels eksportearret neat. Jo kinne de jQuery-plugins fan Bootstrap manuell laden yndividueel troch de /js/*.jsbestannen te laden ûnder de map op topnivo fan it pakket.

Bootstrap's package.jsonbefettet wat ekstra metadata ûnder de folgjende kaaien:

• less- paad nei Bootstrap's haad Minder boarnebestân
• style- paad nei Bootstrap's net-minifisearre CSS dy't foarôf kompilearre is mei de standertynstellingen (gjin oanpassing)

Ynstallearje mei Composer

Jo kinne ek Bootstrap's Less, CSS, JavaScript en lettertypen ynstallearje en beheare mei Composer :

composer require twbs/bootstrap

Autoprefixer nedich foar Minder / Sass

Bootstrap brûkt Autoprefixer om te gean mei CSS-ferkeaperfoarheaksels . As jo ​​​​Bootstrap kompilearje út syn Less/Sass-boarne en ús Gruntfile net brûke, moatte jo Autoprefixer sels yntegrearje yn jo bouproses. As jo ​​​​foarkompilearre Bootstrap brûke of ús Gruntfile brûke, hoege jo hjir gjin soargen oer te meitsjen, om't Autoprefixer al is yntegreare yn ús Gruntfile.

Wat is ynbegrepen

Bootstrap is te downloaden yn twa foarmen, wêryn jo de folgjende mappen en bestannen sille fine, logysk groepearje mienskiplike boarnen en sawol kompilearre as minifisearre fariaasjes leverje.

Foarkompilearre Bootstrap

Ienris ynladen, unzip de komprimearre map om de struktuer fan (de kompilearre) Bootstrap te sjen. Jo sille sa'n ding sjen:

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

Dit is de meast basale foarm fan Bootstrap: foarkompilearre bestannen foar fluch drop-in gebrûk yn hast elk webprojekt. Wy leverje kompilearre CSS en JS ( bootstrap.*), lykas kompilearre en minifisearre CSS en JS ( bootstrap.min.*). CSS -boarnekaarten ( bootstrap.*.map) binne beskikber foar gebrûk mei de ûntwikkelynstruminten fan bepaalde browsers. Lettertypen fan Glyphicons binne opnommen, lykas it opsjonele Bootstrap-tema.

Bootstrap boarne koade

De download fan Bootstrap-boarnekoade omfettet de foarkompilearre CSS-, JavaScript- en lettertypeaktiva, tegearre mei boarne Less, JavaScript en dokumintaasje. Mear spesifyk omfettet it de folgjende en mear:

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

De less/, js/, en fonts/binne de boarnekoade foar ús CSS-, JS- en ikoanlettertypen (resp.). De dist/map omfettet alles neamd yn 'e foarkompilearre downloadseksje hjirboppe. De docs/map befettet de boarnekoade foar ús dokumintaasje, en examples/fan Bootstrap-gebrûk. Dêrnjonken leveret elk oar ynbegrepen bestân stipe foar pakketten, lisinsjeynformaasje en ûntwikkeling.

CSS en JavaScript kompilearje

Bootstrap brûkt Grunt foar har bousysteem, mei handige metoaden foar wurkjen mei it ramt. It is hoe't wy ús koade kompilearje, tests útfiere, en mear.

Ynstallaasje fan Grunt

Om Grunt te ynstallearjen, moatte jo node.js earst downloade en ynstallearje (dy't npm omfettet). npm stiet foar node-ferpakte modules en is in manier om ûntwikkelingsôfhinklikens te behearjen fia node.js.

1. Ynstallearje grunt-cliwrâldwiid mei npm install -g grunt-cli.
2. Navigearje nei de root- /bootstrap/map en rinne dan npm install. npm sil nei it package.jsonbestân sjen en automatysk de nedige lokale ôfhinklikens ynstalleare dy't dêr steane.

As jo ​​​​foltôge binne, kinne jo de ferskate Grunt-kommando's útfiere fan 'e kommandorigel.

Beskikbere Grunt kommando's

grunt dist(Kompilearje gewoan CSS en JavaScript)

Regenerearret de /dist/map mei kompilearre en minifisearre CSS- en JavaScript-bestannen. As Bootstrap-brûker is dit normaal it kommando dat jo wolle.

grunt watch(Horloazje)

Besjocht de Minder boarnebestannen en kompilearret se automatysk nei CSS as jo in feroaring opslaan.

grunt test(Tests útfiere)

Rint JSHint en rint de QUnit- tests yn echte browsers troch Karma .

grunt docs(Bou en test de dokuminten aktiva)

Bout en testet CSS, JavaScript, en oare aktiva dy't wurde brûkt by it útfieren fan de dokumintaasje lokaal fia bundle exec jekyll serve.

grunt(Bou absolút alles en útfiere tests)

Kompileart en minifisearret CSS en JavaScript, bout de webside fan 'e dokumintaasje, rint de HTML5-validator út tsjin de dokuminten, regenerearret de Customizer-aktiva, en mear. Fereasket Jekyll . Normaal allinich nedich as jo hacking op Bootstrap sels.

Problemen oplosse

Mochten jo problemen tsjinkomme mei it ynstallearjen fan ôfhinklikens of it útfieren fan Grunt-kommando's, wiskje earst de /node_modules/map oanmakke troch npm. Dan, werhelje npm install.

Basis sjabloan

Begjin mei dizze basis HTML-sjabloan, of wizigje dizze foarbylden . Wy hoopje dat jo ús sjabloanen en foarbylden sille oanpasse, se oanpasse oan jo behoeften.

Kopiearje de HTML hjirûnder om te begjinnen mei wurkjen mei in minimaal Bootstrap-dokumint.

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

Foarbylden

Bouwe op it basissjabloan hjirboppe mei de protte komponinten fan Bootstrap. Wy moedigje jo oan om Bootstrap oan te passen en oan te passen oan 'e behoeften fan jo yndividuele projekt.

Krij de boarnekoade foar elk foarbyld hjirûnder troch it Bootstrap-repository te downloaden . Foarbylden kinne fûn wurde yn 'e docs/examples/map.

It brûken fan it ramt

Starter sjabloan

Neat oars as de basis: kompilearre CSS en JavaScript tegearre mei in kontener.

Bootstrap tema

Laad it opsjonele Bootstrap-tema foar in fisueel ferbettere ûnderfining.

Grids

Meardere foarbylden fan rasteryndielingen mei alle fjouwer lagen, nêst, en mear.

Jumbotron

Bou om 'e jumbotron hinne mei in navbar en guon basisrasterkolommen.

Smel jumbotron

Bou in mear oanpaste side troch de standertkontener en jumbotron te beheinen.

Navbars yn aksje

Navbar

Super basissjabloan dat de navbar omfettet tegearre mei wat ekstra ynhâld.

Statyske top navbar

Super basis sjabloan mei in statyske top navbar tegearre mei wat ekstra ynhâld.

Fêste navigaasjebalke

Super basis sjabloan mei in fêste top navbar tegearre mei wat ekstra ynhâld.

Oanpaste komponinten

Cover

In sjabloan fan ien side foar it bouwen fan ienfâldige en prachtige thússiden.

Carousel

Pas de navbar en karrousel oan, foegje dan wat nije komponinten ta.

Blog

Ienfâldige blog-yndieling mei twa kolommen mei oanpaste navigaasje, koptekst en type.

Dashboard

Basisstruktuer foar in admin-dashboard mei fêste sydbalke en navbar.

Oanmelde side

Oanpaste foarmyndieling en ûntwerp foar in ienfâldich teken yn formulier.

Rjochtfeardige nav

Meitsje in oanpaste navbar mei rjochtfeardige keppelings. Heads up! Net te Safari freonlik.

Sticky footer

Heakje in foettekst oan 'e boaiem fan' e viewport as de ynhâld koarter is dan it.

Sticky footer mei navbar

Heakje in foettekst oan 'e boaiem fan' e viewport mei in fêste navbar oan 'e boppekant.

Eksperiminten

Non-responsive Bootstrap

Skeakelje de responsiviteit fan Bootstrap maklik út per ús dokuminten .

Off-canvas

Bou in wikselber off-canvas-navigaasjemenu foar gebrûk mei Bootstrap.

Tools

Bootlint

Bootlint is it offisjele Bootstrap HTML linter -ark. It kontrolearret automatysk op ferskate mienskiplike HTML-flaters yn websiden dy't Bootstrap brûke op in frij "vanille" manier. De komponinten / widgets fan Vanilla Bootstrap fereaskje har dielen fan 'e DOM om te foldwaan oan bepaalde struktueren. Bootlint kontrolearret dat eksimplaren fan Bootstrap-komponinten goed strukturearre HTML hawwe. Tink oan om Bootlint ta te foegjen oan jo Bootstrap-webûntwikkelingsark, sadat gjin fan 'e mienskiplike flaters de ûntwikkeling fan jo projekt fertrage.

Mienskip

Bliuw op 'e hichte oer de ûntwikkeling fan Bootstrap en berikke de mienskip mei dizze nuttige boarnen.

• Lês en abonnearje op The Official Bootstrap Blog .
• Petear mei oare Bootstrappers mei IRC op 'e irc.freenode.netserver, yn it ##bootstrap-kanaal .
• Foar help mei it brûken fan Bootstrap, freegje op StackOverflow mei de tagtwitter-bootstrap-3 .
• Untwikkelders moatte it kaaiwurd brûke bootstrapop pakketten dy't de funksjonaliteit fan Bootstrap wizigje of tafoegje by it fersprieden fia npm of ferlykbere leveringsmeganismen foar maksimale ûntdekking.
• Fyn ynspirearjende foarbylden fan minsken dy't bouwe mei Bootstrap by de Bootstrap Expo .

Jo kinne ek @getbootstrap folgje op Twitter foar de lêste roddels en bjusterbaarlike muzykfideo's.

Responsiviteit útskeakelje

Bootstrap past jo siden automatysk oan foar ferskate skermgrutte. Hjir is hoe't jo dizze funksje útskeakelje, sadat jo side wurket lykas dit net-responsive foarbyld .

Stappen om sideresponsiviteit út te skeakeljen

1. Welitte de viewport <meta>neamd yn 'e CSS-dokuminten
2. Oerskriuwe de widthop 'e .containerfoar eltse grid tier mei in inkele breedte, bygelyks width: 970px !important;Wês wis dat dit komt nei de standert Bootstrap CSS. Jo kinne opsjoneel mije de !importantmei media queries of wat selector-fu.
3. As jo ​​navbars brûke, ferwiderje alle navbar-ynstoarten en útwreidzjen gedrach.
4. Foar rasteryndielingen, brûk .col-xs-*klassen neist, of yn plak fan, de medium / grutte. Sit gjin soargen, it ekstra-lytse apparaatraster skalen nei alle resolúsjes.

Jo sille Respond.js noch nedich hawwe foar IE8 (om't ús mediafragen der noch binne en moatte wurde ferwurke). Dit skeakelet de "mobile side" aspekten fan Bootstrap út.

Bootstrap-sjabloan mei responsiviteit útskeakele

Wy hawwe dizze stappen tapast op in foarbyld. Lês syn boarnekoade om de spesifike wizigingen te sjen ymplementearre.

Besjoch non-responsive foarbyld

Stipe foar browser en apparaat

Bootstrap is boud om it bêste te wurkjen yn 'e lêste buroblêd- en mobile browsers, wat betsjuttet dat âldere browsers miskien oars styleare, hoewol folslein funksjonele, renderings fan bepaalde komponinten werjaan.

Stipe browsers

Spesifyk stypje wy de lêste ferzjes fan de folgjende browsers en platfoarms.

Alternative browsers dy't de lêste ferzje fan WebKit, Blink of Gecko brûke, itsij direkt as fia de webwerjefte API fan it platfoarm, wurde net eksplisyt stipe. Bootstrap moat lykwols (yn 'e measte gefallen) ek yn dizze browsers goed werjaan en funksjonearje. Mear spesifike stipeynformaasje wurdt hjirûnder jûn.

Mobile apparaten

Yn 't algemien stipet Bootstrap de lêste ferzjes fan' e standertbrowsers fan elke grutte platfoarm. Tink derom dat proxy-browsers (lykas Opera Mini, Opera Mobile's Turbo-modus, UC Browser Mini, Amazon Silk) net wurde stipe.

Buroblêd browsers

Op deselde manier wurde de lêste ferzjes fan de measte buroblêdbrowsers stipe.

Op Windows stypje wy Internet Explorer 8-11 .

Foar Firefox stypje wy, neist de lêste normale stabile release, ek de lêste Extended Support Release (ESR) ferzje fan Firefox.

Unoffisjeel soe Bootstrap goed genôch moatte sjen en gedrage yn Chromium en Chrome foar Linux, Firefox foar Linux, en Internet Explorer 7, lykas Microsoft Edge, hoewol se net offisjeel wurde stipe.

Foar in list fan guon fan 'e browser-bugs dêr't Bootstrap mei te krijen hat, sjoch ús Wall of browser-bugs .

Internet Explorer 8 en 9

Internet Explorer 8 en 9 wurde ek stipe, wês lykwols bewust dat guon CSS3-eigenskippen en HTML5-eleminten net folslein wurde stipe troch dizze browsers. Derneist fereasket Internet Explorer 8 it gebrûk fan Respond.js om media-query-stipe yn te skeakeljen.

Besykje Kin ik brûke ... foar details oer browserstipe fan CSS3- en HTML5-funksjes.

Internet Explorer 8 en Respond.js

Pas op foar de folgjende warskôgings by it brûken fan Respond.js yn jo ûntwikkeling- en produksjeomjouwings foar Internet Explorer 8.

Respond.js en cross-domain CSS

It brûken fan Respond.js mei CSS hosted op in oar (sub)domein (bygelyks op in CDN) fereasket wat ekstra opset. Sjoch de Respond.js-dokuminten foar details.

Respond.js enfile://

Troch blêderfeiligensregels wurket Respond.js net mei siden dy't besjoen wurde fia it file://protokol (lykas by it iepenjen fan in lokale HTML-bestân). Om responsive funksjes te testen yn IE8, besjoch jo siden oer HTTP(S). Sjoch de Respond.js-dokuminten foar details.

Respond.js en@import

Respond.js wurket net mei CSS dat wurdt ferwiisd fia @import. Benammen guon Drupal-konfiguraasjes binne bekend om te brûken @import. Sjoch de Respond.js-dokuminten foar details.

Internet Explorer 8 en doazegrutte

IE8 stipet net folslein box-sizing: border-box;as kombinearre mei min-width, max-width, min-height, of max-height. Om dy reden, as fan v3.0.1, wy net mear brûke max-widthop .containers.

Internet Explorer 8 en @font-face

IE8 hat wat problemen mei @font-faceas kombinearre mei :before. Bootstrap brûkt dy kombinaasje mei syn Glyphicons. As in side yn it cache is, en sûnder de mûs oer it finster laden (dus op de ferfarskje knop of laad wat yn in iframe) dan wurdt de side werjûn foardat it lettertype laden. Hoverje oer de side (lichem) sil guon fan 'e ikoanen sjen litte en hoverje oer de oerbleaune ikoanen sil dy ek sjen litte. Sjoch útjefte #13863 foar details.

IE Kompatibilitätsmodi

Bootstrap wurdt net stipe yn 'e âlde kompatibiliteitsmodi fan Internet Explorer. Om der wis fan te wêzen dat jo de lêste rendering-modus foar IE brûke, beskôgje jo it passende <meta>tag yn jo siden op te nimmen:

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

Befêstigje de dokumintmodus troch de debuggen-ark te iepenjen: druk op F12en kontrolearje de "Dokumentmodus".

Dizze tag is opnommen yn alle dokumintaasje en foarbylden fan Bootstrap om de bêste rendering mooglik te garandearjen yn elke stipe ferzje fan Internet Explorer.

Sjoch dizze StackOverflow fraach foar mear ynformaasje.

Internet Explorer 10 yn Windows 8 en Windows Phone 8

Internet Explorer 10 ûnderskiedt apparaatbreedte net fan viewportbreedte , en tapast dus de mediafragen net goed yn 'e CSS fan Bootstrap. Normaal soene jo gewoan in fluch snippet fan CSS tafoegje om dit te reparearjen:

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

Dit wurket lykwols net foar apparaten mei Windows Phone 8 ferzjes âlder dan Update 3 (alias GDR3) , om't it feroarsaket dat sokke apparaten in meast buroblêdwerjefte sjen litte ynstee fan smelle "tillefoan" werjefte. Om dit oan te pakken, moatte jo de folgjende CSS en JavaScript opnimme om de brek om te gean .

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

Foar mear ynformaasje en gebrûksrjochtlinen, lês Windows Phone 8 en Device-Width .

As heads-up nimme wy dit op yn alle dokumintaasje en foarbylden fan Bootstrap as demonstraasje.

Safari persintaazje ôfrûning

De werjeftemotor fan ferzjes fan Safari foarôfgeand oan v7.1 foar OS X en Safari foar iOS v8.0 hie wat problemen mei it oantal desimale plakken brûkt yn ús .col-*-1rasterklassen. Dus as jo 12 yndividuele rasterkolommen hiene, soene jo merke dat se koart kamen yn ferliking mei oare rigen kolommen. Neist it opwurdearjen fan Safari / iOS, hawwe jo wat opsjes foar oplossingen:

• Foegje .pull-rightoan jo lêste rasterkolom ta om de hurd-rjochts ôfstimming te krijen
• Tweak jo persintaazjes mei de hân om de perfekte ôfrûning foar Safari te krijen (dreger dan de earste opsje)

Modalen, navbars, en firtuele toetseboerden

Oerfloed en rôlje

Stipe foar overflow: hiddenop it <body>elemint is frij beheind yn iOS en Android. Dêrta, as jo foarby de boppe- of ûnderkant fan in modal rôlje yn ien fan 'e browsers fan dizze apparaten, sil de <body>ynhâld begjinne te rôljen. Sjoch Chrome-bug #175502 (reparearre yn Chrome v40) en WebKit-bug #153852 .

iOS-tekstfjilden en rôlje

As fan iOS 9.3, wylst in modaal iepen is, as de earste oanrekking fan in rôlgebeart binnen de grins is fan in tekstuele <input>of in <textarea>, sil de <body>ynhâld ûnder de modal rôle wurde ynstee fan de modal sels. Sjoch WebKit bug #153856 .

Firtuele toetseboerden

Tink derom ek dat as jo in fêste navbar brûke of ynputen brûke binnen in modale, iOS hat in rendering-bug dy't de posysje fan fêste eleminten net bywurket as it firtuele toetseboerd wurdt trigger. In pear oplossingen hjirfoar omfetsje it transformearjen fan jo eleminten nei position: absoluteof it oproppen fan in timer op fokus om te besykjen de posysjonearring manuell te korrigearjen. Dit wurdt net behannele troch Bootstrap, dus it is oan jo om te besluten hokker oplossing it bêste is foar jo applikaasje.

Navbar Dropdowns

It .dropdown-backdropelemint wurdt net brûkt op iOS yn 'e nav fanwegen de kompleksiteit fan z-yndeksearring. Sa, om dropdowns yn navbars te sluten, moatte jo direkt op it dropdown-elemint klikke (of in oar elemint dat in klikbarren yn iOS sil ûntstean ).

Browser zoomjen

Side-zoomen presintearret ûnûntkomber rendering-artefakten yn guon komponinten, sawol yn Bootstrap as de rest fan it web. Ofhinklik fan it probleem kinne wy ​​it miskien reparearje (earst sykje en dan in probleem iepenje as dat nedich is). Wy hawwe lykwols de neiging om dizze te negearjen, om't se faaks gjin direkte oplossing hawwe oars as hacky oplossingen.

Sticky :hover/ :focusop mobyl

Ek al is echte sweef net mooglik op de measte touchscreens, de measte mobile browsers emulearje sweefstipe en meitsje :hover"plakkerich". Mei oare wurden, :hoverstilen begjinne te tapassen nei it oanboarjen fan in elemint en stopje pas mei tapassen nei't de brûker op in oar elemint tikt. Dit kin feroarsaakje dat Bootstrap's :hoversteaten ûngewoan "fêst" wurde op sokke browsers. Guon mobile browsers meitsje ek :focuslike kleverig. D'r is op it stuit gjin ienfâldige oplossing foar dizze problemen oars as it folslein fuortsmite fan sokke stilen.

Printsjen

Sels yn guon moderne browsers kin printsjen eigensinnich wêze.

Yn it bysûnder, lykas Chrome v32 en nettsjinsteande marzje-ynstellingen, brûkt Chrome in viewportbreedte signifikant smeller dan de fysike papiergrutte by it oplossen fan mediafragen by it printsjen fan in webside. Dit kin resultearje yn it ekstra-lytse raster fan Bootstrap dat ûnferwachts aktivearre wurdt by it printsjen. Sjoch útjefte #12078 en Chrome-bug #273306 foar guon details. Foarstelde oplossingen:

• Omearmje it ekstra-lytse raster en soargje derfoar dat jo side der ûnder akseptabel útsjocht.
• Pas de wearden fan de @screen-*Minder fariabelen oan, sadat jo printerpapier grutter wurdt as ekstra lyts.
• Foegje oanpaste mediafragen ta om de rastergrutte breakpoints allinich foar printmedia te feroarjen.

Ek, as fan Safari v8.0, s mei fêste breedte .containerkinne feroarsaakje dat Safari in ûngewoan lytse lettergrutte brûkt by it printsjen. Sjoch #14868 en WebKit-bug #138192 foar mear details. Ien mooglike oplossing foar dit is it tafoegjen fan de folgjende CSS:

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

Android stock blêder

Ut it fak wurdt Android 4.1 (en sels wat nijere releases blykber) ferstjoerd mei de Browser-app as de standert webbrowser fan kar (yn tsjinstelling ta Chrome). Spitigernôch hat de Browser-app in protte bugs en ynkonsistinsjes mei CSS yn 't algemien.

Selektearje menu's

Op <select>eleminten sil de Android-stockblêder de sydkontrôles net werjaan as d'r in border-radiusen / of bordertapast is. (Sjoch dizze StackOverflow-fraach foar details.) Brûk it stikje koade hjirûnder om de misledigjende CSS te ferwiderjen en it <select>as in unstyled elemint op 'e Android-stockblêder wer te jaan. It snuffeljen fan brûkersagent foarkomt ynterferinsje mei Chrome-, Safari- en Mozilla-browsers.

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

Wolle jo in foarbyld sjen? Besjoch dizze JS Bin demo.

Validators

Om de bêste mooglike ûnderfining te leverjen oan âlde en buggy browsers, brûkt Bootstrap CSS browser hacks op ferskate plakken om spesjale CSS te rjochtsjen op bepaalde browserferzjes om bugs yn 'e browsers sels om te wurkjen. Dizze hacks feroarsaakje begryplik CSS-validators om te kleien dat se ûnjildich binne. Op in pear plakken brûke wy ek bleedende CSS-funksjes dy't noch net folslein standerdisearre binne, mar dizze wurde puur brûkt foar progressive ferbettering.

Dizze falidaasje warskôgings meitsje yn 'e praktyk neat út, om't it net-hacky-diel fan ús CSS folslein falidearret en de hacky-dielen net ynterferearje mei it goede funksjonearjen fan it net-hacky-diel, dêrom negearje wy dizze bepaalde warskôgings bewust.

Us HTML-dokuminten hawwe ek wat triviale en ûngemaklike warskôgings foar HTML-validaasje fanwege ús opnimmen fan in oplossing foar in bepaalde Firefox-bug .

Tredde partij stipe

Wylst wy offisjeel gjin plugins of tafoegings fan tredden stypje, biede wy wat nuttich advys om mooglike problemen yn jo projekten te foarkommen.

Box-sizing

Guon software fan tredden, ynklusyf Google Maps en Google Custom Search Engine, konflikt mei Bootstrap fanwege * { box-sizing: border-box; }, in regel dy't it sa makket, paddinghat gjin ynfloed op de definitive berekkene breedte fan in elemint. Learje mear oer doazemodel en maatwurk by CSS Tricks .

Ofhinklik fan 'e kontekst kinne jo as nedich oerskriuwe (Opsje 1) of de doazegrutte foar folsleine regio's weromsette (Opsje 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();
}

Tagonklikheid

Bootstrap folget gewoane webnoarmen en - mei minimale ekstra ynspanning - kin brûkt wurde om siden te meitsjen dy't tagonklik binne foar dyjingen dy't AT brûke .

Skip navigaasje

As jo ​​navigaasje in protte keppelings befettet en komt foar de haadynhâld yn 'e DOM, foegje dan in Skip to main contentkeppeling ta foar de navigaasje (sjoch foar in ienfâldige útlis dit A11Y Project-artikel oer skip navigaasjekeppelings ). It brûken fan de .sr-onlyklasse sil de skipkeppeling visueel ferbergje, en de .sr-only-focusableklasse sil derfoar soargje dat de keppeling sichtber wurdt as ienris rjochte is (foar sichtbere toetseboerdbrûkers).

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

Nested headings

By it nesteljen fan kopteksten ( <h1>- <h6>), moat jo primêre dokumintkop in <h1>. Folgjende kopteksten moatte logysk gebrûk meitsje fan <h2>- <h6>sa dat skermlêzers in ynhâldsopjefte foar jo siden kinne konstruearje.

Learje mear by HTML CodeSniffer en Penn State's AccessAbility .

Kleur kontrast

Op it stuit binne guon fan 'e standertkleurkombinaasjes te krijen yn Bootstrap (lykas de ferskate stilearre knopklassen, guon fan' e koade markearje kleuren dy't brûkt wurde foar basiskoadeblokken , de .bg-primary kontekstuele eftergrûnhelperklasse , en de standert keppelingkleur as brûkt op in wite eftergrûn) hawwe in lege kontrastferhâlding (ûnder de oanrikkemandearre ferhâlding fan 4,5:1 ). Dit kin problemen feroarsaakje foar brûkers mei leech fyzje of dy't kleurblyn binne. Dizze standertkleuren moatte miskien wizige wurde om har kontrast en lêsberens te fergrutsjen.

Oanfoljende middels

• Blêdwizer "HTML Codesniffer" foar it identifisearjen fan tagonklikheidsproblemen
• Chrome's tafoeging foar ûntwikkelders ark foar tagonklikens
• Kleurkontrastanalysator
• It A11Y-projekt
• MDN tagonklikens dokumintaasje

Lisinsje FAQs

Bootstrap is frijjûn ûnder de MIT-lisinsje en is copyright 2019 Twitter. Omleech nei lytsere brokken, kin it beskreaun wurde mei de folgjende betingsten.

It fereasket dat jo:

• Hâld de lisinsje en auteursrjochtnotysje opnommen yn Bootstrap's CSS- en JavaScript-bestannen as jo se brûke yn jo wurken

It lit jo ta:

• Freegje en brûk Bootstrap, hielendal of foar in part, foar persoanlike, privee, bedriuw ynterne, as kommersjele doelen
• Brûk Bootstrap yn pakketten of distribúsjes dy't jo meitsje
• Feroarje de boarne koade
• Jou in sublisinsje om Bootstrap te wizigjen en te fersprieden oan tredden dy't net opnommen binne yn 'e lisinsje

It ferbiedt jo om:

• Hâld de auteurs en lisinsje-eigners oanspraaklik foar skea as Bootstrap wurdt levere sûnder garânsje
• Hâld de makkers as auteursrjochthâlders fan Bootstrap oanspraaklik
• Ferwiderje elk stik Bootstrap sûnder juste attribúsje
• Brûk alle merken dy't eigendom binne fan Twitter op elke manier dy't kinne oanjaan of ymplisearje dat Twitter jo distribúsje ûnderskriuwt
• Brûk alle merken dy't eigendom binne fan Twitter op elke manier dy't kinne oanjaan of ymplisearje dat jo de oanbelangjende Twitter-software makke hawwe

It fereasket jo net:

• Omfetsje de boarne fan Bootstrap sels, of fan alle oanpassingen dy't jo deroan hawwe makke, yn elke werferdieling dy't jo kinne gearstalle dy't it omfettet
• Feroarje wizigingen dy't jo meitsje oan Bootstrap werom nei it Bootstrap-projekt (hoewol sokke feedback wurdt oanmoedige)

De folsleine Bootstrap-lisinsje is te finen yn it projektrepository foar mear ynformaasje.

Translations

Mienskipsleden hawwe de dokumintaasje fan Bootstrap oerset yn ferskate talen. Gjinien wurdt offisjeel stipe en se binne miskien net altyd bywurke.

• Bootstrap 中文文档 (Sineesk)
• Bootstrap op Dansk (Deensk)
• Bootstrap en Français (Frânsk)
• Bootstrap auf Deutsch (Dútsk)
• Bootstrap in Italiano (Italiaansk)
• Bootstrap 한국어 (Koreaansk)
• Bootstrap yn Português do Brasil (Brazyljaansk Portugeesk)
• Bootstrap по-русски (Russysk)
• Bootstrap en Español (Spaansk)
• Türkçe Bootstrap (Turksk)
• Bootstrap українською (Oekraïnsk)
• Bootstrap bằng tiếng Việt (Fietnameesk)

Wy helpe net by it organisearjen of hostjen fan oersettingen, wy keppelje der gewoan nei.

In nije of bettere oersetting klear? Iepenje in pull-fersyk om it ta te foegjen oan ús list.