ලාංඡන
ලාංඡන සඳහා ලේඛන සහ උදාහරණ, අපගේ කුඩා ගණන සහ ලේබල් කිරීමේ සංරචකය.
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>