Aflaai

Bootstrap (tans v3.4.1) het 'n paar maklike maniere om vinnig te begin, elkeen het 'n beroep op 'n ander vaardigheidsvlak en gebruiksgeval. Lees deur om te sien wat by jou spesifieke behoeftes pas.

jsDelivr

Die mense by jsDelivr bied genadiglik CDN-ondersteuning vir Bootstrap se CSS en JavaScript. Gebruik net hierdie jsDelivr- skakels.

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

Installeer met Bower

U kan ook Bootstrap se Less, CSS, JavaScript en fonts installeer en bestuur deur Bower te gebruik :

bower install bootstrap

Installeer met npm

U kan ook Bootstrap installeer deur npm te gebruik :

npm install bootstrap@3

require('bootstrap')sal al Bootstrap se jQuery-inproppe op die jQuery-voorwerp laai. Die bootstrapmodule self voer niks uit nie. U kan Bootstrap se jQuery-inproppe individueel met die hand laai deur die /js/*.jslêers onder die pakket se topvlakgids te laai.

Bootstrap's package.jsonbevat 'n paar bykomende metadata onder die volgende sleutels:

• less- pad na Bootstrap se hoof Less -bronlêer
• style- pad na Bootstrap se nie-verkleinde CSS wat vooraf saamgestel is met die verstekinstellings (geen aanpassing)

Installeer met Composer

U kan ook Bootstrap se Less, CSS, JavaScript en fonts installeer en bestuur deur Composer te gebruik :

composer require twbs/bootstrap

Outovoorvoeger word benodig vir Less/Sass

Bootstrap gebruik Autoprefixer om CSS-verskaffervoorvoegsels te hanteer . As jy Bootstrap vanaf sy Less/Sass-bron saamstel en nie ons Gruntfile gebruik nie, sal jy self Autoprefixer in jou bouproses moet integreer. As jy vooraf saamgestelde Bootstrap gebruik of ons Gruntfile gebruik, hoef jy nie hieroor bekommerd te wees nie, want Autoprefixer is reeds in ons Gruntfile geïntegreer.

Wat ingesluit is

Bootstrap is aflaaibaar in twee vorme, waarin jy die volgende gidse en lêers sal vind, wat algemene hulpbronne logies groepeer en beide saamgestelde en verkleinde variasies verskaf.

Vooraf saamgestelde Bootstrap

Sodra dit afgelaai is, pak die saamgeperste vouer uit om die struktuur van (die saamgestelde) Bootstrap te sien. Jy sal so iets sien:

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 die mees basiese vorm van Bootstrap: vooraf saamgestelde lêers vir vinnige drop-in gebruik in byna enige webprojek. Ons verskaf saamgestelde CSS en JS ( bootstrap.*), sowel as saamgestelde en verkleinde CSS en JS ( bootstrap.min.*). CSS -bronkaarte ( bootstrap.*.map) is beskikbaar vir gebruik met sekere blaaiers se ontwikkelaarnutsgoed. Lettertipes van Glyphicons is ingesluit, asook die opsionele Bootstrap-tema.

Bootstrap-bronkode

Die Bootstrap-bronkode-aflaai sluit die vooraf saamgestelde CSS-, JavaScript- en lettertipebates in, tesame met source Less, JavaScript en dokumentasie. Meer spesifiek sluit dit die volgende en meer in:

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

Die less/, js/, en fonts/is die bronkode vir ons CSS-, JS- en ikoonlettertipes (onderskeidelik). Die dist/gids bevat alles wat in die vooraf saamgestelde aflaai-afdeling hierbo gelys is. Die docs/gids bevat die bronkode vir ons dokumentasie en examples/van Bootstrap-gebruik. Daarbenewens bied enige ander ingeslote lêer ondersteuning vir pakkette, lisensie-inligting en ontwikkeling.

Samestelling van CSS en JavaScript

Bootstrap gebruik Grunt vir sy boustelsel, met gerieflike metodes om met die raamwerk te werk. Dit is hoe ons ons kode saamstel, toetse uitvoer, en meer.

Installeer Grunt

Om Grunt te installeer, moet jy eers node.js (wat npm insluit) aflaai en installeer . npm staan ​​vir node packaged modules en is 'n manier om ontwikkelingsafhanklikhede te bestuur deur node.js.

1. Installeer grunt-cliwêreldwyd met npm install -g grunt-cli.
2. Navigeer na die wortelgids /bootstrap/en hardloop dan npm install. npm sal na die package.jsonlêer kyk en outomaties die nodige plaaslike afhanklikhede installeer wat daar gelys word.

Wanneer dit voltooi is, sal jy die verskillende Grunt-opdragte kan uitvoer wat vanaf die opdragreël verskaf word.

Beskikbare Grunt-opdragte

grunt dist(Stel net CSS en JavaScript saam)

Regenereer die /dist/gids met saamgestelde en verkleinde CSS- en JavaScript-lêers. As 'n Bootstrap-gebruiker is dit gewoonlik die opdrag wat jy wil hê.

grunt watch(Kyk)

Kyk na die Less-bronlêers en stel hulle outomaties saam na CSS wanneer jy 'n verandering stoor.

grunt test(Laat toetse uitvoer)

Laat loop JSHint en voer die QUnit- toetse in regte blaaiers uit danksy Karma .

grunt docs(Bou en toets die dokumente-bates)

Bou en toets CSS, JavaScript en ander bates wat gebruik word wanneer die dokumentasie plaaslik via bundle exec jekyll serve.

grunt(Bou absoluut alles en voer toetse uit)

Stel CSS en JavaScript saam en verklein dit, bou die dokumentasie-webwerf, laat die HTML5-bekragtiger teen die dokumente hardloop, herstel die Customizer-bates, en meer. Vereis Jekyll . Gewoonlik net nodig as jy op Bootstrap self inbreek.

Probleemoplossing

As jy probleme ondervind met die installering van afhanklikhede of die uitvoer van Grunt-opdragte, verwyder eers die /node_modules/gids wat deur npm gegenereer is. Dan, herlaai npm install.

Basiese sjabloon

Begin met hierdie basiese HTML-sjabloon, of verander hierdie voorbeelde . Ons hoop jy sal ons sjablone en voorbeelde aanpas en aanpas om by jou behoeftes te pas.

Kopieer die HTML hieronder om met 'n minimale Bootstrap-dokument te begin werk.

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

Voorbeelde

Bou voort op die basiese sjabloon hierbo met Bootstrap se baie komponente. Ons moedig jou aan om Bootstrap aan te pas en aan te pas om by jou individuele projek se behoeftes te pas.

Kry die bronkode vir elke voorbeeld hieronder deur die Bootstrap-bewaarplek af te laai . Voorbeelde kan gevind word in die docs/examples/gids.

Gebruik die raamwerk

Beginner sjabloon

Niks behalwe die basiese beginsels nie: saamgestel CSS en JavaScript saam met 'n houer.

Bootstrap-tema

Laai die opsionele Bootstrap-tema vir 'n visueel verbeterde ervaring.

Roosters

Veelvuldige voorbeelde van roosteruitlegte met al vier vlakke, nes, en meer.

Jumbotron

Bou rondom die jumbotron met 'n navigasiebalk en 'n paar basiese roosterkolomme.

Smal jumbotron

Bou 'n meer pasgemaakte bladsy deur die verstekhouer en jumbotron te verklein.

Navbars in aksie

Navbar

Super basiese sjabloon wat die navigasiebalk saam met 'n paar bykomende inhoud insluit.

Statiese boonste navigasiebalk

Super basiese sjabloon met 'n statiese boonste navigasiebalk saam met 'n paar bykomende inhoud.

Vaste navigasiebalk

Super basiese sjabloon met 'n vaste boonste navigasiebalk saam met 'n bietjie bykomende inhoud.

Pasgemaakte komponente

Bedekking

'n Sjabloon van een bladsy vir die bou van eenvoudige en pragtige tuisbladsye.

Karrousel

Pasmaak die navigasiebalk en karrousel en voeg dan 'n paar nuwe komponente by.

Blog

Eenvoudige bloguitleg met twee kolomme met pasgemaakte navigasie, kopskrif en tipe.

Dashboard

Basiese struktuur vir 'n admin-dashboard met vaste sybalk en navigasiebalk.

Aantekenbladsy

Pasgemaakte vormuitleg en ontwerp vir 'n eenvoudige aanmeldvorm.

Geregverdigde nav

Skep 'n pasgemaakte navigasiebalk met geregverdigde skakels. Let op! Nie te Safari-vriendelik nie.

Taai voetskrif

Heg 'n voetskrif aan die onderkant van die viewport wanneer die inhoud korter as dit is.

Plakkerige voetskrif met navigasiebalk

Heg 'n voetskrif aan die onderkant van die uitsigpoort met 'n vaste navigasiebalk aan die bokant.

Eksperimente

Nie-reagerende Bootstrap

Deaktiveer die responsiwiteit van Bootstrap maklik volgens ons dokumente .

Off-canvas

Bou 'n wisselbare off-canvas-navigasiekieslys vir gebruik met Bootstrap.

Gereedskap

Bootlint

Bootlint is die amptelike Bootstrap HTML linter - instrument. Dit kyk outomaties na verskeie algemene HTML-foute in webblaaie wat Bootstrap op 'n redelike "vanielje" manier gebruik. Vanilla Bootstrap se komponente/legstukke vereis dat hul dele van die DOM aan sekere strukture voldoen. Bootlint kontroleer dat gevalle van Bootstrap-komponente korrek gestruktureerde HTML het. Oorweeg dit om Bootlint by jou Bootstrap-webontwikkelingsnutsmiddelketting te voeg sodat geen van die algemene foute jou projek se ontwikkeling vertraag nie.

Gemeenskap

Bly op hoogte van die ontwikkeling van Bootstrap en reik uit na die gemeenskap met hierdie nuttige hulpbronne.

• Lees en teken in op The Official Bootstrap Blog .
• Gesels met mede-bootstrappers met behulp van IRC in die irc.freenode.netbediener, in die ##bootstrap-kanaal .
• Vir hulp met die gebruik van Bootstrap, vra op StackOverflow deur die merkertwitter-bootstrap-3 te gebruik .
• Ontwikkelaars moet die sleutelwoord gebruik bootstrapop pakkette wat die funksionaliteit van Bootstrap verander of byvoeg wanneer hulle deur npm of soortgelyke afleweringsmeganismes versprei word vir maksimum ontdekbaarheid.
• Vind inspirerende voorbeelde van mense wat met Bootstrap bou by die Bootstrap Expo .

Jy kan ook @getbootstrap op Twitter volg vir die nuutste skinderpraatjies en wonderlike musiekvideo's.

Deaktiveer responsiwiteit

Bootstrap pas jou bladsye outomaties aan vir verskillende skermgroottes. Hier is hoe om hierdie kenmerk te deaktiveer sodat jou bladsy soos hierdie nie-responsiewe voorbeeld werk .

Stappe om bladsy-reaksie uit te skakel

1. Laat die viewport <meta>wat in die CSS-dokumente genoem word weg
2. Ignoreer die widthop die .containervir elke roostervlak met 'n enkele breedte, byvoorbeeld width: 970px !important;Maak seker dat dit na die verstek Bootstrap CSS kom. Jy kan opsioneel die !importantmet medianavrae of een of ander selector-fu vermy.
3. As jy navigasiebalke gebruik, verwyder alle navigasiebalk wat invou en uitbrei.
4. Vir roosteruitlegte, gebruik .col-xs-*klasse bykomend tot, of in die plek van, die medium/groot klasse. Moenie bekommerd wees nie, die ekstra-klein toestelrooster skaal na alle resolusies.

Jy sal steeds Respond.js vir IE8 nodig hê (aangesien ons medianavrae steeds daar is en verwerk moet word). Dit deaktiveer die "mobiele werf"-aspekte van Bootstrap.

Bootstrap-sjabloon met responsiwiteit gedeaktiveer

Ons het hierdie stappe op 'n voorbeeld toegepas. Lees die bronkode daarvan om die spesifieke veranderinge wat geïmplementeer is, te sien.

Bekyk nie-reagerende voorbeeld

Blaaier- en toestelondersteuning

Bootstrap is gebou om die beste te werk in die nuutste rekenaar- en mobiele blaaiers, wat beteken dat ouer blaaiers dalk 'n ander styl, hoewel ten volle funksionele, weergawes van sekere komponente kan vertoon.

Ondersteunde blaaiers

Ons ondersteun spesifiek die nuutste weergawes van die volgende blaaiers en platforms.

Alternatiewe blaaiers wat die nuutste weergawe van WebKit, Blink of Gecko gebruik, hetsy direk of via die platform se webaansig-API, word nie eksplisiet ondersteun nie. Bootstrap moet egter (in die meeste gevalle) ook korrek in hierdie blaaiers vertoon en funksioneer. Meer spesifieke ondersteuningsinligting word hieronder verskaf.

Mobiele toestelle

Oor die algemeen ondersteun Bootstrap die nuutste weergawes van elke groot platform se verstekblaaiers. Let daarop dat proxy-blaaiers (soos Opera Mini, Opera Mobile se Turbo-modus, UC Browser Mini, Amazon Silk) nie ondersteun word nie.

Desktop blaaiers

Net so word die nuutste weergawes van die meeste rekenaarblaaiers ondersteun.

Op Windows ondersteun ons Internet Explorer 8-11 .

Vir Firefox, bykomend tot die nuutste normale stabiele vrystelling, ondersteun ons ook die nuutste uitgebreide ondersteuningsvrystelling (ESR) weergawe van Firefox vir

Nie-amptelik behoort Bootstrap goed genoeg te lyk en op te tree in Chromium en Chrome vir Linux, Firefox vir Linux en Internet Explorer 7, sowel as Microsoft Edge, hoewel hulle nie amptelik ondersteun word nie.

Vir 'n lys van sommige van die blaaierfoute waarmee Bootstrap moet worstel, sien ons Muur van blaaierfoute .

Internet Explorer 8 en 9

Internet Explorer 8 en 9 word ook ondersteun, maar wees asseblief bewus daarvan dat sommige CSS3-eienskappe en HTML5-elemente nie ten volle deur hierdie blaaiers ondersteun word nie. Boonop vereis Internet Explorer 8 die gebruik van Respond.js om medianavrae-ondersteuning te aktiveer.

Besoek Kan ek gebruik... vir besonderhede oor blaaierondersteuning van CSS3- en HTML5-kenmerke.

Internet Explorer 8 en Respond.js

Pasop vir die volgende waarskuwings wanneer jy Respond.js in jou ontwikkeling- en produksieomgewings vir Internet Explorer 8 gebruik.

Respond.js en kruisdomein CSS

Die gebruik van Respond.js met CSS wat op 'n ander (sub)domein (byvoorbeeld op 'n CDN) aangebied word, vereis 'n bietjie bykomende opstelling. Sien die Respond.js-dokumente vir besonderhede.

Reageer.js enfile://

Weens blaaiersekuriteitsreëls werk Respond.js nie met bladsye wat via die file://protokol bekyk word nie (soos wanneer 'n plaaslike HTML-lêer oopgemaak word). Bekyk jou bladsye oor HTTP(S) om responsiewe kenmerke in IE8 te toets. Sien die Respond.js-dokumente vir besonderhede.

Reageer.js en@import

Respond.js werk nie met CSS waarna verwys word via @import. Dit is veral bekend dat sommige Drupal-konfigurasies gebruik word @import. Sien die Respond.js-dokumente vir besonderhede.

Internet Explorer 8 en boksgrootte

IE8 ondersteun nie ten volle box-sizing: border-box;wanneer dit gekombineer word met min-width, max-width, min-height, of max-height. Om daardie rede, vanaf v3.0.1, gebruik ons ​​nie meer max-widthop .containera.

Internet Explorer 8 en @font-face

IE8 het 'n paar probleme met @font-facewanneer dit gekombineer word met :before. Bootstrap gebruik daardie kombinasie met sy Glyphicons. As 'n bladsy gekas is, en sonder die muis oor die venster gelaai word (dws druk die herlaai-knoppie of laai iets in 'n iframe) dan word die bladsy weergegee voordat die font laai. As jy oor die bladsy (liggaam) beweeg, sal sommige van die ikone wys en as jy oor die oorblywende ikone beweeg, sal dit ook wys. Sien uitgawe #13863 vir besonderhede.

IE-versoenbaarheidsmodusse

Bootstrap word nie in die ou Internet Explorer-versoenbaarheidsmodusse ondersteun nie. Om seker te maak jy gebruik die nuutste weergawe-modus vir IE, oorweeg dit om die toepaslike <meta>merker in jou bladsye in te sluit:

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

Bevestig die dokumentmodus deur die ontfoutingsnutsmiddels oop te maak: druk F12en kontroleer die "Dokumentmodus".

Hierdie merker is ingesluit in al Bootstrap se dokumentasie en voorbeelde om die beste weergawe moontlik in elke ondersteunde weergawe van Internet Explorer te verseker.

Sien hierdie StackOverflow-vraag vir meer inligting.

Internet Explorer 10 in Windows 8 en Windows Phone 8

Internet Explorer 10 onderskei nie toestelwydte van kykpoortwydte nie, en pas dus nie die medianavrae in Bootstrap se CSS behoorlik toe nie. Normaalweg sal jy net 'n vinnige stukkie CSS byvoeg om dit reg te stel:

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

Dit werk egter nie vir toestelle wat Windows Phone 8-weergawes ouer as Update 3 (ook bekend as GDR3) gebruik nie, aangesien dit veroorsaak dat sulke toestelle 'n meestal rekenaaraansig in plaas van 'n nou "foon"-aansig wys. Om dit aan te spreek, sal jy die volgende CSS en JavaScript moet insluit om die fout te omseil .

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

Vir meer inligting en gebruiksriglyne, lees Windows Phone 8 en Device-Width .

As 'n kennismaking, sluit ons dit by al Bootstrap se dokumentasie en voorbeelde in as 'n demonstrasie.

Safari persentasie afronding

Die weergawe-enjin van weergawes van Safari voor v7.1 vir OS X en Safari vir iOS v8.0 het probleme ondervind met die aantal desimale plekke wat in ons .col-*-1roosterklasse gebruik is. So as jy 12 individuele roosterkolomme gehad het, sou jy agterkom dat hulle kort kom in vergelyking met ander rye kolomme. Benewens die opgradering van Safari/iOS, het u 'n paar opsies vir oplossings:

• Voeg .pull-rightby jou laaste roosterkolom om die hard-regs-belyning te kry
• Pas jou persentasies handmatig aan om die perfekte afronding vir Safari te kry (moeiliker as die eerste opsie)

Modale, navigasiebalke en virtuele sleutelborde

Oorloop en blaai

Ondersteuning vir overflow: hiddendie <body>element is redelik beperk in iOS en Android. Vir daardie doel, wanneer jy verby die bo- of onderkant van 'n modaal in enige van daardie toestelle se blaaiers blaai, <body>sal die inhoud begin blaai. Sien Chrome-fout #175502 (opgestel in Chrome v40) en WebKit-fout #153852 .

iOS-teksvelde en blaai

Vanaf iOS 9.3, terwyl 'n modaal oop is, as die aanvanklike aanraking van 'n rolgebaar binne die grens van 'n tekstuele <input>of 'n <textarea>is, sal die <body>inhoud onder die modaal gerol word in plaas van die modaal self. Sien WebKit-fout #153856 .

Virtuele sleutelborde

Let ook daarop dat as jy 'n vaste navigasiebalk gebruik of insette binne 'n modaal gebruik, iOS 'n weergawefout het wat nie die posisie van vaste elemente opdateer wanneer die virtuele sleutelbord geaktiveer word nie. 'n Paar oplossings hiervoor sluit in die transformasie van jou elemente na position: absoluteof die aanroep van 'n timer op fokus om te probeer om die posisionering handmatig reg te stel. Dit word nie deur Bootstrap hanteer nie, so dit is aan jou om te besluit watter oplossing die beste vir jou toepassing is.

Navbar-aftrekkies

Die .dropdown-backdropelement word nie op iOS in die navigasie gebruik nie as gevolg van die kompleksiteit van z-indeksering. Dus, om aftreklys in navigasiebalke te sluit, moet u direk op die aftrekelement klik (of enige ander element wat 'n klikgebeurtenis in iOS sal afvuur ).

Blaaier zoem

Bladsyzoem bied onvermydelik artefakte in sommige komponente, beide in Bootstrap en die res van die web. Afhangende van die probleem, kan ons dit dalk regmaak (soek eers en maak dan 'n probleem oop indien nodig). Ons is egter geneig om dit te ignoreer, aangesien dit dikwels geen direkte oplossing het nie, behalwe hackige oplossings.

Plakkerig :hover/ :focusop selfoon

Selfs al is werklike sweef nie moontlik op die meeste raakskerms nie, boots die meeste mobiele blaaiers sweefondersteuning na en maak dit :hover"taai". Met ander woorde, :hoverstyle begin toepas nadat 'n element getik is en hou eers op om toe te pas nadat die gebruiker 'n ander element getik het. Dit kan veroorsaak dat Bootstrap se :hoverstate ongewens "vas" op sulke blaaiers raak. Sommige mobiele blaaiers maak ook :focussoortgelyke taai. Daar is tans geen eenvoudige oplossing vir hierdie kwessies nie, behalwe om sulke style heeltemal te verwyder.

Drukwerk

Selfs in sommige moderne blaaiers kan druk eienaardig wees.

In die besonder, vanaf Chrome v32 en ongeag marge-instellings, gebruik Chrome 'n kykpoortwydte wat aansienlik smaller is as die fisiese papiergrootte wanneer medianavrae opgelos word terwyl 'n webblad gedruk word. Dit kan daartoe lei dat Bootstrap se ekstra klein rooster onverwags geaktiveer word tydens druk. Sien uitgawe #12078 en Chrome-fout #273306 vir 'n paar besonderhede. Voorgestelde oplossings:

• Omhels die ekstra-klein rooster en maak seker jou bladsy lyk aanvaarbaar daaronder.
• Pas die waardes van die @screen-*Minder-veranderlikes aan sodat jou drukkerpapier groter as ekstra-klein beskou word.
• Voeg pasgemaakte medianavrae by om die roostergrootte-breekpunte slegs vir drukmedia te verander.

Ook, vanaf Safari v8.0, kan vaste wydte .containers veroorsaak dat Safari 'n buitengewoon klein lettergrootte gebruik wanneer dit druk. Sien #14868 en WebKit-fout #138192 vir meer besonderhede. Een moontlike oplossing hiervoor is om die volgende CSS by te voeg:

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

Android voorraad blaaier

Uit die boks word Android 4.1 (en selfs 'n paar nuwer vrystellings blykbaar) saam met die blaaier-toepassing gestuur as die verstekwebblaaier van keuse (in teenstelling met Chrome). Ongelukkig het die blaaier-toepassing baie foute en teenstrydighede met CSS in die algemeen.

Kies spyskaarte

Op <select>elemente sal die Android-aandeelblaaier nie die sykontroles vertoon as daar 'n border-radiusen/of bordertoegepas is nie. (Sien hierdie StackOverflow-vraag vir besonderhede.) Gebruik die kodestuk hieronder om die gewraakte CSS te verwyder en die <select>as 'n ongestileerde element op die Android-aandeelblaaier weer te gee. Die gebruikersagent wat snuif, vermy inmenging met Chrome-, Safari- en Mozilla-blaaiers.

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

Wil jy 'n voorbeeld sien? Kyk na hierdie JS Bin-demo.

Valideerders

Ten einde die beste moontlike ervaring aan ou en foutiewe blaaiers te bied, gebruik Bootstrap CSS-blaaierhacks op verskeie plekke om spesiale CSS op sekere blaaierweergawes te teiken om foute in die blaaiers self te omseil. Hierdie hacks veroorsaak verstaanbaar dat CSS-valideerders kla dat hulle ongeldig is. Op 'n paar plekke gebruik ons ​​ook bloeiende CSS-kenmerke wat nog nie ten volle gestandaardiseer is nie, maar dit word bloot vir progressiewe verbetering gebruik.

Hierdie valideringswaarskuwings maak nie saak in die praktyk nie, aangesien die nie-gekapte gedeelte van ons CSS ten volle valideer en die hacky gedeeltes nie inmeng met die behoorlike funksionering van die nie-hacky gedeelte nie, vandaar hoekom ons hierdie spesifieke waarskuwings doelbewus ignoreer.

Ons HTML-dokumente het eweneens 'n paar onbenullige en onbelangrike HTML-bekragtigingwaarskuwings as gevolg van ons insluiting van 'n oplossing vir 'n sekere Firefox-fout .

Derdeparty-ondersteuning

Alhoewel ons nie amptelik enige derdeparty-inproppe of byvoegings ondersteun nie, bied ons wel 'n paar nuttige raad om te help om potensiële probleme in jou projekte te vermy.

Doos-grootte

Sommige derdeparty-sagteware, insluitend Google Maps en Google Custom Search Engine, bots met Bootstrap as gevolg van * { box-sizing: border-box; }, 'n reël wat dit so paddingmaak, beïnvloed nie die finale berekende breedte van 'n element nie. Kom meer te wete oor boksmodel en grootte by CSS Tricks .

Afhangende van die konteks, kan jy dit ignoreer soos nodig (Opsie 1) of die boksgrootte vir hele streke terugstel (Opsie 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();
}

Toeganklikheid

Bootstrap volg algemene webstandaarde en kan – met minimale ekstra moeite – gebruik word om werwe te skep wat toeganklik is vir diegene wat AT gebruik .

Slaan navigasie oor

As jou navigasie baie skakels bevat en voor die hoofinhoud in die DOM kom, voeg 'n Skip to main contentskakel voor die navigasie by (vir 'n eenvoudige verduideliking, sien hierdie A11Y-projekartikel oor slaan navigasieskakels oor ). Die gebruik van die .sr-onlyklas sal die skakel oorslaan visueel versteek, en die .sr-only-focusableklas sal verseker dat die skakel sigbaar word sodra gefokus is (vir siende sleutelbordgebruikers).

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

Geneste opskrifte

Wanneer opskrifte ( <h1>- <h6>) nesgemaak word, moet jou primêre dokumentopskrif 'n <h1>. Daaropvolgende opskrifte moet logies gebruik maak van <h2>- <h6>sodat skermlesers 'n inhoudsopgawe vir jou bladsye kan saamstel.

Kom meer te wete by HTML CodeSniffer en Penn State se AccessAbility .

Kleur kontras

Tans is sommige van die verstekkleurkombinasies beskikbaar in Bootstrap (soos die verskillende gestileerde knoppieklasse , sommige van die kode wat kleure wat vir basiese kodeblokke gebruik word , die .bg-primary kontekstuele agtergrondhelperklas en die verstekskakelkleur wanneer dit op 'n wit agtergrond gebruik word) het 'n lae kontrasverhouding (onder die aanbevole verhouding van 4,5:1 ). Dit kan probleme veroorsaak vir gebruikers met swak sig of wat kleurblind is. Hierdie verstekkleure moet dalk gewysig word om hul kontras en leesbaarheid te verhoog.

Bykomende hulpbronne

• "HTML Codesniffer" boekmerk vir die identifisering van toeganklikheid kwessies
• Chrome se uitbreiding vir Toeganklikheid Ontwikkelaarnutsgoed
• Kleurkontrasanaliseerder
• Die A11Y-projek
• MDN toeganklikheid dokumentasie

Gereelde vrae oor lisensies

Bootstrap word vrygestel onder die MIT-lisensie en is kopiereg 2019 Twitter. Afgekook tot kleiner stukke, kan dit beskryf word met die volgende toestande.

Dit vereis van jou om:

• Hou die lisensie en kopieregkennisgewing ingesluit by Bootstrap se CSS- en JavaScript-lêers wanneer jy dit in jou werke gebruik

Dit laat jou toe om:

• Laai en gebruik Bootstrap vrylik, in die geheel of gedeeltelik, vir persoonlike, private, maatskappy-interne of kommersiële doeleindes
• Gebruik Bootstrap in pakkette of verspreidings wat jy skep
• Verander die bronkode
• Gee 'n sublisensie om Bootstrap te wysig en te versprei aan derde partye wat nie by die lisensie ingesluit is nie

Dit verbied jou om:

• Hou die skrywers en lisensie-eienaars aanspreeklik vir skade aangesien Bootstrap sonder waarborg verskaf word
• Hou die skeppers of kopiereghouers van Bootstrap aanspreeklik
• Herversprei enige stukkie Bootstrap sonder behoorlike erkenning
• Gebruik enige merke wat deur Twitter besit word op enige manier wat kan sê of impliseer dat Twitter jou verspreiding onderskryf
• Gebruik enige merke wat deur Twitter besit word op enige manier wat kan aandui of impliseer dat jy die betrokke Twitter-sagteware geskep het

Dit vereis nie van jou om:

• Sluit die bron van Bootstrap self, of van enige wysigings wat jy daaraan gemaak het, in by enige herverspreiding wat jy mag saamstel wat dit insluit
• Dien veranderinge wat jy aan Bootstrap aanbring terug na die Bootstrap-projek (hoewel sulke terugvoer aangemoedig word)

Die volledige Bootstrap-lisensie is in die projekbewaarplek geleë vir meer inligting.

Vertalings

Gemeenskapslede het Bootstrap se dokumentasie in verskeie tale vertaal. Nie een word amptelik ondersteun nie en hulle is dalk nie altyd op datum nie.

• Bootstrap 中文文档 (Chinees)
• Bootstrap op Dansk (Deens)
• Bootstrap en Français (Frans)
• Bootstrap auf Deutsch (Duits)
• Bootstrap in Italiano (Italiaans)
• Bootstrap 한국어 (Koreaans)
• Bootstrap em Português do Brasil (Brasiliaanse Portugees)
• Bootstrap по-русски (Russies)
• Bootstrap en Español (Spaans)
• Türkçe Bootstrap (Turks)
• Bootstrap українською (Oekraïens)
• Bootstrap bằng tiếng Việt (Viëtnamees)

Ons help nie om vertalings te organiseer of aan te bied nie, ons skakel net daarna.

Het jy 'n nuwe of beter vertaling voltooi? Maak 'n trekversoek oop om dit by ons lys te voeg.