መጠወቒታት

ንተግባራት ኣብ ቅጥዕታት፣ ዝርርባትን ካልእን ምስ ደገፍ ንብዙሕ ዓቐናት፣ ኩነታትን ካልእን ናይ 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 ክወሃቦም ይግባእ ስክሪን ሪደርስ ዝበሃሉ ምዃኖም ይፍለጥ።

ሊንክ

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

ናይ ምትእስሳር ተግባር መጠንቀቕታ

እቲ .disabledክፍሊ ንናይ s pointer-events: noneናይ ምትእስሳር ተግባር ንምስንኻል ንምፍታን ይጥቀመሉ <a>፣ ግን እቲ CSS ንብረት ገና ደረጃ የብሉን። ብተወሳኺ፡ ዋላ ኣብ መርበብ ሓበሬታታት ዝድግፉ pointer-events: none፡ ምዝዋር ቁልፊ ሰሌዳ ዘይተጸልወ ኮይኑ ይቕጽል፡ እዚ ማለት ድማ ርእዮም ዘለዎም ተጠቀምቲ ቁልፊ ሰሌዳን ተጠቀምቲ ሓጋዚ ቴክኖሎጂታትን ጌና ነዞም መላግቦታት ከንቀሳቕሱ ክኽእሉ እዮም። ስለዚ ውሑስ ንምዃን tabindex="-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>

ሳጹን ምልክትን መጠወቒታት ሬድዮን

ናይ ቡትስትራፕ .buttonቅዲታት ኣብ ካልኦት ባእታታት ከም <label>s ክትግበሩ ይኽእሉ፡ ንመቆጻጸሪ ሳጹን ወይ ሬድዮ ቅዲ መጠወቒ ምቕያር ንምሃብ። data-toggle="buttons"ነቶም ዝተቐየሩ መጠወቒታት ዝሓዘ ናብ ሓደ ወስኸሉ .btn-groupብመንገዲ ጃቫስክሪፕት ናይ ምቕያር ባህርያቶም ንምንቅስቓስን ኣብ ውሽጢ መጠወቒታትካ .btn-group-toggleንዘሎ s ቅዲ ንምግባርን ወስኸሉ። ሓደ ንጽል ምእታው ዝሰርሑ መጠወቒታት ወይ ጉጅለታት ካብኣቶም ክትፈጥር ከም እትኽእል ኣስተውዕል።<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')`	ናይ ሓደ ባእታ መጠወቒ የጥፍኦ።