Kom godt i gang
En oversigt over Bootstrap, hvordan du downloader og bruger, grundlæggende skabeloner og eksempler og mere.
En oversigt over Bootstrap, hvordan du downloader og bruger, grundlæggende skabeloner og eksempler og mere.
Bootstrap (p.t. v3.3.7) har et par nemme måder til hurtigt at komme i gang, hver af dem appellerer til et forskelligt færdighedsniveau og forskellige anvendelsesmuligheder. Læs igennem for at se, hvad der passer til netop dine behov.
Kompileret og minificeret CSS, JavaScript og skrifttyper. Ingen dokumenter eller originale kildefiler er inkluderet.
Kilde mindre, JavaScript og skrifttypefiler sammen med vores dokumenter. Kræver en mindre compiler og noget opsætning.
Bootstrap portet fra Less til Sass for nem inklusion i Rails-, Compass- eller Sass-only-projekter.
Folkene hos jsDelivr giver elskværdig CDN-understøttelse til Bootstraps CSS og JavaScript. Bare brug disse Bootstrap CDN- links.
Du kan også installere og administrere Bootstraps Less, CSS, JavaScript og skrifttyper ved hjælp af Bower :
Du kan også installere Bootstrap ved hjælp af npm :
require('bootstrap')
vil indlæse alle Bootstraps jQuery-plugins på jQuery-objektet. Selve bootstrap
modulet eksporterer ikke noget. Du kan manuelt indlæse Bootstraps jQuery-plugins individuelt ved at indlæse /js/*.js
filerne under pakkens øverste mappe.
Bootstraps package.json
indeholder nogle ekstra metadata under følgende nøgler:
less
- sti til Bootstraps primære Less -kildefilstyle
- sti til Bootstraps ikke-minificerede CSS, der er blevet prækompileret ved hjælp af standardindstillingerne (ingen tilpasning)Du kan også installere og administrere Bootstraps Less, CSS, JavaScript og skrifttyper ved hjælp af Composer :
Bootstrap bruger Autoprefixer til at håndtere CSS-leverandørpræfikser . Hvis du kompilerer Bootstrap fra dens Less/Sass-kilde og ikke bruger vores Gruntfile, skal du selv integrere Autoprefixer i din byggeproces. Hvis du bruger prækompileret Bootstrap eller bruger vores Gruntfile, behøver du ikke bekymre dig om dette, fordi Autoprefixer allerede er integreret i vores Gruntfile.
Bootstrap kan downloades i to former, inden for hvilke du finder følgende mapper og filer, logisk grupperer fælles ressourcer og giver både kompilerede og minificerede variationer.
Bemærk venligst, at alle JavaScript-plugins kræver, at jQuery er inkluderet, som vist i starterskabelonen . Se voresbower.json
for at se, hvilke versioner af jQuery der understøttes.
Når den er downloadet, skal du udpakke den komprimerede mappe for at se strukturen af (den kompilerede) Bootstrap. Du vil se noget som dette:
Dette er den mest grundlæggende form for Bootstrap: forudkompilerede filer til hurtig drop-in-brug i næsten ethvert webprojekt. Vi leverer kompileret CSS og JS ( bootstrap.*
), samt kompileret og minificeret CSS og JS ( bootstrap.min.*
). CSS -kildekort ( bootstrap.*.map
) er tilgængelige til brug med visse browseres udviklerværktøjer. Skrifttyper fra Glyphicons er inkluderet, ligesom det valgfri Bootstrap-tema.
Bootstrap-kildekoden-download inkluderer de prækompilerede CSS-, JavaScript- og skrifttypeaktiver sammen med source Less, JavaScript og dokumentation. Mere specifikt omfatter det følgende og mere:
less/
, js/
, og er fonts/
kildekoden til vores CSS-, JS- og ikonskrifttyper (henholdsvis). Mappen dist/
indeholder alt, der er angivet i den prækompilerede downloadsektion ovenfor. Mappen docs/
indeholder kildekoden til vores dokumentation og examples/
Bootstrap-brug. Ud over det giver enhver anden inkluderet fil support til pakker, licensoplysninger og udvikling.
Bootstrap bruger Grunt til sit byggesystem, med praktiske metoder til at arbejde med rammen. Det er sådan, vi kompilerer vores kode, kører tests og meget mere.
For at installere Grunt skal du først downloade og installere node.js (som inkluderer npm). npm står for node packaged modules og er en måde at administrere udviklingsafhængigheder gennem node.js.
Så fra kommandolinjen:grunt-cli
globalt med npm install -g grunt-cli
./bootstrap/
, og kør derefter npm install
. npm vil se på package.json
filen og automatisk installere de nødvendige lokale afhængigheder, der er angivet der.Når du er færdig, vil du være i stand til at køre de forskellige Grunt-kommandoer fra kommandolinjen.
grunt dist
(Bare kompiler CSS og JavaScript)Regenererer /dist/
mappen med kompilerede og minificerede CSS- og JavaScript-filer. Som Bootstrap-bruger er dette normalt den kommando, du ønsker.
grunt watch
(Kigge på)Overvåger Less-kildefilerne og kompilerer dem automatisk til CSS, hver gang du gemmer en ændring.
grunt test
(Kør test)Kører JSHint og kører QUnit- testene hovedløst i PhantomJS .
grunt docs
(Byg og test dokumenternes aktiver)Opbygger og tester CSS, JavaScript og andre aktiver, som bruges, når dokumentationen køres lokalt via bundle exec jekyll serve
.
grunt
(Byg absolut alt og kør test)Kompilerer og minimerer CSS og JavaScript, bygger dokumentationswebstedet, kører HTML5-validatoren mod dokumenterne, regenererer Customizer-aktiverne og mere. Kræver Jekyll . Normalt kun nødvendigt, hvis du hacker på selve Bootstrap.
Skulle du støde på problemer med at installere afhængigheder eller køre Grunt-kommandoer, skal du først slette /node_modules/
mappen genereret af npm. Kør derefter igen npm install
.
Start med denne grundlæggende HTML-skabelon, eller modificer disse eksempler . Vi håber, at du vil tilpasse vores skabeloner og eksempler, så de passer til dine behov.
Kopier HTML-koden nedenfor for at begynde at arbejde med et minimalt Bootstrap-dokument.
Byg videre på den grundlæggende skabelon ovenfor med Bootstraps mange komponenter. Vi opfordrer dig til at tilpasse og tilpasse Bootstrap, så den passer til dit individuelle projekts behov.
Få kildekoden til hvert eksempel nedenfor ved at downloade Bootstrap-depotet . Eksempler kan findes i docs/examples/
mappen.
Opret en tilpasset navigeringslinje med begrundede links. Heads up! Ikke for Safari venlig.
Bootlint er det officielle Bootstrap HTML linter - værktøj. Det tjekker automatisk for flere almindelige HTML-fejl på websider, der bruger Bootstrap på en ret "vanilje" måde. Vanilla Bootstraps komponenter/widgets kræver, at deres dele af DOM'en er i overensstemmelse med bestemte strukturer. Bootlint kontrollerer, at forekomster af Bootstrap-komponenter har korrekt struktureret HTML. Overvej at tilføje Bootlint til din Bootstrap-webudviklingsværktøjskæde, så ingen af de almindelige fejl bremser dit projekts udvikling.
Hold dig opdateret om udviklingen af Bootstrap og nå ud til fællesskabet med disse nyttige ressourcer.
irc.freenode.net
serveren i ##bootstrap-kanalen .twitter-bootstrap-3
.bootstrap
på pakker, der ændrer eller tilføjer funktionaliteten af Bootstrap, når de distribuerer gennem npm eller lignende leveringsmekanismer for maksimal synlighed.Du kan også følge @getbootstrap på Twitter for den seneste sladder og fantastiske musikvideoer.
Bootstrap tilpasser automatisk dine sider til forskellige skærmstørrelser. Sådan deaktiverer du denne funktion, så din side fungerer som dette ikke-responsive eksempel .
<meta>
nævnt i CSS-dokumenternewidth
på .container
for hver grid tier med en enkelt bredde, for eksempel width: 970px !important;
Vær sikker på, at dette kommer efter standard Bootstrap CSS. Du kan eventuelt undgå det !important
med medieforespørgsler eller noget selector-fu..col-xs-*
klasser som supplement til eller i stedet for de mellemstore/store. Bare rolig, det ekstra lille enhedsgitter skaleres til alle opløsninger.Du skal stadig bruge Respond.js til IE8 (da vores medieforespørgsler stadig er der og skal behandles). Dette deaktiverer "mobilsite"-aspekterne af Bootstrap.
Vi har anvendt disse trin til et eksempel. Læs dens kildekode for at se de specifikke ændringer, der er implementeret.
Ønsker du at migrere fra en ældre version af Bootstrap til v3.x? Tjek vores migrationsguide .
Bootstrap er bygget til at fungere bedst i de nyeste desktop- og mobilbrowsere, hvilket betyder, at ældre browsere kan vise anderledes stilede, men fuldt funktionelle, gengivelser af visse komponenter.
Specifikt understøtter vi de nyeste versioner af følgende browsere og platforme.
Alternative browsere, der bruger den seneste version af WebKit, Blink eller Gecko, uanset om de er direkte eller via platformens webvisnings-API, understøttes ikke eksplicit. Bootstrap bør dog (i de fleste tilfælde) også vise og fungere korrekt i disse browsere. Mere specifikke supportoplysninger findes nedenfor.
Generelt set understøtter Bootstrap de nyeste versioner af hver større platforms standardbrowsere. Bemærk, at proxy-browsere (såsom Opera Mini, Opera Mobiles Turbo-tilstand, UC Browser Mini, Amazon Silk) ikke understøttes.
Chrome | Firefox | Safari | |
---|---|---|---|
Android | Understøttet | Understøttet | N/A |
iOS | Understøttet | Understøttet | Understøttet |
På samme måde understøttes de nyeste versioner af de fleste desktopbrowsere.
Chrome | Firefox | Internet Explorer | Opera | Safari | |
---|---|---|---|---|---|
Mac | Understøttet | Understøttet | N/A | Understøttet | Understøttet |
Windows | Understøttet | Understøttet | Understøttet | Understøttet | Ikke understøttet |
På Windows understøtter vi Internet Explorer 8-11 .
For Firefox understøtter vi udover den seneste normale stabile udgivelse også den seneste Extended Support Release (ESR) version af Firefox.
Uofficielt burde Bootstrap se ud og opføre sig godt nok i Chromium og Chrome til Linux, Firefox til Linux og Internet Explorer 7 samt Microsoft Edge, selvom de ikke er officielt understøttet.
For en liste over nogle af de browserfejl, som Bootstrap skal kæmpe med, se vores Wall of browser-fejl .
Internet Explorer 8 og 9 understøttes også, men vær opmærksom på, at nogle CSS3-egenskaber og HTML5-elementer ikke understøttes fuldt ud af disse browsere. Derudover kræver Internet Explorer 8 brugen af Respond.js for at aktivere understøttelse af medieforespørgsler.
Feature | Internet Explorer 8 | Internet Explorer 9 |
---|---|---|
border-radius |
Ikke understøttet | Understøttet |
box-shadow |
Ikke understøttet | Understøttet |
transform |
Ikke understøttet | Understøttet, med -ms præfiks |
transition |
Ikke understøttet | |
placeholder |
Ikke understøttet |
Besøg Kan jeg bruge... for detaljer om browserunderstøttelse af CSS3- og HTML5-funktioner.
Pas på følgende forbehold, når du bruger Respond.js i dine udviklings- og produktionsmiljøer til Internet Explorer 8.
Brug af Respond.js med CSS hostet på et andet (under)domæne (for eksempel på et CDN) kræver yderligere opsætning. Se Respond.js-dokumenterne for detaljer.
file://
På grund af browsersikkerhedsregler fungerer Respond.js ikke med sider, der ses via file://
protokollen (som når du åbner en lokal HTML-fil). For at teste responsive funktioner i IE8, se dine sider over HTTP(S). Se Respond.js-dokumenterne for detaljer.
@import
Respond.js virker ikke med CSS, der refereres til via @import
. Især nogle Drupal-konfigurationer er kendt for at bruge @import
. Se Respond.js-dokumenterne for detaljer.
IE8 understøtter ikke fuldt ud, box-sizing: border-box;
når det kombineres med min-width
, max-width
, min-height
, eller max-height
. Af den grund bruger vi fra v3.0.1 ikke længere max-width
på .container
s.
IE8 har nogle problemer med, @font-face
når det kombineres med :before
. Bootstrap bruger denne kombination med sine Glyphicons. Hvis en side er cachelagret og indlæst uden musen over vinduet (dvs. tryk på opdateringsknappen eller indlæs noget i en iframe), så bliver siden gengivet før skrifttypen indlæses. Holder du musemarkøren over siden (brødteksten) vises nogle af ikonerne, og hvis du holder musemarkøren over de resterende ikoner, vises disse også. Se nummer #13863 for detaljer.
Bootstrap er ikke understøttet i de gamle Internet Explorer-kompatibilitetstilstande. For at være sikker på, at du bruger den nyeste gengivelsestilstand til IE, kan du overveje at inkludere det relevante <meta>
tag på dine sider:
Bekræft dokumenttilstanden ved at åbne fejlfindingsværktøjerne: tryk F12og tjek "Dokumenttilstand".
Dette tag er inkluderet i al Bootstraps dokumentation og eksempler for at sikre den bedst mulige gengivelse i hver understøttet version af Internet Explorer.
Se dette StackOverflow-spørgsmål for at få flere oplysninger.
Internet Explorer 10 adskiller ikke enhedsbredde fra viewport-bredde og anvender derfor ikke medieforespørgslerne korrekt i Bootstraps CSS. Normalt ville du bare tilføje et hurtigt uddrag af CSS for at rette dette:
Dette virker dog ikke for enheder, der kører Windows Phone 8-versioner ældre end Update 3 (alias GDR3) , da det får sådanne enheder til at vise en hovedsagelig skrivebordsvisning i stedet for en smal "telefon"-visning. For at løse dette skal du inkludere følgende CSS og JavaScript for at omgå fejlen .
Læs Windows Phone 8 og Device-Width for at få flere oplysninger og retningslinjer for brug .
Som en heads up, inkluderer vi dette i al Bootstraps dokumentation og eksempler som en demonstration.
Gengivelsesmotoren for versioner af Safari før v7.1 til OS X og Safari til iOS v8.0 havde nogle problemer med antallet af decimaler, der blev brugt i vores .col-*-1
gitterklasser. Så hvis du havde 12 individuelle gitterkolonner, ville du bemærke, at de kom til kort sammenlignet med andre rækker af kolonner. Udover at opgradere Safari/iOS, har du nogle muligheder for løsninger:
.pull-right
til din sidste gitterkolonne for at få den hårde-højre justeringSupport til overflow: hidden
på <body>
elementet er ret begrænset i iOS og Android. Til det formål, når du ruller forbi toppen eller bunden af en modal i en af disse enheders browsere, <body>
begynder indholdet at rulle. Se Chrome-fejl #175502 (rettet i Chrome v40) og WebKit-fejl #153852 .
Fra og med iOS 9.3, mens en modal er åben, hvis den første berøring af en rullebevægelse er inden for grænsen af en tekst <input>
eller en <textarea>
, vil <body>
indholdet under modal blive rullet i stedet for selve modalen. Se WebKit-fejl #153856 .
Bemærk også, at hvis du bruger en fast navbar eller bruger input inden for en modal, har iOS en gengivelsesfejl, der ikke opdaterer placeringen af faste elementer, når det virtuelle tastatur udløses. Et par løsninger til dette inkluderer at transformere dine elementer til position: absolute
eller påkalde en timer på fokus for at forsøge at rette positioneringen manuelt. Dette håndteres ikke af Bootstrap, så det er op til dig at beslutte, hvilken løsning der passer bedst til din applikation.
Elementet .dropdown-backdrop
bruges ikke på iOS i nav på grund af kompleksiteten af z-indeksering. For at lukke dropdowns i navbars skal du således klikke direkte på dropdown-elementet (eller et hvilket som helst andet element, der udløser en klikhændelse i iOS ).
Sidezoomning præsenterer uundgåeligt gengivelsesartefakter i nogle komponenter, både i Bootstrap og resten af nettet. Afhængigt af problemet kan vi muligvis løse det (søg først, og åbn derefter et problem, hvis det er nødvendigt). Vi har dog en tendens til at ignorere disse, da de ofte ikke har nogen direkte løsning udover hacky løsninger.
:hover
/ :focus
på mobilSelvom reel svævning ikke er mulig på de fleste berøringsskærme, efterligner de fleste mobilbrowsere svæveunderstøttelse og gør :hover
"klæbende". Med andre ord :hover
begynder stilarter at blive anvendt efter at have trykket på et element og stopper først med at blive anvendt, når brugeren har trykket på et andet element. Dette kan forårsage, at Bootstraps :hover
tilstande bliver uønsket "fast" på sådanne browsere. Nogle mobilbrowsere gør også :focus
lignende sticky. Der er i øjeblikket ingen enkel løsning på disse problemer udover at fjerne sådanne stilarter helt.
Selv i nogle moderne browsere kan udskrivning være skæv.
Især fra Chrome v32 og uanset marginindstillinger bruger Chrome en viewport-bredde, der er væsentligt smallere end den fysiske papirstørrelse, når den løser medieforespørgsler, mens en webside udskrives. Dette kan resultere i, at Bootstraps ekstra lille gitter uventet aktiveres ved udskrivning. Se udgave #12078 og Chrome-fejl #273306 for nogle detaljer. Foreslåede løsninger:
@screen-*
Less-variablerne, så dit printerpapir anses for at være større end ekstra lille.Fra Safari v8.0 kan s med fast bredde .container
også få Safari til at bruge en usædvanlig lille skriftstørrelse ved udskrivning. Se #14868 og WebKit-fejl #138192 for flere detaljer. En potentiel løsning på dette er at tilføje følgende CSS:
Ud af kassen leveres Android 4.1 (og endda nogle nyere udgivelser tilsyneladende) med Browser-appen som den foretrukne webbrowser (i modsætning til Chrome). Desværre har Browser-appen masser af fejl og uoverensstemmelser med CSS generelt.
På <select>
elementer vil Android aktiebrowseren ikke vise sidekontrollerne, hvis der er en border-radius
og/eller border
anvendt. (Se dette StackOverflow-spørgsmål for detaljer.) Brug kodestykket nedenfor til at fjerne den stødende CSS og gengive det <select>
som et ustilet element i Android-aktiebrowseren. Brugeragentens sniffning undgår interferens med Chrome-, Safari- og Mozilla-browsere.
Vil du se et eksempel? Tjek denne JS Bin-demo.
For at give den bedst mulige oplevelse til gamle og buggy browsere, bruger Bootstrap CSS browser hacks flere steder til at målrette speciel CSS til bestemte browserversioner for at omgå fejl i selve browserne. Disse hacks får forståeligt nok CSS-validatorer til at klage over, at de er ugyldige. Et par steder bruger vi også avancerede CSS-funktioner, der endnu ikke er fuldt standardiserede, men disse bruges udelukkende til progressiv forbedring.
Disse valideringsadvarsler betyder ikke noget i praksis, da den ikke-hacky del af vores CSS validerer fuldt ud, og de hacky dele ikke forstyrrer den korrekte funktion af den ikke-hacky del, og derfor ignorerer vi bevidst disse særlige advarsler.
Vores HTML-dokumenter har ligeledes nogle trivielle og uvæsentlige HTML-valideringsadvarsler på grund af vores medtagelse af en løsning til en bestemt Firefox-fejl .
Selvom vi ikke officielt understøtter nogen tredjeparts plugins eller tilføjelser, tilbyder vi nogle nyttige råd for at hjælpe med at undgå potentielle problemer i dine projekter.
Noget tredjepartssoftware, herunder Google Maps og Google Custom Search Engine, er i konflikt med Bootstrap på grund af * { box-sizing: border-box; }
, en regel, der gør det således padding
, påvirker ikke den endelige beregnede bredde af et element. Lær mere om kassemodel og størrelse på CSS Tricks .
Afhængigt af konteksten kan du tilsidesætte efter behov (mulighed 1) eller nulstille boksstørrelsen for hele regioner (mulighed 2).
Bootstrap følger gængse webstandarder og - med minimal ekstra indsats - kan bruges til at oprette websteder, der er tilgængelige for dem, der bruger AT .
Hvis din navigation indeholder mange links og kommer før hovedindholdet i DOM, skal du tilføje et Skip to main content
link før navigationen (for en simpel forklaring, se denne A11Y-projektartikel om spring navigationslinks over ). Brug af .sr-only
klassen vil visuelt skjule overspringslinket, og .sr-only-focusable
klassen vil sikre, at linket bliver synligt, når det først er fokuseret (for seende tastaturbrugere).
På grund af langvarige mangler/fejl i Chrome (se udgave 262171 i Chromium-fejlsporingen ) og Internet Explorer (se denne artikel om links på siden og fokusrækkefølge ), skal du sikre dig, at målet for dit overspringslink kan i det mindste programfokuseres ved at tilføje tabindex="-1"
.
Derudover vil du måske eksplicit undertrykke en synlig fokusindikation på målet (især da Chrome i øjeblikket også sætter fokus på elementer med, tabindex="-1"
når de klikkes med musen) med #content:focus { outline: none; }
.
Bemærk, at denne fejl også vil påvirke alle andre links på siden dit websted bruger, hvilket gør dem ubrugelige for tastaturbrugere. Du kan overveje at tilføje en lignende stop-gap rettelse til alle andre navngivne ankre/fragmentidentifikatorer, der fungerer som linkmål.
Når du indlejrer overskrifter ( <h1>
- <h6>
), skal din primære dokumenthoved være en <h1>
. Efterfølgende overskrifter bør gøre logisk brug af <h2>
- <h6>
sådan at skærmlæsere kan konstruere en indholdsfortegnelse til dine sider.
Lær mere på HTML CodeSniffer og Penn State's AccessAbility .
I øjeblikket er nogle af standardfarvekombinationerne tilgængelige i Bootstrap (såsom de forskellige stylede knapklasser, nogle af de kodefremhævende farver, der bruges til grundlæggende kodeblokke , den .bg-primary
kontekstuelle baggrundshjælperklasse og standardlinkfarven, når de bruges på en hvid baggrund) har et lavt kontrastforhold (under det anbefalede forhold på 4,5:1 ). Dette kan give problemer for brugere med nedsat syn eller som er farveblinde. Disse standardfarver skal muligvis ændres for at øge deres kontrast og læsbarhed.
Bootstrap er udgivet under MIT-licensen og er copyright 2016 Twitter. Kogt ned til mindre bidder kan det beskrives med følgende betingelser.
Den fulde Bootstrap-licens er placeret i projektets lager for mere information.
Fællesskabsmedlemmer har oversat Bootstraps dokumentation til forskellige sprog. Ingen er officielt understøttet, og de er muligvis ikke altid opdaterede.
Vi hjælper ikke med at organisere eller hoste oversættelser, vi linker blot til dem.
Færdig med en ny eller bedre oversættelse? Åbn en pull-anmodning for at tilføje den til vores liste.