አዝራሮች
ለብዙ መጠኖች፣ ግዛቶች እና ሌሎችም ላሉ ድርጊቶች የBootstrapን ብጁ የአዝራር ቅጦችን ይጠቀሙ።
ምሳሌዎች
ቡትስትራፕ አስቀድሞ የተገለጹ በርካታ የአዝራር ዘይቤዎችን ያካትታል፣ እያንዳንዱም የራሱን የትርጉም ዓላማ የሚያገለግል፣ ለበለጠ ቁጥጥር ጥቂት ተጨማሪዎች ይጣላል።
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>
<button type="button" class="btn btn-link">Link</button>
ለረዳት ቴክኖሎጂዎች ትርጉም መስጠት
ትርጉምን ለመጨመር ቀለምን መጠቀም ምስላዊ ማሳያን ብቻ ያቀርባል, ይህም ለረዳት ቴክኖሎጂዎች ተጠቃሚዎች አይተላለፍም - እንደ ስክሪን አንባቢዎች. በቀለም የተወከለው መረጃ ከይዘቱ (ለምሳሌ ከሚታየው ጽሑፍ) ግልጽ መሆኑን ወይም በአማራጭ ዘዴዎች መካተቱን ያረጋግጡ፣ ለምሳሌ .sr-only
ከክፍል ጋር የተደበቀ ተጨማሪ ጽሑፍ።
የጽሑፍ መጠቅለያን አሰናክል
የአዝራሩ ጽሑፍ እንዲጠቀለል ካልፈለጉ .text-nowrap
ክፍሉን ወደ አዝራሩ ማከል ይችላሉ። $btn-white-space: nowrap
በ Sass ውስጥ ለእያንዳንዱ አዝራር የጽሑፍ መጠቅለያን ለማሰናከል ማዘጋጀት ይችላሉ።
የአዝራር መለያዎች
.btn
ክፍሎቹ ከኤለመንቱ ጋር ጥቅም ላይ እንዲውሉ የተነደፉ ናቸው <button>
. ነገር ግን፣ እነዚህን ክፍሎች በ ላይ መጠቀም ትችላለህ <a>
( <input>
ምንም እንኳን አንዳንድ አሳሾች ትንሽ ለየት ያለ አተረጓጎም ሊተገበሩ ቢችሉም)።
የውስጠ-ገጽ ተግባርን ለመቀስቀስ በሚያገለግሉ አባሎች ላይ የአዝራር ክፍሎችን <a>
(እንደ መሰባበር ይዘት) ሲጠቀሙ፣ አሁን ባለው ገጽ ውስጥ ካሉ አዲስ ገጾች ወይም ክፍሎች ጋር ከማገናኘት ይልቅ፣ እነዚህ ማገናኛዎች role="button"
ዓላማቸውን በአግባቡ ለመሳሰሉ አጋዥ ቴክኖሎጂዎች ለማስተላለፍ መሰጠት አለባቸው። ስክሪን አንባቢዎች.
<a class="btn btn-primary" href="#" role="button">Link</a>
<button class="btn btn-primary" type="submit">Button</button>
<input class="btn btn-primary" type="button" value="Input">
<input class="btn btn-primary" type="submit" value="Submit">
<input class="btn btn-primary" type="reset" value="Reset">
የማውጫ ቁልፎች
አንድ አዝራር ይፈልጋሉ, ግን የሚያመጡት ከባድ የጀርባ ቀለሞች አይደሉም? .btn-outline-*
በማንኛውም አዝራር ላይ ሁሉንም የጀርባ ምስሎችን እና ቀለሞችን ለማስወገድ ነባሪውን የመቀየሪያ ክፍሎችን በእነዚያ ይተኩ ።
<button type="button" class="btn btn-outline-primary">Primary</button>
<button type="button" class="btn btn-outline-secondary">Secondary</button>
<button type="button" class="btn btn-outline-success">Success</button>
<button type="button" class="btn btn-outline-danger">Danger</button>
<button type="button" class="btn btn-outline-warning">Warning</button>
<button type="button" class="btn btn-outline-info">Info</button>
<button type="button" class="btn btn-outline-light">Light</button>
<button type="button" class="btn btn-outline-dark">Dark</button>
መጠኖች
ትልልቅ ወይም ትንሽ አዝራሮች ይፈልጋሉ? አክል .btn-lg
ወይም .btn-sm
ለተጨማሪ መጠኖች.
<button type="button" class="btn btn-primary btn-lg">Large button</button>
<button type="button" class="btn btn-secondary btn-lg">Large button</button>
<button type="button" class="btn btn-primary btn-sm">Small button</button>
<button type="button" class="btn btn-secondary btn-sm">Small button</button>
በማከል የወላጆችን ሙሉ ስፋት የሚሸፍኑ የደረጃ አዝራሮችን ይፍጠሩ .btn-block
።
<button type="button" class="btn btn-primary btn-lg btn-block">Block level button</button>
<button type="button" class="btn btn-secondary btn-lg btn-block">Block level button</button>
ንቁ ሁኔታ
አዝራሮች ተጭነው የሚታዩት ከጨለማ ዳራ፣ ጠቆር ያለ ድንበር፣ እና ጥላዎች ሲነቁ፣ የገባው ጥላ። የውሸት ክፍል ሲጠቀሙ ወደ s ክፍል ማከል አያስፈልግም<button>
። ነገር ግን፣ ግዛትን በፕሮግራም መድገም ካለብህ አሁንም ተመሳሳይ ንቁ ገጽታን በ .active
(እና ባህሪውን ማካተት ) ማስገደድ ትችላለህ።aria-pressed=“true”
<a href="#" class="btn btn-primary btn-lg active" role="button" aria-pressed="true">Primary link</a>
<a href="#" class="btn btn-secondary btn-lg active" role="button" aria-pressed="true">Link</a>
የአካል ጉዳተኛ ሁኔታ
disabled
የቦሊያንን ባህሪ ወደ ማንኛውም <button>
አካል በማከል አዝራሮች የቦዘኑ እንዲመስሉ ያድርጉ ።
<button type="button" class="btn btn-lg btn-primary" disabled>Primary button</button>
<button type="button" class="btn btn-secondary btn-lg" disabled>Button</button>
ኤለመንቱን በመጠቀም የተሰናከሉ አዝራሮች <a>
ባህሪያቸው ትንሽ የተለየ ነው፡-
<a>
s አይነታውን አይደግፍምdisabled
፣ ስለዚህ.disabled
ክፍሉን በምስሉ የተበላሸ እንዲመስል ማከል አለብህ።pointer-events
ሁሉንም መልህቅ ቁልፎችን ለማሰናከል አንዳንድ ለወደፊት ተስማሚ የሆኑ ቅጦች ተካትተዋል ። ንብረቱን በሚደግፉ አሳሾች ውስጥ የአካል ጉዳተኛ ጠቋሚውን በጭራሽ አያዩም።- እየተጠቀሙ ያሉት የተሰናከሉ አዝራሮች የንጥሉን ሁኔታ ለረዳት ቴክኖሎጂዎች ለማመልከት ባህሪውን
<a>
ማካተት አለባቸው ።aria-disabled="true"
- እየተጠቀሙ ያሉት የተሰናከሉ አዝራሮች ባህሪውን ማካተት
<a>
የለባቸውምhref
።
<a class="btn btn-primary btn-lg disabled" role="button" aria-disabled="true">Primary link</a>
<a class="btn btn-secondary btn-lg disabled" role="button" aria-disabled="true">Link</a>
የአገናኝ ተግባራዊነት ማስጠንቀቂያ
href
ባህሪውን በአካል ጉዳተኛ አገናኝ ላይ ማቆየት ያለብዎትን ጉዳዮች ለመሸፈን .disabled
ክፍሉ የ s pointer-events: none
አገናኝ ተግባርን ለማሰናከል ይሞክራል ። <a>
ይህ የሲኤስኤስ ንብረት ለኤችቲኤምኤል ገና ደረጃውን ያልጠበቀ መሆኑን ልብ ይበሉ፣ ግን ሁሉም ዘመናዊ አሳሾች ይደግፋሉ። በተጨማሪም፣ በሚደግፉ አሳሾች ውስጥ እንኳን pointer-events: none
፣ የቁልፍ ሰሌዳ አሰሳ ሳይነካ ይቀራል፣ ይህም ማለት ማየት የተሳናቸው የቁልፍ ሰሌዳ ተጠቃሚዎች እና አጋዥ ቴክኖሎጂ ተጠቃሚዎች አሁንም እነዚህን አገናኞች ማግበር ይችላሉ። ስለዚህ ለደህንነት ሲባል aria-disabled="true"
፣ በተጨማሪም፣ በእነዚህ ማገናኛዎች ላይ የኪቦርድ ትኩረትን እንዳይቀበሉ ለመከላከል ባህሪን ያካትቱ tabindex="-1"
እና ተግባራቸውን ሙሉ በሙሉ ለማሰናከል ብጁ ጃቫ ስክሪፕትን ይጠቀሙ።
<a href="#" class="btn btn-primary btn-lg disabled" tabindex="-1" role="button" aria-disabled="true">Primary link</a>
<a href="#" class="btn btn-secondary btn-lg disabled" tabindex="-1" role="button" aria-disabled="true">Link</a>
የአዝራር ተሰኪ
በአዝራሮች ተጨማሪ ያድርጉ። የቁጥጥር አዝራሩ ሁኔታ ወይም የአዝራሮች ቡድን ፍጠር ለተጨማሪ ክፍሎች እንደ የመሳሪያ አሞሌዎች።
ግዛቶችን ቀያይር
data-toggle="button"
የአዝራር ሁኔታን ለመቀየር ያክሉ active
። አንድ አዝራር አስቀድመው እየቀያየሩ ከሆነ .active
ክፍሉን እራስዎ መጨመር እና aria-pressed="true"
ወደ <button>
.
<button type="button" class="btn btn-primary" data-toggle="button" aria-pressed="false">
Single toggle
</button>
አመልካች ሳጥን እና የሬዲዮ አዝራሮች
የአመልካች ሳጥን ወይም የሬዲዮ ቅጥ አዝራር መቀያየርን ለማቅረብ የቡትስትራፕ ቅጦች እንደ s ባሉ .button
ሌሎች አካላት ላይ ሊተገበሩ ይችላሉ ። በጃቫስክሪፕት በኩል የመቀያየር ባህሪያቸውን ለማንቃት እነዚያን የተሻሻሉ አዝራሮች ወደያዙት ያክሉ እና በአዝራሮችዎ <label>
ውስጥ data-toggle="buttons"
ያሉትን ቅጥዎች ያክሉ ። በነጠላ ግቤት የተጎለበተ አዝራሮችን ወይም ቡድኖችን መፍጠር እንደሚችሉ ልብ ይበሉ።.btn-group
.btn-group-toggle
<input>
የእነዚህ አዝራሮች የተረጋገጠ ሁኔታ የሚዘምነው በአዝራሩ ላይ ባለው ክስተት ብቻclick
ነው ። ግብአቱን ለማዘመን ሌላ ዘዴ ከተጠቀሙ—ለምሳሌ፣ የግብአቱን ንብረት <input type="reset">
በእጅ ወይም በመተግበር — በእጅ checked
መቀያየር ያስፈልግዎታል ።.active
<label>
.active
አስቀድመው ምልክት የተደረገባቸው አዝራሮች ክፍሉን ወደ ግቤት እራስዎ ማከል እንደሚፈልጉ ልብ ይበሉ <label>
።
<div class="btn-group-toggle" data-toggle="buttons">
<label class="btn btn-secondary active">
<input type="checkbox" checked> Checked
</label>
</div>
<div class="btn-group btn-group-toggle" data-toggle="buttons">
<label class="btn btn-secondary active">
<input type="radio" name="options" id="option1" checked> Active
</label>
<label class="btn btn-secondary">
<input type="radio" name="options" id="option2"> Radio
</label>
<label class="btn btn-secondary">
<input type="radio" name="options" id="option3"> Radio
</label>
</div>
ዘዴዎች
ዘዴ | መግለጫ |
---|---|
$().button('toggle') |
የግፋ ሁኔታን ይቀያይራል። አዝራሩ የነቃውን መልክ ይሰጣል። |
$().button('dispose') |
የአንድ ንጥረ ነገር አዝራር ያጠፋል. |