መጠወቒታት
ንተግባራት ኣብ ቅጥዕታት፣ ዝርርባትን ካልእን ምስ ደገፍ ንብዙሕ ዓቐናት፣ ኩነታትን ካልእን ናይ 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
ኣብ ሳስ ንነፍሲ ወከፍ መጠወቒ ምጥቕላል ጽሑፍ ንምስንኻል ከተቐምጥ ትኽእል ኢኻ ።
ናይ መጠወቒ መለለዪታት
እቶም ክፍልታት ምስቲ ባእታ .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
ኣብ መልህቕ መጠወቒታት ንምስንኻል ተሓዊሶም ኣለዉ። ኣብተን ነቲ ባህሪ ዝድግፋ ዳህሰስቲ፡ ነቲ ዝተሰናኸለ መመልከቲ ፈጺምካ ኣይትርእዮን ኢኻ። - ዝጥቀሙ ስንኩላን መጠወቒታት ንኹነታት ናይቲ ባእታ ንሓጋዚ ቴክኖሎጂታት ንምምልካት ባህሪ
<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>
እዚ ናይ CSS ንብረት ገና ንHTML ደረጃ ከምዘይተገብረሉ ኣስተውዕል፣ ግን ኩሎም ዘመናውያን ዳህሰስቲ ይድግፍዎ። ብተወሳኺ፡ ዋላ ኣብ መርበብ ሓበሬታታት ዝድግፉ 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>
ሳጹን ምልክትን መጠወቒታት ሬድዮን
ናይ ቡትስትራፕ .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> 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') |
ናይ ሓደ ባእታ መጠወቒ የጥፍኦ። |