Badges
بەلگە ، كىچىك سان ۋە بەلگە زاپچاسلىرى ئۈچۈن ھۆججەت ۋە مىساللار.
مىساللار
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» نىڭ ئۇقتۇرۇش سانى ئىكەنلىكى چۈشىنىلىدۇ) ، كۆرۈنۈشتە يوشۇرۇن تېكىست بىلەن قوشۇمچە مەزمۇننى ئۆز ئىچىگە ئالىدۇ.
ئورۇنلانغان
ئاممىۋى ئەسلىھەلەرنى ئىشلىتىپ ئۇنى ئۆزگەرتىپ ، .badge
ئۇلىنىش ياكى كۇنۇپكىنىڭ بۇلۇڭىغا قويۇڭ.
<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>
تەگلىك رەڭلىرى
تەگلىك ئىشلىتىش دەرسلىكىمىزنى ئىشلىتىپ بەلگە كۆرۈنۈشىنى تېز ئۆزگەرتىڭ. شۇنىڭغا دىققەت قىلىڭكى ، Bootstrap نىڭ سۈكۈتتىكى ھالىتىنى ئىشلەتكەندە ، مۇۋاپىق ئۇسلۇبقا .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>
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;