كۇنۇپكىلار
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
كەلگۈسىدىكى بەزى دوستانە ئۇسلۇبلار لەڭگەر كۇنۇپكىلىرىنىڭ ھەممىسىنى چەكلەش ئۈچۈن كىرگۈزۈلگەن . بۇ خاسلىقنى قوللايدىغان توركۆرگۈچلەردە چەكلەنگەن نۇر بەلگىنى ئەسلا كۆرەلمەيسىز.- ئىشلىتىدىغان چەكلەنگەن كۇنۇپكىلار خاسلىقنى
<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"
ئۇلىنىشلارغا خاسلىق كىرگۈزۈپ ، ئۇلارنىڭ كۇنۇپكا تاختىسىنىڭ فوكۇسنى قوبۇل قىلىشىنىڭ ئالدىنى ئالىدۇ ھەمدە خاس JavaScript ئارقىلىق ئۇلارنىڭ ئىقتىدارىنى پۈتۈنلەي چەكلەيدۇ.
<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>
كۇنۇپكا قىستۇرمىسى
كۇنۇپكىلار بىلەن كۆپرەك قىلىڭ. كونترول كۇنۇپكىسى قورال ستونىغا ئوخشاش تېخىمۇ كۆپ زاپچاسلار ئۈچۈن گۇرۇپپا كۇنۇپكىسىنى كۆرسىتىدۇ.
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') |
ئېلېمېنتنىڭ كۇنۇپكىسىنى بۇزىدۇ. |