Duke filluar
Një përmbledhje e Bootstrap, si të shkarkoni dhe përdorni, shabllone dhe shembuj bazë, dhe më shumë.
Një përmbledhje e Bootstrap, si të shkarkoni dhe përdorni, shabllone dhe shembuj bazë, dhe më shumë.
Bootstrap (aktualisht v3.3.7) ka disa mënyra të thjeshta për të filluar shpejt, secila prej tyre tërheqëse për një nivel të ndryshëm aftësie dhe raste përdorimi. Lexoni për të parë se çfarë i përshtatet nevojave tuaja të veçanta.
Përpiluar dhe minimizuar CSS, JavaScript dhe fontet. Asnjë dokument ose skedar burimi origjinal nuk përfshihet.
Burimi më pak, JavaScript dhe skedarët e shkronjave, së bashku me dokumentet tona. Kërkon një përpilues më pak dhe disa konfigurime.
Bootstrap i transferuar nga Less në Sass për përfshirje të lehtë në projekte vetëm në Rails, Compass ose Sass.
Njerëzit në jsDelivr ofrojnë me mirësjellje mbështetje CDN për CSS dhe JavaScript të Bootstrap. Thjesht përdorni këto lidhje CDN të Bootstrap .
Ju gjithashtu mund të instaloni dhe menaxhoni Less, CSS, JavaScript dhe fontet e Bootstrap duke përdorur Bower :
Ju gjithashtu mund të instaloni Bootstrap duke përdorur npm :
require('bootstrap')
do të ngarkojë të gjitha shtojcat jQuery të Bootstrap në objektin jQuery. Moduli bootstrap
në vetvete nuk eksporton asgjë. Ju mund t'i ngarkoni manualisht shtojcat jQuery të Bootstrap individualisht duke ngarkuar /js/*.js
skedarët nën drejtorinë e nivelit të lartë të paketës.
Bootstrap package.json
përmban disa meta të dhëna shtesë nën çelësat e mëposhtëm:
less
- shtegu drejt skedarit kryesor më pak burim të Bootstrapstyle
- shtegu drejt CSS-së së paminifikuar të Bootstrap që është parapërpiluar duke përdorur cilësimet e paracaktuara (pa personalizim)Ju gjithashtu mund të instaloni dhe menaxhoni Bootstrap's Less, CSS, JavaScript dhe fontet duke përdorur Composer :
Bootstrap përdor Autoprefixer për t'u marrë me prefikset e shitësve CSS . Nëse po përpiloni Bootstrap nga burimi i tij Less/Sass dhe nuk përdorni skedarin tonë Grunt, do t'ju duhet ta integroni vetë Autoprefixer në procesin e ndërtimit. Nëse jeni duke përdorur Bootstrap të parapërpiluar ose duke përdorur skedarin tonë Grunt, nuk keni nevojë të shqetësoheni për këtë sepse Autoprefixer është tashmë i integruar në skedarin tonë Grunt.
Bootstrap mund të shkarkohet në dy forma, brenda të cilave do të gjeni drejtoritë dhe skedarët e mëposhtëm, duke grupuar logjikisht burime të përbashkëta dhe duke ofruar variacione të përpiluara dhe të minuara.
Ju lutemi vini re se të gjitha shtojcat JavaScript kërkojnë që të përfshihet jQuery , siç tregohet në shabllonin fillestar . Konsultohuni me nebower.json
për të parë se cilat versione të jQuery mbështeten.
Pasi të keni shkarkuar, hiqni dosjen e ngjeshur për të parë strukturën e Bootstrap (të përpiluar). Do të shihni diçka si kjo:
Kjo është forma më themelore e Bootstrap: skedarë të parakompiluar për përdorim të shpejtë të lëshimit në pothuajse çdo projekt në internet. Ne ofrojmë CSS dhe JS të përpiluara ( bootstrap.*
), si dhe CSS dhe JS të përpiluara dhe të minuara ( bootstrap.min.*
). Hartat e burimit CSS ( bootstrap.*.map
) janë të disponueshme për përdorim me vegla të caktuara të zhvilluesve të shfletuesve. Përfshihen fontet nga Glyphicons, siç është edhe tema opsionale e Bootstrap.
Shkarkimi i kodit burimor të Bootstrap përfshin CSS, JavaScript dhe asetet e shkronjave të parapërpiluara, së bashku me burimin Less, JavaScript dhe dokumentacionin. Më konkretisht, ai përfshin sa vijon dhe më shumë:
, less/
, js/
dhe fonts/
janë kodi burimor për fontet tona CSS, JS dhe ikonave (përkatësisht). Dosja dist/
përfshin gjithçka të listuar në seksionin e shkarkimit të parapërpiluar më sipër. Dosja docs/
përfshin kodin burimor për dokumentacionin tonë dhe examples/
përdorimin e Bootstrap. Përtej kësaj, çdo skedar tjetër i përfshirë ofron mbështetje për paketat, informacionin e licencës dhe zhvillimin.
Bootstrap përdor Grunt për sistemin e tij të ndërtimit, me metoda të përshtatshme për të punuar me kornizën. Kjo është mënyra se si ne përpilojmë kodin tonë, kryejmë teste dhe më shumë.
Për të instaluar Grunt, fillimisht duhet të shkarkoni dhe instaloni node.js (i cili përfshin npm). npm qëndron për modulet e paketuara me nyje dhe është një mënyrë për të menaxhuar varësitë e zhvillimit përmes node.js.
Pastaj, nga linja e komandës:grunt-cli
globalisht me npm install -g grunt-cli
./bootstrap/
direktoria rrënjësore, më pas ekzekutoni npm install
. npm do të shikojë package.json
skedarin dhe do të instalojë automatikisht varësitë e nevojshme lokale të listuara atje.Kur të përfundoni, do të jeni në gjendje të ekzekutoni komandat e ndryshme Grunt të ofruara nga linja e komandës.
grunt dist
(Thjesht përpiloni CSS dhe JavaScript)Rigjeneron /dist/
drejtorinë me skedarë CSS dhe JavaScript të përpiluara dhe të minuara. Si përdorues i Bootstrap, kjo është zakonisht komanda që dëshironi.
grunt watch
(Shiko)Shikon skedarët burim Less dhe i ripërpilon ato automatikisht në CSS sa herë që ruani një ndryshim.
grunt test
(Kryej testet)Drejton JSHint dhe ekzekuton testet QUnit pa kokë në PhantomJS .
grunt docs
(Ndërtoni dhe testoni asetet e dokumenteve)Ndërton dhe teston CSS, JavaScript dhe asete të tjera që përdoren gjatë ekzekutimit të dokumentacionit në nivel lokal nëpërmjet bundle exec jekyll serve
.
grunt
(Ndërtoni absolutisht gjithçka dhe bëni teste)Përpilon dhe minimizon CSS dhe JavaScript, ndërton uebsajtin e dokumentacionit, ekzekuton vërtetuesin HTML5 kundrejt dokumenteve, rigjeneron asetet e Personalizuesit dhe më shumë. Kërkon Jekyll . Zakonisht është e nevojshme vetëm nëse jeni duke hakuar në vetë Bootstrap.
Nëse hasni probleme me instalimin e varësive ose ekzekutimin e komandave Grunt, së pari fshini /node_modules/
direktorinë e krijuar nga npm. Pastaj, riprodhoni npm install
.
Filloni me këtë shabllon bazë HTML ose modifikoni këta shembuj . Shpresojmë që ju do të personalizoni shabllonet dhe shembujt tanë, duke i përshtatur ato për t'iu përshtatur nevojave tuaja.
Kopjoni HTML-në më poshtë për të filluar punën me një dokument minimal Bootstrap.
Ndërtoni në shabllonin bazë të mësipërm me komponentët e shumtë të Bootstrap. Ne ju inkurajojmë të personalizoni dhe përshtatni Bootstrap për t'iu përshtatur nevojave të projektit tuaj individual.
Merrni kodin burimor për çdo shembull më poshtë duke shkarkuar depon e Bootstrap . Shembujt mund të gjenden në docs/examples/
drejtori.
Paraqitja dhe dizajni i personalizuar i formularit për një shenjë të thjeshtë në formë.
Krijo një shirit navigimi të personalizuar me lidhje të justifikuara. Kokat lart! Jo shumë miqësore me Safari.
Bootlint është mjeti zyrtar i linterit të Bootstrap HTML. Ai kontrollon automatikisht për disa gabime të zakonshme HTML në faqet e internetit që përdorin Bootstrap në një mënyrë mjaft "vanilje". Komponentët/miniaplikacionet e Vanilla Bootstrap kërkojnë që pjesët e tyre të DOM të përputhen me struktura të caktuara. Bootlint kontrollon që shembujt e komponentëve të Bootstrap kanë HTML të strukturuar saktë. Merrni parasysh të shtoni Bootlint në zinxhirin e mjeteve të zhvillimit të uebit tuaj Bootstrap, në mënyrë që asnjë nga gabimet e zakonshme të mos ngadalësojë zhvillimin e projektit tuaj.
Qëndroni të përditësuar mbi zhvillimin e Bootstrap dhe drejtojuni komunitetit me këto burime të dobishme.
irc.freenode.net
server, në kanalin ##bootstrap .twitter-bootstrap-3
.bootstrap
në paketat që modifikojnë ose shtojnë funksionalitetin e Bootstrap kur shpërndahen përmes npm ose mekanizmave të ngjashëm të shpërndarjes për zbulueshmëri maksimale.Ju gjithashtu mund të ndiqni @getbootstrap në Twitter për thashethemet më të fundit dhe videot muzikore të mrekullueshme.
Bootstrap përshtat automatikisht faqet tuaja për madhësi të ndryshme ekrani. Ja se si ta çaktivizoni këtë veçori në mënyrë që faqja juaj të funksionojë si ky shembull që nuk përgjigjet .
<meta>
përmendur në dokumentet CSSwidth
në .container
për çdo nivel të rrjetit me një gjerësi të vetme, për shembull width: 970px !important;
Sigurohuni që kjo të vijë pas CSS-së së parazgjedhur të Bootstrap. Mund të shmangni opsionalisht !important
pyetjet me media ose disa përzgjedhës-fu..col-xs-*
klasa përveç ose në vend të atyre të mesme/të mëdha. Mos u shqetësoni, rrjeti shumë i vogël i pajisjes përshkallëzohet në të gjitha rezolucionet.Do t'ju duhet ende Respond.js për IE8 (pasi pyetjet tona për media janë ende atje dhe duhet të përpunohen). Kjo çaktivizon aspektet e "faqes celulare" të Bootstrap.
Kemi zbatuar këto hapa në një shembull. Lexoni kodin e tij burimor për të parë ndryshimet specifike të zbatuara.
Po kërkoni të migroni nga një version më i vjetër i Bootstrap në v3.x? Shikoni udhëzuesin tonë të migrimit .
Bootstrap është ndërtuar për të funksionuar më mirë në shfletuesit më të fundit të desktopit dhe celularit, që do të thotë se shfletuesit më të vjetër mund të shfaqin interpretime të stileve të ndryshme, megjithëse plotësisht funksionale, të disa komponentëve.
Në mënyrë të veçantë, ne mbështesim versionet më të fundit të shfletuesve dhe platformave të mëposhtme.
Shfletuesit alternativë që përdorin versionin më të fundit të WebKit, Blink ose Gecko, qoftë drejtpërdrejt ose nëpërmjet API-së së pamjes së uebit të platformës, nuk mbështeten në mënyrë eksplicite. Sidoqoftë, Bootstrap duhet (në shumicën e rasteve) të shfaqë dhe të funksionojë saktë edhe në këta shfletues. Informacione më specifike mbështetëse jepen më poshtë.
Në përgjithësi, Bootstrap mbështet versionet më të fundit të shfletuesve të paracaktuar të secilës platformë kryesore. Vini re se shfletuesit proxy (si Opera Mini, modaliteti Turbo i Opera Mobile, UC Browser Mini, Amazon Silk) nuk mbështeten.
krom | Firefox | Safari | |
---|---|---|---|
Android | Mbështetur | Mbështetur | N/A |
iOS | Mbështetur | Mbështetur | Mbështetur |
Në mënyrë të ngjashme, versionet më të fundit të shumicës së shfletuesve të desktopit mbështeten.
krom | Firefox | Internet Explorer | Opera | Safari | |
---|---|---|---|---|---|
Mac | Mbështetur | Mbështetur | N/A | Mbështetur | Mbështetur |
Dritaret | Mbështetur | Mbështetur | Mbështetur | Mbështetur | Nuk mbështetet |
Në Windows, ne mbështesim Internet Explorer 8-11 .
Për Firefox-in, përveç versionit më të fundit normal të qëndrueshëm, ne mbështesim gjithashtu versionin më të fundit të lëshimit të mbështetjes së zgjeruar (ESR) të Firefox-it.
Jozyrtarisht, Bootstrap duhet të duket dhe të sillet mjaft mirë në Chromium dhe Chrome për Linux, Firefox për Linux dhe Internet Explorer 7, si dhe Microsoft Edge, megjithëse ato nuk mbështeten zyrtarisht.
Për një listë të disa gabimeve të shfletuesit me të cilat Bootstrap duhet të përballet, shihni murin tonë të gabimeve të shfletuesit .
Internet Explorer 8 dhe 9 mbështeten gjithashtu, megjithatë, kini parasysh se disa veti CSS3 dhe elementë HTML5 nuk mbështeten plotësisht nga këta shfletues. Përveç kësaj, Internet Explorer 8 kërkon përdorimin e Respond.js për të mundësuar mbështetjen e pyetjeve mediatike.
Veçori | Internet Explorer 8 | Internet Explorer 9 |
---|---|---|
border-radius |
Nuk mbështetet | Mbështetur |
box-shadow |
Nuk mbështetet | Mbështetur |
transform |
Nuk mbështetet | Mbështetur, me -ms parashtesë |
transition |
Nuk mbështetet | |
placeholder |
Nuk mbështetet |
Vizitoni Mund të përdor... për detaje mbi mbështetjen e shfletuesit të veçorive CSS3 dhe HTML5.
Kujdes nga paralajmërimet e mëposhtme kur përdorni Respond.js në mjediset tuaja të zhvillimit dhe prodhimit për Internet Explorer 8.
Përdorimi i Respond.js me CSS të strehuar në një (nën)domen tjetër (për shembull, në një CDN) kërkon disa konfigurime shtesë. Shikoni dokumentet Respond.js për detaje.
file://
Për shkak të rregullave të sigurisë së shfletuesit, Respond.js nuk funksionon me faqet e shikuara nëpërmjet file://
protokollit (si kur hapni një skedar lokal HTML). Për të testuar veçori të përgjegjshme në IE8, shikoni faqet tuaja mbi HTTP(S). Shikoni dokumentet Respond.js për detaje.
@import
Respond.js nuk funksionon me CSS që është referuar nëpërmjet @import
. Në veçanti, disa konfigurime Drupal dihet se përdorin @import
. Shikoni dokumentet Respond.js për detaje.
IE8 nuk mbështet plotësisht box-sizing: border-box;
kur kombinohet me min-width
, max-width
, min-height
ose max-height
. Për këtë arsye, që nga v3.0.1, ne nuk përdorim më max-width
në .container
s.
IE8 ka disa probleme @font-face
kur kombinohet me :before
. Bootstrap përdor atë kombinim me Glyphicons e tij. Nëse një faqe ruhet në memorie të fshehtë dhe ngarkohet pa mausin mbi dritare (dmth. shtypni butonin e rifreskimit ose ngarkoni diçka në një iframe), atëherë faqja jepet përpara se të ngarkohet fonti. Duke qëndruar pezull mbi faqe (trup) do të shfaqen disa nga ikonat dhe duke qëndruar pezull mbi ikonat e mbetura do të shfaqen edhe ato. Shih numrin #13863 për detaje.
Bootstrap nuk mbështetet në mënyrat e vjetra të pajtueshmërisë së Internet Explorer. Për t'u siguruar që po përdorni modalitetin më të fundit të paraqitjes për IE, merrni parasysh përfshirjen e <meta>
etiketës së duhur në faqet tuaja:
Konfirmoni modalitetin e dokumentit duke hapur mjetet e korrigjimit: shtypni F12dhe kontrolloni "Modaliteti i dokumentit".
Ky etiketë përfshihet në të gjithë dokumentacionin dhe shembujt e Bootstrap për të siguruar paraqitjen më të mirë të mundshme në çdo version të mbështetur të Internet Explorer.
Shikoni këtë pyetje StackOverflow për më shumë informacion.
Internet Explorer 10 nuk e dallon gjerësinë e pajisjes nga gjerësia e portit të pamjes , dhe për këtë arsye nuk i zbaton siç duhet kërkesat e medias në CSS të Bootstrap. Normalisht, thjesht do të shtonit një fragment të shpejtë të CSS për të rregulluar këtë:
Megjithatë, kjo nuk funksionon për pajisjet që përdorin versione të Windows Phone 8 më të vjetër se Përditësimi 3 (i njohur ndryshe si GDR3) , pasi bën që pajisjet e tilla të shfaqin një pamje kryesisht të desktopit në vend të pamjes së ngushtë të "telefonit". Për të adresuar këtë, do t'ju duhet të përfshini CSS-në dhe JavaScript-in e mëposhtëm për të zgjidhur problemin .
Për më shumë informacion dhe udhëzime përdorimi, lexoni Windows Phone 8 dhe Device-Width .
Si fillim, ne e përfshijmë këtë në të gjithë dokumentacionin dhe shembujt e Bootstrap si një demonstrim.
Motori i interpretimit të versioneve të Safari para v7.1 për OS X dhe Safari për iOS v8.0 kishte disa probleme me numrin e numrave dhjetorë të përdorur në .col-*-1
klasat tona të rrjetit. Pra, nëse do të kishit 12 kolona individuale të rrjetit, do të vini re se ato ishin të shkurtra në krahasim me rreshtat e tjerë të kolonave. Përveç përmirësimit të Safari/iOS, ju keni disa opsione për zgjidhje:
.pull-right
në kolonën tuaj të fundit të rrjetit për të marrë shtrirjen në të djathtëMbështetja për overflow: hidden
elementin <body>
është mjaft e kufizuar në iOS dhe Android. Për këtë qëllim, kur kaloni pjesën e sipërme ose të poshtme të një modali në cilindo nga shfletuesit e këtyre pajisjeve, <body>
përmbajtja do të fillojë të lëvizë. Shiko defektin e Chrome #175502 (rregulluar në Chrome v40) dhe defektin e WebKit #153852 .
Që nga iOS 9.3, ndërsa një modal është i hapur, nëse prekja fillestare e një gjesti rrotullues është brenda kufirit të një teksti <input>
ose një <textarea>
, <body>
përmbajtja poshtë modalit do të lëvizet në vend të vetë modalit. Shiko defektin e WebKit #153856 .
Gjithashtu, vini re se nëse përdorni një shirit navigimi fiks ose përdorni hyrje brenda një modali, iOS ka një defekt në paraqitje që nuk përditëson pozicionin e elementeve fikse kur aktivizohet tastiera virtuale. Disa zgjidhje për këtë përfshijnë transformimin e elementëve tuaj position: absolute
ose thirrjen e një kohëmatësi në fokus për të provuar të korrigjoni pozicionimin me dorë. Kjo nuk trajtohet nga Bootstrap, kështu që ju takon juve të vendosni se cila zgjidhje është më e mira për aplikacionin tuaj.
Elementi .dropdown-backdrop
nuk përdoret në iOS në navigacion për shkak të kompleksitetit të indeksimit z. Kështu, për të mbyllur skedarët me zbritje në shiritat e navigimit, duhet të klikoni drejtpërdrejt elementin rënës (ose çdo element tjetër që do të aktivizojë një ngjarje klikimi në iOS ).
Zmadhimi i faqeve paraqet në mënyrë të pashmangshme paraqitjen e artefakteve në disa komponentë, si në Bootstrap ashtu edhe në pjesën tjetër të internetit. Në varësi të problemit, ne mund të jemi në gjendje ta rregullojmë atë (së pari kërkoni dhe më pas hapni një problem nëse është e nevojshme). Sidoqoftë, ne priremi t'i injorojmë këto pasi ato shpesh nuk kanë asnjë zgjidhje të drejtpërdrejtë përveç zgjidhjeve të paqarta.
:hover
/ :focus
në celularEdhe pse lëvizja e vërtetë pezull nuk është e mundur në shumicën e ekraneve me prekje, shumica e shfletuesve celularë imitojnë mbështetjen e pezullimit dhe e bëjnë :hover
"ngjitëse". Me fjalë të tjera, :hover
stilet fillojnë të aplikohen pasi prekin një element dhe ndalojnë së aplikuari vetëm pasi përdoruesi prek një element tjetër. Kjo mund të shkaktojë që gjendjet e Bootstrap të :hover
"ngecën" në mënyrë të padëshirueshme në shfletues të tillë. Disa shfletues celularë gjithashtu bëjnë të :focus
ngjashëm ngjitës. Aktualisht nuk ka asnjë zgjidhje të thjeshtë për këto çështje përveç heqjes tërësisht të stileve të tilla.
Edhe në disa shfletues modernë, printimi mund të jetë i çuditshëm.
Në veçanti, që nga Chrome v32 dhe pavarësisht nga cilësimet e marzhit, Chrome përdor një gjerësi të portës së pamjes dukshëm më të ngushtë se madhësia fizike e letrës kur zgjidh pyetjet e medias gjatë printimit të një faqeje interneti. Kjo mund të rezultojë në aktivizimin e papritur të rrjetës shumë të vogël të Bootstrap gjatë printimit. Shih çështjen #12078 dhe defektin e Chrome #273306 për disa detaje. Zgjidhjet e sugjeruara:
@screen-*
variablave më pak në mënyrë që letra e printerit tuaj të konsiderohet më e madhe se e vogël.Gjithashtu, që nga Safari v8.0, s-të me gjerësi fikse .container
mund të bëjnë që Safari të përdorë një madhësi jashtëzakonisht të vogël fonti gjatë printimit. Shikoni #14868 dhe defektin e WebKit #138192 për më shumë detaje. Një zgjidhje e mundshme për këtë është shtimi i CSS-së së mëposhtme:
Nga kutia, Android 4.1 (dhe madje edhe disa versione më të reja me sa duket) dërgohen me aplikacionin Browser si shfletuesin e parazgjedhur të uebit (në krahasim me Chrome). Fatkeqësisht, aplikacioni i Shfletuesit ka shumë gabime dhe mospërputhje me CSS në përgjithësi.
Në <select>
elemente, shfletuesi i aksioneve Android nuk do të shfaqë kontrollet anësore nëse ka një border-radius
dhe/ose border
aplikuar. (Shih këtë pyetje të StackOverflow për detaje.) Përdorni copëzën e kodit më poshtë për të hequr CSS-në ofenduese dhe për ta paraqitur atë <select>
si një element të pa stiluar në shfletuesin e aksioneve Android. Nuhatja e agjentit të përdoruesit shmang ndërhyrjet me shfletuesit Chrome, Safari dhe Mozilla.
Dëshironi të shihni një shembull? Shikoni këtë demonstrim të JS Bin.
Për të ofruar përvojën më të mirë të mundshme për shfletuesit e vjetër dhe me gabime, Bootstrap përdor hakimet e shfletuesit CSS në disa vende për të synuar CSS speciale për disa versione të shfletuesit në mënyrë që të zgjidhë gabimet në vetë shfletuesit. Këto hakime bëjnë që vërtetuesit e CSS të ankohen se janë të pavlefshëm. Në disa vende, ne përdorim gjithashtu veçori të fundit CSS që nuk janë ende plotësisht të standardizuara, por ato përdoren thjesht për përmirësim progresiv.
Këto paralajmërime vërtetimi nuk kanë rëndësi në praktikë pasi pjesa jo-hacky e CSS-së tonë vërtetohet plotësisht dhe pjesët hacky nuk ndërhyjnë në funksionimin e duhur të pjesës jo-hacky, prandaj ne i shpërfillim qëllimisht këto paralajmërime të veçanta.
Dokumentet tona HTML gjithashtu kanë disa paralajmërime të parëndësishme dhe të parëndësishme të vërtetimit të HTML për shkak të përfshirjes sonë të një zgjidhjeje për një gabim të caktuar të Firefox-it .
Ndonëse ne nuk mbështesim zyrtarisht asnjë shtesë ose shtesë të palës së tretë, ne ofrojmë disa këshilla të dobishme për të ndihmuar në shmangien e problemeve të mundshme në projektet tuaja.
Disa softuer të palëve të treta, duke përfshirë Google Maps dhe Google Custom Search Engine, bien ndesh me Bootstrap për shkak të * { box-sizing: border-box; }
, një rregull që e bën atë padding
të mos ndikojë në gjerësinë përfundimtare të llogaritur të një elementi. Mësoni më shumë rreth modelit të kutisë dhe madhësisë në CSS Tricks .
Në varësi të kontekstit, mund të anashkaloni sipas nevojës (Opsioni 1) ose të rivendosni madhësinë e kutisë për rajone të tëra (Opsioni 2).
Bootstrap ndjek standardet e zakonshme të uebit dhe - me përpjekje minimale shtesë - mund të përdoret për të krijuar sajte që janë të aksesueshme për ata që përdorin AT .
Nëse navigimi juaj përmban shumë lidhje dhe vjen përpara përmbajtjes kryesore në DOM, shtoni një Skip to main content
lidhje përpara navigimit (për një shpjegim të thjeshtë, shihni këtë artikull të Projektit A11Y mbi kapërcimin e lidhjeve të navigimit ). Përdorimi i .sr-only
klasës do të fshehë vizualisht lidhjen e kapërcimit dhe .sr-only-focusable
klasa do të sigurojë që lidhja të bëhet e dukshme pasi të fokusohet (për përdoruesit e tastierës me shikim).
Për shkak të mangësive/defekteve të gjata në Chrome (shih çështjen 262171 në gjurmuesin e gabimeve të Chromium ) dhe Internet Explorer (shih këtë artikull për lidhjet brenda faqes dhe renditjen e fokusit ), do t'ju duhet të siguroheni që objektivi i lidhjes tuaj të kapërcimit është të paktën programatikisht i fokusueshëm duke shtuar tabindex="-1"
.
Përveç kësaj, mund të dëshironi të shtypni në mënyrë eksplicite një tregues të dukshëm të fokusit në objektiv (veçanërisht pasi Chrome aktualisht vendos fokusin në elementë tabindex="-1"
kur klikohen me miun) me #content:focus { outline: none; }
.
Vini re se ky gabim do të ndikojë gjithashtu në çdo lidhje tjetër në faqe që mund të përdorë faqja juaj, duke i bërë ato të padobishme për përdoruesit e tastierës. Ju mund të konsideroni shtimin e një rregullimi të ngjashëm ndalues për të gjitha ankorat e tjera të emërtuara / identifikuesit e fragmenteve që veprojnë si objektiva lidhjesh.
Kur futni titujt ( <h1>
- <h6>
), titulli kryesor i dokumentit tuaj duhet të jetë një <h1>
. Titujt e mëpasshëm duhet të përdorin logjikisht <h2>
- të <h6>
tillë që lexuesit e ekranit të mund të ndërtojnë një tabelë të përmbajtjes për faqet tuaja.
Mësoni më shumë në HTML CodeSniffer dhe AccessAbility të Penn State .
Aktualisht, disa nga kombinimet e parazgjedhura të ngjyrave të disponueshme në Bootstrap (siç janë klasat e ndryshme të butonave të stilizuara , disa nga ngjyrat e theksuara të kodit të përdorura për blloqet e kodit bazë , klasa ndihmëse e .bg-primary
sfondit kontekstual dhe ngjyra e parazgjedhur e lidhjes kur përdoret në një sfond të bardhë) kanë një raport të ulët kontrasti (nën raportin e rekomanduar prej 4,5:1 ). Kjo mund të shkaktojë probleme për përdoruesit me shikim të ulët ose që janë të verbër nga ngjyra. Këto ngjyra të paracaktuara mund të kenë nevojë të modifikohen për të rritur kontrastin dhe lexueshmërinë e tyre.
Bootstrap është lëshuar nën licencën MIT dhe është e drejtë e autorit 2016 Twitter. E zbërthyer në copa më të vogla, mund të përshkruhet me kushtet e mëposhtme.
Licenca e plotë e Bootstrap ndodhet në depon e projektit për më shumë informacion.
Anëtarët e komunitetit kanë përkthyer dokumentacionin e Bootstrap në gjuhë të ndryshme. Asnjë nuk mbështetet zyrtarisht dhe mund të mos jetë gjithmonë i përditësuar.
Ne nuk ndihmojmë në organizimin ose pritjen e përkthimeve, ne thjesht lidhim me to.
Përfundoi një përkthim të ri apo më të mirë? Hapni një kërkesë tërheqjeje për ta shtuar në listën tonë.