Darba sākšana
Pārskats par Bootstrap, kā lejupielādēt un lietot, pamata veidnes un piemēri un daudz kas cits.
Pārskats par Bootstrap, kā lejupielādēt un lietot, pamata veidnes un piemēri un daudz kas cits.
Programmā Bootstrap (pašlaik v3.3.7) ir daži vienkārši veidi, kā ātri sākt darbu, un katrs no tiem ir pievilcīgs citam prasmju līmenim un lietošanas gadījumam. Izlasiet, lai redzētu, kas atbilst jūsu īpašajām vajadzībām.
Apkopoti un samazināti CSS, JavaScript un fonti. Nav iekļauti dokumenti vai oriģinālie avota faili.
Avots Less, JavaScript un fontu faili, kā arī mūsu dokumenti. Nepieciešams mazāk kompilators un daži iestatījumi.
Bootstrap ir pārnests no Less uz Sass , lai to varētu viegli iekļaut Rails, Compass vai Sass projektos.
jsDelivr darbinieki laipni nodrošina CDN atbalstu Bootstrap CSS un JavaScript. Vienkārši izmantojiet šīs Bootstrap CDN saites.
Varat arī instalēt un pārvaldīt Bootstrap Less, CSS, JavaScript un fontus, izmantojot Bower :
Varat arī instalēt Bootstrap, izmantojot npm :
require('bootstrap')
ielādēs visus Bootstrap jQuery spraudņus jQuery objektā. Pats bootstrap
modulis neko neeksportē. Varat manuāli ielādēt Bootstrap jQuery spraudņus atsevišķi, ielādējot /js/*.js
failus pakotnes augstākā līmeņa direktorijā.
Bootstrap's package.json
satur dažus papildu metadatus zem šādiem taustiņiem:
less
- ceļš uz Bootstrap galveno Less avota failustyle
- ceļš uz Bootstrap neminificēto CSS, kas ir iepriekš kompilēts, izmantojot noklusējuma iestatījumus (bez pielāgošanas)Varat arī instalēt un pārvaldīt Bootstrap Less, CSS, JavaScript un fontus, izmantojot Composer :
Bootstrap izmanto Autoprefixer , lai apstrādātu CSS piegādātāja prefiksus . Ja kompilējat Bootstrap no tā Less/Sass avota un neizmantojat mūsu Gruntfile, jums pašam būs jāintegrē Autoprefixer savā veidošanas procesā. Ja izmantojat iepriekš kompilētu Bootstrap vai mūsu Gruntfile, jums par to nav jāuztraucas, jo Autoprefixer jau ir integrēts mūsu Gruntfile.
Bootstrap ir lejupielādējams divos veidos, kuros jūs atradīsiet šādus direktorijus un failus, loģiski grupējot kopējos resursus un nodrošinot gan kompilētus, gan samazinātus variantus.
Lūdzu, ņemiet vērā, ka visiem JavaScript spraudņiem ir jāiekļauj jQuery , kā parādīts sākuma veidnē . Sazinieties ar mūsubower.json
, lai uzzinātu, kuras jQuery versijas tiek atbalstītas.
Pēc lejupielādes izpakojiet saspiesto mapi, lai redzētu (kompilētās) Bootstrap struktūru. Jūs redzēsit kaut ko līdzīgu:
Šī ir visvienkāršākā Bootstrap forma: iepriekš kompilēti faili ātrai lietošanai gandrīz jebkurā tīmekļa projektā. Mēs piedāvājam kompilētu CSS un JS ( bootstrap.*
), kā arī apkopotu un samazinātu CSS un JS ( bootstrap.min.*
). CSS avota kartes ( bootstrap.*.map
) ir pieejamas lietošanai ar noteiktu pārlūkprogrammu izstrādātāju rīkiem. Ir iekļauti fonti no Glyphicons, kā arī izvēles Bootstrap tēma.
Bootstrap pirmkoda lejupielāde ietver iepriekš kompilētus CSS, JavaScript un fontu līdzekļus, kā arī avota Less, JavaScript un dokumentāciju. Konkrētāk, tas ietver šādu un vairāk:
, less/
un ir mūsu CSS js/
, fonts/
JS un ikonu fontu (attiecīgi) pirmkods. Mapē dist/
ir viss, kas norādīts iepriekš sagatavotajā lejupielādes sadaļā. Mapē ir iekļauts mūsu dokumentācijas un Bootstrap lietojuma docs/
pirmkods . examples/
Turklāt jebkurš cits iekļautais fails nodrošina atbalstu pakotnēm, licences informācijai un izstrādei.
Bootstrap savai veidošanas sistēmai izmanto Grunt ar ērtām metodēm darbam ar ietvaru. Tādā veidā mēs apkopojam savu kodu, veicam testus un daudz ko citu.
Lai instalētu Grunt, vispirms ir jālejupielādē un jāinstalē node.js (kas ietver npm). npm apzīmē mezglu pakotnes moduļus un ir veids, kā pārvaldīt izstrādes atkarības, izmantojot node.js.
Pēc tam no komandrindas:grunt-cli
globāli, izmantojot npm install -g grunt-cli
./bootstrap/
direktoriju un pēc tam palaidiet npm install
. npm apskatīs package.json
failu un automātiski instalēs tur norādītās vajadzīgās vietējās atkarības.Kad tas būs pabeigts, varēsit palaist dažādas Grunt komandas, kas tiek nodrošinātas no komandrindas.
grunt dist
(Vienkārši kompilējiet CSS un JavaScript)Atjauno /dist/
direktoriju ar apkopotiem un samazinātiem CSS un JavaScript failiem. Kā Bootstrap lietotājs parasti šī ir vajadzīgā komanda.
grunt watch
(Skatīties)Skatās mazāk avota failus un automātiski pārkompilē tos CSS ikreiz, kad saglabājat izmaiņas.
grunt test
(Palaist testus)Palaiž JSHint un bez galvas palaiž QUnit testus programmā PhantomJS .
grunt docs
(Veidojiet un pārbaudiet dokumentu līdzekļus)Veido un pārbauda CSS, JavaScript un citus līdzekļus, kas tiek izmantoti, palaižot dokumentāciju lokāli, izmantojot bundle exec jekyll serve
.
grunt
(Izveidojiet pilnīgi visu un veiciet testus)Apkopo un samazina CSS un JavaScript, veido dokumentācijas vietni, palaiž HTML5 pārbaudītāju pret dokumentiem, ģenerē pielāgošanas rīkus un veic citas darbības. Nepieciešams Jekyll . Parasti tas ir nepieciešams tikai tad, ja uzlaužat pašu Bootstrap.
Ja rodas problēmas ar atkarību instalēšanu vai Grunt komandu izpildi, vispirms izdzēsiet /node_modules/
npm ģenerēto direktoriju. Pēc tam palaidiet vēlreiz npm install
.
Sāciet ar šo pamata HTML veidni vai mainiet šos piemērus . Mēs ceram, ka jūs pielāgosit mūsu veidnes un piemērus, pielāgojot tos savām vajadzībām.
Kopējiet tālāk esošo HTML, lai sāktu darbu ar minimālu Bootstrap dokumentu.
Veidojiet iepriekš minēto pamata veidni, izmantojot Bootstrap daudzos komponentus. Mēs iesakām jums pielāgot un pielāgot Bootstrap, lai tas atbilstu jūsu individuālā projekta vajadzībām.
Iegūstiet katra tālāk norādītā piemēra pirmkodu, lejupielādējot Bootstrap repozitoriju . Piemērus var atrast docs/examples/
direktorijā.
Administratora informācijas paneļa pamatstruktūra ar fiksētu sānjoslu un navigācijas joslu.
Izveidojiet pielāgotu navigācijas joslu ar pamatotām saitēm. Uzmanību! Ne pārāk draudzīgs Safari.
Bootlint ir oficiālais Bootstrap HTML linter rīks. Tas automātiski pārbauda vairākas izplatītas HTML kļūdas tīmekļa lapās, kurās Bootstrap tiek izmantota diezgan "vaniļas" veidā. Vanilla Bootstrap komponentiem/logrīkiem ir nepieciešams, lai to DOM daļas atbilstu noteiktām struktūrām. Bootlint pārbauda, vai Bootstrap komponentu gadījumiem ir pareizi strukturēts HTML. Apsveriet iespēju Bootlint pievienot savai Bootstrap tīmekļa izstrādes rīku ķēdei, lai neviena no izplatītajām kļūdām nepalēninātu jūsu projekta attīstību.
Saņemiet jaunāko informāciju par Bootstrap attīstību un sazinieties ar kopienu, izmantojot šos noderīgos resursus.
irc.freenode.net
serverī ##bootstrap kanālā .twitter-bootstrap-3
.bootstrap
pakotnēs, kas pārveido vai papildina Bootstrap funkcionalitāti, izplatot, izmantojot npm vai līdzīgus piegādes mehānismus, lai nodrošinātu maksimālu atklāšanu.Varat arī sekot @getbootstrap vietnē Twitter , lai skatītu jaunākās tenkas un satriecošos mūzikas videoklipus.
Bootstrap automātiski pielāgo jūsu lapas dažādiem ekrāna izmēriem. Lūk, kā atspējot šo funkciju, lai jūsu lapa darbotos kā šis nereaģējošais piemērs .
<meta>
minēto skata loguwidth
katram .container
režģa līmenim ar vienu platumu, piemēram, width: 970px !important;
Pārliecinieties, vai tas nāk pēc noklusējuma Bootstrap CSS. Varat pēc izvēles izvairīties no !important
multivides vaicājumiem vai atlasītāja-fu..col-xs-*
klases papildus vidējiem/lieliem izkārtojumiem vai to vietā. Neuztraucieties, īpaši mazais ierīces režģis pielāgojas visām izšķirtspējām.Jums joprojām būs nepieciešams Respond.js operētājsistēmai IE8 (jo mūsu multivides vaicājumi joprojām pastāv un ir jāapstrādā). Tādējādi tiek atspējoti Bootstrap “mobilās vietnes” aspekti.
Mēs esam piemērojuši šīs darbības piemērā. Izlasiet tā avota kodu, lai redzētu konkrētās ieviestās izmaiņas.
Vai vēlaties migrēt no vecākas Bootstrap versijas uz v3.x? Skatiet mūsu migrācijas rokasgrāmatu .
Bootstrap ir izveidots tā, lai vislabāk darbotos jaunākajās galddatoru un mobilo ierīču pārlūkprogrammās, kas nozīmē, ka vecākajās pārlūkprogrammās var tikt parādīti atšķirīgi veidoti, lai gan pilnībā funkcionējoši noteiktu komponentu renderējumi.
Konkrēti, mēs atbalstām tālāk norādīto pārlūkprogrammu un platformu jaunākās versijas .
Alternatīvas pārlūkprogrammas, kurās tiek izmantota jaunākā WebKit, Blink vai Gecko versija, tieši vai ar platformas tīmekļa skata API starpniecību, netiek tieši atbalstītas. Tomēr Bootstrap vajadzētu (vairumā gadījumu) pareizi parādīt un darboties arī šajās pārlūkprogrammās. Tālāk ir sniegta precīzāka atbalsta informācija.
Vispārīgi runājot, Bootstrap atbalsta katras galvenās platformas noklusējuma pārlūkprogrammu jaunākās versijas. Ņemiet vērā, ka starpniekservera pārlūkprogrammas (piemēram, Opera Mini, Opera Mobile's Turbo režīms, UC Browser Mini, Amazon Silk) netiek atbalstītas.
Chrome | Firefox | Safari | |
---|---|---|---|
Android | Atbalstīts | Atbalstīts | N/A |
iOS | Atbalstīts | Atbalstīts | Atbalstīts |
Tāpat tiek atbalstītas lielākās daļas galddatoru pārlūkprogrammu jaunākās versijas.
Chrome | Firefox | Internet Explorer | Opera | Safari | |
---|---|---|---|---|---|
Mac | Atbalstīts | Atbalstīts | N/A | Atbalstīts | Atbalstīts |
Windows | Atbalstīts | Atbalstīts | Atbalstīts | Atbalstīts | Nav atbalstīts |
Operētājsistēmā Windows mēs atbalstām Internet Explorer 8–11 .
Firefox papildus jaunākajam parastajam stabilajam laidienam mēs atbalstām arī jaunāko Firefox paplašinātā atbalsta laidiena (ESR) versiju.
Neoficiāli Bootstrap vajadzētu izskatīties un darboties pietiekami labi pārlūkprogrammās Chromium un Chrome for Linux, Firefox for Linux un Internet Explorer 7, kā arī Microsoft Edge, lai gan tās netiek oficiāli atbalstītas.
Lai iegūtu sarakstu ar dažām pārlūkprogrammas kļūdām, ar kurām Bootstrap ir jācīnās, skatiet mūsu pārlūkprogrammas kļūdu sienu .
Tiek atbalstītas arī pārlūkprogrammas Internet Explorer 8 un 9, taču, lūdzu, ņemiet vērā, ka šīs pārlūkprogrammas pilnībā neatbalsta dažus CSS3 rekvizītus un HTML5 elementus. Turklāt pārlūkprogrammai Internet Explorer 8 ir nepieciešams izmantot Respond.js , lai iespējotu multivides vaicājumu atbalstu.
Funkcija | Internet Explorer 8 | Internet Explorer 9 |
---|---|---|
border-radius |
Nav atbalstīts | Atbalstīts |
box-shadow |
Nav atbalstīts | Atbalstīts |
transform |
Nav atbalstīts | Atbalstīts, ar -ms prefiksu |
transition |
Nav atbalstīts | |
placeholder |
Nav atbalstīts |
Apmeklējiet vietni Vai es varu izmantot... , lai iegūtu sīkāku informāciju par pārlūkprogrammas atbalstu CSS3 un HTML5 funkcijām.
Lietojot Respond.js savā izstrādes un ražošanas vidē pārlūkprogrammai Internet Explorer 8, ievērojiet tālāk norādītos brīdinājumus.
Lai izmantotu Respond.js ar CSS, kas mitināts citā (apakš)domēnā (piemēram, CDN), ir nepieciešama papildu iestatīšana. Detalizētu informāciju skatiet dokumentā Respond.js .
file://
Pārlūka drošības noteikumu dēļ Respond.js nedarbojas lapās, kas tiek skatītas, izmantojot file://
protokolu (piemēram, atverot lokālo HTML failu). Lai pārbaudītu IE8 adaptīvās funkcijas, skatiet savas lapas, izmantojot HTTP(S). Detalizētu informāciju skatiet dokumentā Respond.js .
@import
Respond.js nedarbojas ar CSS, uz kuru ir atsauce, izmantojot @import
. Jo īpaši ir zināms, ka dažas Drupal konfigurācijas izmanto @import
. Detalizētu informāciju skatiet dokumentā Respond.js .
IE8 pilnībā neatbalsta box-sizing: border-box;
, ja to apvieno ar min-width
, max-width
, min-height
, vai max-height
. Šī iemesla dēļ no v3.0.1 mēs vairs neizmantojam max-width
s .container
.
IE8 ir dažas problēmas, @font-face
ja tās tiek kombinētas ar :before
. Bootstrap izmanto šo kombināciju ar saviem Glyphicons. Ja lapa ir saglabāta kešatmiņā un tiek ielādēta, nevirzot peli virs loga (ti, nospiediet atsvaidzināšanas pogu vai ielādējiet kaut ko iframe), lapa tiek renderēta pirms fonta ielādes. Virzot kursoru virs lapas (pamatteksta), tiks parādītas dažas ikonas, un, virzot kursoru virs pārējām ikonām, tiks parādītas arī tās. Plašāku informāciju skatiet izdevumā #13863 .
Bootstrap netiek atbalstīts vecajos Internet Explorer saderības režīmos. Lai pārliecinātos, ka izmantojat jaunāko IE renderēšanas režīmu, apsveriet iespēju <meta>
savās lapās iekļaut atbilstošu tagu:
Apstipriniet dokumenta režīmu, atverot atkļūdošanas rīkus: nospiediet F12un atzīmējiet "Dokumenta režīms".
Šis tags ir iekļauts visā Bootstrap dokumentācijā un piemēros, lai nodrošinātu vislabāko iespējamo atveidojumu katrā atbalstītajā Internet Explorer versijā.
Lai iegūtu papildinformāciju, skatiet šo StackOverflow jautājumu .
Programma Internet Explorer 10 neatšķir ierīces platumu no skata loga platuma un tādējādi nepareizi piemēro multivides vaicājumus Bootstrap CSS. Lai to labotu, parasti jāpievieno ātrs CSS fragments:
Tomēr tas nedarbojas ierīcēs, kurās darbojas operētājsistēmas Windows Phone 8 versijas, kas vecākas par 3. atjauninājumu (aka GDR3) , jo šādās ierīcēs tiek rādīts galvenokārt darbvirsmas skats, nevis šaurs tālruņa skats. Lai to novērstu, jums ir jāiekļauj tālāk norādītais CSS un JavaScript, lai novērstu kļūdu .
Lai iegūtu papildinformāciju un lietošanas vadlīnijas, izlasiet Windows Phone 8 un Device-Width .
Uzmanību mēs to iekļaujam visā Bootstrap dokumentācijā un piemēros kā demonstrāciju.
Safari versiju renderēšanas programmai pirms v7.1 operētājsistēmai OS X un Safari operētājsistēmai iOS v8.0 bija zināmas problēmas ar mūsu .col-*-1
režģa klasēs izmantoto zīmju skaitu aiz komata. Tātad, ja jums būtu 12 atsevišķas režģa kolonnas, jūs pamanītu, ka tās ir īsas salīdzinājumā ar citām kolonnu rindām. Papildus Safari/iOS jaunināšanai jums ir dažas iespējas, kā rīkoties:
.pull-right
savai pēdējai režģa kolonnai, lai iegūtu precīzo līdzinājumuElementa atbalsts overflow: hidden
ir <body>
diezgan ierobežots operētājsistēmās iOS un Android. Šajā nolūkā, ritinot gar modāla augšdaļu vai apakšdaļu kādā no šo ierīču pārlūkprogrammām, <body>
saturs sāks ritināt. Skatiet Chrome kļūdu #175502 (izlabota pārlūkprogrammā Chrome v40) un WebKit kļūdu #153852 .
Sākot ar operētājsistēmu iOS 9.3, kamēr modāls ir atvērts, ja ritināšanas žesta sākotnējais pieskāriens atrodas teksta <input>
vai simbola robežās <textarea>
, <body>
tiks ritināts saturs zem modāla, nevis pats modāls. Skatiet WebKit kļūdu #153856 .
Ņemiet vērā arī to, ka, ja izmantojat fiksētu navigācijas joslu vai ievades datus modālā, operētājsistēmā iOS ir renderēšanas kļūda, kas neatjaunina fiksēto elementu pozīciju, kad tiek aktivizēta virtuālā tastatūra. Daži risinājumi šim nolūkam ietver elementu pārveidošanu position: absolute
vai fokusa taimera izsaukšanu, lai mēģinātu manuāli labot pozicionēšanu. Bootstrap to nenodrošina, tāpēc jums ir jāizlemj, kurš risinājums ir vislabākais jūsu lietojumprogrammai.
Šis .dropdown-backdrop
elements netiek izmantots operētājsistēmā iOS navigācijā z-indeksēšanas sarežģītības dēļ. Tādējādi, lai aizvērtu nolaižamās izvēlnes navigācijas joslās, jums tieši jānoklikšķina uz nolaižamās izvēlnes elementa (vai jebkura cita elementa, kas aktivizēs klikšķa notikumu operētājsistēmā iOS ).
Lapas tālummaiņa dažos komponentos neizbēgami rada renderēšanas artefaktus gan Bootstrap, gan pārējā tīmeklī. Atkarībā no problēmas, iespējams, varēsim to novērst (vispirms meklējiet un pēc tam atveriet problēmu, ja nepieciešams). Tomēr mums ir tendence tos ignorēt, jo tiem bieži vien nav tieša risinājuma, kā tikai sarežģīti risinājumi.
:hover
/ :focus
mobilajā ierīcēLai gan liela daļa skārienekrānu nav iespējama, lielākā daļa mobilo pārlūkprogrammu atdarina virzīšanas atbalstu un padara to :hover
"lipīgu". Citiem vārdiem sakot, :hover
stilu lietošana tiek sākta pēc pieskaršanās elementam un tiek pārtraukta tikai pēc tam, kad lietotājs pieskaras kādam citam elementam. Tas var izraisīt Bootstrap :hover
stāvokļu nevēlamu "iestrēgšanu" šādās pārlūkprogrammās. Dažas mobilās pārlūkprogrammas arī padara :focus
līdzīgu lipīgu. Pašlaik šīm problēmām nav cita vienkārša risinājuma, izņemot šādu stilu pilnīgu noņemšanu.
Pat dažās modernās pārlūkprogrammās drukāšana var būt dīvaina.
Konkrēti, sākot ar Chrome v32 un neatkarīgi no piemaļu iestatījumiem, pārlūkprogrammā Chrome tiek izmantots skatvietas platums, kas ir ievērojami šaurāks nekā fiziskais papīra izmērs, risinot multivides vaicājumus tīmekļa lapas drukāšanas laikā. Tā rezultātā drukāšanas laikā var negaidīti aktivizēties Bootstrap īpaši mazais režģis. Plašāku informāciju skatiet izdevumā Nr. 12078 un Chrome kļūdu Nr. 273306 . Ieteicamie risinājumi:
@screen-*
mainīgo Mazāk vērtības, lai printera papīrs tiktu uzskatīts par lielāku par īpaši mazu.Arī no Safari v8.0 fiksēta platuma.container
s dēļ drukāšanas laikā Safari var izmantot neparasti mazu fonta izmēru. Plašāku informāciju skatiet #14868 un WebKit kļūdu #138192 . Viens no iespējamiem risinājumiem ir šāda CSS pievienošana:
Sākotnēji operētājsistēma Android 4.1 (un pat daži jaunāki laidieni, acīmredzot) tiek piegādāta ar pārlūkprogrammas lietotni kā noklusējuma tīmekļa pārlūkprogrammu (pretstatā Chrome). Diemžēl pārlūkprogrammas lietotnē ir daudz kļūdu un pretrunu ar CSS kopumā.
Elementos <select>
Android akciju pārlūkprogramma nerādīs sānu vadīklas, ja ir border-radius
un/vai border
lietotas. (Skatiet šo StackOverflow jautājumu .) Izmantojiet tālāk norādīto koda fragmentu, lai noņemtu aizskarošo CSS un atveidotu <select>
kā bez stila elementu Android akciju pārlūkprogrammā. Lietotāja aģenta šņaukšana novērš traucējumus pārlūkprogrammās Chrome, Safari un Mozilla.
Vai vēlaties redzēt piemēru? Apskatiet šo JS Bin demonstrāciju.
Lai nodrošinātu vislabāko iespējamo pieredzi vecām un kļūdainām pārlūkprogrammām, Bootstrap izmanto CSS pārlūkprogrammu uzlaušanu , lai mērķētu uz īpašām CSS noteiktām pārlūkprogrammu versijām, lai novērstu kļūdas pašās pārlūkprogrammās. Šie uzlauzumi saprotami liek CSS pārbaudītājiem sūdzēties, ka tie ir nederīgi. Dažās vietās mēs izmantojam arī jaunākās CSS funkcijas, kas vēl nav pilnībā standartizētas, taču tās tiek izmantotas tikai pakāpeniskai uzlabošanai.
Šiem validācijas brīdinājumiem praksē nav nozīmes, jo mūsu CSS neuzlauztā daļa tiek pilnībā pārbaudīta, un uzlauztās daļas netraucē nehacked daļas pareizu darbību, tāpēc mēs apzināti ignorējam šos konkrētos brīdinājumus.
Mūsu HTML dokumentos ir arī daži triviāli un nenozīmīgi HTML validācijas brīdinājumi, jo esam iekļāvuši risinājumu noteiktai Firefox kļūdai .
Lai gan mēs oficiāli neatbalstām trešo pušu spraudņus vai papildinājumus, mēs piedāvājam dažus noderīgus padomus, kas palīdzēs izvairīties no iespējamām problēmām jūsu projektos.
Dažas trešās puses programmatūras, tostarp Google Maps un Google pielāgotā meklētājprogramma, konfliktē ar Bootstrap * { box-sizing: border-box; }
, jo kārtula, kas to padara par tādu padding
, neietekmē elementa galīgo aprēķināto platumu. Uzziniet vairāk par kastes modeli un izmēru noteikšanu vietnē CSS triki .
Atkarībā no konteksta varat pēc vajadzības ignorēt (1. iespēja) vai atiestatīt lodziņa izmērus veseliem reģioniem (2. iespēja).
Bootstrap atbilst vispārpieņemtiem tīmekļa standartiem, un ar minimālu papildu piepūli to var izmantot, lai izveidotu vietnes, kas ir pieejamas tiem, kas izmanto AT .
Ja jūsu navigācijā ir daudz saišu un tā atrodas pirms galvenā satura DOM, pievienojiet Skip to main content
saiti pirms navigācijas (vienkāršu skaidrojumu skatiet šajā A11Y projekta rakstā par navigācijas saišu izlaišanu ). Klases izmantošana .sr-only
vizuāli paslēps izlaišanas saiti, un .sr-only-focusable
klase nodrošinās, ka saite kļūst redzama pēc fokusēšanas (redzīgiem tastatūras lietotājiem).
Tā kā pārlūkprogrammā Chrome (skatiet 262171. izdevumu Chromium kļūdu izsekotājā ) un Internet Explorer (skatiet šo rakstu par lapā esošajām saitēm un fokusa secību ) pastāv ilgstoši trūkumi/kļūdas , jums būs jāpārliecinās, ka izlaižamās saites mērķis ir ir vismaz programmatiski fokusējams, pievienojottabindex="-1"
.
Turklāt, iespējams, vēlēsities skaidri bloķēt redzamo fokusa norādi uz mērķi (jo īpaši tāpēc, ka pārlūks Chrome pašlaik arī iestata fokusu uz elementiem, tabindex="-1"
kad uz tiem noklikšķina ar peli), izmantojot #content:focus { outline: none; }
.
Ņemiet vērā, ka šī kļūda ietekmēs arī visas citas lapas saites, kuras, iespējams, izmanto jūsu vietne, padarot tās nederīgas tastatūras lietotājiem. Varat apsvērt iespēju pievienot līdzīgu pārtraukuma labojumu visiem citiem nosauktajiem enkuriem/fragmentu identifikatoriem, kas darbojas kā saites mērķi.
Ligzdojot virsrakstus ( <h1>
- <h6>
), jūsu primārajam dokumenta galvenei ir jābūt <h1>
. Turpmākajos virsrakstos loģiski jāizmanto <h2>
-<h6>
ekrāna lasītāji varētu izveidot jūsu lapu satura rādītāju.
Uzziniet vairāk vietnēs HTML CodeSniffer un Penn State's AccessAbility .
Pašlaik dažas no noklusējuma krāsu kombinācijām, kas pieejamas programmā Bootstrap (piemēram, dažādas stila pogu klases, dažas koda izcelšanas krāsas, kas tiek izmantotas pamata kodu blokiem , .bg-primary
kontekstuālā fona palīga klase un noklusējuma saites krāsa, ja tiek izmantota uz balta fona) ir zema kontrasta attiecība (zem ieteicamās attiecības 4,5:1 ). Tas var radīt problēmas lietotājiem ar vāju redzi vai daltoniķiem. Šīs noklusējuma krāsas var būt jāmaina, lai palielinātu to kontrastu un salasāmību.
Bootstrap tiek izlaists saskaņā ar MIT licenci, un tā autortiesības ir 2016 Twitter. Vārītu līdz mazākiem gabaliņiem, to var aprakstīt ar šādiem nosacījumiem.
Pilna Bootstrap licence ir pieejama projekta repozitorijā , lai iegūtu plašāku informāciju.
Kopienas dalībnieki ir tulkojuši Bootstrap dokumentāciju dažādās valodās. Neviens no tiem netiek oficiāli atbalstīts, un tie ne vienmēr var būt atjaunināti.
Mēs nepalīdzam organizēt vai mitināt tulkojumus, mēs tikai saiti uz tiem.
Vai esat pabeidzis jaunu vai labāku tulkojumu? Atveriet izvilkšanas pieprasījumu, lai to pievienotu mūsu sarakstam.