બેજ

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

આ પૃષ્ઠ પર

ઉદાહરણો

emસંબંધિત ફોન્ટ કદ અને એકમોનો ઉપયોગ કરીને તાત્કાલિક પિતૃ તત્વના કદ સાથે મેળ કરવા માટે બેજ સ્કેલ . v5 મુજબ, બેજમાં હવે લિંક્સ માટે ફોકસ અથવા હોવર શૈલીઓ નથી.

હેડિંગ

ઉદાહરણ મથાળુંનવી

<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>

બટનો

કાઉન્ટર પ્રદાન કરવા માટે બેજેસનો ઉપયોગ લિંક્સ અથવા બટનોના ભાગ રૂપે થઈ શકે છે.

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

નોંધ કરો કે તેનો ઉપયોગ કેવી રીતે થાય છે તેના આધારે, બેજેસ સ્ક્રીન રીડર્સ અને સમાન સહાયક તકનીકોના વપરાશકર્તાઓ માટે મૂંઝવણમાં મૂકે છે. જ્યારે બેજેસની સ્ટાઇલ તેમના હેતુ માટે વિઝ્યુઅલ સંકેત આપે છે, ત્યારે આ વપરાશકર્તાઓને ફક્ત બેજની સામગ્રી સાથે રજૂ કરવામાં આવશે. ચોક્કસ પરિસ્થિતિના આધારે, આ બેજેસ વાક્ય, લિંક અથવા બટનના અંતે રેન્ડમ વધારાના શબ્દો અથવા સંખ્યાઓ જેવા લાગે છે.

જ્યાં સુધી સંદર્ભ સ્પષ્ટ ન હોય (જેમ કે "સૂચનાઓ" ઉદાહરણ સાથે, જ્યાં તે સમજાય છે કે "4" એ સૂચનાઓની સંખ્યા છે), વધારાના ટેક્સ્ટના દૃષ્ટિથી છુપાયેલા ભાગ સાથે વધારાના સંદર્ભનો સમાવેશ કરવાનું વિચારો.

સ્થિત થયેલ

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

<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વધુ સામાન્ય સૂચકની ગણતરી કર્યા વિના વર્ગને થોડી વધુ ઉપયોગિતાઓ સાથે પણ બદલી શકો છો.

<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>

પૃષ્ઠભૂમિ રંગો

બેજના દેખાવને ઝડપથી બદલવા માટે અમારા પૃષ્ઠભૂમિ ઉપયોગિતા વર્ગોનો ઉપયોગ કરો. મહેરબાની કરીને નોંધ કરો કે બુટસ્ટ્રેપના ડિફોલ્ટનો ઉપયોગ કરતી વખતે , તમને યોગ્ય સ્ટાઇલ માટે .bg-lightટેક્સ્ટ કલર યુટિલિટીની જરૂર પડશે . .text-darkઆ એટલા માટે છે કારણ કે પૃષ્ઠભૂમિ ઉપયોગિતાઓ સિવાય કંઈપણ સેટ કરતી નથી background-color.

પ્રાથમિક ગૌણ સફળતા જોખમ ચેતવણી માહિતી પ્રકાશ શ્યામ

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

સહાયક તકનીકોનો અર્થ પહોંચાડવો

અર્થ ઉમેરવા માટે રંગનો ઉપયોગ કરવાથી માત્ર એક વિઝ્યુઅલ સંકેત મળે છે, જે સહાયક ટેક્નોલોજીના વપરાશકર્તાઓ સુધી પહોંચાડવામાં આવશે નહીં - જેમ કે સ્ક્રીન રીડર્સ. ખાતરી કરો કે રંગ દ્વારા સૂચવવામાં આવેલી માહિતી કાં તો સામગ્રીમાંથી જ સ્પષ્ટ છે (દા.ત. દૃશ્યમાન ટેક્સ્ટ), અથવા વૈકલ્પિક માધ્યમો દ્વારા શામેલ છે, જેમ કે .visually-hiddenવર્ગ સાથે છુપાયેલ વધારાની ટેક્સ્ટ.

પીલ બેજ

.rounded-pillબેજને મોટા સાથે વધુ ગોળાકાર બનાવવા માટે ઉપયોગિતા વર્ગનો ઉપયોગ કરો border-radius.

પ્રાથમિક ગૌણ સફળતા જોખમ ચેતવણી માહિતી પ્રકાશ શ્યામ

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

સસ

ચલો

$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;