رەڭ ۋە تەگلىك

ئالدى رەڭ بىلەن سېلىشتۇرما تەگلىك رەڭگى بەلگىلەڭ.

بۇ بەتتە

ئومۇمىي چۈشەنچە

V5.2.0 گە قوشۇلدى

رەڭ ۋە تەگلىك ياردەمچىلىرى بىزنىڭ بىر ئەسلىھەدىكى ئەمەلىي كۈچىمىز ۋە .text-*ئەسلىھەلىرىمىزنىڭ كۈچىنى بىرلەشتۈردى . Sass ئىقتىدارىمىزنى ئىشلىتىپ ، مەلۇم بىرسىنىڭ سېلىشتۇرمىسىنى ئاپتوماتىك بېكىتىمىز ..bg-*color-contrast()colorbackground-color

Heads up! ھازىر CSS يەرلىك color-contrastئىقتىدارنى قوللىمايدۇ ، شۇڭا بىز Sass ئارقىلىق ئۆزىمىزنى ئىشلىتىمىز. دېمەك ، CSS ئۆزگەرگۈچى مىقدار ئارقىلىق باشتېمىمىزنىڭ رەڭگىنى خاسلاشتۇرۇش بۇ ئىقتىدارلار بىلەن رەڭ سېلىشتۇرما مەسىلىلىرىنى كەلتۈرۈپ چىقىرىشى مۇمكىن.

رەڭ بىلەن سېلىشتۇرما

سېلىشتۇرما رەڭ بىلەن ئىككىنچى

سېلىشتۇرما رەڭ بىلەن مۇۋەپپەقىيەت

سېلىشتۇرما رەڭ بىلەن خەتەر

سېلىشتۇرما رەڭ بىلەن ئاگاھلاندۇرۇش

سېلىشتۇرما رەڭ بىلەن ئۇچۇر

سېلىشتۇرما رەڭ بىلەن نۇر

سېلىشتۇرما رەڭ بىلەن قارامتۇل

html

<div class="text-bg-primary p-3">Primary with contrasting color</div>
<div class="text-bg-secondary p-3">Secondary with contrasting color</div>
<div class="text-bg-success p-3">Success with contrasting color</div>
<div class="text-bg-danger p-3">Danger with contrasting color</div>
<div class="text-bg-warning p-3">Warning with contrasting color</div>
<div class="text-bg-info p-3">Info with contrasting color</div>
<div class="text-bg-light p-3">Light with contrasting color</div>
<div class="text-bg-dark p-3">Dark with contrasting color</div>

زاپچاسلار بىلەن

.text-*بەلگىگە ئوخشاش ئۇلارنى بىرلەشتۈرۈلگەن ۋە .bg-*دەرسلەرنىڭ ئورنىدا ئىشلىتىڭ :

Primary ئۇچۇر

html

<span class="badge text-bg-primary">Primary</span>
<span class="badge text-bg-info">Info</span>

ياكى كارتىلاردا :

Header

كارتا ماۋزۇسىغا قۇرۇلغان ۋە كارتا مەزمۇنىنىڭ كۆپ قىسمىنى تەشكىل قىلىدىغان بىر قىسىم تېز مىسال تېكىستلىرى.

Header

كارتا ماۋزۇسىغا قۇرۇلغان ۋە كارتا مەزمۇنىنىڭ كۆپ قىسمىنى تەشكىل قىلىدىغان بىر قىسىم تېز مىسال تېكىستلىرى.

html

<div class="card text-bg-primary mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card text-bg-info mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>