መጀመር
የ Bootstrap አጠቃላይ እይታ፣ እንዴት ማውረድ እና መጠቀም እንደሚቻል፣ መሰረታዊ አብነቶች እና ምሳሌዎች እና ሌሎችም።
የ Bootstrap አጠቃላይ እይታ፣ እንዴት ማውረድ እና መጠቀም እንደሚቻል፣ መሰረታዊ አብነቶች እና ምሳሌዎች እና ሌሎችም።
ቡትስትራፕ (በአሁኑ ጊዜ v3.4.1) በፍጥነት ለመጀመር ጥቂት ቀላል መንገዶች አሏቸው፣ እያንዳንዳቸው ወደ ሌላ የክህሎት ደረጃ እና የአጠቃቀም ጉዳይ ይማርካሉ። ለፍላጎቶችዎ የሚስማማውን ለማየት ያንብቡ።
የተቀናበረ እና የተቀነሰ CSS፣ JavaScript እና ቅርጸ-ቁምፊዎች። ምንም ሰነዶች ወይም የመጀመሪያ ምንጭ ፋይሎች አልተካተቱም።
በ jsDelivr ላይ ያሉ ሰዎች ለ Bootstrap's CSS እና JavaScript የCDN ድጋፍን በአክብሮት ይሰጣሉ። እነዚህን jsDelivr ማገናኛዎች ብቻ ይጠቀሙ።
ቦወርን በመጠቀም Bootstrap's Less፣ CSS፣ JavaScript እና fonts መጫን እና ማስተዳደር ትችላለህ ፡-
እንዲሁም npm ን በመጠቀም Bootstrapን መጫን ይችላሉ :
require('bootstrap')
ሁሉንም የ Bootstrap jQuery ፕለጊኖች በ jQuery ነገር ላይ ይጫናል። ሞጁሉ bootstrap
ራሱ ምንም ነገር ወደ ውጭ አይልክም. /js/*.js
በጥቅሉ ከፍተኛ-ደረጃ ማውጫ ስር ያሉትን ፋይሎች በመጫን የ Bootstrap's jQuery pluginsን እራስዎ መጫን ይችላሉ ።
Bootstrap's package.json
በሚከተሉት ቁልፎች ስር አንዳንድ ተጨማሪ ሜታዳታ ይዟል
less
- ወደ Bootstrap ዋና ትንሽ ምንጭ ፋይል መንገድstyle
- ወደ Bootstrap ያልተቀነሰ CSS የሚወስደው መንገድ ነባሪ ቅንብሮችን በመጠቀም ቀድሞ የተጠናቀረ (ምንም ማበጀት የለም)አቀናባሪን በመጠቀም Bootstrap 's Less፣ CSS፣ JavaScript እና fonts መጫን እና ማስተዳደር ይችላሉ ፡-
የ CSS አቅራቢ ቅድመ ቅጥያዎችን ለመቋቋም ቡትስትራፕ አውቶፕረፊክስን ይጠቀማል ። Bootstrapን ከ Less/Sass ምንጭ እየሰበሰቡ ከሆነ እና የእኛን Gruntfile ካልተጠቀሙ፣ ራስዎ ቅድመ ቅጥያ በራስዎ የግንባታ ሂደት ውስጥ ማዋሃድ ያስፈልግዎታል። ቀድሞ የተጠናቀረ ቡትስትራፕ እየተጠቀሙ ከሆነ ወይም የእኛን Gruntfile እየተጠቀሙ ከሆነ፣ በዚህ መጨነቅ አያስፈልገዎትም ምክንያቱም Autoprefixer አስቀድሞ በእኛ Gruntfile ውስጥ ተካቷል።
ቡትስትራፕ በሁለት ቅጾች ሊወርድ የሚችል ሲሆን በውስጡም የሚከተሉትን ማውጫዎች እና ፋይሎች ያገኛሉ።
እባክዎን ያስተውሉ ሁሉም የጃቫ ስክሪፕት ፕለጊኖች jQuery እንዲካተት በጀማሪ አብነት ላይ እንደሚታየው ። የትኞቹ የ jQuery ስሪቶች እንደሚደገፉ ለማየት የእኛን ያማክሩ ።bower.json
አንዴ ከወረዱ በኋላ የተጨመቀውን ፎልደር ዚፕ ይንቀሉት (የተጠናቀረ) የቡትስትራፕን መዋቅር ለማየት። እንደዚህ ያለ ነገር ታያለህ፡-
ይህ በጣም መሠረታዊው የBootstrap አይነት ነው፡ በማንኛውም የድር ፕሮጄክት ውስጥ ለፈጣን የመግባት ቀድሞ የተጠናቀሩ ፋይሎች። የተቀናበረ CSS እና JS ( bootstrap.*
) እንዲሁም የተጠናቀረ እና የተቀነሰ CSS እና JS ( bootstrap.min.*
) እናቀርባለን። የ CSS ምንጭ ካርታዎች ( bootstrap.*.map
) ከተወሰኑ አሳሾች ገንቢ መሳሪያዎች ጋር ለመጠቀም ይገኛሉ። የGlyphicons ቅርጸ-ቁምፊዎች ተካትተዋል፣ እንደ አማራጭ የቡትስትራፕ ጭብጥ።
የ Bootstrap ምንጭ ኮድ ማውረድ ቀድሞ የተጠናቀረ CSS፣ JavaScript እና የቅርጸ-ቁምፊ እሴቶችን ከምንጩ ያነሰ፣ ጃቫ ስክሪፕት እና ሰነዶችን ያካትታል። በተለይም የሚከተሉትን እና ሌሎችንም ያካትታል፡-
የ less/
፣፣ js/
እና fonts/
የእኛ የCSS፣ JS እና አዶ ቅርጸ-ቁምፊዎች (በቅደም ተከተላቸው) የምንጭ ኮድ ናቸው። ማህደሩ ከላይ dist/
ባለው ቀድሞ በተዘጋጀው የማውረድ ክፍል ውስጥ የተዘረዘሩትን ሁሉ ያካትታል። docs/
አቃፊው ለሰነዶቻችን የምንጭ ኮድ እና የ examples/
Bootstrap አጠቃቀምን ያካትታል። ከዚህ ባሻገር፣ ሌላ ማንኛውም የተካተተ ፋይል ለፓኬጆች፣ የፍቃድ መረጃ እና ልማት ድጋፍ ይሰጣል።
Bootstrap ከማዕቀፉ ጋር አብሮ ለመስራት ምቹ ዘዴዎችን በመጠቀም Grunt ን ለግንባታ ስርዓቱ ይጠቀማል። የእኛን ኮድ እንዴት እንደምናጠናቅር፣ ሙከራዎችን እንደምናስኬድ እና ሌሎችንም ነው።
Gruntን ለመጫን መጀመሪያ node.js (npmን ጨምሮ) አውርደህ መጫን አለብህ ። npm በ node የታሸጉ ሞጁሎችን የሚያመለክት ሲሆን በ node.js በኩል የእድገት ጥገኝነቶችን የሚያስተዳድሩበት መንገድ ነው።
ከዚያ ከትእዛዝ መስመር:grunt-cli
ደረጃ በ npm install -g grunt-cli
./bootstrap/
ማውጫው ይሂዱ እና ከዚያ ያሂዱ npm install
። npm package.json
ፋይሉን ይመለከታል እና እዚያ የተዘረዘሩትን አስፈላጊ የአካባቢያዊ ጥገኛዎችን በራስ-ሰር ይጭናል።ሲጨርሱ ከትዕዛዝ መስመሩ የቀረቡትን የተለያዩ የGrunt ትዕዛዞችን ማስኬድ ይችላሉ።
grunt dist
(ሲኤስኤስ እና ጃቫስክሪፕት ብቻ ያጠናቅሩ)/dist/
ማውጫውን በተቀናጁ እና በተቀነሱ CSS እና JavaScript ፋይሎች ያድሳል ። እንደ Bootstrap ተጠቃሚ፣ ይህ በመደበኛነት የሚፈልጉት ትዕዛዝ ነው።
grunt watch
(ተመልከት)ያነሱ ምንጭ ፋይሎችን ይመለከታቸዋል እና ለውጥ በሚያስቀምጡበት ጊዜ በራስ-ሰር ወደ ሲኤስኤስ ያዘጋጃቸዋል።
grunt test
(ሙከራዎችን አሂድ)JSHintን ያስኬዳል እና የ QUnit ሙከራዎችን በእውነተኛ አሳሾች ያካሂዳል ለካርማ ምስጋና ይግባው ።
grunt docs
(የሰነዶቹን ንብረቶች ይገንቡ እና ይሞክሩ)ሰነዶቹን በአገር ውስጥ በሚሰራበት ጊዜ በ CSS፣ JavaScript እና ሌሎች ንብረቶችን ይገነባል እና ይፈትሻል bundle exec jekyll serve
።
grunt
(በፍፁም ሁሉንም ነገር ይገንቡ እና ሙከራዎችን ያሂዱ)ሲኤስኤስ እና ጃቫስክሪፕትን ያጠናቅራል እና ይቀንሳል፣ የሰነድ ድር ጣቢያውን ይገነባል፣ HTML5 አረጋጋጭን ከሰነዶቹ ጋር ያስኬዳል፣ የማበጀት ንብረቶችን እና ሌሎችንም ያድሳል። ጄኪል ያስፈልገዋል . ቡትስትራፕን ራሱ እየጠለፉ ከሆነ ብቻ አስፈላጊ ነው።
ጥገኞችን መጫን ወይም የGrunt ትዕዛዞችን ማስኬድ ላይ ችግሮች ካጋጠሙዎት በመጀመሪያ /node_modules/
በ npm የተፈጠረውን ማውጫ ይሰርዙ። ከዚያ እንደገና ያሂዱ npm install
።
በዚህ መሰረታዊ የኤችቲኤምኤል አብነት ይጀምሩ ወይም እነዚህን ምሳሌዎች ያሻሽሉ ። የኛን አብነቶች እና ምሳሌዎች ለፍላጎትህ በማስማማት እንደምታስተካክል ተስፋ እናደርጋለን።
በትንሹ ቡትስትራፕ ሰነድ መስራት ለመጀመር ከታች ያለውን ኤችቲኤምኤል ይቅዱ።
ከላይ ባለው መሰረታዊ አብነት ላይ በBootstrap ብዙ አካላት ይገንቡ። ለግል የፕሮጀክትዎ ፍላጎት እንዲስማማ ቡትስትራፕን እንዲያበጁ እና እንዲላመዱ እናበረታታዎታለን።
የ Bootstrap ማከማቻውን በማውረድ ለእያንዳንዱ ምሳሌ የሚሆን የምንጭ ኮድ ያግኙ ። ምሳሌዎች docs/examples/
በማውጫው ውስጥ ይገኛሉ.
Bootlint ኦፊሴላዊው የቡትስትራክ ኤችቲኤምኤል ሊንተር መሳሪያ ነው። በድረ-ገጾች ውስጥ Bootstrapን በትክክል በ"ቫኒላ" መንገድ እየተጠቀሙ ያሉ በርካታ የተለመዱ የኤችቲኤምኤል ስህተቶችን በራስ-ሰር ይፈትሻል። የቫኒላ ቡትስትራፕ ክፍሎች/መግብሮች የ DOM ክፍሎቻቸው ከተወሰኑ መዋቅሮች ጋር እንዲጣጣሙ ይፈልጋሉ። ቡትሊንት የBootstrap ክፍሎች ምሳሌዎች በትክክል የተዋቀሩ ኤችቲኤምኤል እንዳላቸው ያረጋግጣል። ከተለመዱት ስህተቶች ውስጥ አንዳቸውም የፕሮጀክትዎን እድገት እንዳያዘገዩ Bootlintን ወደ የእርስዎ Bootstrap የድር ልማት መሣሪያ ሰንሰለት ማከል ያስቡበት።
በBootstrap እድገት ላይ ወቅታዊ መረጃ ያግኙ እና በእነዚህ አጋዥ ግብዓቶች ማህበረሰቡን ያግኙ።
irc.freenode.net
በአገልጋዩ ውስጥ IRCን በመጠቀም ከBootstrappers ጋር በ ##bootstrap ቻናል ውስጥ ይወያዩ ።twitter-bootstrap-3
ላይ ይጠይቁ ።bootstrap
ወይም በተመሳሳዩ የመላኪያ ዘዴዎች በሚሰራጩበት ጊዜ የBootstrapን ተግባር በሚቀይሩ ወይም በሚጨምሩ ጥቅሎች ላይ ያለውን ቁልፍ ቃል መጠቀም አለባቸው ።እንዲሁም በትዊተር ላይ @getbootstrapን መከተል ትችላለህ ለአዳዲስ ወሬዎች እና ግሩም የሙዚቃ ቪዲዮዎች።
Bootstrap ገጾችዎን ለተለያዩ የስክሪን መጠኖች በራስ ሰር ያስተካክላል። ገጽዎ እንደዚህ ምላሽ የማይሰጥ ምሳሌ እንዲሰራ ይህን ባህሪ እንዴት እንደሚያሰናክሉ እነሆ ።
<meta>
ውስጥ የተጠቀሰውን የእይታ እይታ ውጣwidth
ለእያንዳንዱ የፍርግርግ እርከን በነጠላ ስፋት ይሽሩት .container
፣ ለምሳሌ width: 970px !important;
ይሄ የሚመጣው ከነባሪው ቡትስትራፕ CSS በኋላ መሆኑን ያረጋግጡ። !important
በሚዲያ መጠይቆች ወይም አንዳንድ መራጭ-ፉ እንደ አማራጭ ማስወገድ ይችላሉ ።.col-xs-*
ክፍሎችን ከመካከለኛ/ትልቅ በተጨማሪ፣ ወይም በምትኩ ይጠቀሙ። አይጨነቁ፣ በጣም ትንሽ የሆነው የመሣሪያ ፍርግርግ ሁሉንም ጥራቶች ይዛመዳል።አሁንም ለ IE8 Respond.js ያስፈልገዎታል (የእኛ የሚዲያ ጥያቄዎች አሁንም ስላሉ እና ሊስተናገዱ ስለሚገባቸው)። ይህ የቡትስትራፕን "የሞባይል ጣቢያ" ገጽታዎችን ያሰናክላል።
እነዚህን እርምጃዎች በምሳሌ ላይ ተግባራዊ አድርገናል። የተወሰኑ ለውጦች ሲተገበሩ ለማየት የሱን ምንጭ ኮድ ያንብቡ።
ከአሮጌው የBootstrap ስሪት ወደ v3.x ለመዛወር ይፈልጋሉ? የስደት መመሪያችንን ይመልከቱ ።
ቡትስትራፕ በቅርብ ጊዜ የዴስክቶፕ እና የሞባይል አሳሾች ውስጥ በተሻለ ሁኔታ እንዲሰራ ነው የተሰራው፣ ይህ ማለት የቆዩ አሳሾች በተለየ መልኩ ቅጥ የተሰሩ፣ ሙሉ ለሙሉ የሚሰሩ ቢሆንም የተወሰኑ ክፍሎችን አተረጓጎም ሊያሳዩ ይችላሉ።
በተለይም የቅርብ ጊዜዎቹን የሚከተሉት አሳሾች እና መድረኮች እንደግፋለን ።
በቀጥታም ሆነ በመድረክ የድር እይታ ኤፒአይ የቅርብ ጊዜውን የWebKit፣ Blink ወይም Gecko ስሪት የሚጠቀሙ አማራጭ አሳሾች በግልጽ አይደገፉም። ሆኖም ቡትስትራፕ (በአብዛኛው) በእነዚህ አሳሾች ውስጥም በትክክል ማሳየት እና መስራት አለበት። የበለጠ የተለየ የድጋፍ መረጃ ከዚህ በታች ቀርቧል።
በአጠቃላይ፣ ቡትስትራፕ የእያንዳንዱን ዋና የመሣሪያ ስርዓት ነባሪ አሳሾች የቅርብ ጊዜ ስሪቶችን ይደግፋል። ፕሮክሲ አሳሾች (እንደ ኦፔራ ሚኒ፣ ኦፔራ ሞባይል ቱርቦ ሁነታ፣ ዩሲ ብሮውዘር ሚኒ፣ Amazon Silk ያሉ) እንደማይደገፉ ልብ ይበሉ።
Chrome | ፋየርፎክስ | ሳፋሪ | |
---|---|---|---|
አንድሮይድ | የሚደገፍ | የሚደገፍ | ኤን/ኤ |
iOS | የሚደገፍ | የሚደገፍ | የሚደገፍ |
በተመሳሳይ፣ የአብዛኛው የዴስክቶፕ አሳሾች የቅርብ ጊዜ ስሪቶች ይደገፋሉ።
Chrome | ፋየርፎክስ | ኢንተርኔት ኤክስፕሎረር | ኦፔራ | ሳፋሪ | |
---|---|---|---|---|---|
ማክ | የሚደገፍ | የሚደገፍ | ኤን/ኤ | የሚደገፍ | የሚደገፍ |
ዊንዶውስ | የሚደገፍ | የሚደገፍ | የሚደገፍ | የሚደገፍ | አይደገፍም |
በዊንዶውስ ላይ ኢንተርኔት ኤክስፕሎረር 8-11ን እንደግፋለን ።
ለፋየርፎክስ፣ ከቅርብ ጊዜው መደበኛ የተረጋጋ ልቀት በተጨማሪ፣ የቅርብ ጊዜውን የተራዘመ የድጋፍ ልቀት (ESR) የፋየርፎክስ ስሪትንም እንደግፋለን።
በይፋ ባይሆንም ቡትስትራፕ በChromium እና Chrome ለሊኑክስ፣ ፋየርፎክስ ለሊኑክስ እና ኢንተርኔት ኤክስፕሎረር 7 እንዲሁም ማይክሮሶፍት ኤጅ ላይ በደንብ መመልከት እና ጥሩ ባህሪ ማሳየት አለበት።
ለአንዳንድ የአሳሽ ሳንካዎች ዝርዝር ቡትስትራፕ ሊታገልባቸው የሚገቡ፣ የእኛን ግድግዳ ይመልከቱ የአሳሽ ሳንካዎች ።
ኢንተርኔት ኤክስፕሎረር 8 እና 9 እንዲሁ ይደገፋሉ፣ ሆኖም፣ እባክዎን አንዳንድ የ CSS3 ንብረቶች እና HTML5 ክፍሎች በእነዚህ አሳሾች ሙሉ በሙሉ እንደማይደገፉ ይወቁ። በተጨማሪም, Internet Explorer 8 የሚዲያ መጠይቅ ድጋፍን ለማንቃት Respond.js መጠቀምን ይጠይቃል።
ባህሪ | ኢንተርኔት ኤክስፕሎረር 8 | ኢንተርኔት ኤክስፕሎረር 9 |
---|---|---|
border-radius |
አይደገፍም | የሚደገፍ |
box-shadow |
አይደገፍም | የሚደገፍ |
transform |
አይደገፍም | የሚደገፍ፣ -ms ከቅድመ ቅጥያ ጋር |
transition |
አይደገፍም | |
placeholder |
አይደገፍም |
ስለ CSS3 እና HTML5 ባህሪያት የአሳሽ ድጋፍ ዝርዝሮችን ለማግኘት መጠቀም እችላለሁን... ይጎብኙ ።
ለኢንተርኔት ኤክስፕሎረር 8 በእድገትዎ እና በምርት አካባቢዎ ውስጥ Respond.jsን ሲጠቀሙ ከሚከተሉት ማስጠንቀቂያዎች ይጠንቀቁ።
Respond.jsን በሌላ (ንዑስ) ጎራ (ለምሳሌ በሲዲኤን ላይ) በተስተናገደው CSS መጠቀም አንዳንድ ተጨማሪ ማዋቀር ያስፈልገዋል። ለዝርዝሮች 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;
ጋር ሲጣመር ሙሉ በሙሉ አይደግፍም ። በዚህ ምክንያት፣ ከ v3.0.1 ጀምሮ፣ በ s. ላይ አንጠቀምም።min-width
max-width
min-height
max-height
max-width
.container
@font-face
IE8 ከ ጋር ሲጣመር አንዳንድ ችግሮች አሉት :before
። Bootstrap ያንን ጥምር ከግሊፊኮንስ ጋር ይጠቀማል። አንድ ገጽ ከተሸጎጠ እና ያለ መዳፊቱ በመስኮቱ ላይ ከተጫነ (ማለትም የማደስ አዝራሩን ይምቱ ወይም የሆነ ነገር በiframe ውስጥ ከጫኑ) ከዚያ ገጹ ቅርጸ-ቁምፊው ከመጫኑ በፊት ይገለጻል። በገጹ (አካል) ላይ ማንዣበብ የተወሰኑ አዶዎችን ያሳያል እና በቀሪዎቹ አዶዎች ላይ ማንዣበብ እነዚያንም ያሳያል። ለዝርዝር ቁጥር #13863 ይመልከቱ።
Bootstrap በአሮጌው የኢንተርኔት ኤክስፕሎረር ተኳሃኝነት ሁነታዎች አይደገፍም። ለ IE የቅርብ ጊዜውን የማሳያ ሁነታ እየተጠቀሙ መሆንዎን እርግጠኛ ለመሆን፣ በገጾችዎ ውስጥ ተገቢውን <meta>
መለያ ማካተት ያስቡበት
የማረም መሳሪያዎችን በመክፈት የሰነድ ሁነታን F12ያረጋግጡ: "የሰነድ ሁነታ" ን ተጭነው ያረጋግጡ.
በእያንዳንዱ የሚደገፍ የኢንተርኔት ኤክስፕሎረር ስሪት ውስጥ ምርጡን አተረጓጎም ለማረጋገጥ ይህ መለያ በሁሉም የ Bootstrap ሰነዶች እና ምሳሌዎች ውስጥ ተካትቷል።
ለበለጠ መረጃ ይህንን የStackOverflow ጥያቄ ይመልከቱ።
ኢንተርኔት ኤክስፕሎረር 10 የመሳሪያውን ስፋት ከመመልከቻው ስፋት አይለይም እና ስለዚህ በ Bootstrap's CSS ውስጥ ያሉትን የሚዲያ ጥያቄዎች በትክክል አይተገበርም። ይህንን ለማስተካከል በተለምዶ የ CSS ፈጣን ቅንጣቢ ማከል ብቻ ነው፡-
ነገር ግን ይህ ከዝማኔ 3 (በ GDR3) የቆዩ የዊንዶውስ ፎን 8 ስሪቶችን ለሚያሄዱ መሳሪያዎች አይሰራም ምክንያቱም እንደነዚህ ያሉ መሳሪያዎች ከጠባብ "ስልክ" እይታ ይልቅ በአብዛኛው የዴስክቶፕ እይታ እንዲያሳዩ ያደርጋል. ይህንን ለመቅረፍ፣ በስህተቱ ዙሪያ ለመስራት የሚከተለውን CSS እና JavaScript ማካተት ያስፈልግዎታል ።
ለበለጠ መረጃ እና የአጠቃቀም መመሪያዎች፣ Windows Phone 8 እና Device-Width ያንብቡ ።
ለቅድመ ዝግጅት፣ ይህንን በሁሉም የ Bootstrap ሰነዶች እና ምሳሌዎች ውስጥ እንደ ማሳያ እናጨምረዋለን።
ከ v7.1 በፊት ያለው የSafari ስሪቶች አተረጓጎም ሞተር እና ሳፋሪ ለ iOS v8.0 በእኛ .col-*-1
ፍርግርግ ክፍል ውስጥ ጥቅም ላይ በሚውሉ የአስርዮሽ ቦታዎች ብዛት ላይ ችግር ነበረበት። ስለዚህ 12 ነጠላ የፍርግርግ ዓምዶች ካሉዎት፣ ከሌሎች የአምዶች ረድፎች ጋር ሲነፃፀሩ አጭር መሆናቸውን ያስተውላሉ። ሳፋሪን/አይኦኤስን ከማዘመን በተጨማሪ ለመፍትሄዎች አንዳንድ አማራጮች አሉዎት፡-
.pull-right
የጠንካራ-ቀኝ አሰላለፍ ለማግኘት ወደ የመጨረሻው ፍርግርግ አምድዎ ያክሉoverflow: hidden
በኤለመንቱ ላይ ያለው ድጋፍ <body>
በ iOS እና Android ላይ በጣም የተገደበ ነው። ለዚያም በእነዚያ መሳሪያዎች ማሰሻ ውስጥ የሞዳልን ከላይ ወይም ታች ሲያሸብልሉ <body>
ይዘቱ መሸብለል ይጀምራል። የ Chrome ስህተት #175502 (በChrome v40 የተስተካከለ) እና WebKit bug #153852 ይመልከቱ ።
<input>
ከ iOS 9.3 ጀምሮ፣ ሞዳል ክፍት ሆኖ ሳለ፣ የጥቅልል ምልክት የመጀመሪያ ንክኪ በፅሁፍ ወይም በ ወሰን ውስጥ ከሆነ <textarea>
፣ <body>
በሞዳል ስር ያለው ይዘት በራሱ ሞዳል ፈንታ ይሸበለላል። WebKit ስህተት #153856 ይመልከቱ ።
እንዲሁም፣ ቋሚ ናቭባርን እየተጠቀሙ ከሆነ ወይም በሞዳል ውስጥ ግብዓቶችን እየተጠቀሙ ከሆነ፣ iOS ቨርቹዋል ኪቦርዱ ሲቀሰቀስ ቋሚ አባሎችን ቦታ የማያሻሽል የምስል ማሳያ ስህተት እንዳለው ልብ ይበሉ። ለዚህ ጥቂት መፍትሔዎች የእርስዎን አካላት ወደ መለወጥ position: absolute
ወይም ጊዜ ቆጣሪን በትኩረት ላይ በመጥራት አቀማመጡን በእጅ ለማስተካከል መሞከርን ያካትታሉ። ይህ በBootstrap አይስተናግድም፣ ስለዚህ ለትግበራዎ የትኛው መፍትሄ እንደሚሻል መወሰን የእርስዎ ውሳኔ ነው።
ኤለመንት በ .dropdown-backdrop
z-indexing ውስብስብነት ምክንያት በባህር ኃይል ውስጥ በ iOS ላይ ጥቅም ላይ አይውልም. ስለዚህ በ navbars ውስጥ ተቆልቋይዎችን ለመዝጋት ተቆልቋይ ኤለመንቱን (ወይም በ iOS ውስጥ የጠቅታ ክስተትን የሚያነሳ ሌላ ማንኛውም አካል) በቀጥታ ጠቅ ማድረግ አለብዎት ።
የገጽ ማጉላት በአንዳንድ ክፍሎች፣ በBootstrap እና በተቀረው ድር ላይ ያሉ ቅርሶችን መቅረቡ የማይቀር ነው። በጉዳዩ ላይ በመመስረት፣ ልናስተካክለው እንችላለን (መጀመሪያ ይፈልጉ እና አስፈላጊ ከሆነ ችግር ይክፈቱ)። ይሁን እንጂ ብዙውን ጊዜ ከጠለፋ መፍትሔዎች ውጪ ምንም ዓይነት ቀጥተኛ መፍትሔ ስለሌላቸው እነዚህን ችላ ማለት ይቀናናል።
:hover
/ :focus
በሞባይል ላይምንም እንኳን በአብዛኛዎቹ የንክኪ ስክሪኖች ላይ እውነተኛ ማንዣበብ ባይቻልም፣ አብዛኞቹ የሞባይል አሳሾች የማንዣበብ ድጋፍን ይኮርጃሉ እና :hover
“ተጣብቅ” ያደርጋሉ። በሌላ አገላለጽ፣ :hover
ቅጦች መተግበር የሚጀምሩት ኤለመንቱን መታ ካደረጉ በኋላ ነው እና ተጠቃሚው ሌላ አካል ከነካ በኋላ ብቻ መተግበሩን ያቆማሉ። ይህ የBootstrap :hover
ግዛቶች በእንደዚህ አይነት አሳሾች ላይ በማይፈለግ ሁኔታ "እንዲጣበቁ" ሊያደርግ ይችላል። አንዳንድ የሞባይል አሳሾችም :focus
በተመሳሳይ መልኩ ተጣብቀው ይሠራሉ። እንደነዚህ ያሉትን ቅጦች ሙሉ በሙሉ ከማስወገድ ውጭ ለእነዚህ ጉዳዮች ምንም ቀላል መፍትሄ በአሁኑ ጊዜ የለም.
በአንዳንድ ዘመናዊ አሳሾች ውስጥ እንኳን, ማተም አስቸጋሪ ሊሆን ይችላል.
በተለይም እንደ Chrome v32 እና የኅዳግ ቅንጅቶች ምንም ቢሆኑም፣ Chrome ድረ-ገጽ በሚታተምበት ጊዜ የሚዲያ ጥያቄዎችን በሚፈታበት ጊዜ ከአካላዊ የወረቀት መጠን በእጅጉ ያነሰ የመመልከቻ ስፋትን ይጠቀማል። ይህ የ Bootstrap ተጨማሪ-ትንሽ ፍርግርግ በሚታተምበት ጊዜ ሳይታሰብ እንዲነቃ ሊያደርግ ይችላል። ለተወሰኑ ዝርዝሮች እትም #12078 እና Chrome bug #273306 ይመልከቱ። የተጠቆሙ መፍትሔዎች፡-
@screen-*
የአታሚ ወረቀትዎ ከትርፍ-ትንሽ ይበልጣል ተብሎ እንዲታሰብ የአነስተኛ ተለዋዋጮችን እሴቶች ያብጁ ።እንዲሁም፣ እንደ Safari v8.0፣ ቋሚ ስፋት .container
s ሳፋሪ በሚታተምበት ጊዜ ያልተለመደ ትንሽ የቅርጸ-ቁምፊ መጠን እንዲጠቀም ሊያደርገው ይችላል። ለተጨማሪ ዝርዝሮች #14868 እና WebKit bug #138192 ይመልከቱ። ለዚህ አንዱ መፍትሄ የሚከተለውን CSS ማከል ነው።
ከሳጥኑ ውጭ፣ አንድሮይድ 4.1 (እና አንዳንድ አዲስ የተለቀቁም ይመስላል) በአሳሹ መተግበሪያ እንደ ምርጫው ነባሪ የድር አሳሽ (ከChrome በተቃራኒ) ይልካል። እንደ አለመታደል ሆኖ፣ የአሳሹ መተግበሪያ በአጠቃላይ ከCSS ጋር ብዙ ስህተቶች እና አለመጣጣሞች አሉት።
በንጥረ <select>
ነገሮች ላይ፣ አንድሮይድ ስቶክ አሳሽ ካለ border-radius
እና/ወይም border
ከተተገበረ የጎን መቆጣጠሪያዎችን አያሳይም። ( ይህን የStackOverflow ጥያቄ ይመልከቱ ይመልከቱ።) አፀያፊውን ሲኤስኤስ ለማስወገድ እና <select>
በአንድሮይድ የአክሲዮን አሳሽ ላይ ቅጥ የሌለው አካል ለማድረግ ከዚህ በታች ያለውን የኮድ ቅንጣቢ ይጠቀሙ። የተጠቃሚ ወኪሉ ማሽተት በChrome፣ Safari እና Mozilla አሳሾች ላይ ጣልቃ መግባትን ያስወግዳል።
ምሳሌ ማየት ይፈልጋሉ?ይህንን የJS Bin ማሳያ ይመልከቱ።
ለአሮጌ እና አስቸጋሪ አሳሾች በተቻለ መጠን የተሻለውን ተሞክሮ ለማቅረብ፣ Bootstrap የ CSS አሳሽ ጠለፋዎችን ይጠቀማል በመጠቀም ልዩ CSSን በተወሰኑ የአሳሽ ስሪቶች ላይ ኢላማ በማድረግ በአሳሾቹ ውስጥ ባሉ ስህተቶች ዙሪያ ለመስራት። እነዚህ ጠለፋዎች የCSS አረጋጋጮች ልክ እንዳልሆኑ ቅሬታ እንዲያሰሙ ያደርጋቸዋል። ባልና ሚስት ቦታዎች ላይ፣ ገና ሙሉ ደረጃቸውን ያልጠበቁ የደም መፍሰስ ጫፍ የሲኤስኤስ ባህሪያትን እንጠቀማለን፣ ነገር ግን እነዚህ ለእድገት መሻሻል ብቻ ያገለግላሉ።
እነዚህ የማረጋገጫ ማስጠንቀቂያዎች በተግባር ምንም አይሆኑም ምክንያቱም የኛ ሲ ኤስ ኤስ ጠለፋ ያልሆነው ክፍል ሙሉ በሙሉ ስለሚፀድቅ እና ጠላፊዎቹ ክፍሎቹ ጠላፊ ያልሆነውን ክፍል በአግባቡ ስራ ላይ ጣልቃ ስለማይገቡ እነዚህን ልዩ ማስጠንቀቂያዎች ሆን ብለን ችላ የምንለው።
የእኛ የኤችቲኤምኤል ዶክመንቶች ለተወሰነ የፋየርፎክስ ስህተት መፍትሄ በማካተታችን ምክንያት አንዳንድ ቀላል እና የማይጠቅሙ የኤችቲኤምኤል ማረጋገጫ ማስጠንቀቂያዎች አሏቸው ።
ምንም እንኳን የሶስተኛ ወገን ተሰኪዎችን ወይም ተጨማሪዎችን በይፋ ባንደግፍም በፕሮጀክቶችዎ ውስጥ ሊከሰቱ የሚችሉ ችግሮችን ለማስወገድ አንዳንድ ጠቃሚ ምክሮችን እንሰጣለን ።
አንዳንድ የሶስተኛ ወገን ሶፍትዌሮች፣ ጎግል ካርታዎች እና ጉግል ብጁ የፍለጋ ሞተርን ጨምሮ፣ ከ Bootstrap ጋር ይጋጫሉ በ * { box-sizing: border-box; }
, ይህን የሚያደርገው ህግ padding
የአንድን ንጥረ ነገር የመጨረሻ ስሌት ስፋት ላይ ተጽዕኖ አያሳድርም። ስለ ሣጥን ሞዴል እና መጠን በ CSS Tricks የበለጠ ይወቁ ።
በዐውደ-ጽሑፉ ላይ በመመስረት፣ እንደ አስፈላጊነቱ መሻር ይችላሉ (አማራጭ 1) ወይም የሳጥን መጠንን ለሁሉም ክልሎች እንደገና ማስጀመር ይችላሉ (አማራጭ 2)።
Bootstrap የተለመዱ የድር ደረጃዎችን ይከተላል እና በትንሹ ተጨማሪ ጥረት - AT ለሚጠቀሙ ሰዎች ተደራሽ የሆኑ ጣቢያዎችን ለመፍጠር ጥቅም ላይ ሊውል ይችላል ።
አሰሳዎ ብዙ አገናኞችን ከያዘ እና በ DOM ውስጥ ካለው ዋና ይዘት በፊት የሚመጣ ከሆነ ከዳሰሳው Skip to main content
በፊት አገናኝ ያክሉ (ለቀላል ማብራሪያ፣ ይህን የA11Y ፕሮጄክት ስለ መዝለል አሰሳ አገናኞች ይመልከቱ)። ክፍሉን መጠቀም .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 ፍቃድ ነው እና የቅጂ መብት 2019 ትዊተር ነው። ወደ ትናንሽ ቁርጥራጮች የተቀቀለ, በሚከተሉት ሁኔታዎች ሊገለጽ ይችላል.
ሙሉው የ Bootstrap ፍቃድ በፕሮጀክት ማከማቻ ማከማቻ ውስጥ ለበለጠ መረጃ ይገኛል።
የማህበረሰብ አባላት የBootstrapን ሰነዶች ወደ ተለያዩ ቋንቋዎች ተርጉመዋል። አንዳቸውም በይፋ አይደገፉም እና ሁልጊዜ ወቅታዊ ላይሆኑ ይችላሉ።
ትርጉሞችን ለማደራጀት ወይም ለማስተናገድ አንረዳም፣ እኛ ዝም ብለን እናገናኛቸዋለን።
አዲስ ወይም የተሻለ ትርጉም ጨርሰዋል? ወደ ዝርዝራችን ለመጨመር የመጎተት ጥያቄን ይክፈቱ።