አዝራሮች

ለብዙ መጠኖች፣ ግዛቶች እና ሌሎችም ላሉ ድርጊቶች የ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ሁሉንም መልህቅ ቁልፎችን ለማሰናከል አንዳንድ ለወደፊት ተስማሚ የሆኑ ቅጦች ተካትተዋል ። ያንን ንብረት በሚደግፉ አሳሾች ውስጥ የአካል ጉዳተኛ ጠቋሚውን በጭራሽ አያዩም።
aria-disabled="true"የተሰናከሉ አዝራሮች የንጥሉን ሁኔታ ለረዳት ቴክኖሎጂዎች ለማመልከት ባህሪውን ማካተት አለባቸው ።

ዋና አገናኝ አገናኝ

<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>

የአገናኝ ተግባራዊነት ማስጠንቀቂያ

ክፍሉ የ s አገናኝ ተግባርን ለማሰናከል ለመሞከር .disabledይጠቀማል ፣ ነገር ግን የCSS ንብረት እስካሁን ደረጃውን የጠበቀ አይደለም። በተጨማሪም ድጋፍ በሚሰጡ አሳሾች ውስጥ እንኳን የቁልፍ ሰሌዳ አሰሳ ምንም አልተነካም ማለት ነው፣ ይህ ማለት ማየት የተሳናቸው የቁልፍ ሰሌዳ ተጠቃሚዎች እና አጋዥ ቴክኖሎጂ ተጠቃሚዎች አሁንም እነዚህን አገናኞች ማግበር ይችላሉ። ስለዚህ ደህንነትን ለመጠበቅ በእነዚህ ማገናኛዎች ላይ (የቁልፍ ሰሌዳ ትኩረትን እንዳይቀበሉ ለመከላከል) ባህሪ ያክሉ እና ተግባራቸውን ለማሰናከል ብጁ ጃቫ ስክሪፕትን ይጠቀሙ።pointer-events: none<a>pointer-events: nonetabindex="-1"

የአዝራር ተሰኪ

በአዝራሮች ተጨማሪ ያድርጉ። የቁጥጥር አዝራሩ ሁኔታ ወይም የአዝራሮች ቡድን ፍጠር ለተጨማሪ ክፍሎች እንደ የመሳሪያ አሞሌዎች።

ግዛቶችን ቀያይር

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')`	የአንድ ንጥረ ነገር አዝራር ያጠፋል.