بٽڻ
بوٽ اسٽريپ جي حسب ضرورت بٽڻ واري اسلوب کي استعمال ڪريو عملن لاءِ فارمز، ڊائلاگس، ۽ وڌيڪ ۾ گھڻن سائزن، رياستن ۽ وڌيڪ لاءِ سپورٽ سان.
مثال
بوٽ اسٽريپ ۾ ڪيترائي اڳواٽ بيان ڪيل بٽڻ اسلوب شامل آھن، ھر ھڪ پنھنجي پنھنجي مقصد جي خدمت ڪري ٿو، ڪجھ اضافي اضافي سان گڏ وڌيڪ ڪنٽرول لاءِ.
<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>
فعال رياست
بٽڻ دٻايو ظاهر ٿيندو جڏهن فعال هوندو هڪ اونداهي پس منظر سان، اونداهي سرحد، ۽، جڏهن پاڇون کي فعال ڪيو ويندو، هڪ انٽ شيڊ. s ۾ ڪلاس شامل ڪرڻ جي ڪا ضرورت ناهي <button>
جيئن اهي هڪ pseudo-class استعمال ڪندا آهن . تنهن هوندي، توهان اڃا تائين ساڳئي فعال ظاهري کي مجبور ڪري سگهو ٿا .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"
ڪريو ته جيئن انهن کي ڪيبورڊ فوڪس حاصل ڪرڻ کان روڪيو وڃي، ۽ انهن جي ڪارڪردگي کي مڪمل طور تي بند ڪرڻ لاءِ ڪسٽم جاوا اسڪرپٽ استعمال ڪريو.
<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') |
هڪ عنصر جي بٽڻ کي تباهه ڪري ٿو. |