ලාංඡන

ලාංඡන සඳහා ලේඛන සහ උදාහරණ, අපගේ කුඩා ගණන සහ ලේබල් කිරීමේ සංරචකය.

මෙම පිටුවේ

උදාහරණ

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-lightBootstrap හි පෙරනිමිය භාවිතා කරන විට , ඔබට .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;