Սկսել
Bootstrap-ի ակնարկ, ինչպես ներբեռնել և օգտագործել, հիմնական ձևանմուշներ և օրինակներ և այլն:
Bootstrap-ի ակնարկ, ինչպես ներբեռնել և օգտագործել, հիմնական ձևանմուշներ և օրինակներ և այլն:
Bootstrap-ը (ներկայումս v3.3.7) ունի արագ սկսելու մի քանի հեշտ եղանակներ, որոնցից յուրաքանչյուրը գրավում է տարբեր հմտությունների և օգտագործման դեպքերի համար: Կարդացեք՝ տեսնելու համար, թե ինչն է համապատասխանում ձեր կոնկրետ կարիքներին:
Կազմել և փոքրացրել է CSS-ը, JavaScript-ը և տառատեսակները: Ներառված չեն փաստաթղթեր կամ բնօրինակ ֆայլեր:
Source Less, JavaScript և տառատեսակի ֆայլեր՝ մեր փաստաթղթերի հետ միասին: Պահանջում է Less կոմպիլյատոր և որոշակի կարգավորում:
Bootstrap-ը տեղափոխվեց Less-ից Sass ՝ Rails, Compass կամ Sass միայն նախագծերում հեշտ ընդգրկվելու համար:
jsDelivr- ի մարդիկ սիրով տրամադրում են CDN աջակցություն Bootstrap-ի CSS-ին և JavaScript-ին: Պարզապես օգտագործեք այս Bootstrap CDN հղումները:
Կարող եք նաև տեղադրել և կառավարել Bootstrap-ի Less-ը, CSS-ը, JavaScript-ը և տառատեսակները՝ օգտագործելով Bower .
Կարող եք նաև տեղադրել Bootstrap՝ օգտագործելով npm .
require('bootstrap')
կբեռնի Bootstrap-ի բոլոր jQuery պլագինները jQuery օբյեկտի վրա: Մոդուլն bootstrap
ինքնին ոչինչ չի արտահանում: Դուք կարող եք ձեռքով բեռնել Bootstrap-ի jQuery հավելվածները՝ բեռնելով /js/*.js
ֆայլերը փաթեթի վերին մակարդակի գրացուցակի տակ:
Bootstrap-ը package.json
պարունակում է որոշ լրացուցիչ մետատվյալներ հետևյալ ստեղների ներքո.
less
- ճանապարհ դեպի Bootstrap-ի հիմնական Less source ֆայլըstyle
- ճանապարհ դեպի Bootstrap-ի չմինացված CSS, որը նախապես կազմվել է լռելյայն կարգավորումների միջոցով (առանց հարմարեցման)Կարող եք նաև տեղադրել և կառավարել Bootstrap-ի Less-ը, CSS-ը, JavaScript-ը և տառատեսակները՝ օգտագործելով Composer .
Bootstrap-ն օգտագործում է Autoprefixer ՝ CSS վաճառողի նախածանցների հետ գործ ունենալու համար : Եթե դուք Bootstrap-ը կազմում եք իր Less/Sass աղբյուրից և չեք օգտագործում մեր Gruntfile-ը, դուք պետք է ինքներդ ինտեգրեք Autoprefixer-ը ձեր կառուցման գործընթացում: Եթե դուք օգտագործում եք նախապես կազմված Bootstrap կամ օգտագործում եք մեր Gruntfile-ը, ապա ձեզ հարկավոր չէ անհանգստանալ այս մասին, քանի որ Autoprefixer-ն արդեն ինտեգրված է մեր Gruntfile-ում:
Bootstrap-ը ներբեռնելի է երկու ձևով, որոնցում դուք կգտնեք հետևյալ գրացուցակները և ֆայլերը՝ տրամաբանորեն խմբավորելով ընդհանուր ռեսուրսները և տրամադրելով ինչպես կոմպիլացված, այնպես էլ փոքրացված տարբերակներ:
Խնդրում ենք նկատի ունենալ, որ JavaScript-ի բոլոր հավելումները պահանջում են ներառել jQuery , ինչպես ցույց է տրված մեկնարկային ձևանմուշում : Խորհրդակցեք մեզbower.json
՝ տեսնելու, թե jQuery-ի որ տարբերակներն են աջակցվում:
Ներբեռնվելուց հետո անջատեք սեղմված թղթապանակը՝ տեսնելու (կազմված) Bootstrap-ի կառուցվածքը: Դուք կտեսնեք նման բան.
Սա Bootstrap-ի ամենահիմնական ձևն է՝ նախապես հավաքված ֆայլեր՝ գրեթե ցանկացած վեբ-նախագծում արագ ներդնելու համար: Մենք տրամադրում ենք կոմպիլացված CSS և JS ( bootstrap.*
), ինչպես նաև կոմպիլացված և փոքրացված CSS և JS ( bootstrap.min.*
): CSS-ի սկզբնաղբյուր քարտեզները ( bootstrap.*.map
) հասանելի են որոշ բրաուզերների մշակողների գործիքների հետ օգտագործելու համար: Ներառված են Glyphicons-ի տառատեսակները, ինչպես նաև Bootstrap-ի կամընտիր թեման:
Bootstrap-ի սկզբնական կոդի ներբեռնումը ներառում է նախապես կազմված CSS-ը, JavaScript-ը և տառատեսակի ակտիվները, ինչպես նաև Source Less-ը, JavaScript-ը և փաստաթղթերը: Ավելի կոնկրետ, այն ներառում է հետևյալը և ավելին.
less/
, js/
և - fonts/
ը մեր CSS, JS և պատկերակների տառատեսակների սկզբնական կոդը են (համապատասխանաբար): Թղթապանակը dist/
ներառում է այն ամենը, ինչ նշված է վերևում նախապես կազմված ներբեռնման բաժնում: Թղթապանակը docs/
ներառում է մեր փաստաթղթերի և examples/
Bootstrap-ի օգտագործման սկզբնական կոդը: Դրանից բացի, ցանկացած այլ ներառված ֆայլ ապահովում է փաթեթների, լիցենզիայի տեղեկատվության և զարգացման աջակցություն:
Bootstrap-ն օգտագործում է Grunt- ը իր կառուցման համակարգի համար՝ շրջանակի հետ աշխատելու հարմար մեթոդներով: Դա այն է, թե ինչպես ենք մենք կազմում մեր կոդը, կատարում թեստերը և այլն:
Grunt-ը տեղադրելու համար նախ պետք է ներբեռնել և տեղադրել node.js-ը (որը ներառում է npm): npm-ը նշանակում է հանգույցների փաթեթավորված մոդուլներ և հանդիսանում է node.js-ի միջոցով զարգացման կախվածությունները կառավարելու միջոց:
Այնուհետև հրամանի տողից.grunt-cli
գլոբալ հետ npm install -g grunt-cli
:/bootstrap/
գրացուցակ, ապա գործարկեք npm install
: npm-ը կանդրադառնա package.json
ֆայլին և ավտոմատ կերպով կտեղադրի այնտեղ թվարկված անհրաժեշտ տեղական կախվածությունները:Ավարտելուց հետո դուք կկարողանաք գործարկել հրամանի տողից տրամադրված Grunt-ի տարբեր հրամանները:
grunt dist
(Պարզապես կազմեք CSS և JavaScript)Վերականգնում է /dist/
գրացուցակը կազմված և փոքրացված CSS և JavaScript ֆայլերով: Որպես Bootstrap օգտագործող, սա սովորաբար ձեր ուզած հրամանն է:
grunt watch
(Դիտել)Դիտում է Less սկզբնաղբյուր ֆայլերը և ավտոմատ կերպով վերակոմպիլացնում դրանք CSS-ում, երբ փոփոխություն եք պահում:
grunt test
(Գործարկել թեստեր)Աշխատում է JSHint-ը և գործարկում է QUnit թեստերն առանց գլխի PhantomJS-ում :
grunt docs
(Կառուցեք և փորձարկեք փաստաթղթերի ակտիվները)Կառուցում և փորձարկում է CSS, JavaScript և այլ ակտիվներ, որոնք օգտագործվում են փաստաթղթերը լոկալ միջոցով գործարկելիս bundle exec jekyll serve
:
grunt
(Կառուցեք բացարձակապես ամեն ինչ և կատարեք թեստեր)Կազմում և փոքրացնում է CSS-ը և JavaScript-ը, կառուցում է փաստաթղթերի վեբկայքը, գործարկում է HTML5 վավերացնողը փաստաթղթերի դեմ, վերականգնում է Customizer-ի ակտիվները և այլն: Պահանջում է Ջեկիլը : Սովորաբար անհրաժեշտ է միայն այն դեպքում, եթե դուք կոտրում եք Bootstrap-ը:
Եթե կախվածությունների տեղադրման կամ Grunt հրամանների գործարկման հետ կապված խնդիրների հանդիպեք, նախ ջնջեք /node_modules/
npm-ի կողմից ստեղծված գրացուցակը: Այնուհետև կրկնել npm install
:
Սկսեք այս հիմնական HTML ձևանմուշով կամ փոփոխեք այս օրինակները : Հուսով ենք, որ դուք կհարմարեցնեք մեր ձևանմուշներն ու օրինակները՝ հարմարեցնելով դրանք ձեր կարիքներին համապատասխան:
Պատճենեք ստորև բերված HTML-ը, որպեսզի սկսեք աշխատել նվազագույն Bootstrap փաստաթղթի հետ:
Կառուցեք վերը նշված հիմնական ձևանմուշի վրա՝ Bootstrap-ի բազմաթիվ բաղադրիչներով: Մենք խրախուսում ենք ձեզ հարմարեցնել և հարմարեցնել Bootstrap-ը՝ ձեր անհատական նախագծի կարիքներին համապատասխան:
Ստացեք ստորև բերված յուրաքանչյուր օրինակի սկզբնական կոդը՝ ներբեռնելով Bootstrap պահեստը : Օրինակներ կարելի է գտնել docs/examples/
գրացուցակում:
Ստեղծեք մաքսային նավարկիչ՝ հիմնավորված հղումներով: Գլուխը վեր Ոչ շատ Safari ընկերական:
Bootlint- ը պաշտոնական Bootstrap HTML linter գործիքն է: Այն ավտոմատ կերպով ստուգում է մի քանի սովորական HTML սխալներ այն վեբէջերում, որոնք օգտագործում են Bootstrap-ը բավականին «վանիլային» եղանակով: Vanilla Bootstrap-ի բաղադրիչները/վիջեթները պահանջում են, որ DOM-ի իրենց մասերը համապատասխանեն որոշակի կառուցվածքներին: Bootlint-ը ստուգում է, որ Bootstrap-ի բաղադրիչների օրինակները ունեն ճիշտ կառուցվածքային HTML: Մտածեք ավելացնել Bootlint-ը ձեր Bootstrap վեբ մշակման գործիքների շղթայում, որպեսզի սովորական սխալներից ոչ մեկը չդանդաղեցնի ձեր նախագծի զարգացումը:
Եղեք արդիական Bootstrap-ի զարգացման մասին և կապվեք համայնքի հետ այս օգտակար ռեսուրսների միջոցով:
irc.freenode.net
սերվերում, ##bootstrap ալիքում :twitter-bootstrap-3
:bootstrap
փաթեթների վրա, որոնք փոփոխում կամ ավելացնում են Bootstrap-ի ֆունկցիոնալությունը npm-ի կամ նմանատիպ առաքման մեխանիզմների միջոցով տարածելիս՝ առավելագույն հայտնաբերման համար:Դուք կարող եք նաև հետևել @getbootstrap-ին Twitter-ում ՝ վերջին բամբասանքների և հիանալի երաժշտական տեսահոլովակների համար:
Bootstrap-ը ավտոմատ կերպով հարմարեցնում է ձեր էջերը էկրանի տարբեր չափերի համար: Ահա, թե ինչպես կարելի է անջատել այս հնարավորությունը, որպեսզի ձեր էջն աշխատի այս չպատասխանող օրինակի պես :
<meta>
նշված տեսադաշտըwidth
վրա .container
մեկ լայնությամբ, օրինակ. width: 970px !important;
Համոզվեք, որ սա գալիս է լռելյայն Bootstrap CSS-ից հետո: Դուք կարող եք կամայականորեն խուսափել !important
լրատվամիջոցների հարցումներից կամ որոշ ընտրիչ-fu-ից:.col-xs-*
դասեր՝ ի լրումն միջին/մեծ դասավորությունների կամ դրանց փոխարեն: Մի անհանգստացեք, չափազանց փոքր սարքի ցանցը չափվում է բոլոր լուծումներով:Ձեզ դեռ պետք է Respond.js-ը IE8-ի համար (քանի որ մեր լրատվամիջոցների հարցումները դեռ կան և պետք է մշակվեն): Սա անջատում է Bootstrap-ի «բջջային կայքի» ասպեկտները:
Մենք կիրառել ենք այս քայլերը օրինակի համար: Կարդացեք դրա սկզբնական կոդը՝ կատարված կոնկրետ փոփոխությունները տեսնելու համար:
Ցանկանու՞մ եք տեղափոխել Bootstrap-ի հին տարբերակից դեպի v3.x: Ստուգեք մեր միգրացիոն ուղեցույցը :
Bootstrap-ը ստեղծվել է աշխատասեղանի և շարժական վերջին բրաուզերներում լավագույնս աշխատելու համար, ինչը նշանակում է, որ ավելի հին բրաուզերները կարող են ցուցադրել որոշակի բաղադրիչների այլ ոճով, թեև լիովին ֆունկցիոնալ պատկերներ:
Մասնավորապես, մենք աջակցում ենք հետևյալ բրաուզերների և հարթակների վերջին տարբերակները :
Այլընտրանքային բրաուզերները, որոնք օգտագործում են WebKit-ի, Blink-ի կամ Gecko-ի վերջին տարբերակը՝ ուղղակիորեն կամ հարթակի վեբ դիտման API-ի միջոցով, հստակորեն չեն աջակցվում: Այնուամենայնիվ, Bootstrap-ը (շատ դեպքերում) պետք է ցուցադրի և ճիշտ գործի նաև այս բրաուզերներում: Աջակցության ավելի կոնկրետ տեղեկատվությունը տրված է ստորև:
Ընդհանուր առմամբ, Bootstrap-ն աջակցում է յուրաքանչյուր հիմնական հարթակի լռելյայն բրաուզերների վերջին տարբերակները: Նկատի ունեցեք, որ պրոքսի բրաուզերները (օրինակ՝ Opera Mini, Opera Mobile's Turbo ռեժիմ, UC Browser Mini, Amazon Silk) չեն աջակցվում:
Chrome | Firefox | Սաֆարի | |
---|---|---|---|
Android | Աջակցված է | Աջակցված է | N/A |
iOS | Աջակցված է | Աջակցված է | Աջակցված է |
Նմանապես, աշխատասեղանի բրաուզերների մեծ մասի վերջին տարբերակներն ապահովված են:
Chrome | Firefox | Internet Explorer | Օպերա | Սաֆարի | |
---|---|---|---|---|---|
Mac | Աջակցված է | Աջակցված է | N/A | Աջակցված է | Աջակցված է |
Windows | Աջակցված է | Աջակցված է | Աջակցված է | Աջակցված է | Չի ապահովվում |
Windows-ում մենք աջակցում ենք Internet Explorer 8-11 -ին :
Firefox-ի համար, ի լրումն վերջին նորմալ կայուն թողարկման, մենք նաև աջակցում ենք Firefox-ի վերջին Extended Support Release (ESR) տարբերակը:
Ոչ պաշտոնապես, Bootstrap-ը պետք է բավականաչափ լավ տեսք ունենա և իրեն պահի Chromium-ում և Chrome-ում Linux-ի համար, Firefox-ում Linux-ի և Internet Explorer 7-ի համար, ինչպես նաև Microsoft Edge-ում, թեև դրանք պաշտոնապես չեն աջակցվում:
Բրաուզերի որոշ վրիպակների ցանկի համար, որոնց հետ Bootstrap-ը պետք է բախվի, տես մեր բրաուզերի վրիպակների պատը :
Internet Explorer 8-ը և 9-ը նույնպես աջակցվում են, այնուամենայնիվ, նկատի ունեցեք, որ որոշ CSS3 հատկություններ և HTML5 տարրեր ամբողջությամբ չեն աջակցվում այս բրաուզերների կողմից: Բացի այդ, Internet Explorer 8-ը պահանջում է Respond.js- ի օգտագործումը՝ մեդիա հարցումների աջակցությունը միացնելու համար:
Առանձնահատկություն | Internet Explorer 8 | Internet Explorer 9 |
---|---|---|
border-radius |
Չի ապահովվում | Աջակցված է |
box-shadow |
Չի ապահովվում | Աջակցված է |
transform |
Չի ապահովվում | Աջակցված է, -ms նախածանցով |
transition |
Չի ապահովվում | |
placeholder |
Չի ապահովվում |
CSS3 և HTML5 գործառույթների բրաուզերի աջակցության վերաբերյալ մանրամասների համար այցելեք Կարող եմ օգտագործել... :
Զգուշացեք հետևյալ զգուշացումներից՝ Respond.js-ն օգտագործելիս Internet Explorer 8-ի մշակման և արտադրության միջավայրում:
Respond.js-ի օգտագործումը CSS-ով, որը տեղակայված է այլ (ենթա)տիրույթում (օրինակ՝ CDN-ում) պահանջում է որոշակի լրացուցիչ կարգավորում: Մանրամասների համար տես Respond.js-ի փաստաթղթերը :
file://
Բրաուզերի անվտանգության կանոնների պատճառով Respond.js-ը չի աշխատում file://
արձանագրության միջոցով դիտված էջերի հետ (ինչպես տեղական HTML ֆայլ բացելիս): IE8-ում արձագանքող գործառույթները փորձարկելու համար դիտեք ձեր էջերը HTTP(S) միջոցով: Մանրամասների համար տես Respond.js-ի փաստաթղթերը :
@import
Respond.js-ը չի աշխատում CSS-ի հետ, որը հղում է կատարվում @import
. Մասնավորապես, հայտնի է, որ Drupal-ի որոշ կոնֆիգուրացիաներ օգտագործում են @import
. Մանրամասների համար տես Respond.js-ի փաստաթղթերը :
IE8-ը լիովին չի աջակցում box-sizing: border-box;
, երբ համակցվում է min-width
, max-width
, min-height
կամ max-height
. Այդ պատճառով, v3.0.1-ի դրությամբ մենք այլևս չենք օգտագործում max-width
s .container
.
IE8-ը որոշ խնդիրներ ունի, @font-face
երբ համակցվում է :before
. Bootstrap-ն օգտագործում է այդ համադրությունն իր Glyphicons-ի հետ: Եթե էջը պահվում է քեշում և բեռնվում առանց մկնիկի պատուհանի վրա (այսինքն՝ սեղմեք թարմացման կոճակը կամ ինչ-որ բան բեռնեք iframe-ում), ապա էջը ցուցադրվում է նախքան տառատեսակի բեռնումը: Էջի (մարմինի) վրայով սավառնելը ցույց կտա որոշ պատկերակներ, իսկ մնացած պատկերակների վրա սավառնելը ցույց կտա նաև դրանք: Մանրամասների համար տես թիվ 13863 թողարկումը :
Bootstrap-ը չի աջակցվում հին Internet Explorer-ի համատեղելիության ռեժիմներում: Համոզվելու համար, որ օգտագործում եք IE-ի վերջին մատուցման ռեժիմը, մտածեք <meta>
ձեր էջերում համապատասխան պիտակ ներառելու համար.
Հաստատեք փաստաթղթի ռեժիմը՝ բացելով վրիպազերծման գործիքները. սեղմեք F12և ստուգեք «Փաստաթղթի ռեժիմը»:
Այս թեգը ներառված է Bootstrap-ի բոլոր փաստաթղթերում և օրինակներում, որպեսզի ապահովի Internet Explorer-ի յուրաքանչյուր աջակցվող տարբերակի լավագույն ցուցադրումը:
Լրացուցիչ տեղեկությունների համար տե՛ս StackOverflow-ի այս հարցը :
Internet Explorer 10-ը չի տարբերում սարքի լայնությունը տեսադաշտի լայնությունից և , հետևաբար, պատշաճ կերպով չի կիրառում մեդիա հարցումները Bootstrap-ի CSS-ում: Սովորաբար դուք պարզապես կավելացնեիք CSS-ի արագ հատված՝ սա շտկելու համար.
Այնուամենայնիվ, սա չի աշխատում Windows Phone 8-ի թարմացում 3 -ից ավելի հին տարբերակներով աշխատող սարքերի համար , քանի որ այն ստիպում է նման սարքերին ցուցադրել հիմնականում աշխատասեղանի տեսքը նեղ «հեռախոսի» փոխարեն: Այս խնդիրը լուծելու համար դուք պետք է ներառեք հետևյալ CSS-ը և JavaScript-ը՝ վրիպակը վերացնելու համար :
Լրացուցիչ տեղեկությունների և օգտագործման ուղեցույցների համար կարդացեք Windows Phone 8 և Device-Width :
Որպես սկզբում, մենք սա ներառում ենք Bootstrap-ի բոլոր փաստաթղթերում և օրինակներում որպես ցուցադրություն:
Safari-ի մինչև v7.1-ը OS X-ի և Safari-ի iOS v8.0-ի տարբերակների վերարտադրման շարժիչը որոշ խնդիրներ ուներ մեր .col-*-1
ցանցային դասերում օգտագործվող տասնորդական տեղերի քանակի հետ: Այսպիսով, եթե ունեիք 12 առանձին ցանցային սյունակներ, ապա կնկատեիք, որ դրանք կարճ են՝ համեմատած սյունակների այլ տողերի հետ: Բացի Safari/iOS-ի արդիականացումից, դուք ունեք լուծումների որոշ տարբերակներ.
.pull-right
ձեր վերջին ցանցի սյունակին՝ կոշտ աջ հավասարեցումը ստանալու համարՏարրերի աջակցությունը բավականին սահմանափակ է iOS-ում և Android-ում overflow: hidden
: <body>
Այդ նպատակով, երբ դուք ոլորեք մոդալի վերևի կամ ներքևի կողքով այդ սարքերից որևէ մեկի բրաուզերում, <body>
բովանդակությունը կսկսի ոլորվել: Տե՛ս Chrome-ի թիվ 175502 սխալը (շտկվել է Chrome v40-ում) և WebKit սխալը՝ #153852 :
iOS 9.3-ի դրությամբ, երբ մոդալը բաց է, եթե պտտվող ժեստի սկզբնական հպումը գտնվում է տեքստի <input>
կամ a- ի սահմաններում <textarea>
, մոդալի <body>
տակի բովանդակությունը պտտվելու է հենց մոդալի փոխարեն: Տես WebKit սխալ #153856 :
Նաև նկատի ունեցեք, որ եթե դուք օգտագործում եք ֆիքսված նավագոտի կամ օգտագործում եք մուտքագրումներ մոդալում, iOS-ն ունի մատուցման սխալ, որը չի թարմացնում ֆիքսված տարրերի դիրքը, երբ վիրտուալ ստեղնաշարը գործարկվում է: Դրա համար մի քանի լուծումներ ներառում են ձեր տարրերի փոխակերպումը position: absolute
կամ կենտրոնացման ժամանակաչափի կանչը, որպեսզի փորձեք ձեռքով շտկել դիրքը: Սա չի կարգավորվում Bootstrap-ի կողմից, ուստի ձեզնից է կախված, թե որ լուծումն է լավագույնը ձեր հավելվածի համար:
Տարրը .dropdown-backdrop
չի օգտագործվում iOS-ում նավի մեջ՝ z-ինդեքսավորման բարդության պատճառով: Այսպիսով, navbars-ում բացվող ցանկերը փակելու համար դուք պետք է ուղղակիորեն սեղմեք բացվող տարրը (կամ որևէ այլ տարր, որը կգործարկի սեղմման իրադարձություն iOS-ում ):
Էջի խոշորացումն անխուսափելիորեն ներկայացնում է որոշ բաղադրիչների արտեֆակտներ, ինչպես Bootstrap-ում, այնպես էլ համացանցի մնացած մասում: Կախված խնդրից, մենք կարող ենք շտկել այն (նախ որոնեք, իսկ անհրաժեշտության դեպքում բացեք խնդիրը): Այնուամենայնիվ, մենք հակված ենք անտեսել դրանք, քանի որ դրանք հաճախ այլ ուղղակի լուծում չունեն, քան հաքերային լուծումները:
:hover
/ :focus
բջջայինովԹեև սենսորային էկրանների մեծ մասում իրական սավառնելը հնարավոր չէ, բջջային բրաուզերների մեծ մասը նմանակում է սավառնող աջակցությանը և դարձնում :hover
«կպչուն»: Այլ կերպ ասած, :hover
ոճերը սկսում են կիրառվել տարրը հպելուց հետո և դադարում են կիրառել միայն այն բանից հետո, երբ օգտվողը կտտացնում է որևէ այլ տարր: Սա կարող է պատճառ դառնալ, որ Bootstrap-ի :hover
վիճակները անցանկալիորեն «կպչեն» նման բրաուզերների վրա: Որոշ բջջային բրաուզերներ նույնպես :focus
նմանապես կպչուն են դարձնում: Ներկայումս այս խնդիրների համար չկա պարզ լուծում, բացի նման ոճերը ամբողջությամբ հեռացնելուց:
Նույնիսկ որոշ ժամանակակից բրաուզերներում տպագրությունը կարող է տարօրինակ լինել:
Մասնավորապես, Chrome v32-ի դրությամբ և անկախ լուսանցքի կարգավորումներից, Chrome-ն օգտագործում է տեսադաշտի լայնությունը զգալիորեն ավելի նեղ, քան ֆիզիկական թղթի չափսը՝ վեբ էջ տպելիս լրատվամիջոցների հարցումները լուծելիս: Սա կարող է հանգեցնել նրան, որ Bootstrap-ի չափազանց փոքր ցանցը տպագրելիս անսպասելիորեն ակտիվանում է: Որոշ մանրամասների համար տե՛ս թողարկումը #12078 և Chrome bug #273306 : Առաջարկվող լուծումներ.
@screen-*
որպեսզի ձեր տպիչի թուղթը համարվի ավելի մեծ, քան չափազանց փոքր:Բացի այդ, Safari v8.0-ի դրությամբ, ֆիքսված լայնությամբ .container
s-երը կարող են պատճառ դառնալ, որ Safari-ն տպելիս օգտագործի անսովոր փոքր տառաչափ: Լրացուցիչ մանրամասների համար տես #14868 և WebKit սխալ #138192 : Դրա համար հնարավոր լուծումներից մեկը հետևյալ CSS-ի ավելացումն է.
Android 4.1-ը (և նույնիսկ որոշ նոր թողարկումներ, ըստ երևույթին) առաքվում է Browser հավելվածով որպես ընտրված լռելյայն վեբ դիտարկիչ (ի տարբերություն Chrome-ի): Ցավոք, Browser հավելվածն ունի բազմաթիվ սխալներ և անհամապատասխանություններ ընդհանուր առմամբ CSS-ի հետ:
Տարրերի վրա <select>
Android ֆոնդային զննարկիչը չի ցուցադրի կողային հսկիչները, եթե կա border-radius
և/կամ border
կիրառվում է: (Մանրամասների համար տե՛ս StackOverflow-ի այս հարցը :) Օգտագործեք ստորև բերված կոդի հատվածը՝ վիրավորական CSS-ը հեռացնելու և <select>
Android ֆոնդային բրաուզերի վրա որպես չոճավորված տարր վերածելու համար: Օգտվողի գործակալի հոտը խուսափում է Chrome, Safari և Mozilla բրաուզերների միջամտությունից:
Ցանկանու՞մ եք օրինակ տեսնել: Ստուգեք այս JS Bin ցուցադրությունը:
Հին և խելագարված բրաուզերներին լավագույն հնարավոր փորձը ապահովելու համար Bootstrap-ը մի քանի վայրերում օգտագործում է CSS բրաուզերի հաքեր ՝ հատուկ CSS-ին թիրախավորելու բրաուզերի որոշակի տարբերակների համար, որպեսզի շտկվի բրաուզերների սխալները: Այս հաքերները հասկանալի է, որ CSS վավերացնողները բողոքում են, որ դրանք անվավեր են: Մի քանի վայրերում մենք նաև օգտագործում ենք արյունահոսող CSS գործառույթներ, որոնք դեռ լիովին ստանդարտացված չեն, բայց դրանք օգտագործվում են զուտ առաջադեմ բարելավման համար:
Այս վավերացման նախազգուշացումները գործնականում նշանակություն չունեն, քանի որ մեր CSS-ի ոչ հաքերային հատվածը լիովին վավերացվում է, և հաքի հատվածները չեն խանգարում ոչ հաքերային հատվածի պատշաճ աշխատանքին, հետևաբար ինչու ենք մենք միտումնավոր անտեսում այս հատուկ նախազգուշացումները:
Մեր HTML փաստաթղթերը նույնպես ունեն որոշ չնչին և անհետևանք HTML-ի վավերացման նախազգուշացումներ՝ կապված Firefox-ի որոշակի վրիպակի լուծումների ընդգրկման հետ :
Թեև մենք պաշտոնապես չենք աջակցում որևէ երրորդ կողմի պլագիններին կամ հավելումներին, մենք առաջարկում ենք որոշ օգտակար խորհուրդներ, որոնք կօգնեն խուսափել ձեր նախագծերում հնարավոր խնդիրներից:
Երրորդ կողմի որոշ ծրագրեր, այդ թվում՝ Google Maps-ը և Google Custom Search Engine-ը, հակասում են Bootstrap-ին * { box-sizing: border-box; }
, քանի որ այն padding
չի ազդում տարրի վերջնական հաշվարկված լայնության վրա: Իմացեք ավելին տուփի մոդելի և չափերի մասին CSS Tricks-ում :
Կախված համատեքստից, դուք կարող եք անտեսել ըստ անհրաժեշտության (տարբերակ 1) կամ վերականգնել տուփի չափերը ամբողջ տարածաշրջանների համար (տարբերակ 2):
Bootstrap-ը հետևում է ընդհանուր վեբ ստանդարտներին և նվազագույն լրացուցիչ ջանքերով կարող է օգտագործվել կայքեր ստեղծելու համար, որոնք հասանելի են AT- ն օգտագործողներին :
Եթե ձեր նավիգացիան պարունակում է բազմաթիվ հղումներ և առաջ է գալիս DOM-ի հիմնական բովանդակությունից, Skip to main content
նավարկությունից առաջ ավելացրեք հղում (պարզ բացատրության համար տե՛ս այս A11Y Project հոդվածը՝ բաց թողնել նավիգացիոն հղումները ): Դասի օգտագործումը .sr-only
տեսողականորեն կթաքցնի բաց թողնելու հղումը, և .sr-only-focusable
դասը կապահովի, որ հղումը տեսանելի դառնա կենտրոնանալուց հետո (տեսողությամբ ստեղնաշար օգտագործողների համար):
Chrome-ի երկարատև թերությունների/վրիպակների պատճառով (տե՛ս Chromium bug tracker-ի համարը 262171 ) և Internet Explorer-ում (տե՛ս այս հոդվածը էջերի հղումների և ֆոկուսի դասավորության մասին ), դուք պետք է համոզվեք, որ ձեր բաց թողնված հղումի թիրախը առնվազն ծրագրային առումով կենտրոնացված է՝ ավելացնելով tabindex="-1"
.
Բացի այդ, դուք կարող եք բացահայտորեն ճնշել թիրախի վրա տեսանելի ֆոկուսի ցուցումը (մասնավորապես, քանի որ Chrome-ը ներկայումս նաև կենտրոնացնում է տարրերի վրա կենտրոնացումը, tabindex="-1"
երբ դրանք սեղմվում են մկնիկի օգնությամբ) #content:focus { outline: none; }
:
Նկատի ունեցեք, որ այս վրիպակը կազդի նաև ցանկացած այլ էջային հղումների վրա, որոնք ձեր կայքը կարող է օգտագործել՝ դրանք անօգուտ դարձնելով ստեղնաշարի օգտագործողների համար: Դուք կարող եք դիտարկել նմանատիպ կանգառի շտկում ավելացնել բոլոր մյուս անվանակոչված խարիսխների / հատվածի նույնացուցիչներին, որոնք գործում են որպես հղման թիրախներ:
Երբ տեղադրվում են վերնագրեր ( <h1>
- <h6>
), ձեր հիմնական փաստաթղթի վերնագիրը պետք է լինի <h1>
. Հետագա վերնագրերը պետք է տրամաբանական օգտագործեն, <h2>
որպեսզի <h6>
էկրանի ընթերցողները կարողանան կառուցել բովանդակության աղյուսակ ձեր էջերի համար:
Իմացեք ավելին HTML CodeSniffer-ում և Penn State's AccessAbility-ում :
Ներկայումս Bootstrap-ում առկա են լռելյայն գունային համակցություններից մի քանիսը (օրինակ՝ կոճակների տարբեր դասեր, կոդի հիմնական բլոկների համար օգտագործվող կոդի ընդգծող գույները , .bg-primary
համատեքստային ֆոնի օգնական դասը և հղման լռելյայն գույնը, երբ օգտագործվում է սպիտակ ֆոնի վրա) ունեն հակադրության ցածր հարաբերակցություն ( առաջարկվող 4,5:1 հարաբերակցությունից ցածր ): Սա կարող է խնդիրներ առաջացնել ցածր տեսողություն ունեցող կամ դալտոնիկ ունեցող օգտատերերի համար: Այս լռելյայն գույները կարող են փոփոխման կարիք ունենալ՝ դրանց հակադրությունն ու ընթեռնելիությունը մեծացնելու համար:
Bootstrap-ը թողարկվել է MIT լիցենզիայի ներքո և 2016 թվականի Twitter-ի հեղինակային իրավունքով: Եփած ավելի փոքր կտորների, այն կարելի է նկարագրել հետևյալ պայմաններով.
Լրացուցիչ տեղեկությունների համար Bootstrap լիցենզիան գտնվում է նախագծի պահեստում :
Համայնքի անդամները թարգմանել են Bootstrap-ի փաստաթղթերը տարբեր լեզուներով: Ոչ մեկը պաշտոնապես չի աջակցվում, և դրանք միշտ չէ, որ արդիական են:
Մենք չենք օգնում կազմակերպել կամ ընդունել թարգմանությունները, մենք պարզապես հղում ենք անում դրանց:
Ավարտե՞լ եք նոր կամ ավելի լավ թարգմանություն: Բացեք ձգման հարցում՝ այն մեր ցուցակում ավելացնելու համար: