in English

تڼۍ

د بټسټریپ دودیز بټن سټایلونه په فارمونو ، ډیالوګونو او نورو کې د عملونو لپاره د ډیری اندازو ، حالتونو او نورو لپاره ملاتړ سره وکاروئ.

مثالونه

په بوټسټریپ کې د تڼۍ ډیری ډیزاین شوي سټایلونه شامل دي، هر یو خپل سیمانټیک هدف ته خدمت کوي، د یو څو اضافي اضافو سره د ډیر کنټرول لپاره اچول شوي.

<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ټولګي تڼۍ ته اضافه کړئ. په ساس کې، تاسو کولی شئ $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>
د تڼۍ ځینې سټایلونه نسبتا روښانه مخکینۍ رنګ کاروي، او باید یوازې په تیاره پس منظر کې وکارول شي ترڅو کافي توپیر ولري.

اندازه

لوی یا کوچني بټنونه خوښوي؟ اضافه کړئ .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>

فعال حالت

تڼۍ به فشار راوړي کله چې د تیاره شالید سره فعال وي، تیاره سرحد، او کله چې سیوري فعالې وي، د انسټیټ سیوري. اړتیا نشته چې په <button>s کې ټولګي اضافه کړئ ځکه چې دوی د سیډو کلاس کاروي . په هرصورت، تاسو لاهم کولی شئ ورته فعاله بڼه د .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>په یاد ولرئ چې دا سی ایس ایس ملکیت لاهم د HTML لپاره معیاري ندی، مګر ټول عصري براوزرونه یې ملاتړ کوي. سربیره پردې، حتی په براوزرونو کې چې ملاتړ کوي pointer-events: none، د کیبورډ نیویګیشن غیر اغیزمن پاتې کیږي، پدې معنی چې د لیدل شوي کیبورډ کاروونکي او د مرستندویه ټیکنالوژیو کاروونکي به لاهم د دې لینکونو فعالولو توان ولري. نو د خوندي کیدو لپاره ، سربیره پردې aria-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>

د چک بکس او راډیو بټونه

د بوټسټریپ .buttonسټایلونه په نورو عناصرو پلي کیدی شي ، لکه <label>s ، د چیک باکس یا د راډیو سټایل بټن ټګلینګ چمتو کولو لپاره. په دې بدل شوي بټونو کې اضافه کړئ data-toggle="buttons"ترڅو .btn-groupد جاواسکریپټ له لارې د دوی د توګل کولو چلند فعال کړئ او ستاسو په بټونو کې s .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>

میتودونه

طریقه تفصیل
$().button('toggle') د فشار حالت ټوګل کوي. تڼۍ ته داسې بڼه ورکوي چې دا فعاله شوې ده.
$().button('dispose') د عنصر تڼۍ ویجاړوي.