ब्याजहरू

ब्याजहरूका लागि कागजात र उदाहरणहरू, हाम्रो सानो गणना र लेबलिङ कम्पोनेन्ट।

यस पृष्ठमा

उदाहरणहरू

emसापेक्ष फन्ट साइजिङ र एकाइहरू प्रयोग गरेर तत्काल अभिभावक तत्वको साइज मिलाउन ब्याज स्केल । v5 को अनुसार, ब्याजहरूमा लिङ्कहरूका लागि फोकस वा होभर शैलीहरू छैनन्।

शीर्षकहरू

उदाहरण शीर्षकनयाँ

html

<h1>Example heading <span class="badge bg-secondary">New</span></h1>
<h2>Example heading <span class="badge bg-secondary">New</span></h2>
<h3>Example heading <span class="badge bg-secondary">New</span></h3>
<h4>Example heading <span class="badge bg-secondary">New</span></h4>
<h5>Example heading <span class="badge bg-secondary">New</span></h5>
<h6>Example heading <span class="badge bg-secondary">New</span></h6>

बटनहरू

ब्याजहरू काउन्टर प्रदान गर्न लिङ्क वा बटनहरूको भागको रूपमा प्रयोग गर्न सकिन्छ।

html

<button type="button" class="btn btn-primary">
  Notifications <span class="badge text-bg-secondary">4</span>
</button>

ध्यान दिनुहोस् कि तिनीहरू कसरी प्रयोग गरिन्छ भन्ने आधारमा, ब्याजहरू स्क्रिन रिडरहरू र समान सहायक प्रविधिहरूका प्रयोगकर्ताहरूका लागि भ्रमित हुन सक्छन्। जबकि ब्याजहरूको स्टाइलले तिनीहरूको उद्देश्यको रूपमा एक दृश्य संकेत प्रदान गर्दछ, यी प्रयोगकर्ताहरूलाई केवल ब्याजको सामग्रीको साथ प्रस्तुत गरिनेछ। विशिष्ट परिस्थितिमा निर्भर गर्दै, यी ब्याजहरू वाक्य, लिङ्क, वा बटनको अन्त्यमा अनियमित अतिरिक्त शब्दहरू वा संख्याहरू जस्तो लाग्न सक्छ।

सन्दर्भ स्पष्ट नभएसम्म (जस्तै "सूचनाहरू" उदाहरणको रूपमा, जहाँ यो बुझिन्छ कि "4" सूचनाहरूको संख्या हो), अतिरिक्त पाठको दृश्य रूपमा लुकेको टुक्रासँग अतिरिक्त सन्दर्भ समावेश गर्ने विचार गर्नुहोस्।

राखिएको

परिमार्जन गर्नका लागि उपयोगिताहरू प्रयोग गर्नुहोस् .badgeर यसलाई लिङ्क वा बटनको कुनामा राख्नुहोस्।

html

<button type="button" class="btn btn-primary position-relative">
  Inbox
  <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">
    99+
    <span class="visually-hidden">unread messages</span>
  </span>
</button>

तपाईले .badgeथप जेनेरिक सूचकको लागि गणना नगरी केहि थप उपयोगिताहरूसँग कक्षालाई प्रतिस्थापन गर्न सक्नुहुन्छ।

html

<button type="button" class="btn btn-primary position-relative">
  Profile
  <span class="position-absolute top-0 start-100 translate-middle p-2 bg-danger border border-light rounded-circle">
    <span class="visually-hidden">New alerts</span>
  </span>
</button>

पृष्ठभूमि रङहरू

v5.2.0 मा थपियो

हाम्रा सहयोगीहरूसँगbackground-color विपरित अग्रभूमि सेट colorगर्नुहोस् । पहिले यो म्यानुअल रूपमा आफ्नो छनोट र स्टाइलका लागि उपयोगिताहरू जोडा गर्न आवश्यक थियो, जुन तपाईं अझै पनि प्रयोग गर्न सक्नुहुन्छ यदि तपाईं चाहनुहुन्छ भने।.text-bg-{color}.text-{color}.bg-{color}

प्राथमिक माध्यमिक सफलता खतरा चेतावनी जानकारी उज्यालो अँध्यारो

html

<span class="badge text-bg-primary">Primary</span>
<span class="badge text-bg-secondary">Secondary</span>
<span class="badge text-bg-success">Success</span>
<span class="badge text-bg-danger">Danger</span>
<span class="badge text-bg-warning">Warning</span>
<span class="badge text-bg-info">Info</span>
<span class="badge text-bg-light">Light</span>
<span class="badge text-bg-dark">Dark</span>

सहयोगी टेक्नोलोजीहरूको अर्थ बुझाउँदै

अर्थ थप्न रङको प्रयोगले मात्र दृश्य सङ्केत प्रदान गर्दछ, जुन सहायक प्रविधिहरूका प्रयोगकर्ताहरूलाई जानकारी दिइने छैन - जस्तै स्क्रिन रिडरहरू। सुनिश्चित गर्नुहोस् कि रङद्वारा संकेत गरिएको जानकारी या त सामग्रीबाट नै स्पष्ट छ (जस्तै देखिने पाठ), वा वैकल्पिक माध्यमहरू मार्फत समावेश गरिएको छ, जस्तै .visually-hiddenकक्षासँग लुकेको अतिरिक्त पाठ।

गोली ब्याजहरू

.rounded-pillब्याजहरू ठूलासँग थप गोलाकार बनाउन उपयोगिता वर्ग प्रयोग गर्नुहोस् border-radius।

प्राथमिक माध्यमिक सफलता खतरा चेतावनी जानकारी उज्यालो अँध्यारो

html

<span class="badge rounded-pill text-bg-primary">Primary</span>
<span class="badge rounded-pill text-bg-secondary">Secondary</span>
<span class="badge rounded-pill text-bg-success">Success</span>
<span class="badge rounded-pill text-bg-danger">Danger</span>
<span class="badge rounded-pill text-bg-warning">Warning</span>
<span class="badge rounded-pill text-bg-info">Info</span>
<span class="badge rounded-pill text-bg-light">Light</span>
<span class="badge rounded-pill text-bg-dark">Dark</span>

CSS

चरहरू

v5.2.0 मा थपियो

बुटस्ट्र्यापको विकसित CSS चर दृष्टिकोणको एक भागको रूपमा, ब्याजहरूले अब स्थानीय CSS चरहरू .badgeपरिवर्धित वास्तविक-समय अनुकूलनको लागि प्रयोग गर्दछ। CSS चरका लागि मानहरू Sass मार्फत सेट गरिएका छन्, त्यसैले Sass अनुकूलन अझै पनि समर्थित छ।

  --#{$prefix}badge-padding-x: #{$badge-padding-x};
  --#{$prefix}badge-padding-y: #{$badge-padding-y};
  @include rfs($badge-font-size, --#{$prefix}badge-font-size);
  --#{$prefix}badge-font-weight: #{$badge-font-weight};
  --#{$prefix}badge-color: #{$badge-color};
  --#{$prefix}badge-border-radius: #{$badge-border-radius};

Sass चरहरू

$badge-font-size:                   .75em;
$badge-font-weight:                 $font-weight-bold;
$badge-color:                       $white;
$badge-padding-y:                   .35em;
$badge-padding-x:                   .65em;
$badge-border-radius:               $border-radius;