බොත්තම්
බහු ප්රමාණ, ප්‍රාන්ත සහ තවත් දේ සඳහා සහය ඇතිව ආකෘති, සංවාද සහ තවත් දේවල ක්‍රියා සඳහා Bootstrap හි අභිරුචි බොත්තම් විලාස භාවිත කරන්න.
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" 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 ගුණය තවමත් ප්‍රමිතිගත කර නොමැත. ඊට අමතරව, සහාය දක්වන බ්‍රවුසරවල පවා , යතුරුපුවරු සංචාලනය බල නොපායි, එයින් අදහස් කරන්නේ දෘෂ්‍යමාන යතුරුපුවරු භාවිතා කරන්නන්ට සහ සහායක තාක්ෂණයන් භාවිතා කරන්නන්ට තවමත් මෙම සබැඳි සක්රිය කිරීමට හැකි වනු ඇති බවයි. එබැවින් ආරක්ෂිත වීමට, මෙම සබැඳි මත උපලක්ෂණයක් එක් කරන්න (ඒවා යතුරුපුවරු නාභිගත වීම වැළැක්වීමට) සහ ඒවායේ ක්‍රියාකාරීත්වය අක්‍රිය කිරීමට අභිරුචි JavaScript භාවිතා කරන්න.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 වැනි අනෙකුත් මූලද්‍රව්‍ය සඳහා Bootstrap හි .buttonමෝස්තර යෙදිය හැක . ජාවාස්ක්‍රිප්ට් හරහා ඒවායේ ටොගල් හැසිරීම සක්‍රීය කිරීමට එම වෙනස් කළ බොත්තම් අඩංගු එකකට <label>එක් කරන්න සහ ඔබේ බොත්තම් තුළ s මෝස්තරයට එක් කරන්න. ඔබට තනි ආදාන බලැති බොත්තම් හෝ ඒවායේ කණ්ඩායම් සෑදිය හැකි බව සලකන්න.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') |
මූලද්රව්යයක බොත්තමක් විනාශ කරයි. |