دوگمەکان

شێوازەکانی دوگمەی تایبەتمەندی 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پۆلەکە زیاد بکەیت بۆ دوگمەکە. لە Sass دەتوانیت ڕێکبخەیت $btn-white-space: nowrapبۆ ناکارکردنی پێچانی دەق بۆ هەر دوگمەیەک.

تاگەکانی دوگمە

پۆلەکان .btnبە شێوەیەک داڕێژراون کە لەگەڵ <button>توخمەکەدا بەکاربهێنرێن. بەڵام دەتوانیت ئەم پۆلانە لەسەر <a>یان <input>توخمەکانیش بەکاربهێنیت (هەرچەندە ڕەنگە هەندێک لە وێبگەڕەکان ڕەندەرێکی کەمێک جیاواز بەکاربهێنن).

لە کاتی بەکارهێنانی پۆلەکانی دوگمە لەسەر <a>ئەو توخمانەی کە بەکاردەهێنرێن بۆ دەستپێکردنی کارایی ناو لاپەڕە (وەک داڕمانی ناوەڕۆک)، لەبری بەستنەوە بە لاپەڕە یان بەشە نوێیەکان لەناو لاپەڕەی ئێستادا، ئەم بەستەرانە پێویستە 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پۆلەکە بەکاریدەهێنێت pointer-events: noneبۆ هەوڵدان بۆ لەکارخستنی کارایی بەستەرەکەی <a>s. تێبینی بکە کە ئەم تایبەتمەندییە CSS هێشتا ستاندارد نەکراوە بۆ 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کە ئەو دوگمە دەستکاریکراوانەی تێدایە بۆ چالاککردنی هەڵسوکەوتی گۆڕانکارییان لە ڕێگەی جاڤاسکڕێپتەوە و زیادکردنی .btn-group-toggleبۆ ستایلکردنی <input>s لەناو دوگمەکانتدا. تێبینی بکە کە دەتوانیت تاکە دوگمە یان گروپیان دروست بکەیت کە بە ئینپوت کاردەکەن.

دۆخی پشکنینکراو بۆ ئەم دوگمانە تەنها لە ڕێگەی 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>

شێوازەکان