बटन्स्

बहुषु आकारेषु, राज्येषु, अधिकेषु च समर्थनेन सह रूपेषु, संवादेषु, अधिकेषु च क्रियासु 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प्रत्येकस्य बटनस्य कृते text wrapping अक्षमीकरणाय सेट् कर्तुं शक्नोति ।

बटन टैग

वर्गाः तत्त्वेन .btnसह उपयोक्तुं निर्मिताः सन्ति । तथापि, भवान् एतान् वर्गान् अथवा तत्त्वेषु <button>अपि उपयोक्तुं शक्नोति (यद्यपि केचन ब्राउजर् किञ्चित् भिन्नं प्रतिपादनं प्रयोक्तुं शक्नुवन्ति) ।<a><input>

पृष्ठान्तर्गतकार्यक्षमतां प्रेरयितुं प्रयुक्तेषु तत्त्वेषु बटनवर्गाणां <a>उपयोगं कुर्वन् (सामग्री इव संकुचितं भवति), वर्तमानपृष्ठस्य अन्तः नूतनपृष्ठेषु वा विभागेषु वा लिङ्क् कर्तुं न अपितु, एतेषां लिङ्कानां role="button"कृते सहायकप्रौद्योगिकीनां कृते स्वप्रयोजनं समुचितरूपेण प्रसारयितुं a दातव्यम् यथा स्क्रीन रीडर।

<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"एकं विशेषतां अपि समाविष्टं कुर्वन्तु येन ते कीबोर्ड फोकस प्राप्तुं न शक्नुवन्ति, तथा च तेषां कार्यक्षमतां सर्वथा निष्क्रियं कर्तुं कस्टम् जावास्क्रिप्ट् इत्यस्य उपयोगं कुर्वन्तु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>

चेकबॉक्स एवं रेडियो बटन

Bootstrap इत्यस्य .buttonशैल्याः अन्येषु तत्त्वेषु, यथा <label>s, चेकबॉक्स अथवा रेडियो शैली बटन टॉग्लिंग् प्रदातुं प्रयोक्तुं शक्यन्ते । जावास्क्रिप्ट् मार्गेण तेषां टॉग्लिंग् व्यवहारं सक्षमं कर्तुं तानि परिवर्तितानि बटन्स् समाविष्टानि data-toggle="buttons"एकं योजयन्तु तथा च स्वस्य बटन् अन्तः s शैलीं योजयन्तु । ध्यानं कुर्वन्तु यत् भवान् एकैकं इनपुट्-सञ्चालितं बटन् अथवा तेषां समूहान् निर्मातुम् अर्हति ।.btn-group.btn-group-toggle<input>

एतेषां बटन्-समूहानां कृते परीक्षिता अवस्था केवलं बटन्-उपरि इवेण्ट् - माध्यमेन अद्यतनंclick भवति । यदि भवान् निवेशं अद्यतनीकर्तुं अन्यपद्धतिं उपयुङ्क्ते-उदा., <input type="reset">निवेशस्य गुणं मैन्युअल् रूपेण प्रयोक्तुं वा —तर्हि भवान् मैन्युअल् रूपेण checkedटॉगल कर्तुं प्रवृत्तः .activeभविष्यति <label>।

ध्यानं कुर्वन्तु यत् पूर्व-परीक्षित-बटन-मध्ये भवन्तः .activeinput's - मध्ये वर्गं मैन्युअल् रूपेण योजयितुं शक्नुवन्ति <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>

विधियाँ