Ruvara & kumashure

Gadzirisa ruvara rwekumashure neruvara rwemberi rwakasiyana.

Pa peji ino

Overview

Yakawedzerwa mu v5.2.0

Ruvara uye kumashure vabatsiri vanosanganisa simba rezvishandiso zvedu uye zvekushandisa mukirasi .text-*imwe . Tichishandisa basa redu reSass , tinongoona mutsauko weimwe ..bg-*color-contrast()colorbackground-color

Musoro! Ikozvino hapana rutsigiro rweCSS-yekuzvarwa color-contrastbasa, saka isu tinoshandisa yedu kuburikidza neSass. Izvi zvinoreva kuti kugadzirisa mavara etimendi yedu kuburikidza neCSS zvinosiyana zvinogona kukonzera kusiyanisa kwemavara nenyaya idzi.

Chekutanga chine ruvara rwakasiyana

Secondary ine ruvara rwakasiyana

Kubudirira nemuvara wakasiyana

Ngozi ine ruvara rwakasiyana

Yambiro ine ruvara rwakasiyana

Info ine ruvara rwakasiyana

Chiedza chine ruvara rwakasiyana

Rima rine ruvara rwakasiyana

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>

Nezvikamu

Vashandise panzvimbo yezvakasanganiswa .text-*uye .bg-*makirasi, senge pamabheji :

Primary Info

html

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

Kana pamakadhi :

Header

Mamwe mameseji emuenzaniso wekukurumidza kuvaka pane zita remakadhi uye kugadzira iyo yakawanda yemukati kadhi.

Header

Mamwe mameseji emuenzaniso wekukurumidza kuvaka pane zita remakadhi uye kugadzira iyo yakawanda yemukati kadhi.

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>