बटनहरू

धेरै आकारहरू, राज्यहरू, र थपको लागि समर्थन सहित फारमहरू, संवादहरू, र थप कार्यहरूका लागि बुटस्ट्र्यापको अनुकूलन बटन शैलीहरू प्रयोग गर्नुहोस्।

उदाहरणहरू

बुटस्ट्र्यापले धेरै पूर्वनिर्धारित बटन शैलीहरू समावेश गर्दछ, प्रत्येकले यसको आफ्नै अर्थपूर्ण उद्देश्यको सेवा गर्दछ, थप नियन्त्रणको लागि केही अतिरिक्तहरू समावेश गर्दछ।

<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>दिइनु पर्छ। 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>किनकि तिनीहरूले छद्म-वर्ग प्रयोग गर्छन् । यद्यपि, तपाइँ अझै पनि उही सक्रिय उपस्थिति .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"एउटा विशेषता पनि समावेश गर्नुहोस् , र तिनीहरूको कार्यक्षमता पूर्ण रूपमा असक्षम गर्न अनुकूलन JavaScript प्रयोग गर्नुहोस्।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"तपाईंको बटनहरूमा s शैली थप्नुहोस्। नोट गर्नुहोस् कि तपाइँ एकल इनपुट-संचालित बटनहरू वा ती समूहहरू सिर्जना गर्न सक्नुहुन्छ।.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>

विधिहरू