Source

كۇنۇپكىلار

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دەرسكە يوشۇرۇنغان قوشۇمچە تېكىست دېگەندەك.

تېكىست ئوراشنى چەكلەڭ

ئەگەر كۇنۇپكا تېكىستىنىڭ ئورالغانلىقىنى خالىمىسىڭىز ، كۇنۇپكىنى .text-nowrapسىنىپقا قوشالايسىز. Sass دا ، $btn-white-space: nowrapھەر بىر كۇنۇپكا ئۈچۈن تېكىست ئوراشنى چەكلىيەلەيسىز.

كۇنۇپكا بەلگىسى

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

Size

چوڭ ياكى كىچىك كۇنۇپكىلارمۇ؟ قوشۇمچە .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>

بۇ .disabledسىنىپ s نىڭ pointer-events: noneئۇلىنىش ئىقتىدارىنى چەكلەشكە ئۇرۇندى <a>، ئەمما CSS خاسلىقى تېخى قېلىپلاشمىدى. ئۇنىڭدىن باشقا ، قوللايدىغان توركۆرگۈچلەردىمۇ pointer-events: noneكۇنۇپكا تاختىسىنىڭ يول باشلىشى تەسىرگە ئۇچرىمايدۇ ، يەنى كۆرۈش كۇنۇپكا تاختىسى ئىشلەتكۈچىلەر ۋە ياردەمچى تېخنىكىلارنى ئىشلەتكۈچىلەر يەنىلا بۇ ئۇلىنىشلارنى قوزغىتالايدۇ. شۇڭا بىخەتەر بولۇش ئۈچۈن ، tabindex="-1"بۇ ئۇلىنىشلارغا خاسلىق قوشۇڭ (ئۇلارنىڭ كۇنۇپكا تاختىسىنىڭ فوكۇسنى قوبۇل قىلىشىنىڭ ئالدىنى ئېلىش ئۈچۈن) ھەمدە خاس JavaScript ئارقىلىق ئۇلارنىڭ ئىقتىدارىنى چەكلەڭ.

كۇنۇپكا قىستۇرمىسى

كۇنۇپكىلار بىلەن كۆپرەك قىلىڭ. كونترول كۇنۇپكىسى قورال ستونىغا ئوخشاش تېخىمۇ كۆپ زاپچاسلار ئۈچۈن گۇرۇپپا كۇنۇپكىسىنى كۆرسىتىدۇ.

Toggle states

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>

تەكشۈرۈش رامكىسى ۋە رادىئو كۇنۇپكىسى

Bootstrap نىڭ .buttonئۇسلۇبىنى s قاتارلىق باشقا ئېلېمېنتلارغا ئىشلىتىشكە بولىدۇ ، <label>تەكشۈرۈش رامكىسى ياكى رادىئو ئۇسلۇبى كۇنۇپكىسىنى ئالماشتۇرۇش بىلەن تەمىنلەيدۇ. بۇ ئۆزگەرتىلگەن كۇنۇپكىلارنى قوشۇپ ، ئۇلارنىڭ JavaScript ئارقىلىق قوزغىتىش ھەرىكىتىنى قوزغىتىپ ، كۇنۇپكىڭىزدىكى 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>

Methods

ئۇسۇل چۈشەندۈرۈش
$().button('toggle') Toggles ھالەتنى ئىلگىرى سۈرىدۇ. بۇ كۇنۇپكىنى قوزغىتىلغاندەك قىلىدۇ.
$().button('dispose') ئېلېمېنتنىڭ كۇنۇپكىسىنى بۇزىدۇ.