બેજ

બેજ માટે દસ્તાવેજીકરણ અને ઉદાહરણો, અમારી નાની ગણતરી અને લેબલિંગ ઘટક.

આ પૃષ્ઠ પર

ઉદાહરણો

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" એ સૂચનાઓની સંખ્યા છે), વધારાના ટેક્સ્ટના દૃષ્ટિથી છુપાયેલા ભાગ સાથે વધારાના સંદર્ભનો સમાવેશ કરવાનું વિચારો.

સ્થિત થયેલ

.badgea ને સંશોધિત કરવા અને તેને લિંક અથવા બટનના ખૂણામાં સ્થિત કરવા માટે ઉપયોગિતાઓનો ઉપયોગ કરો.

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 ચલોના અભિગમના ભાગરૂપે, બેજેસ હવે .badgeઉન્નત રીઅલ-ટાઇમ કસ્ટમાઇઝેશન માટે સ્થાનિક CSS ચલોનો ઉપયોગ કરે છે. 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;