nedlasting

Bootstrap (for øyeblikket v3.3.7) har noen enkle måter å raskt komme i gang på, hver og en appellerer til forskjellige ferdighetsnivåer og bruksområder. Les gjennom for å se hva som passer dine spesielle behov.

Bootstrap CDN

Folkene på jsDelivr tilbyr CDN-støtte for Bootstraps CSS og JavaScript. Bare bruk disse Bootstrap CDN- koblingene.

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

<!-- Optional theme -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

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

Installer med Bower

Du kan også installere og administrere Bootstraps Less, CSS, JavaScript og fonter ved å bruke Bower :

$ bower install bootstrap

Installer med npm

Du kan også installere Bootstrap ved å bruke npm :

$ npm install bootstrap@3

require('bootstrap')vil laste inn alle Bootstraps jQuery-plugins på jQuery-objektet. Selve bootstrapmodulen eksporterer ikke noe. Du kan manuelt laste Bootstraps jQuery-plugins individuelt ved å laste /js/*.jsfilene under pakkens toppnivåkatalog.

Bootstraps package.jsoninneholder noen ekstra metadata under følgende nøkler:

• less- bane til Bootstraps viktigste Less -kildefil
• style- bane til Bootstraps ikke-minifiserte CSS som er forhåndskompilert med standardinnstillingene (ingen tilpasning)

Installer med Composer

Du kan også installere og administrere Bootstraps Less, CSS, JavaScript og fonter ved å bruke Composer :

$ composer require twbs/bootstrap

Autoprefixer kreves for Less/Sass

Bootstrap bruker Autoprefixer for å håndtere CSS-leverandørprefikser . Hvis du kompilerer Bootstrap fra Less/Sass-kilden og ikke bruker Gruntfilen vår, må du selv integrere Autoprefixer i byggeprosessen. Hvis du bruker forhåndskompilert Bootstrap eller bruker Gruntfilen vår, trenger du ikke å bekymre deg for dette fordi Autoprefixer allerede er integrert i Gruntfilen vår.

Hva er inkludert

Bootstrap kan lastes ned i to former, der du finner følgende kataloger og filer, logisk grupperer vanlige ressurser og gir både kompilerte og minifiserte variasjoner.

Forhåndskompilert Bootstrap

Når den er lastet ned, pakk ut den komprimerte mappen for å se strukturen til (den kompilerte) Bootstrap. Du vil se noe slikt:

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

Dette er den mest grunnleggende formen for Bootstrap: forhåndskompilerte filer for rask drop-in-bruk i nesten alle nettprosjekter. Vi tilbyr kompilert CSS og JS ( bootstrap.*), samt kompilert og minifisert CSS og JS ( bootstrap.min.*). CSS - kildekart ( bootstrap.*.map) er tilgjengelige for bruk med visse nettleseres utviklerverktøy. Fonter fra Glyphicons er inkludert, det samme er det valgfrie Bootstrap-temaet.

Bootstrap kildekode

Nedlastingen av Bootstrap-kildekoden inkluderer de forhåndskompilerte CSS-, JavaScript- og fontelementene, sammen med kilde Less, JavaScript og dokumentasjon. Mer spesifikt inkluderer den følgende og mer:

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

, less/, js/og fonts/er kildekoden for CSS-, JS- og ikonfontene våre (henholdsvis). Mappen dist/inneholder alt som er oppført i den forhåndskompilerte nedlastingsdelen ovenfor. Mappen docs/inneholder kildekoden for dokumentasjonen vår og examples/Bootstrap-bruk. Utover det gir enhver annen inkludert fil støtte for pakker, lisensinformasjon og utvikling.

Kompilere CSS og JavaScript

Bootstrap bruker Grunt for byggesystemet sitt, med praktiske metoder for å jobbe med rammeverket. Det er hvordan vi kompilerer koden vår, kjører tester og mer.

Installerer Grunt

For å installere Grunt må du først laste ned og installere node.js (som inkluderer npm). npm står for node-pakkede moduler og er en måte å administrere utviklingsavhengigheter gjennom node.js.

1. Installer grunt-cliglobalt med npm install -g grunt-cli.
2. Naviger til rotkatalogen /bootstrap/, og kjør deretter npm install. npm vil se på package.jsonfilen og automatisk installere de nødvendige lokale avhengighetene som er oppført der.

Når du er ferdig, vil du kunne kjøre de forskjellige Grunt-kommandoene fra kommandolinjen.

Tilgjengelige Grunt-kommandoer

grunt dist(Bare kompiler CSS og JavaScript)

Regenererer /dist/katalogen med kompilerte og minifiserte CSS- og JavaScript-filer. Som Bootstrap-bruker er dette normalt kommandoen du vil ha.

grunt watch(Se)

Ser på Less-kildefilene og kompilerer dem automatisk til CSS hver gang du lagrer en endring.

grunt test(Kjør tester)

Kjører JSHint og kjører QUnit- testene hodeløst i PhantomJS .

grunt docs(Bygg og test dokumentmidlene)

Bygger og tester CSS, JavaScript og andre ressurser som brukes når du kjører dokumentasjonen lokalt via bundle exec jekyll serve.

grunt(Bygg absolutt alt og kjør tester)

Kompilerer og forminsker CSS og JavaScript, bygger dokumentasjonsnettstedet, kjører HTML5-validatoren mot dokumentene, regenererer Customizer-ressursene og mer. Krever Jekyll . Vanligvis bare nødvendig hvis du hacker på selve Bootstrap.

Feilsøking

Skulle du støte på problemer med å installere avhengigheter eller kjøre Grunt-kommandoer, må du først slette /node_modules/katalogen generert av npm. Kjør deretter på nytt npm install.

Grunnleggende mal

Start med denne grunnleggende HTML-malen, eller endre disse eksemplene . Vi håper du vil tilpasse malene og eksemplene våre, tilpasse dem til dine behov.

Kopier HTML-en nedenfor for å begynne å jobbe med et minimalt Bootstrap-dokument.

<!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 href="css/bootstrap.min.css" rel="stylesheet">

    <!-- 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://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

Eksempler

Bygg videre på grunnmalen ovenfor med Bootstraps mange komponenter. Vi oppfordrer deg til å tilpasse og tilpasse Bootstrap for å passe ditt individuelle prosjekts behov.

Få kildekoden for hvert eksempel nedenfor ved å laste ned Bootstrap-depotet . Eksempler finner du i docs/examples/katalogen.

Bruke rammeverket

Startmal

Ingenting annet enn det grunnleggende: kompilert CSS og JavaScript sammen med en beholder.

Bootstrap-tema

Last inn det valgfrie Bootstrap-temaet for en visuelt forbedret opplevelse.

Rutenett

Flere eksempler på rutenettoppsett med alle fire nivåer, nesting og mer.

Jumbotron

Bygg rundt jumbotronen med en navbar og noen grunnleggende rutenettsøyler.

Smal jumbotron

Bygg en mer tilpasset side ved å begrense standardbeholderen og jumbotronen.

Navbarer i aksjon

Navbar

Super grunnleggende mal som inkluderer navigasjonslinjen sammen med noe tilleggsinnhold.

Statisk toppnavigeringslinje

Super grunnleggende mal med en statisk toppnavigasjonslinje sammen med noe tilleggsinnhold.

Fast navbar

Super grunnleggende mal med en fast toppnavigasjonslinje sammen med noe tilleggsinnhold.

Tilpassede komponenter

Dekke

En ensides mal for å bygge enkle og vakre hjemmesider.

Karusell

Tilpass navigasjonslinjen og karusellen, og legg deretter til noen nye komponenter.

Blogg

Enkelt to-kolonne bloggoppsett med tilpasset navigasjon, overskrift og type.

Dashbord

Grunnleggende struktur for et admin-dashbord med fast sidefelt og navbar.

Påloggingsside

Egendefinert skjemalayout og design for et enkelt påloggingsskjema.

Begrunnet nav

Lag en tilpasset navigasjonslinje med begrunnede lenker. Vær oppmerksom! Ikke for Safari-vennlig.

Klistrete bunntekst

Fest en bunntekst nederst i visningsporten når innholdet er kortere enn det.

Klistrete bunntekst med navigasjonslinje

Fest en bunntekst nederst i visningsporten med en fast navigasjonslinje øverst.

Eksperimenter

Ikke-responsiv Bootstrap

Deaktiver enkelt responsen til Bootstrap i henhold til våre dokumenter .

Off-lerret

Bygg en vekslebar off-canvas navigasjonsmeny for bruk med Bootstrap.

Verktøy

Bootlint

Bootlint er det offisielle Bootstrap HTML linter- verktøyet. Den sjekker automatisk for flere vanlige HTML-feil på nettsider som bruker Bootstrap på en ganske "vanilje" måte. Vanilla Bootstraps komponenter/widgets krever at deres deler av DOM-en samsvarer med visse strukturer. Bootlint sjekker at forekomster av Bootstrap-komponenter har korrekt strukturert HTML. Vurder å legge til Bootlint i Bootstrap-nettutviklingsverktøykjeden, slik at ingen av de vanlige feilene bremser prosjektets utvikling.

Samfunnet

Hold deg oppdatert på utviklingen av Bootstrap og nå ut til fellesskapet med disse nyttige ressursene.

• Les og abonner på The Official Bootstrap Blog .
• Chat med andre Bootstrappere ved å bruke IRC på irc.freenode.netserveren, i ##bootstrap-kanalen .
• For hjelp med å bruke Bootstrap, spør på StackOverflow ved å bruke taggentwitter-bootstrap-3 .
• Utviklere bør bruke nøkkelordet bootstrappå pakker som endrer eller legger til funksjonaliteten til Bootstrap når de distribuerer gjennom npm eller lignende leveringsmekanismer for maksimal oppdagbarhet.
• Finn inspirerende eksempler på folk som bygger med Bootstrap på Bootstrap Expo .

Du kan også følge @getbootstrap på Twitter for siste sladder og fantastiske musikkvideoer.

Deaktivere respons

Bootstrap tilpasser automatisk sidene dine for ulike skjermstørrelser. Slik deaktiverer du denne funksjonen slik at siden din fungerer som dette ikke-responsive eksempelet .

Trinn for å deaktivere siderespons

1. Utelat visningsporten <meta>nevnt i CSS-dokumentene
2. Overstyr widthpå .containerfor hver grid tier med en enkelt bredde, for eksempel width: 970px !important;Pass på at dette kommer etter standard Bootstrap CSS. Du kan eventuelt unngå !importantmed mediespørringer eller noe selector-fu.
3. Hvis du bruker navbarer, fjern all navbars sammenbrudd og utvidelsesadferd.
4. For rutenettoppsett, bruk .col-xs-*klasser i tillegg til eller i stedet for de mellomstore/store. Ikke bekymre deg, det ekstra lille enhetens rutenett skaleres til alle oppløsninger.

Du trenger fortsatt Respond.js for IE8 (siden medieforespørslene våre fortsatt er der og må behandles). Dette deaktiverer "mobilnettstedet"-aspekter av Bootstrap.

Bootstrap-mal med respons deaktivert

Vi har brukt disse trinnene til et eksempel. Les kildekoden for å se de spesifikke endringene som er implementert.

Se eksempel som ikke reagerer

Nettleser- og enhetsstøtte

Bootstrap er bygget for å fungere best i de nyeste stasjonære og mobile nettleserne, noe som betyr at eldre nettlesere kan vise forskjellig stil, men fullt funksjonell, gjengivelser av visse komponenter.

Støttede nettlesere

Spesielt støtter vi de nyeste versjonene av følgende nettlesere og plattformer.

Alternative nettlesere som bruker den nyeste versjonen av WebKit, Blink eller Gecko, enten direkte eller via plattformens webvisnings-API, støttes ikke eksplisitt. Imidlertid bør Bootstrap (i de fleste tilfeller) vises og fungere korrekt i disse nettleserne også. Mer spesifikk støtteinformasjon er gitt nedenfor.

Mobile enheter

Generelt sett støtter Bootstrap de nyeste versjonene av hver store plattforms standard nettlesere. Merk at proxy-nettlesere (som Opera Mini, Opera Mobiles Turbo-modus, UC Browser Mini, Amazon Silk) ikke støttes.

Desktop-nettlesere

På samme måte støttes de nyeste versjonene av de fleste stasjonære nettlesere.

På Windows støtter vi Internet Explorer 8-11 .

For Firefox, i tillegg til den siste normale stabile utgivelsen, støtter vi også den nyeste versjonen av Firefox (Extended Support Release) (ESR) .

Uoffisielt burde Bootstrap se ut og oppføre seg godt nok i Chromium og Chrome for Linux, Firefox for Linux og Internet Explorer 7, samt Microsoft Edge, selv om de ikke er offisielt støttet.

For en liste over noen av nettleserfeilene som Bootstrap må kjempe med, se vår vegg med nettleserfeil .

Internet Explorer 8 og 9

Internet Explorer 8 og 9 støttes også, men vær oppmerksom på at enkelte CSS3-egenskaper og HTML5-elementer ikke støttes fullt ut av disse nettleserne. I tillegg krever Internet Explorer 8 bruk av Respond.js for å aktivere støtte for mediesøk.

Besøk Kan jeg bruke... for detaljer om nettleserstøtte for CSS3- og HTML5-funksjoner.

Internet Explorer 8 og Respond.js

Vær oppmerksom på følgende forbehold når du bruker Respond.js i utviklings- og produksjonsmiljøene dine for Internet Explorer 8.

Respond.js og CSS på tvers av domener

Bruk av Respond.js med CSS hostet på et annet (under)domene (for eksempel på et CDN) krever noe ekstra oppsett. Se Respond.js-dokumentene for detaljer.

Respond.js ogfile://

På grunn av nettlesersikkerhetsregler fungerer ikke Respond.js med sider som vises via file://protokollen (som når du åpner en lokal HTML-fil). For å teste responsive funksjoner i IE8, se sidene dine over HTTP(S). Se Respond.js-dokumentene for detaljer.

Respond.js og@import

Respond.js fungerer ikke med CSS som er referert via @import. Spesielt noen Drupal-konfigurasjoner er kjent for å bruke @import. Se Respond.js-dokumentene for detaljer.

Internet Explorer 8 og boksstørrelse

IE8 støtter ikke fullt ut box-sizing: border-box;når det kombineres med min-width, max-width, min-height, eller max-height. Av den grunn, fra og med v3.0.1, bruker vi ikke lenger max-widthpå .containers.

Internet Explorer 8 og @font-face

IE8 har noen problemer med @font-facenår den kombineres med :before. Bootstrap bruker den kombinasjonen med sine Glyphicons. Hvis en side er bufret, og lastet uten musen over vinduet (dvs. trykk på oppdateringsknappen eller last inn noe i en iframe), så blir siden gjengitt før fonten lastes. Holder du musepekeren over siden (brødteksten) vises noen av ikonene, og ved å holde musepekeren over de resterende ikonene vises disse også. Se utgave #13863 for detaljer.

IE-kompatibilitetsmoduser

Bootstrap støttes ikke i de gamle Internet Explorer-kompatibilitetsmodusene. For å være sikker på at du bruker den nyeste gjengivelsesmodusen for IE, bør du vurdere å inkludere riktig <meta>tag på sidene dine:

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

Bekreft dokumentmodusen ved å åpne feilsøkingsverktøyene: trykk F12og sjekk "Dokumentmodus".

Denne taggen er inkludert i all Bootstraps dokumentasjon og eksempler for å sikre best mulig gjengivelse i hver støttet versjon av Internet Explorer.

Se dette StackOverflow-spørsmålet for mer informasjon.

Internet Explorer 10 i Windows 8 og Windows Phone 8

Internet Explorer 10 skiller ikke enhetsbredde fra visningsportbredde , og bruker derfor ikke mediespørringene på riktig måte i Bootstraps CSS. Vanligvis vil du bare legge til et raskt utdrag av CSS for å fikse dette:

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

Dette fungerer imidlertid ikke for enheter som kjører Windows Phone 8-versjoner som er eldre enn Update 3 (aka GDR3) , da det fører til at slike enheter stort sett viser en skrivebordsvisning i stedet for en smal "telefon"-visning. For å løse dette, må du inkludere følgende CSS og JavaScript for å omgå feilen .

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

// Copyright 2014-2015 Twitter, Inc.
// Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/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)
}

For mer informasjon og retningslinjer for bruk, les Windows Phone 8 og Device-Width .

Som en heads up inkluderer vi dette i all Bootstraps dokumentasjon og eksempler som en demonstrasjon.

Safari prosent avrunding

Gjengivelsesmotoren for versjoner av Safari før v7.1 for OS X og Safari for iOS v8.0 hadde noen problemer med antall desimaler som ble brukt i .col-*-1rutenettklassene våre. Så hvis du hadde 12 individuelle rutenettkolonner, ville du lagt merke til at de ble korte sammenlignet med andre rader med kolonner. I tillegg til å oppgradere Safari/iOS, har du noen alternativer for løsninger:

• Legg .pull-righttil den siste rutenettkolonnen for å få hard-høyre justering
• Juster prosentene manuelt for å få den perfekte avrundingen for Safari (vanskeligere enn det første alternativet)

Modaler, navbarer og virtuelle tastaturer

Overløp og rulling

Støtte for overflow: hiddenpå <body>elementet er ganske begrenset i iOS og Android. For det formål, når du ruller forbi toppen eller bunnen av en modal i en av enhetenes nettlesere, vil <body>innholdet begynne å rulle. Se Chrome-feil #175502 (fikset i Chrome v40) og WebKit-feil #153852 .

iOS-tekstfelt og rulling

Fra og med iOS 9.3, mens en modal er åpen, hvis den første berøringen av en rullebevegelse er innenfor grensen til en tekst <input>eller en <textarea>, vil <body>innholdet under modalen bli rullet i stedet for selve modalen. Se WebKit-feil #153856 .

Virtuelle tastaturer

Vær også oppmerksom på at hvis du bruker en fast navbar eller bruker innganger innenfor en modal, har iOS en gjengivelsesfeil som ikke oppdaterer posisjonen til faste elementer når det virtuelle tastaturet utløses. Noen få løsninger for dette inkluderer å transformere elementene dine til position: absoluteeller påkalle en timer på fokus for å prøve å korrigere posisjoneringen manuelt. Dette håndteres ikke av Bootstrap, så det er opp til deg å bestemme hvilken løsning som passer best for din applikasjon.

Navbar rullegardinmenyene

.dropdown-backdropElementet brukes ikke på iOS i nav på grunn av kompleksiteten til z-indeksering . Derfor, for å lukke rullegardinmenyene i navbarer, må du klikke direkte på rullegardinelementet (eller et hvilket som helst annet element som vil utløse en klikkhendelse i iOS ).

Nettleserzooming

Sidezooming presenterer uunngåelig gjengivelsesartefakter i enkelte komponenter, både i Bootstrap og resten av nettet. Avhengig av problemet kan vi kanskje fikse det (søk først og åpne et problem om nødvendig). Imidlertid har vi en tendens til å ignorere disse siden de ofte ikke har noen direkte løsning annet enn hacky løsninger.

Sticky :hover/ :focuspå mobil

Selv om ekte sveving ikke er mulig på de fleste berøringsskjermer, emulerer de fleste mobilnettlesere svevestøtte og gjør :hover"klistre". Med andre ord, :hoverstiler begynner å gjelde etter å ha trykket på et element og slutter først å gjelde etter at brukeren trykker på et annet element. Dette kan føre til at Bootstraps :hovertilstander blir uønsket "fast" på slike nettlesere. Noen mobilnettlesere gjør også :focuslignende klebrig. Det er foreløpig ingen enkel løsning for disse problemene annet enn å fjerne slike stiler helt.

Printing

Selv i noen moderne nettlesere kan utskrift være rart.

Spesielt fra og med Chrome v32 og uavhengig av marginnstillinger, bruker Chrome en visningsportbredde som er betydelig smalere enn den fysiske papirstørrelsen når den løser mediespørsmål mens du skriver ut en nettside. Dette kan føre til at Bootstraps ekstra lille rutenett uventet aktiveres under utskrift. Se utgave #12078 og Chrome-feil #273306 for detaljer. Foreslåtte løsninger:

• Omfavn det ekstra lille rutenettet og sørg for at siden din ser akseptabel ut under den.
• Tilpass verdiene til @screen-*Less-variablene slik at skriverpapiret ditt anses som større enn ekstra lite.
• Legg til egendefinerte mediespørringer for å endre brytepunktene for rutenettstørrelse kun for utskriftsmedier.

Fra og med Safari v8.0 kan .containers med fast bredde føre til at Safari bruker en uvanlig liten skriftstørrelse ved utskrift. Se #14868 og WebKit-feil #138192 for flere detaljer. En mulig løsning for dette er å legge til følgende CSS:

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

Android lager nettleser

Ut av esken leveres Android 4.1 (og til og med noen nyere utgivelser tilsynelatende) med nettleserappen som standard nettleser (i motsetning til Chrome). Dessverre har nettleserappen mange feil og inkonsekvenser med CSS generelt.

Velg menyer

På <select>elementer vil ikke Android-aksjenettleseren vise sidekontrollene hvis det er en border-radiusog/eller borderbrukt. (Se dette StackOverflow-spørsmålet for detaljer.) Bruk kodebiten nedenfor for å fjerne den fornærmende CSS-en og gjengi den <select>som et ustilt element i Android-aksjenettleseren. Brukeragenten som snuser unngår forstyrrelser med Chrome-, Safari- og Mozilla-nettlesere.

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

Vil du se et eksempel? Sjekk ut denne JS Bin-demoen.

Validatorer

For å gi den best mulige opplevelsen til gamle og buggy nettlesere, bruker Bootstrap CSS-nettleserhack flere steder for å målrette spesiell CSS til visse nettleserversjoner for å omgå feil i nettleserne selv. Disse hackene får forståelig nok CSS-validatorer til å klage over at de er ugyldige. Et par steder bruker vi også avanserte CSS-funksjoner som ennå ikke er fullstendig standardiserte, men disse brukes utelukkende for progressiv forbedring.

Disse valideringsadvarslene spiller ingen rolle i praksis siden den ikke-hacky-delen av CSS-en vår validerer fullt ut og de hacky-delene ikke forstyrrer den riktige funksjonen til den ikke-hacky-delen, og derfor ignorerer vi disse advarslene bevisst.

HTML-dokumentene våre har også noen trivielle og ubetydelige HTML-valideringsadvarsler på grunn av vår inkludering av en løsning for en viss Firefox-feil .

Tredjeparts støtte

Selv om vi ikke offisielt støtter noen tredjeparts plugins eller tillegg, tilbyr vi noen nyttige råd for å unngå potensielle problemer i prosjektene dine.

Boksstørrelse

Noe tredjepartsprogramvare, inkludert Google Maps og Google Custom Search Engine, er i konflikt med Bootstrap på grunn av * { box-sizing: border-box; }, en regel som gjør at det paddingikke påvirker den endelige beregnede bredden til et element. Lær mer om boksmodell og størrelse på CSS Tricks .

Avhengig av konteksten kan du overstyre etter behov (alternativ 1) eller tilbakestille boksstørrelsen for hele regioner (alternativ 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();
}

tilgjengelighet

Bootstrap følger vanlige nettstandarder og kan – med minimal ekstra innsats – brukes til å lage nettsteder som er tilgjengelige for de som bruker AT .

Hopp over navigering

Hvis navigasjonen din inneholder mange lenker og kommer før hovedinnholdet i DOM, legg til en Skip to main contentlenke før navigasjonen (for en enkel forklaring, se denne A11Y Project-artikkelen om hopp over navigasjonslenker ). Bruk av .sr-onlyklassen vil visuelt skjule hopp over koblingen, og .sr-only-focusableklassen vil sørge for at koblingen blir synlig når den er fokusert (for seende tastaturbrukere).

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

Nestede overskrifter

Når du legger overskrifter ( <h1>- <h6>), bør den primære dokumentoverskriften være en <h1>. Etterfølgende overskrifter bør gjøre logisk bruk av <h2>- <h6>slik at skjermlesere kan konstruere en innholdsfortegnelse for sidene dine.

Lær mer på HTML CodeSniffer og Penn State's AccessAbility .

Fargekontrast

For øyeblikket er noen av standard fargekombinasjoner tilgjengelig i Bootstrap (som de forskjellige stylede knappeklassene , noen av kodeuthevingsfargene som brukes for grunnleggende kodeblokker , den .bg-primary kontekstuelle bakgrunnshjelperklassen og standard lenkefargen når den brukes på en hvit bakgrunn) har et lavt kontrastforhold (under anbefalt forhold på 4,5:1 ). Dette kan forårsake problemer for brukere med nedsatt syn eller som er fargeblinde. Disse standardfargene må kanskje endres for å øke kontrasten og lesbarheten.

Tilleggsressurser

• "HTML Codesniffer" bokmerke for å identifisere tilgjengelighetsproblemer
• Chromes utvidelse for utviklerverktøy for tilgjengelighet
• Fargekontrastanalysator
• A11Y-prosjektet
• MDN tilgjengelighetsdokumentasjon

Vanlige spørsmål om lisenser

Bootstrap er utgitt under MIT-lisensen og er copyright 2016 Twitter. Kokt ned til mindre biter kan det beskrives med følgende forhold.

Det krever at du:

• Behold lisensen og merknaden om opphavsrett inkludert i Bootstraps CSS- og JavaScript-filer når du bruker dem i verkene dine

Den tillater deg å:

• Last ned og bruk Bootstrap fritt, helt eller delvis, for personlige, private, bedriftsinterne eller kommersielle formål
• Bruk Bootstrap i pakker eller distribusjoner du oppretter
• Endre kildekoden
• Gi en underlisens for å endre og distribuere Bootstrap til tredjeparter som ikke er inkludert i lisensen

Den forbyr deg å:

• Hold forfatterne og lisenseierne ansvarlige for skader ettersom Bootstrap leveres uten garanti
• Hold skaperne eller rettighetsinnehaverne av Bootstrap ansvarlige
• Omfordel en hvilken som helst del av Bootstrap uten riktig attribusjon
• Bruk alle merker som eies av Twitter på noen måte som kan antyde eller antyde at Twitter støtter distribusjonen din
• Bruk alle merker som eies av Twitter på noen måte som kan antyde eller antyde at du opprettet den aktuelle Twitter-programvaren

Det krever ikke at du:

• Inkluder kilden til selve Bootstrap, eller eventuelle modifikasjoner du kan ha gjort på den, i enhver redistribusjon du kan sette sammen som inkluderer den
• Send endringer du gjør i Bootstrap tilbake til Bootstrap-prosjektet (selv om slike tilbakemeldinger oppfordres)

Den fullstendige Bootstrap-lisensen ligger i prosjektlageret for mer informasjon.

Oversettelser

Medlemmer av fellesskapet har oversatt Bootstraps dokumentasjon til forskjellige språk. Ingen støttes offisielt, og de er kanskje ikke alltid oppdatert.

• Bootstrap 中文文档 (kinesisk)
• Bootstrap 3 中文手冊 (kinesisk (tradisjonell))
• Bootstrap på Dansk (dansk)
• Bootstrap en Français (fransk)
• Bootstrap auf Deutsch (tysk)
• Bootstrap på italiensk (italiensk)
• Bootstrap 한국어 (koreansk)
• Bootstrap em Português do Brasil (brasiliansk portugisisk)
• Bootstrap по-русски (russisk)
• Bootstrap en Español (spansk)
• Türkçe Bootstrap (tyrkisk)
• Bootstrap українською (ukrainsk)
• Bootstrap bằng tiếng Việt (vietnamesisk)

Vi hjelper ikke med å organisere eller være vert for oversettelser, vi lenker bare til dem.

Fullført en ny eller bedre oversettelse? Åpne en pull-forespørsel for å legge den til i listen vår.