Darbo pradžia
„Bootstrap“ apžvalga, kaip atsisiųsti ir naudoti, pagrindiniai šablonai ir pavyzdžiai ir kt.
„Bootstrap“ apžvalga, kaip atsisiųsti ir naudoti, pagrindiniai šablonai ir pavyzdžiai ir kt.
„Bootstrap“ (šiuo metu v3.3.7) turi keletą paprastų būdų greitai pradėti, kiekvienas iš jų yra patrauklus skirtingiems įgūdžių lygiams ir naudojimo atvejams. Perskaitykite, kad sužinotumėte, kas atitinka jūsų konkrečius poreikius.
Sukompiliuoti ir sumažinti CSS, JavaScript ir šriftai. Nėra dokumentų ar originalių šaltinio failų.
Šaltinis Less, „JavaScript“ ir šriftų failai kartu su mūsų dokumentais. Reikia mažiau kompiliatoriaus ir tam tikros sąrankos.
„ Bootstrap“ perkelta iš „Less“ į „Sass “, kad būtų lengviau įtraukti į „Rails“, „Compass“ ar „Sass“ projektus.
„ jsDelivr “ darbuotojai maloniai teikia CDN palaikymą „Bootstrap“ CSS ir „JavaScript“. Tiesiog naudokite šias „Bootstrap“ CDN nuorodas.
Taip pat galite įdiegti ir valdyti „Bootstrap's Less“, CSS, „JavaScript“ ir šriftus naudodami „ Bower “ :
Taip pat galite įdiegti „Bootstrap“ naudodami npm :
require('bootstrap')
įkels visus „Bootstrap“ „jQuery“ papildinius į „jQuery“ objektą. Pats bootstrap
modulis nieko neeksportuoja. Galite rankiniu būdu įkelti Bootstrap jQuery papildinius atskirai, įkeldami /js/*.js
failus paketo aukščiausio lygio kataloge.
„Bootstrap“ package.json
yra keletas papildomų metaduomenų pagal šiuos raktus:
less
- kelias į pagrindinį „Bootstrap“ mažiau šaltinio failąstyle
- kelias į „Bootstrap“ nesumažintą CSS, kuris buvo iš anksto sukompiliuotas naudojant numatytuosius nustatymus (be tinkinimo)Taip pat galite įdiegti ir valdyti „Bootstrap's Less“, CSS, „JavaScript“ ir šriftus naudodami „ Composer “ :
„ Bootstrap“ naudoja „Autoprefixer “, kad galėtų apdoroti CSS tiekėjo priešdėlius . Jei kompiliuojate Bootstrap iš jo Less/Sass šaltinio ir nenaudojate mūsų Gruntfile, turėsite patys integruoti Autoprefixer į savo kūrimo procesą. Jei naudojate iš anksto sukompiliuotą „Bootstrap“ arba „Gruntfile“, jums nereikia dėl to jaudintis, nes „Autoprefixer“ jau yra integruotas į mūsų „Gruntfile“.
„Bootstrap“ galima atsisiųsti dviem formomis, kuriose rasite šiuos katalogus ir failus, kurie logiškai sugrupuoja bendruosius išteklius ir pateikia tiek kompiliuotus, tiek sumažintus variantus.
Atminkite, kad į visus „JavaScript“ papildinius reikia įtraukti „jQuery “, kaip parodyta pradžios šablone . Norėdami sužinoti, kurios jQuery versijos palaikomos, kreipkitės į mus .bower.json
Atsisiuntę išpakuokite suglaudintą aplanką, kad pamatytumėte (sukompiliuoto) Bootstrap struktūrą. Pamatysite kažką panašaus:
Tai pati paprasčiausia „Bootstrap“ forma: iš anksto sukompiliuoti failai, skirti greitai panaudoti beveik bet kuriame žiniatinklio projekte. Mes teikiame sukompiliuotus CSS ir JS ( bootstrap.*
), taip pat sukompiliuotus ir sumažintus CSS ir JS ( bootstrap.min.*
). CSS šaltinio žemėlapius ( bootstrap.*.map
) galima naudoti su tam tikrų naršyklių kūrėjo įrankiais. Įtraukti šriftai iš Glyphicons, kaip ir pasirenkama Bootstrap tema.
„Bootstrap“ šaltinio kodo atsisiuntimas apima iš anksto sukompiliuotus CSS, „JavaScript“ ir šriftų išteklius, taip pat šaltinį „Less“, „JavaScript“ ir dokumentaciją. Tiksliau, tai apima šiuos ir daugiau:
, less/
ir yra mūsų CSS js/
, fonts/
JS ir piktogramų šriftų (atitinkamai) šaltinio kodas. dist/
Aplanke yra viskas, kas nurodyta aukščiau esančiame iš anksto sudarytame atsisiuntimo skyriuje . docs/
Aplanke yra mūsų dokumentacijos ir „Bootstrap“ naudojimo šaltinio kodas examples/
. Be to, bet kuris kitas įtrauktas failas palaiko paketus, informaciją apie licenciją ir plėtrą.
„ Bootstrap“ savo kūrimo sistemai naudoja „ Grunt “ su patogiais darbo su sistema metodais. Taip mes sudarome savo kodą, vykdome testus ir dar daugiau.
Norėdami įdiegti Grunt, pirmiausia turite atsisiųsti ir įdiegti node.js (įskaitant npm). npm reiškia mazgų supakuotus modulius ir yra būdas valdyti kūrimo priklausomybes naudojant node.js.
Tada iš komandinės eilutės:grunt-cli
visame pasaulyje naudodami npm install -g grunt-cli
./bootstrap/
katalogą, tada paleiskite npm install
. npm peržiūrės package.json
failą ir automatiškai įdiegs jame išvardytas būtinas vietines priklausomybes.Baigę galėsite paleisti įvairias Grunt komandas, pateiktas komandinėje eilutėje.
grunt dist
(Tiesiog sukompiliuokite CSS ir JavaScript)Atkuria /dist/
katalogą su sukompiliuotais ir sumažintais CSS ir JavaScript failais. Kaip Bootstrap vartotojas, tai paprastai yra norima komanda.
grunt watch
(Žiūrėti)Stebi mažiau šaltinio failus ir automatiškai perkompiliuoja juos į CSS, kai tik įrašote pakeitimą.
grunt test
(Vykdyti testus)Paleidžia JSHint ir be galvos atlieka QUnit testus PhantomJS .
grunt docs
(Sukurkite ir išbandykite dokumentų išteklius)Sukuria ir išbando CSS, JavaScript ir kitus išteklius, kurie naudojami vykdant dokumentaciją vietoje per bundle exec jekyll serve
.
grunt
(Sukurkite absoliučiai viską ir atlikite testus)Kompiliuoja ir sumažina CSS ir JavaScript, sukuria dokumentacijos svetainę, paleidžia HTML5 tikrintuvą pagal dokumentus, iš naujo sukuria tinkinimo priemonės išteklius ir dar daugiau. Reikia Jekyll . Paprastai tai būtina tik tada, kai įsilaužote į patį „Bootstrap“.
Jei kyla problemų diegiant priklausomybes arba vykdant Grunt komandas, pirmiausia ištrinkite /node_modules/
npm sugeneruotą katalogą. Tada paleiskite iš naujo npm install
.
Pradėkite nuo šio pagrindinio HTML šablono arba pakeiskite šiuos pavyzdžius . Tikimės, kad pritaikysite mūsų šablonus ir pavyzdžius, pritaikydami juos pagal savo poreikius.
Nukopijuokite toliau pateiktą HTML, kad pradėtumėte dirbti su minimaliu Bootstrap dokumentu.
Sukurkite aukščiau pateiktą pagrindinį šabloną naudodami daugybę „Bootstrap“ komponentų. Raginame pritaikyti ir pritaikyti „Bootstrap“, kad atitiktų jūsų individualaus projekto poreikius.
Gaukite kiekvieno toliau pateikto pavyzdžio šaltinio kodą atsisiųsdami „Bootstrap“ saugyklą . Pavyzdžius galite rasti docs/examples/
kataloge.
Nieko, išskyrus pagrindus: sukompiliuotas CSS ir JavaScript kartu su konteineriu.
Paprastas dviejų stulpelių tinklaraščio išdėstymas su pasirinktiniu naršymu, antrašte ir tipu.
Pagrindinė administratoriaus prietaisų skydelio struktūra su fiksuota šonine ir naršymo juosta.
Individualizuotos formos išdėstymas ir dizainas, skirtas paprastos iškabos formai.
Sukurkite tinkintą naršymo juostą su pagrįstomis nuorodomis. Galvas aukštyn! Ne per daug draugiškas „Safari“.
„Bootlint “ yra oficialus „Bootstrap HTML linter “ įrankis. Jis automatiškai patikrina, ar tinklalapiuose, kuriuose „Bootstrap“ naudojamas gana „vaniliniu“ būdu, nėra kelių įprastų HTML klaidų. „Vanilla Bootstrap“ komponentai / valdikliai reikalauja, kad jų DOM dalys atitiktų tam tikras struktūras. „Bootlint“ patikrina, ar „Bootstrap“ komponentų egzemplioriai turi tinkamos struktūros HTML. Apsvarstykite galimybę įtraukti „Bootlint“ į „Bootstrap“ žiniatinklio kūrimo įrankių grandinę, kad nė viena iš dažniausiai pasitaikančių klaidų nesulėtėtų jūsų projekto kūrimo.
Gaukite naujausią informaciją apie „Bootstrap“ kūrimą ir susisiekite su bendruomene naudodami šiuos naudingus išteklius.
irc.freenode.net
serveryje ##bootstrap kanale .twitter-bootstrap-3
.bootstrap
paketuose, kurie modifikuoja arba papildo „Bootstrap“ funkcijas platindami per npm ar panašius pristatymo mechanizmus, kad būtų galima maksimaliai aptikti.Taip pat galite sekti @getbootstrap „Twitter “, kad gautumėte naujausių paskalų ir nuostabių muzikinių vaizdo įrašų.
„Bootstrap“ automatiškai pritaiko jūsų puslapius įvairių dydžių ekranams. Štai kaip išjungti šią funkciją, kad jūsų puslapis veiktų kaip šis nereaguojantis pavyzdys .
<meta>
, nurodytą CSS dokumentuosewidth
ant .container
kiekvienos tinklelio pakopos vieno pločio, pvz., width: 970px !important;
Įsitikinkite, kad tai yra po numatytojo Bootstrap CSS. Pasirinktinai galite išvengti !important
medijos užklausų arba kai kurių selektorių-fu..col-xs-*
klases be vidutinių / didelių arba vietoj jų. Nesijaudinkite, ypač mažas įrenginio tinklelis prisitaiko prie visų skiriamųjų gebų.Jums vis tiek reikės Respond.js, skirto IE8 (nes mūsų medijos užklausos vis dar yra ir jas reikia apdoroti). Tai išjungia „Bootstrap“ mobiliosios svetainės aspektus.
Šiuos veiksmus pritaikėme pavyzdžiui. Perskaitykite šaltinio kodą, kad pamatytumėte konkrečius įgyvendintus pakeitimus.
Norite pereiti nuo senesnės „Bootstrap“ versijos į v3.x? Peržiūrėkite mūsų perkėlimo vadovą .
„Bootstrap“ sukurtas taip, kad geriausiai veiktų naujausiose stalinių kompiuterių ir mobiliųjų įrenginių naršyklėse, o tai reiškia, kad senesnėse naršyklėse gali būti rodomi kitokio stiliaus, nors ir visiškai funkcionalūs, tam tikrų komponentų atvaizdai.
Konkrečiai, mes palaikome naujausias toliau nurodytų naršyklių ir platformų versijas.
Alternatyvios naršyklės, kuriose naudojama naujausia „WebKit“, „Blink“ arba „Gecko“ versija, tiesiogiai arba per platformos žiniatinklio peržiūros API, nėra aiškiai palaikomos. Tačiau Bootstrap turėtų (daugeliu atvejų) tinkamai rodyti ir veikti šiose naršyklėse. Toliau pateikiama konkretesnė palaikymo informacija.
Paprastai kalbant, „Bootstrap“ palaiko naujausias kiekvienos pagrindinės platformos numatytųjų naršyklių versijas. Atminkite, kad tarpinio serverio naršyklės (pvz., „Opera Mini“, „Opera Mobile“ Turbo režimas, „UC Browser Mini“, „Amazon Silk“) nepalaikomos.
Chrome | Firefox | Safari | |
---|---|---|---|
Android | Palaikoma | Palaikoma | N/A |
iOS | Palaikoma | Palaikoma | Palaikoma |
Panašiai palaikomos ir naujausios daugumos darbalaukio naršyklių versijos.
Chrome | Firefox | Internet Explorer | Opera | Safari | |
---|---|---|---|---|---|
Mac | Palaikoma | Palaikoma | N/A | Palaikoma | Palaikoma |
Windows | Palaikoma | Palaikoma | Palaikoma | Palaikoma | Nepalaikomas |
Sistemoje „Windows“ palaikome „Internet Explorer 8–11“ .
Be naujausio įprasto stabilaus leidimo, „Firefox“ palaikome ir naujausią išplėstinio palaikymo leidimo (ESR) „Firefox“ versiją.
Neoficialiai „Bootstrap“ turėtų atrodyti ir veikti pakankamai gerai „Chromium“ ir „Chrome“, skirta „Linux“, „Firefox“, skirta „Linux“ ir „Internet Explorer 7“, taip pat „Microsoft Edge“, nors jie oficialiai nepalaikomi.
Kai kurių naršyklės klaidų, su kuriomis turi kovoti „Bootstrap“, sąrašą rasite mūsų naršyklės klaidų sienoje .
Internet Explorer 8 ir 9 taip pat palaikomos, tačiau atminkite, kad kai kurios CSS3 ypatybės ir HTML5 elementai nėra visiškai palaikomi šiose naršyklėse. Be to, norint įgalinti medijos užklausų palaikymą , „ Internet Explorer 8“ reikalauja naudoti Respond.js .
Funkcija | Internet Explorer 8 | Internet Explorer 9 |
---|---|---|
border-radius |
Nepalaikomas | Palaikoma |
box-shadow |
Nepalaikomas | Palaikoma |
transform |
Nepalaikomas | Palaikoma, su -ms priešdėliu |
transition |
Nepalaikomas | |
placeholder |
Nepalaikomas |
Norėdami gauti daugiau informacijos apie naršyklės CSS3 ir HTML5 funkcijų palaikymą, apsilankykite Ar galiu naudoti....
Naudodami Respond.js savo kūrimo ir gamybos aplinkoje, skirtoje „Internet Explorer 8“, saugokitės šių įspėjimų.
Naudojant Respond.js su CSS, priglobtu kitame (padomene) (pavyzdžiui, CDN), reikia papildomos sąrankos. Daugiau informacijos rasite Respond.js dokumentuose .
file://
Dėl naršyklės saugumo taisyklių Respond.js neveikia puslapiuose, peržiūrimuose naudojant file://
protokolą (pvz., atidarant vietinį HTML failą). Norėdami išbandyti interaktyvias IE8 funkcijas, peržiūrėkite puslapius per HTTP(S). Daugiau informacijos rasite Respond.js dokumentuose .
@import
Respond.js neveikia su CSS, kuris nurodytas per @import
. Visų pirma žinoma, kad kai kurios Drupal konfigūracijos naudoja @import
. Daugiau informacijos rasite Respond.js dokumentuose .
IE8 ne visiškai palaiko box-sizing: border-box;
, kai jis derinamas su min-width
, max-width
, min-height
, arba max-height
. max-width
Dėl šios priežasties nuo 3.0.1 versijos nebenaudojame .container
s.
IE8 turi tam tikrų problemų, @font-face
kai jis derinamas su :before
. „Bootstrap“ naudoja šį derinį su savo „Glyphicons“. Jei puslapis yra talpykloje ir įkeliamas neužvedus pelės ant lango (ty paspaudžiamas atnaujinimo mygtukas arba įkeliamas ką nors į iframe), puslapis atvaizduojamas prieš įkeliant šriftą. Užvedus pelės žymeklį virš puslapio (turinio), bus rodomos kai kurios piktogramos, o užvedus pelės žymeklį virš likusių piktogramų, jos taip pat bus rodomos. Norėdami gauti daugiau informacijos, žr. numerį 13863 .
„Bootstrap“ nepalaikomas senuose „Internet Explorer“ suderinamumo režimuose. Norėdami įsitikinti, kad naudojate naujausią IE atvaizdavimo režimą, apsvarstykite galimybę <meta>
į savo puslapius įtraukti atitinkamą žymą:
Patvirtinkite dokumento režimą atidarydami derinimo įrankius: paspauskite F12ir pažymėkite „Dokumento režimas“.
Ši žyma įtraukta į visą „Bootstrap“ dokumentaciją ir pavyzdžius, siekiant užtikrinti geriausią įmanomą atvaizdavimą kiekvienoje palaikomoje „Internet Explorer“ versijoje.
Norėdami gauti daugiau informacijos, žr . šį „StackOverflow“ klausimą .
Internet Explorer 10 neskiria įrenginio pločio nuo peržiūros srities pločio , todėl netinkamai taiko medijos užklausas Bootstrap CSS. Paprastai tiesiog pridėkite greitą CSS fragmentą, kad tai išspręstumėte:
Tačiau tai neveikia įrenginiuose, kuriuose veikia senesnės nei 3 naujinimas (dar žinomas kaip GDR3) „Windows Phone 8“ versijos , nes tokiuose įrenginiuose dažniausiai rodomas darbalaukio vaizdas, o ne siauras „telefono“ vaizdas. Kad tai išspręstumėte, turėsite įtraukti toliau nurodytus CSS ir JavaScript, kad išvengtumėte klaidos .
Daugiau informacijos ir naudojimo gairių rasite „ Windows Phone 8“ ir „Device-Width“ .
Norime atkreipti dėmesį į tai, kaip demonstravimą, įtraukiame į visus „Bootstrap“ dokumentus ir pavyzdžius.
.col-*-1
Ankstesnių nei 7.1 versijų „Safari“, skirtų OS X, ir „Safari“, skirtų iOS v8.0, atvaizdavimo variklis turėjo problemų dėl mūsų tinklelio klasėse naudojamų skaičių po kablelio . Taigi, jei turėtumėte 12 atskirų tinklelio stulpelių, pastebėtumėte, kad jie buvo trumpi, palyginti su kitomis stulpelių eilutėmis. Be „Safari“ / „iOS“ atnaujinimo, turite keletą sprendimų, kaip išspręsti šią problemą:
.pull-right
prie paskutinio tinklelio stulpelio, kad gautumėte griežtą dešiniąją išlygiavimąElemento palaikymas overflow: hidden
„ <body>
iOS“ ir „Android“ yra gana ribotas. Tuo tikslu, kai slinksite pro modalo viršų arba apačią bet kurioje iš šių įrenginių naršyklių, <body>
turinys pradės slinkti. Žr . „ Chrome“ klaidą Nr. 175502 (ištaisyta „Chrome v40“) ir „ WebKit“ klaidą Nr. 153852 .
<input>
Nuo 9.3 versijos iOS, kai modalas yra atidarytas, jei pradinis slinkties gesto palietimas yra teksto ar ribose, po modalu <textarea>
esantis <body>
turinys bus slinktas, o ne pats modalas. Žr . WebKit klaidą Nr. 153856 .
Be to, atminkite, kad jei naudojate fiksuotą naršymo juostą arba naudojate modalo įvestis, „iOS“ turi atvaizdavimo klaidą, kuri neatnaujina fiksuotų elementų padėties, kai suaktyvinama virtualioji klaviatūra. Keletas būdų, kaip tai padaryti, apima elementų pakeitimą position: absolute
arba fokusavimo laikmačio iškvietimą, kad būtų galima rankiniu būdu ištaisyti padėtį. To netvarko „Bootstrap“, todėl jūs turite nuspręsti, kuris sprendimas yra geriausias jūsų programai.
Elementas .dropdown-backdrop
„iOS“ nenaudojamas navigacijoje dėl z indeksavimo sudėtingumo. Taigi, norėdami uždaryti naršymo juostų išskleidžiamuosius meniu, turite tiesiogiai spustelėti išskleidžiamąjį elementą (arba bet kurį kitą elementą, kuris suaktyvins paspaudimo įvykį sistemoje „iOS“ ).
Keičiant puslapio mastelį, kai kuriuose komponentuose, tiek sistemoje „Bootstrap“, tiek likusioje žiniatinklio dalyje, neišvengiamai atsiranda atvaizdavimo artefaktų. Atsižvelgdami į problemą, galime ją išspręsti (pirmiausia ieškokite ir, jei reikia, atidarykite problemą). Tačiau mes linkę į tai nepaisyti, nes jie dažnai neturi tiesioginio sprendimo, išskyrus įsisenėjusius sprendimus.
:hover
/ :focus
mobiliajame telefoneNors tikrasis užvedimas ant žymeklio neįmanomas daugelyje jutiklinių ekranų, dauguma mobiliųjų naršyklių imituoja užvedimo palaikymą ir daro :hover
„lipnią“. Kitaip tariant, :hover
stiliai pradedami taikyti palietus elementą ir nustoja būti taikomi tik vartotojui palietus kitą elementą. Dėl to „Bootstrap“ :hover
būsenos gali nepageidaujamai „užstrigti“ tokiose naršyklėse. Kai kurios mobiliosios naršyklės taip pat yra :focus
panašiai lipnios. Šiuo metu nėra paprasto šių problemų sprendimo, išskyrus visišką tokių stilių pašalinimą.
Net kai kuriose šiuolaikinėse naršyklėse spausdinimas gali būti keistas.
Visų pirma, nuo 32 versijos „Chrome“ ir neatsižvelgiant į paraščių nustatymus, „Chrome“ naudoja žymiai siauresnį nei fizinio popieriaus dydį peržiūros srities plotį, kai sprendžia medijos užklausas spausdinant tinklalapį. Dėl to spausdinant gali netikėtai suaktyvėti itin mažas „Bootstrap“ tinklelis. Norėdami gauti daugiau informacijos, žr. problemą Nr. 12078 ir „ Chrome“ klaidą Nr. 273306 . Siūlomi problemos sprendimo būdai:
@screen-*
kintamųjų Mažiau reikšmes, kad spausdintuvo popierius būtų laikomas didesniu nei itin mažu.Be to, nuo 8.0 versijos Safari dėl fiksuoto pločio .container
s spausdinant Safari gali būti naudojamas neįprastai mažas šriftas. Norėdami gauti daugiau informacijos, žr . #14868 ir WebKit klaidą #138192 . Vienas iš galimų šios problemos sprendimo būdų yra pridėti šį CSS:
Iš pradžių „Android 4.1“ (ir, matyt, net kai kurie naujesni leidimai) pristatoma su Naršyklės programa kaip numatytoji pasirinkta žiniatinklio naršyklė (priešingai nei „Chrome“). Deja, naršyklės programoje yra daug klaidų ir apskritai CSS neatitikimų.
Elementuose <select>
„Android“ atsargų naršyklė nerodys šoninių valdiklių, jei yra border-radius
ir (arba) border
pritaikyti. (Išsamesnės informacijos ieškokite šiame „StackOverflow“ klausime .) Naudokite toliau pateiktą kodo fragmentą, kad pašalintumėte pažeidžiantį CSS ir <select>
„Android“ atsargų naršyklėje pateiktumėte kaip nestiliautą elementą. Naudotojo agento uostymas leidžia išvengti „Chrome“, „Safari“ ir „Mozilla“ naršyklių trikdžių.
Norite pamatyti pavyzdį? Peržiūrėkite šią JS Bin demonstraciją.
Siekdama suteikti geriausią įmanomą patirtį senoms ir klaidingoms naršyklėms, „Bootstrap“ keliose vietose naudoja CSS naršyklės įsilaužimus , kad tam tikroms naršyklės versijoms būtų pritaikytas specialus CSS, kad būtų išvengta pačių naršyklių klaidų. Dėl šių įsilaužimų CSS tikrintojai skundžiasi, kad jie neteisingi. Kai kuriose vietose taip pat naudojame pažangiausias CSS funkcijas, kurios dar nėra visiškai standartizuotos, tačiau jos naudojamos tik laipsniškam patobulinimui.
Šie patvirtinimo įspėjimai praktiškai neturi reikšmės, nes neįsilaužianti mūsų CSS dalis visiškai patvirtinama, o įsilaužusios dalys netrukdo tinkamai veikti neįsilaužančiai daliai, todėl mes sąmoningai ignoruojame šiuos konkrečius įspėjimus.
Mūsų HTML dokumentuose taip pat yra keletas nereikšmingų ir nereikšmingų HTML patvirtinimo įspėjimų, nes įtraukėme tam tikros „Firefox“ klaidos sprendimą .
Nors oficialiai nepalaikome jokių trečiųjų šalių papildinių ar priedų, siūlome keletą naudingų patarimų, kurie padės išvengti galimų problemų jūsų projektuose.
Kai kuri trečiosios šalies programinė įranga, įskaitant „Google“ žemėlapius ir „Google“ tinkintos paieškos programą, prieštarauja „Bootstrap“ dėl * { box-sizing: border-box; }
taisyklės, dėl kurios ji padding
neturi įtakos galutiniam apskaičiuotam elemento pločiui. Sužinokite daugiau apie dėžutės modelį ir dydį apsilankę CSS Tricks .
Atsižvelgiant į kontekstą, prireikus galite nepaisyti (1 parinktis) arba iš naujo nustatyti visų regionų dėžės dydį (2 parinktis).
„Bootstrap“ atitinka įprastus žiniatinklio standartus ir – su minimaliomis papildomomis pastangomis – gali būti naudojamas kuriant svetaines, pasiekiamas naudojantiems AT .
Jei jūsų navigacijoje yra daug nuorodų ir ji pateikiama prieš pagrindinį DOM turinį, Skip to main content
prieš naršymą pridėkite nuorodą (paprastą paaiškinimą rasite šiame A11Y projekto straipsnyje apie naršymo nuorodų praleidimą ). Naudojant .sr-only
klasę, praleidimo nuoroda bus vizualiai paslėpta, o .sr-only-focusable
klasė užtikrins, kad nuoroda taptų matoma, kai ji bus sufokusuota (regintiems klaviatūros naudotojams).
Dėl ilgalaikių „Chrome“ trūkumų / klaidų (žr . 262171 leidimą „Chromium“ klaidų sekimo priemonėje ) ir „Internet Explorer“ (žr. šį straipsnį apie nuorodas puslapyje ir fokusavimo tvarką ), turėsite įsitikinti, kad praleidimo nuorodos tikslas yra bent jau programiškai fokusuojamas pridedant tabindex="-1"
.
Be to, galbūt norėsite aiškiai nuslopinti matomą tikslinio židinio indikaciją (ypač dėl to, kad šiuo metu „Chrome“ taip pat nustato elementų fokusavimą tabindex="-1"
spustelėjus juos pele) naudodami #content:focus { outline: none; }
.
Atminkite, kad ši klaida taip pat turės įtakos visoms kitoms puslapio nuorodoms, kurias gali naudoti jūsų svetainė, todėl klaviatūros naudotojams jos bus nenaudingos. Galite apsvarstyti galimybę pridėti panašų stabdymo pataisą prie visų kitų pavadintų inkarų / fragmentų identifikatorių, kurie veikia kaip nuorodos taikiniai.
Kai dedate antraštes ( <h1>
- <h6>
), pagrindinė dokumento antraštė turi būti <h1>
. Vėlesnėse antraštėse turėtų būti naudojamos logiškos savybės, <h2>
kad <h6>
ekrano skaitytuvai galėtų sudaryti jūsų puslapių turinį.
Sužinokite daugiau HTML CodeSniffer ir Penn State AccessAbility .
Šiuo metu kai kurie numatytieji „Bootstrap“ spalvų deriniai (pvz., įvairių stilių mygtukų klasės, kai kurios kodo paryškinimo spalvos, naudojamos pagrindiniams kodų blokams , .bg-primary
kontekstinio fono pagalbinė klasė ir numatytoji nuorodos spalva, kai naudojama baltame fone) turi mažą kontrasto santykį (žemiau rekomenduojamo 4,5:1 santykio ). Dėl to gali kilti problemų silpnaregiams arba daltonistams. Šias numatytąsias spalvas gali tekti keisti, kad būtų padidintas jų kontrastas ir įskaitomumas.
„Bootstrap“ išleidžiama pagal MIT licenciją ir priklauso 2016 m. „Twitter“ autorių teisėms. Išvirtą iki mažesnių gabalėlių, jį galima apibūdinti tokiomis sąlygomis.
Norėdami gauti daugiau informacijos , visa „Bootstrap“ licencija yra projekto saugykloje .
Bendruomenės nariai išvertė Bootstrap dokumentaciją į įvairias kalbas. Nė vienas nėra oficialiai palaikomas ir ne visada gali būti atnaujintas.
Mes nepadedame tvarkyti ar priglobti vertimų, tik pateikiame nuorodas į juos.
Baigėte naują ar geresnį vertimą? Atidarykite ištraukimo užklausą, kad įtrauktumėte ją į sąrašą.