Sourceአዝራሮች
ለብዙ መጠኖች፣ ግዛቶች እና ሌሎችም ላሉ ድርጊቶች የBootstrapን ብጁ የአዝራር ቅጦችን ይጠቀሙ።
ቡትስትራፕ አስቀድሞ የተገለጹ በርካታ የአዝራር ዘይቤዎችን ያካትታል፣ እያንዳንዱም የራሱን የትርጉም ዓላማ የሚያገለግል፣ ለበለጠ ቁጥጥር ጥቂት ተጨማሪዎች ይጣላል።
ለረዳት ቴክኖሎጂዎች ትርጉም መስጠት
ትርጉምን ለመጨመር ቀለምን መጠቀም ምስላዊ ማሳያን ብቻ ያቀርባል, ይህም ለረዳት ቴክኖሎጂዎች ተጠቃሚዎች አይተላለፍም - እንደ ስክሪን አንባቢዎች. በቀለም የተወከለው መረጃ ከይዘቱ (ለምሳሌ ከሚታየው ጽሑፍ) ግልጽ መሆኑን ወይም በአማራጭ ዘዴዎች መካተቱን ያረጋግጡ፣ ለምሳሌ .sr-only
ከክፍል ጋር የተደበቀ ተጨማሪ ጽሑፍ።
.btn
ክፍሎቹ ከኤለመንቱ ጋር ጥቅም ላይ እንዲውሉ የተነደፉ ናቸው <button>
. ነገር ግን፣ እነዚህን ክፍሎች በ ላይ መጠቀም ትችላለህ <a>
( <input>
ምንም እንኳን አንዳንድ አሳሾች ትንሽ ለየት ያለ አተረጓጎም ሊተገበሩ ቢችሉም)።
የውስጠ-ገጽ ተግባርን ለመቀስቀስ በሚያገለግሉ አባሎች ላይ የአዝራር ክፍሎችን <a>
(እንደ መሰባበር ይዘት) ሲጠቀሙ፣ አሁን ባለው ገጽ ውስጥ ካሉ አዲስ ገጾች ወይም ክፍሎች ጋር ከማገናኘት ይልቅ፣ እነዚህ ማገናኛዎች role="button"
ዓላማቸውን በአግባቡ ለመሳሰሉ አጋዥ ቴክኖሎጂዎች ለማስተላለፍ መሰጠት አለባቸው። ስክሪን አንባቢዎች.
አንድ አዝራር ይፈልጋሉ, ግን የሚያመጡት ከባድ የጀርባ ቀለሞች አይደሉም? .btn-outline-*
በማንኛውም አዝራር ላይ ሁሉንም የጀርባ ምስሎችን እና ቀለሞችን ለማስወገድ ነባሪውን የመቀየሪያ ክፍሎችን በእነዚያ ይተኩ ።
ትልልቅ ወይም ትንሽ አዝራሮች ይፈልጋሉ? አክል .btn-lg
ወይም .btn-sm
ለተጨማሪ መጠኖች.
በማከል የወላጆችን ሙሉ ስፋት የሚሸፍኑ የደረጃ አዝራሮችን ይፍጠሩ .btn-block
።
ገባሪ ሲሆኑ አዝራሮች ተጭነው ይታያሉ (ከጨለማው ዳራ፣ ከጠቆረ ድንበር እና ከውስጥም ጥላ ጋር)። የውሸት ክፍል ሲጠቀሙ ወደ s ክፍል ማከል አያስፈልግም<button>
። ነገር ግን፣ ግዛትን በፕሮግራም መድገም ካለብህ አሁንም ተመሳሳይ ንቁ ገጽታን በ .active
(እና ባህሪውን ማካተት ) ማስገደድ ትችላለህ።aria-pressed="true"
disabled
የቦሊያንን ባህሪ ወደ ማንኛውም <button>
አካል በማከል አዝራሮች የቦዘኑ እንዲመስሉ ያድርጉ ።
ኤለመንቱን በመጠቀም የተሰናከሉ አዝራሮች <a>
ባህሪያቸው ትንሽ የተለየ ነው፡-
<a>
s አይነታውን አይደግፍም disabled
፣ ስለዚህ .disabled
ክፍሉን በምስሉ የተበላሸ እንዲመስል ማከል አለብህ።
pointer-events
ሁሉንም መልህቅ ቁልፎችን ለማሰናከል አንዳንድ ለወደፊት ተስማሚ የሆኑ ቅጦች ተካትተዋል ። ንብረቱን በሚደግፉ አሳሾች ውስጥ የአካል ጉዳተኛ ጠቋሚውን በጭራሽ አያዩም።
aria-disabled="true"
የተሰናከሉ አዝራሮች የንጥሉን ሁኔታ ለረዳት ቴክኖሎጂዎች ለማመልከት ባህሪውን ማካተት አለባቸው ።
የአገናኝ ተግባራዊነት ማስጠንቀቂያ
ክፍሉ የ s አገናኝ ተግባርን ለማሰናከል ለመሞከር .disabled
ይጠቀማል ፣ ነገር ግን የCSS ንብረት እስካሁን ደረጃውን የጠበቀ አይደለም። በተጨማሪም፣ በሚደግፉ አሳሾች ውስጥ እንኳን ፣ የቁልፍ ሰሌዳ አሰሳ ሳይነካ ይቀራል፣ ይህም ማለት ማየት የተሳናቸው የቁልፍ ሰሌዳ ተጠቃሚዎች እና አጋዥ ቴክኖሎጂ ተጠቃሚዎች አሁንም እነዚህን አገናኞች ማግበር ይችላሉ። ስለዚህ ደህንነትን ለመጠበቅ በእነዚህ ማገናኛዎች ላይ (የቁልፍ ሰሌዳ ትኩረትን እንዳይቀበሉ ለመከላከል) ባህሪ ያክሉ እና ተግባራቸውን ለማሰናከል ብጁ ጃቫ ስክሪፕትን ይጠቀሙ።pointer-events: none
<a>
pointer-events: none
tabindex="-1"
በአዝራሮች ተጨማሪ ያድርጉ። የቁጥጥር አዝራሩ ሁኔታ ወይም የአዝራሮች ቡድን ፍጠር ለተጨማሪ ክፍሎች እንደ የመሳሪያ አሞሌዎች።
data-toggle="button"
የአዝራር ሁኔታን ለመቀየር ያክሉ active
። አንድ አዝራር አስቀድመው እየቀያየሩ ከሆነ .active
ክፍሉን እራስዎ መጨመር እና aria-pressed="true"
ወደ <button>
.
የአመልካች ሳጥን ወይም የሬዲዮ ቅጥ አዝራር መቀያየርን ለማቅረብ የቡትስትራፕ ቅጦች እንደ s ባሉ .button
ሌሎች አካላት ላይ ሊተገበሩ ይችላሉ ። በጃቫስክሪፕት በኩል የመቀያየር ባህሪያቸውን ለማንቃት እነዚያን የተሻሻሉ አዝራሮች ወደያዙት ያክሉ እና በአዝራሮችዎ <label>
ውስጥ data-toggle="buttons"
ያሉትን ቅጥዎች ያክሉ ። በነጠላ ግቤት የተጎለበተ አዝራሮችን ወይም ቡድኖችን መፍጠር እንደሚችሉ ልብ ይበሉ።.btn-group
.btn-group-toggle
<input>
የእነዚህ አዝራሮች የተረጋገጠ ሁኔታ የሚዘምነው በአዝራሩ ላይ ባለው ክስተት ብቻclick
ነው ። ግብአቱን ለማዘመን ሌላ ዘዴ ከተጠቀሙ—ለምሳሌ፣ የግብአቱን ንብረት <input type="reset">
በእጅ ወይም በመተግበር — በእጅ checked
መቀያየር ያስፈልግዎታል ።.active
<label>
.active
አስቀድመው ምልክት የተደረገባቸው አዝራሮች ክፍሉን ወደ ግቤት እራስዎ ማከል እንደሚፈልጉ ልብ ይበሉ <label>
።
ዘዴ |
መግለጫ |
$().button('toggle') |
የግፋ ሁኔታን ይቀያይራል። አዝራሩ የነቃውን መልክ ይሰጣል። |
$().button('dispose') |
የአንድ ንጥረ ነገር አዝራር ያጠፋል. |