Kuanza
Muhtasari wa Bootstrap, jinsi ya kupakua na kutumia, violezo msingi na mifano, na zaidi.
Muhtasari wa Bootstrap, jinsi ya kupakua na kutumia, violezo msingi na mifano, na zaidi.
Bootstrap (kwa sasa ni v3.3.7) ina njia chache rahisi za kuanza kwa haraka, kila moja ikivutia kiwango tofauti cha ujuzi na matumizi. Soma ili kuona kile kinachofaa mahitaji yako maalum.
CSS iliyokusanywa na kupunguzwa, JavaScript na fonti. Hakuna hati au faili asili zilizojumuishwa.
Chanzo Chini, JavaScript, na faili za fonti, pamoja na hati zetu. Inahitaji mkusanyaji Chini na usanidi fulani.
Bootstrap iliyohamishwa kutoka Less hadi Sass kwa kujumuishwa kwa urahisi katika Rails, Compass, au miradi ya Sass-pekee.
Watu walioko jsDelivr kwa neema hutoa usaidizi wa CDN kwa CSS ya Bootstrap na JavaScript. Tumia tu viungo hivi vya Bootstrap CDN .
Unaweza pia kusakinisha na kudhibiti Bootstrap's Less, CSS, JavaScript, na fonti kwa kutumia Bower :
Unaweza pia kusakinisha Bootstrap kwa kutumia npm :
require('bootstrap')
itapakia programu-jalizi zote za jQuery za Bootstrap kwenye kitu cha jQuery. Moduli bootstrap
yenyewe haihamishi chochote. Unaweza kupakia kiotomatiki programu jalizi za jQuery za Bootstrap kibinafsi kwa kupakia /js/*.js
faili chini ya saraka ya kiwango cha juu cha kifurushi.
Bootstrap's package.json
ina metadata ya ziada chini ya funguo zifuatazo:
less
- njia ya faili kuu ya Chanzo cha Bootstrapstyle
- njia ya CSS isiyo na minified ya Bootstrap ambayo imeandaliwa kwa kutumia mipangilio chaguo-msingi (hakuna ubinafsishaji)Unaweza pia kusakinisha na kudhibiti Bootstrap's Less, CSS, JavaScript, na fonti kwa kutumia Composer :
Bootstrap hutumia Autoprefixer kushughulikia viambishi awali vya wachuuzi wa CSS . Ikiwa unakusanya Bootstrap kutoka chanzo chake cha Chini/Sass na hutumii Gruntfile yetu, utahitaji kujumuisha Kiambishi Kiotomatiki katika mchakato wako wa uundaji wewe mwenyewe. Ikiwa unatumia Bootstrap iliyokusanywa mapema au unatumia Gruntfile yetu, huna haja ya kuwa na wasiwasi kuhusu hili kwa sababu Autoprefixer tayari imeunganishwa kwenye Gruntfile yetu.
Bootstrap inaweza kupakuliwa katika aina mbili, ambayo utapata saraka na faili zifuatazo, zikiweka rasilimali za kawaida katika vikundi na kutoa tofauti zilizokusanywa na zilizopunguzwa.
Tafadhali kumbuka kuwa programu- jalizi zote za JavaScript zinahitaji jQuery kujumuishwa, kama inavyoonyeshwa kwenye kiolezo cha anza . Wasiliana nasibower.json
ili kuona ni matoleo gani ya jQuery yanatumika.
Mara baada ya kupakuliwa, fungua folda iliyobanwa ili kuona muundo wa (iliyokusanywa) Bootstrap. Utaona kitu kama hiki:
Hii ndiyo aina ya msingi zaidi ya Bootstrap: faili zilizokusanywa awali kwa matumizi ya haraka ya kudondosha katika takriban mradi wowote wa wavuti. Tunatoa CSS na JS ( bootstrap.*
) zilizokusanywa, pamoja na CSS na JS ( bootstrap.min.*
). Ramani chanzo cha CSS ( bootstrap.*.map
) zinapatikana kwa matumizi na zana za wasanidi wa vivinjari fulani. Fonti kutoka Glyphicons ni pamoja na, kama ni hiari Bootstrap mandhari.
Upakuaji wa msimbo wa chanzo cha Bootstrap ni pamoja na CSS, JavaScript, na vipengee vya fonti vilivyokusanywa awali, pamoja na chanzo Chini, JavaScript, na hati. Hasa zaidi, inajumuisha yafuatayo na zaidi:
, less/
, js/
na fonts/
ndio msimbo wa chanzo wa fonti zetu za CSS, JS, na ikoni (mtawalia). Folda dist/
inajumuisha kila kitu kilichoorodheshwa katika sehemu ya upakuaji iliyokusanywa hapo juu. Folda docs/
inajumuisha msimbo wa chanzo kwa hati zetu, na examples/
matumizi ya Bootstrap. Zaidi ya hayo, faili nyingine yoyote iliyojumuishwa hutoa usaidizi kwa vifurushi, maelezo ya leseni, na ukuzaji.
Bootstrap hutumia Grunt kwa mfumo wake wa ujenzi, na njia rahisi za kufanya kazi na mfumo. Ni jinsi tunavyokusanya nambari zetu, kufanya majaribio, na zaidi.
Ili kusakinisha Grunt, lazima kwanza upakue na usakinishe node.js (ambayo inajumuisha npm). npm inasimamia moduli zilizofungashwa za nodi na ni njia ya kudhibiti utegemezi wa maendeleo kupitia node.js.
Kisha, kutoka kwa mstari wa amri:grunt-cli
kimataifa na npm install -g grunt-cli
./bootstrap/
Nenda kwenye saraka ya mizizi , kisha endesha npm install
. npm itaangalia package.json
faili na kusanikisha kiotomati utegemezi muhimu wa ndani ulioorodheshwa hapo.Ikikamilika, utaweza kutekeleza amri mbalimbali za Grunt zinazotolewa kutoka kwa safu ya amri.
grunt dist
(Tunga CSS na JavaScript)Hutengeneza saraka upya /dist/
na faili za CSS na JavaScript zilizokusanywa na kupunguzwa. Kama mtumiaji wa Bootstrap, hii kawaida ni amri unayotaka.
grunt watch
(Tazama)Hutazama faili chanzo kidogo na kuzikusanya kiotomatiki kwa CSS wakati wowote unapohifadhi mabadiliko.
grunt test
(Fanya majaribio)Huendesha JSHint na huendesha majaribio ya QUnit bila kichwa katika PhantomJS .
grunt docs
(Jenga na ujaribu mali ya hati)Huunda na kufanyia majaribio CSS, JavaScript, na vipengee vingine vinavyotumika wakati wa kuendesha hati ndani ya nchi kupitia bundle exec jekyll serve
.
grunt
(Jenga kila kitu kabisa na endesha majaribio)Hukusanya na kupunguza CSS na JavaScript, huunda tovuti ya hati, huendesha kithibitishaji cha HTML5 dhidi ya hati, huzalisha upya vipengee vya Kiteja, na zaidi. Inahitaji Jekyll . Kawaida ni muhimu tu ikiwa unavinjari Bootstrap yenyewe.
Ukikutana na matatizo ya kusakinisha vitegemezi au kuendesha amri za Grunt, kwanza futa /node_modules/
saraka inayotokana na npm. Kisha, rudia npm install
.
Anza na kiolezo hiki cha msingi cha HTML, au urekebishe mifano hii . Tunatumahi kuwa utabinafsisha violezo na mifano yetu, ukibadilisha ili kuendana na mahitaji yako.
Nakili HTML hapa chini ili kuanza kufanya kazi na hati ndogo ya Bootstrap.
Jenga kwenye kiolezo cha msingi hapo juu na vijenzi vingi vya Bootstrap. Tunakuhimiza kubinafsisha na kurekebisha Bootstrap ili kukidhi mahitaji ya mradi wako binafsi.
Pata msimbo wa chanzo kwa kila mfano hapa chini kwa kupakua hazina ya Bootstrap . Mifano inaweza kupatikana katika docs/examples/
saraka.
Pakia mandhari ya hiari ya Bootstrap kwa matumizi ya mwonekano yaliyoboreshwa.
Kiolezo bora cha msingi ambacho kinajumuisha upau wa urambazaji pamoja na maudhui mengine ya ziada.
Unda upau wa urambazaji maalum na viungo vilivyohalalishwa. Vichwa juu! Sio rafiki sana kwa Safari.
Bootlint ni zana rasmi ya Bootstrap HTML ya linter . Hukagua kiotomatiki makosa kadhaa ya kawaida ya HTML katika kurasa za wavuti zinazotumia Bootstrap kwa njia ya "vanilla". Vipengee/wijeti za Vanilla Bootstrap zinahitaji sehemu zao za DOM kuendana na miundo fulani. Bootlint hukagua kuwa visa vya vijenzi vya Bootstrap vina HTML iliyopangwa kwa usahihi. Fikiria kuongeza Bootlint kwenye mnyororo wako wa zana za ukuzaji wa wavuti wa Bootstrap ili kusiwe na makosa ya kawaida kupunguza kasi ya maendeleo ya mradi wako.
Pata habari kuhusu uundaji wa Bootstrap na ufikie jamii ukitumia nyenzo hizi muhimu.
irc.freenode.net
seva, katika ##bootstrap chaneli .twitter-bootstrap-3
.bootstrap
kwenye vifurushi vinavyorekebisha au kuongeza utendakazi wa Bootstrap wakati wa kusambaza kupitia npm au njia sawa za uwasilishaji kwa ugunduzi wa juu zaidi.Unaweza pia kufuata @getbootstrap kwenye Twitter kwa uvumi na video za muziki za kupendeza.
Bootstrap hubadilisha kiotomati kurasa zako kwa saizi tofauti za skrini. Hivi ndivyo unavyoweza kuzima kipengele hiki ili ukurasa wako ufanye kazi kama mfano huu usio na majibu .
<meta>
iliyotajwa kwenye hati za CSSwidth
kwa .container
kila daraja la gridi kwa upana mmoja, kwa mfano width: 970px !important;
Hakikisha kuwa hii inakuja baada ya CSS chaguo-msingi ya Bootstrap. Unaweza kuepuka kwa hiari !important
na maswali ya midia au kichaguzi-fu..col-xs-*
madarasa pamoja na, au badala ya yale ya kati/kubwa. Usijali, gridi ya kifaa kidogo zaidi hulingana na maazimio yote.Bado utahitaji Respond.js kwa IE8 (kwa kuwa hoja zetu za media bado zipo na zinahitaji kuchakatwa). Hii inazima vipengele vya "tovuti ya rununu" ya Bootstrap.
Tumetumia hatua hizi kwa mfano. Soma msimbo wake wa chanzo ili kuona mabadiliko maalum yanayotekelezwa.
Je, unatafuta kuhama kutoka toleo la zamani la Bootstrap hadi v3.x? Angalia mwongozo wetu wa uhamiaji .
Bootstrap imeundwa kufanya kazi vizuri zaidi katika vivinjari vya hivi punde vya eneo-kazi na simu, ikimaanisha kuwa vivinjari vya zamani vinaweza kuonyesha muundo tofauti, ingawa hufanya kazi kikamilifu, uwasilishaji wa vipengee fulani.
Hasa, tunaauni matoleo mapya zaidi ya vivinjari na mifumo ifuatayo.
Vivinjari mbadala vinavyotumia toleo jipya zaidi la WebKit, Blink, au Gecko, iwe moja kwa moja au kupitia API ya mwonekano wa wavuti ya jukwaa, havitumiki kwa uwazi. Walakini, Bootstrap inapaswa (katika hali nyingi) kuonyesha na kufanya kazi ipasavyo katika vivinjari hivi pia. Taarifa maalum zaidi za usaidizi zimetolewa hapa chini.
Kwa ujumla, Bootstrap inasaidia matoleo ya hivi punde ya kila vivinjari chaguo-msingi vya jukwaa kuu. Kumbuka kuwa vivinjari vya seva mbadala (kama vile Opera Mini, hali ya Turbo ya Opera Mobile, UC Browser Mini, Amazon Silk) havitumiki.
Chrome | Firefox | Safari | |
---|---|---|---|
Android | Imeungwa mkono | Imeungwa mkono | N/A |
iOS | Imeungwa mkono | Imeungwa mkono | Imeungwa mkono |
Vile vile, matoleo ya hivi karibuni ya vivinjari vingi vya eneo-kazi yanaauniwa.
Chrome | Firefox | Internet Explorer | Opera | Safari | |
---|---|---|---|---|---|
Mac | Imeungwa mkono | Imeungwa mkono | N/A | Imeungwa mkono | Imeungwa mkono |
Windows | Imeungwa mkono | Imeungwa mkono | Imeungwa mkono | Imeungwa mkono | Haitumiki |
Kwenye Windows, tunaauni Internet Explorer 8-11 .
Kwa Firefox, pamoja na toleo la hivi punde thabiti la kawaida, pia tunaauni toleo la hivi punde la Utoaji wa Usaidizi Uliopanuliwa (ESR) wa Firefox.
Isivyo rasmi, Bootstrap inapaswa kuonekana na kutenda vyema katika Chromium na Chrome kwa Linux, Firefox kwa Linux, na Internet Explorer 7, pamoja na Microsoft Edge, ingawa hazitumiki rasmi.
Kwa orodha ya baadhi ya hitilafu za kivinjari ambazo Bootstrap inapaswa kukabiliana nazo, angalia Wall of browser bugs zetu .
Internet Explorer 8 na 9 pia zinatumika, hata hivyo, tafadhali fahamu kuwa baadhi ya vipengele vya CSS3 na vipengele vya HTML5 havitumiki kikamilifu na vivinjari hivi. Kwa kuongeza, Internet Explorer 8 inahitaji matumizi ya Respond.js ili kuwezesha usaidizi wa hoja ya midia.
Kipengele | Internet Explorer 8 | Internet Explorer 9 |
---|---|---|
border-radius |
Haitumiki | Imeungwa mkono |
box-shadow |
Haitumiki | Imeungwa mkono |
transform |
Haitumiki | Imeungwa mkono, na -ms kiambishi awali |
transition |
Haitumiki | |
placeholder |
Haitumiki |
Tembelea Je, ninaweza kutumia... kwa maelezo kuhusu usaidizi wa kivinjari wa vipengele vya CSS3 na HTML5.
Jihadharini na tahadhari zifuatazo unapotumia Respond.js katika mazingira yako ya ukuzaji na uzalishaji wa Internet Explorer 8.
Kutumia Respond.js na CSS iliyopangishwa kwenye kikoa (kidogo) tofauti (kwa mfano, kwenye CDN) kunahitaji usanidi wa ziada. Tazama hati za Respond.js kwa maelezo.
file://
Kwa sababu ya sheria za usalama za kivinjari, Respond.js haifanyi kazi na kurasa zinazotazamwa kupitia file://
itifaki (kama vile unapofungua faili ya HTML ya ndani). Ili kujaribu vipengele vya kuitikia katika IE8, tazama kurasa zako kupitia HTTP(S). Tazama hati za Respond.js kwa maelezo.
@import
Respond.js haifanyi kazi na CSS ambayo inarejelewa kupitia @import
. Hasa, usanidi fulani wa Drupal unajulikana kutumia @import
. Tazama hati za Respond.js kwa maelezo.
IE8 haiauni kikamilifu box-sizing: border-box;
ikiunganishwa na min-width
, max-width
, min-height
, au max-height
. Kwa sababu hiyo, kuanzia v3.0.1, hatutumii tena max-width
kwenye .container
s.
IE8 ina maswala kadhaa @font-face
ikiwa imejumuishwa na :before
. Bootstrap hutumia mchanganyiko huo na Glyphicons zake. Ikiwa ukurasa umehifadhiwa, na kupakiwa bila kipanya juu ya dirisha (yaani, bonyeza kitufe cha kuonyesha upya au pakia kitu katika iframe) basi ukurasa utatolewa kabla ya fonti kupakiwa. Kuelea juu ya ukurasa (mwili) kutaonyesha baadhi ya aikoni na kuelea juu ya ikoni zilizosalia kutaonyesha hizo pia. Tazama toleo #13863 kwa maelezo zaidi.
Bootstrap haitumiki katika modi za uoanifu za Internet Explorer. Ili kuhakikisha kuwa unatumia hali ya hivi punde ya uwasilishaji ya IE, zingatia kujumuisha <meta>
lebo inayofaa katika kurasa zako:
Thibitisha hali ya hati kwa kufungua zana za kurekebisha: bonyeza F12na uangalie "Hali ya Hati".
Lebo hii imejumuishwa katika nyaraka na mifano yote ya Bootstrap ili kuhakikisha utoaji bora zaidi iwezekanavyo katika kila toleo linalotumika la Internet Explorer.
Tazama swali hili la StackOverflow kwa maelezo zaidi.
Internet Explorer 10 haitofautishi upana wa kifaa na upana wa kituo cha kutazama , na kwa hivyo haitumii ipasavyo hoja za maudhui katika CSS ya Bootstrap. Kwa kawaida ungeongeza kijisehemu cha haraka cha CSS kurekebisha hili:
Hata hivyo, hii haifanyi kazi kwa vifaa vinavyotumia matoleo ya Windows Phone 8 ya zamani kuliko Sasisho la 3 (yaliyojulikana pia kama GDR3) , kwani husababisha vifaa hivyo kuonyesha zaidi mwonekano wa eneo-kazi badala ya mwonekano finyu wa "simu". Ili kushughulikia hili, utahitaji kujumuisha CSS na JavaScript ifuatayo ili kusuluhisha hitilafu .
Kwa maelezo zaidi na miongozo ya matumizi, soma Windows Phone 8 na Device-Width .
Kama somo, tunajumuisha hii katika hati zote za Bootstrap na mifano kama onyesho.
Injini ya uwasilishaji ya matoleo ya Safari kabla ya v7.1 ya OS X na Safari ya iOS v8.0 ilikuwa na shida na idadi ya nafasi za desimali zinazotumika katika .col-*-1
madarasa yetu ya gridi ya taifa. Kwa hivyo ikiwa ulikuwa na safu wima 12 za gridi ya mtu binafsi, ungegundua kuwa zilikuja fupi ikilinganishwa na safu mlalo zingine za safuwima. Kando na kusasisha Safari/iOS, unayo chaguzi kadhaa za kufanya kazi:
.pull-right
kwenye safu wima yako ya mwisho ya gridi ili kupata mpangilio mgumu wa kuliaUsaidizi kwa overflow: hidden
kipengele <body>
ni mdogo katika iOS na Android. Kwa ajili hiyo, unaposogeza juu au chini ya modali katika mojawapo ya vivinjari vya vifaa hivyo, <body>
maudhui yataanza kusogeza. Tazama hitilafu ya Chrome #175502 (iliyorekebishwa katika Chrome v40) na mdudu wa WebKit #153852 .
Kuanzia iOS 9.3, wakati modali imefunguliwa, ikiwa mguso wa kwanza wa ishara ya kusogeza uko ndani ya mpaka wa maandishi <input>
au a <textarea>
, <body>
maudhui yaliyo chini ya modali yatasonga badala ya modali yenyewe. Tazama hitilafu ya WebKit #153856 .
Pia, kumbuka kuwa ikiwa unatumia upau wa uelekezaji usiobadilika au unatumia ingizo ndani ya modali, iOS ina hitilafu ya uwasilishaji ambayo haisasishi nafasi ya vipengee vilivyowekwa wakati kibodi pepe inapoanzishwa. Marekebisho machache kwa hili ni pamoja na kubadilisha vipengee vyako hadi position: absolute
au kukaribisha kipima muda kwenye umakini ili kujaribu kusahihisha nafasi wewe mwenyewe. Hili halishughulikiwi na Bootstrap, kwa hivyo ni juu yako kuamua ni suluhisho gani linafaa kwa programu yako.
Kipengele .dropdown-backdrop
hiki hakitumiki kwenye iOS kwenye nav kwa sababu ya uchangamano wa z-index. Kwa hivyo, ili kufunga menyu kunjuzi kwenye pau za urambazaji, lazima ubofye moja kwa moja kipengee kunjuzi (au kipengele kingine chochote kitakachowasha tukio la kubofya katika iOS ).
Ukuzaji wa ukurasa bila shaka huwasilisha uwasilishaji wa vizalia vya programu katika baadhi ya vipengele, katika Bootstrap na kwingineko kwenye wavuti. Kulingana na tatizo, tunaweza kulitatua (tafuta kwanza kisha ufungue tatizo ikihitajika). Walakini, huwa tunapuuza haya kwani mara nyingi hayana suluhisho la moja kwa moja isipokuwa njia za kudanganya.
:hover
/ :focus
kwenye simu ya mkononiIngawa kuelea kwa kweli hakuwezekani kwenye skrini nyingi za kugusa, vivinjari vingi vya rununu huiga usaidizi wa kuelea na kufanya :hover
"kunata". Kwa maneno mengine, :hover
mitindo huanza kutumika baada ya kugonga kipengele na kuacha tu kutumia baada ya mtumiaji kugonga kipengele kingine. :hover
Hii inaweza kusababisha majimbo ya Bootstrap "kukwama" kwenye vivinjari kama hivyo. Vivinjari vingine vya rununu pia hufanya :focus
vile vile kunata. Kwa sasa hakuna suluhisho rahisi kwa maswala haya zaidi ya kuondoa mitindo kama hii kabisa.
Hata katika vivinjari vingine vya kisasa, uchapishaji unaweza kuwa wa kushangaza.
Hasa, kufikia Chrome v32 na bila kujali mipangilio ya ukingo, Chrome hutumia upana wa eneo la kutazama ambao ni finyu zaidi kuliko ukubwa halisi wa karatasi wakati wa kusuluhisha hoja za midia wakati wa kuchapisha ukurasa wa tovuti. Hii inaweza kusababisha gridi ya ziada ya Bootstrap kuwashwa bila kutarajiwa wakati wa uchapishaji. Tazama toleo #12078 na Chrome bug #273306 kwa maelezo kadhaa. Marekebisho yaliyopendekezwa:
@screen-*
Vigezo Vichache ili karatasi yako ya kichapishi ichukuliwe kuwa kubwa kuliko ndogo zaidi.Pia, kufikia Safari v8.0, upana-weka .container
s unaweza kusababisha Safari kutumia saizi ndogo ya fonti wakati wa kuchapisha. Tazama #14868 na mdudu wa WebKit #138192 kwa maelezo zaidi. Njia moja inayowezekana ya hii ni kuongeza CSS ifuatayo:
Nje ya kisanduku, Android 4.1 (na hata matoleo mapya zaidi inaonekana) husafirishwa na programu ya Kivinjari kama kivinjari chaguo-msingi cha chaguo-msingi (kinyume na Chrome). Kwa bahati mbaya, programu ya Kivinjari ina hitilafu nyingi na kutopatana na CSS kwa ujumla.
Kwenye <select>
vipengele, kivinjari cha hisa cha Android hakitaonyesha vidhibiti vya kando ikiwa kuna border-radius
na/au border
kutumika. (Angalia swali hili la StackOverflow kwa maelezo.) Tumia kijisehemu cha msimbo ulio hapa chini ili kuondoa CSS inayokera na kutoa <select>
kama kipengele kisicho na mtindo kwenye kivinjari cha hisa cha Android. Wakala wa mtumiaji anayenusa huepuka kuingiliwa na vivinjari vya Chrome, Safari na Mozilla.
Unataka kuona mfano? Angalia onyesho hili la JS Bin.
Ili kutoa utumiaji bora zaidi kwa vivinjari vya zamani na vilivyo na hitilafu, Bootstrap hutumia udukuzi wa kivinjari cha CSS katika maeneo kadhaa ili kulenga CSS maalum kwa matoleo fulani ya kivinjari ili kushughulikia hitilafu kwenye vivinjari vyenyewe. Udukuzi huu kwa kueleweka husababisha wathibitishaji wa CSS kulalamika kuwa si sahihi. Katika maeneo kadhaa, pia tunatumia vipengele vya CSS ambavyo havijasawazishwa kikamilifu, lakini vinatumika kwa ajili ya uboreshaji unaoendelea.
Maonyo haya ya uthibitishaji hayajalishi kiutendaji kwani sehemu isiyo ya udukuzi ya CSS yetu haidhibitishi kikamilifu na sehemu za udukuzi haziingiliani na utendakazi sahihi wa sehemu isiyo ya udukuzi, kwa hivyo tunapuuza maonyo haya kimakusudi.
Hati zetu za HTML vile vile zina maonyo madogo na yasiyo na maana ya uthibitishaji wa HTML kwa sababu ya ujumuishaji wetu wa suluhisho kwa hitilafu fulani ya Firefox .
Ingawa hatuungi mkono rasmi programu-jalizi au programu-jalizi za wahusika wengine, tunatoa ushauri muhimu ili kukusaidia kuepuka matatizo yanayoweza kutokea katika miradi yako.
Baadhi ya programu za wahusika wengine, ikiwa ni pamoja na Ramani za Google na Injini Maalum ya Kutafuta ya Google, inakinzana na Bootstrap kutokana na * { box-sizing: border-box; }
, sheria inayoifanya kuwa hivyo padding
haiathiri upana wa mwisho uliokokotwa wa kipengele. Pata maelezo zaidi kuhusu modeli ya kisanduku na ukubwa katika Mbinu za CSS .
Kulingana na muktadha, unaweza kubatilisha inavyohitajika (Chaguo 1) au kuweka upya ukubwa wa kisanduku kwa maeneo yote (Chaguo la 2).
Bootstrap hufuata viwango vya kawaida vya wavuti na—pamoja na juhudi kidogo zaidi—inaweza kutumika kuunda tovuti zinazoweza kufikiwa na wale wanaotumia AT .
Ikiwa uelekezaji wako una viungo vingi na huja kabla ya maudhui kuu katika DOM, ongeza Skip to main content
kiungo kabla ya kusogeza (kwa maelezo rahisi, angalia makala haya ya Mradi wa A11Y kuhusu ruka viungo vya kusogeza ). Kutumia .sr-only
darasa kutaficha kiunga cha kuruka kionekano, na .sr-only-focusable
darasa litahakikisha kuwa kiungo kinaonekana kikielekezwa (kwa watumiaji wa kibodi wanaoona).
Kwa sababu ya kasoro/ hitilafu za muda mrefu katika Chrome (angalia toleo la 262171 katika kifuatiliaji hitilafu cha Chromium ) na Internet Explorer (tazama makala hii kwenye viungo vya ndani ya ukurasa na mpangilio wa kulenga ), utahitaji kuhakikisha kuwa lengo la kiungo chako cha kuruka. angalau inaweza kuangaziwa kiprogramu kwa kuongeza tabindex="-1"
.
Kwa kuongeza, unaweza kutaka kukandamiza kwa uwazi alamisho inayoonekana ya kulenga lengwa (haswa kwa vile Chrome kwa sasa pia inaweka uzingatiaji wa vipengee tabindex="-1"
navyo vinapobofya kwa kipanya) na #content:focus { outline: none; }
.
Kumbuka kuwa hitilafu hii pia itaathiri viungo vingine vyovyote vya ndani vya ukurasa ambavyo tovuti yako inaweza kutumia, na hivyo kuvifanya kuwa visivyofaa kwa watumiaji wa kibodi. Unaweza kufikiria kuongeza urekebishaji sawa wa kuacha-pengo kwa vitambulishi vingine vyote vilivyopewa jina / vipande ambavyo hufanya kama shabaha za kiungo.
Unapoweka vichwa ( <h1>
- <h6>
), kichwa chako cha msingi cha hati kinapaswa kuwa <h1>
. Vichwa vifuatavyo vinapaswa kufanya matumizi ya kimantiki <h2>
- <h6>
hivi kwamba visoma skrini vinaweza kuunda jedwali la yaliyomo kwa kurasa zako.
Pata maelezo zaidi katika HTML CodeSniffer na AccessAbility ya Penn State .
Kwa sasa, baadhi ya michanganyiko ya rangi chaguo-msingi inayopatikana katika Bootstrap (kama vile aina mbalimbali za vitufe vilivyowekwa mitindo, baadhi ya rangi zinazoangazia msimbo zinazotumika kwa vizuizi vya msingi vya misimbo , darasa la usaidizi wa .bg-primary
mandharinyuma , na rangi ya kiungo chaguo-msingi inapotumiwa kwenye mandharinyuma nyeupe) kuwa na uwiano wa chini wa utofautishaji (chini ya uwiano uliopendekezwa wa 4.5:1 ). Hii inaweza kusababisha matatizo kwa watumiaji wenye uoni hafifu au wasioona rangi. Huenda rangi hizi chaguomsingi zikahitaji kurekebishwa ili kuongeza utofautishaji na uhalali wake.
Bootstrap inatolewa chini ya leseni ya MIT na ni hakimiliki ya 2016 Twitter. Imechemshwa hadi vipande vidogo, inaweza kuelezewa na masharti yafuatayo.
Leseni kamili ya Bootstrap iko kwenye hazina ya mradi kwa maelezo zaidi.
Wanajamii wametafsiri hati za Bootstrap katika lugha mbalimbali. Hakuna zinazotumika rasmi na huenda zisisasishwe kila wakati.
Hatusaidii kupanga au kupangisha tafsiri, tunaziunganisha tu.
Je, umemaliza tafsiri mpya au bora zaidi? Fungua ombi la kuvuta ili kuiongeza kwenye orodha yetu.