බොත්තම්

බහු ප්‍රමාණ, ප්‍රාන්ත සහ තවත් දේ සඳහා සහය ඇතිව ආකෘති, සංවාද සහ තවත් දේවල ක්‍රියා සඳහා 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>

පෙළ එතීම අබල කරන්න

ඔබට බොත්තම් පෙළ එතීමට අවශ්‍ය නැතිනම්, ඔබට .text-nowrapපන්තිය බොත්තමට එක් කළ හැක. $btn-white-space: nowrapSass හි, ඔබට එක් එක් බොත්තම සඳහා පෙළ එතීම අක්‍රිය කිරීමට සැකසිය හැක .

බොත්තම් ටැග්

පන්ති නිර්මාණය කර ඇත්තේ මූලද්රව්යය .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නැංගුරම් බොත්තම් සියල්ල අක්‍රිය කිරීමට සමහර අනාගත හිතකාමී මෝස්තර ඇතුළත් වේ . එම දේපල සඳහා සහය දක්වන බ්‍රවුසරවල, ඔබට අබල කළ කර්සරය කිසිසේත් නොපෙනේ.
• භාවිතා කරන අක්‍රිය බොත්තම් සහායක තාක්‍ෂණයන්ට මූලද්‍රව්‍යයේ තත්ත්වය දැක්වීමට ගුණාංගය <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ඔබට උපලක්ෂණ අක්‍රිය සබැඳියක් මත තබා ගත යුතු අවස්ථා ආවරණය කිරීම සඳහා, s හි සබැඳි ක්‍රියාකාරීත්වය අක්‍රිය කිරීමට .disabledපන්තිය භාවිතා කරයි . මෙම CSS දේපල තවමත් HTML සඳහා ප්‍රමිතිගත කර නොමැති බව සලකන්න, නමුත් සියලුම නවීන බ්‍රව්සර් එයට සහය දක්වයි. ඊට අමතරව, සහාය දක්වන බ්‍රවුසරවල පවා , යතුරුපුවරු සංචාලනය බල නොපායි, එයින් අදහස් කරන්නේ දෘෂ්‍යමාන යතුරුපුවරු භාවිතා කරන්නන්ට සහ සහායක තාක්ෂණයන් භාවිතා කරන්නන්ට තවමත් මෙම සබැඳි සක්‍රිය කිරීමට හැකි වනු ඇති බවයි. ආරක්ෂිත වීමට, ට අමතරව , මෙම සබැඳි වලට යතුරුපුවරු නාභිගත වීම වැළැක්වීමට උපලක්ෂණයක් ද ඇතුළත් කරන්න , සහ ඒවායේ ක්‍රියාකාරීත්වය සම්පූර්ණයෙන්ම අක්‍රිය කිරීමට අභිරුචි JavaScript භාවිතා කරන්න.pointer-events: none<a>pointer-events: nonearia-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>

පිරික්සුම් කොටුව සහ රේඩියෝ බොත්තම්

පිරික්සුම් පෙට්ටිය හෝ රේඩියෝ විලාස බොත්තම ටොගල් සැපයීම සඳහා 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> 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>

ක්රම