બેજ
બેજ માટે દસ્તાવેજીકરણ અને ઉદાહરણો, અમારી નાની ગણતરી અને લેબલિંગ ઘટક.
emસંબંધિત ફોન્ટ કદ અને એકમોનો ઉપયોગ કરીને તાત્કાલિક પિતૃ તત્વના કદ સાથે મેળ કરવા માટે બેજ સ્કેલ .
<h1>Example heading <span class="badge badge-secondary">New</span></h1>
<h2>Example heading <span class="badge badge-secondary">New</span></h2>
<h3>Example heading <span class="badge badge-secondary">New</span></h3>
<h4>Example heading <span class="badge badge-secondary">New</span></h4>
<h5>Example heading <span class="badge badge-secondary">New</span></h5>
<h6>Example heading <span class="badge badge-secondary">New</span></h6>કાઉન્ટર પ્રદાન કરવા માટે બેજેસનો ઉપયોગ લિંક્સ અથવા બટનોના ભાગ રૂપે થઈ શકે છે.
<button type="button" class="btn btn-primary">
Notifications <span class="badge badge-light">4</span>
</button>નોંધ કરો કે તેનો ઉપયોગ કેવી રીતે થાય છે તેના આધારે, બેજેસ સ્ક્રીન રીડર્સ અને સમાન સહાયક તકનીકોના વપરાશકર્તાઓ માટે મૂંઝવણમાં મૂકે છે. જ્યારે બેજેસની સ્ટાઇલ તેમના હેતુ માટે વિઝ્યુઅલ સંકેત આપે છે, ત્યારે આ વપરાશકર્તાઓને ફક્ત બેજની સામગ્રી સાથે રજૂ કરવામાં આવશે. ચોક્કસ પરિસ્થિતિના આધારે, આ બેજેસ વાક્ય, લિંક અથવા બટનના અંતે રેન્ડમ વધારાના શબ્દો અથવા સંખ્યાઓ જેવા લાગે છે.
જ્યાં સુધી સંદર્ભ સ્પષ્ટ ન હોય (જેમ કે "સૂચનાઓ" ઉદાહરણ સાથે, જ્યાં તે સમજાય છે કે "4" એ સૂચનાઓની સંખ્યા છે), વધારાના ટેક્સ્ટના દૃષ્ટિથી છુપાયેલા ભાગ સાથે વધારાના સંદર્ભનો સમાવેશ કરવાનું વિચારો.
<button type="button" class="btn btn-primary">
Profile <span class="badge badge-light">9</span>
<span class="sr-only">unread messages</span>
</button>બેજનો દેખાવ બદલવા માટે નીચે દર્શાવેલ મોડિફાયર વર્ગોમાંથી કોઈપણ ઉમેરો.
<span class="badge badge-primary">Primary</span>
<span class="badge badge-secondary">Secondary</span>
<span class="badge badge-success">Success</span>
<span class="badge badge-danger">Danger</span>
<span class="badge badge-warning">Warning</span>
<span class="badge badge-info">Info</span>
<span class="badge badge-light">Light</span>
<span class="badge badge-dark">Dark</span>સહાયક તકનીકોનો અર્થ પહોંચાડવો
અર્થ ઉમેરવા માટે રંગનો ઉપયોગ કરવાથી માત્ર એક વિઝ્યુઅલ સંકેત મળે છે, જે સહાયક ટેક્નોલોજીના વપરાશકર્તાઓ સુધી પહોંચાડવામાં આવશે નહીં - જેમ કે સ્ક્રીન રીડર્સ. ખાતરી કરો કે રંગ દ્વારા સૂચવવામાં આવેલી માહિતી કાં તો સામગ્રીમાંથી જ સ્પષ્ટ છે (દા.ત. દૃશ્યમાન ટેક્સ્ટ), અથવા વૈકલ્પિક માધ્યમો દ્વારા શામેલ છે, જેમ કે .sr-onlyવર્ગ સાથે છુપાયેલ વધારાની ટેક્સ્ટ.
બેજેસને વધુ ગોળાકાર બનાવવા માટે મોડિફાયર ક્લાસનો ઉપયોગ કરો .badge-pill(મોટા border-radiusઅને વધારાના આડા સાથે padding). જો તમે v3 ના બેજેસ ચૂકી ગયા હો તો ઉપયોગી.
<span class="badge badge-pill badge-primary">Primary</span>
<span class="badge badge-pill badge-secondary">Secondary</span>
<span class="badge badge-pill badge-success">Success</span>
<span class="badge badge-pill badge-danger">Danger</span>
<span class="badge badge-pill badge-warning">Warning</span>
<span class="badge badge-pill badge-info">Info</span>
<span class="badge badge-pill badge-light">Light</span>
<span class="badge badge-pill badge-dark">Dark</span>એક તત્વ પર સંદર્ભિત .badge-*વર્ગોનો ઉપયોગ કરવાથી હોવર અને ફોકસ સ્ટેટ્સ સાથે <a>ઝડપથી કાર્યક્ષમ બેજેસ પ્રદાન કરે છે.
<a href="#" class="badge badge-primary">Primary</a>
<a href="#" class="badge badge-secondary">Secondary</a>
<a href="#" class="badge badge-success">Success</a>
<a href="#" class="badge badge-danger">Danger</a>
<a href="#" class="badge badge-warning">Warning</a>
<a href="#" class="badge badge-info">Info</a>
<a href="#" class="badge badge-light">Light</a>
<a href="#" class="badge badge-dark">Dark</a>