ලාංඡන

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

මෙම පිටුවේ

උදාහරණ

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 හි එකතු කරන ලදී

Bootstrap හි විකාශනය වන 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;