አዝራሮች
ለብዙ መጠኖች፣ ግዛቶች እና ሌሎችም ላሉ ድርጊቶች የ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ከክፍል ጋር የተደበቀ ተጨማሪ ጽሑፍ።
.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" role="button" aria-disabled="true">Primary link</a>
<a href="#" class="btn btn-secondary btn-lg disabled" 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" autocomplete="off">
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 autocomplete="off"> 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" autocomplete="off" checked> Active
</label>
<label class="btn btn-secondary">
<input type="radio" name="options" id="option2" autocomplete="off"> Radio
</label>
<label class="btn btn-secondary">
<input type="radio" name="options" id="option3" autocomplete="off"> Radio
</label>
</div>| ዘዴ | መግለጫ |
|---|---|
$().button('toggle') |
የግፋ ሁኔታን ይቀያይራል። አዝራሩ የነቃውን መልክ ይሰጣል። |
$().button('dispose') |
የአንድ ንጥረ ነገር አዝራር ያጠፋል. |