መጠወቒ ጉጅለ
ተኸታታሊ መጠወቒታት ብሓባር ኣብ ሓደ መስመር ምስቲ ናይ መጠወቒ ጉጅለ ኣጥርዩ፣ ብጃቫስክሪፕት ድማ ልዕለ-ሓይሊ ሃቦም።
መሰረታዊ ኣብነት
ተኸታታሊ መጠወቒታት ብ .btn
in ጠቕልል .btn-group
። ኣብ ኣማራጺ ጃቫስክሪፕት ሬድዮን ምልክት ሳጹን ቅዲ ባህሪ ብመጠወቒታትና ፕላግ-ኢን ወስኹ ።
<div class="btn-group" role="group" aria-label="Basic example">
<button type="button" class="btn btn-secondary">Left</button>
<button type="button" class="btn btn-secondary">Middle</button>
<button type="button" class="btn btn-secondary">Right</button>
</div>
ቅኑዕ role
ምርግጋጽን ምልክት ምሃብን።
ሓገዝቲ ቴክኖሎጂታት (ከም ስክሪን ሪደር) ተኸታታሊ መጠወቒታት ከም ዝተጠርነፉ ንኸመሓላልፉ፡ ግቡእ role
ባህሪ ክቐርብ ኣለዎ። ንጉጅለታት መጠወቒ፡ እዚ ምኾነ role="group"
፡ መሳርሒታት ባር ድማ role="toolbar"
.
ብተወሳኺ፡ ጉጅለታትን መሳርሒታትን ግሉጽ ስያመ ክወሃቦም ኣለዎ፡ ምኽንያቱ መብዛሕትኦም ሓገዝቲ ቴክኖሎጂታት ብኻልእ መገዲ፡ ዋላ’ኳ ቅኑዕ ናይ ተራ ባህሪ እንተሃለዎም፡ ኣይክእውጁን እዮም። ኣብዚ ዝተዋህበ ኣብነታት፡ ንጥቀም aria-label
, ግን ከም ኣማራጺታት aria-labelledby
እውን ክጥቀሙ ይኽእሉ እዮም።
ናይ መጠወቒ መሳርሒ ባር
ስብስባት ናይ መጠወቒ ጉጅለታት ናብ ናይ መጠወቒ መሳርሒታት ንዝያዳ ዝተሓላለኹ ኣካላት ኣወሃሂድካ። ንጉጅለታት፣ መጠወቒታትን ካልእን ንምፍላጥ ከም ኣድላይነቱ ናይ ዩቲሊቲ ክፍልታት ተጠቐም።
<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
<div class="btn-group mr-2" role="group" aria-label="First group">
<button type="button" class="btn btn-secondary">1</button>
<button type="button" class="btn btn-secondary">2</button>
<button type="button" class="btn btn-secondary">3</button>
<button type="button" class="btn btn-secondary">4</button>
</div>
<div class="btn-group mr-2" role="group" aria-label="Second group">
<button type="button" class="btn btn-secondary">5</button>
<button type="button" class="btn btn-secondary">6</button>
<button type="button" class="btn btn-secondary">7</button>
</div>
<div class="btn-group" role="group" aria-label="Third group">
<button type="button" class="btn btn-secondary">8</button>
</div>
</div>
ናይ ምእታው ጉጅለታት ምስ ናይ መጠወቒ ጉጅለታት ኣብ መሳርሒታትካ ክትሓዋውሶም ናጻ ትኸውን። ልክዕ ከምቲ ኣብ ላዕሊ ዘሎ ኣብነት፡ ንነገራት ብግቡእ ቦታ ንምሃብ ግን ገለ ዩቲሊቲታት ከድልየካ ተኽእሎ ኣሎ።
<div class="btn-toolbar mb-3" role="toolbar" aria-label="Toolbar with button groups">
<div class="btn-group mr-2" role="group" aria-label="First group">
<button type="button" class="btn btn-secondary">1</button>
<button type="button" class="btn btn-secondary">2</button>
<button type="button" class="btn btn-secondary">3</button>
<button type="button" class="btn btn-secondary">4</button>
</div>
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text" id="btnGroupAddon">@</div>
</div>
<input type="text" class="form-control" placeholder="Input group example" aria-label="Input group example" aria-describedby="btnGroupAddon">
</div>
</div>
<div class="btn-toolbar justify-content-between" role="toolbar" aria-label="Toolbar with button groups">
<div class="btn-group" role="group" aria-label="First group">
<button type="button" class="btn btn-secondary">1</button>
<button type="button" class="btn btn-secondary">2</button>
<button type="button" class="btn btn-secondary">3</button>
<button type="button" class="btn btn-secondary">4</button>
</div>
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text" id="btnGroupAddon2">@</div>
</div>
<input type="text" class="form-control" placeholder="Input group example" aria-label="Input group example" aria-describedby="btnGroupAddon2">
</div>
</div>
ሳይዚንግ ምግባር
ኣብ ክንዲ ኣብ ነፍሲ ወከፍ መጠወቒ ኣብ ሓደ ጉጅለ ናይ መጠወቒ ዓቐን ክፍልታት ምትግባር፡ በቃ .btn-group-*
ናብ ነፍሲ ወከፍ ምውሳኽ .btn-group
፣ ብዙሓት ጉጅለታት ክትሰፍር ከለኻ ነፍሲ ወከፍ ሓዊስካ።
<div class="btn-group btn-group-lg" role="group" aria-label="...">...</div>
<div class="btn-group" role="group" aria-label="...">...</div>
<div class="btn-group btn-group-sm" role="group" aria-label="...">...</div>
ምድቃል
ንቑልቁል ዝወርድ ምልክታታት ብተኸታታሊ መጠወቒታት ክሕወሱ ምስ እትደሊ ኣብ .btn-group
ውሽጢ ካልእ ኣቐምጦ ።.btn-group
<div class="btn-group" role="group" aria-label="Button group with nested dropdown">
<button type="button" class="btn btn-secondary">1</button>
<button type="button" class="btn btn-secondary">2</button>
<div class="btn-group" role="group">
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
Dropdown
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Dropdown link</a>
<a class="dropdown-item" href="#">Dropdown link</a>
</div>
</div>
</div>
ቀጥታዊ ለውጢ
ሓደ ስብስብ መጠወቒታት ብኣግማድ ዘይኮነስ ብቐጥታ ተደራሪቡ ከም ዝረአ ግበር። ኣብዚ ናይ ምፍንጫል መጠወቒ ንቑልቁል ዝወርድ ኣይድገፍን እዩ።
<div class="btn-group-vertical">
...
</div>