Rekọja si akoonu akọkọ Rekọja si lilọ kiri awọn docs
in English

Bọtini pipade

Bọtini isunmọ jeneriki fun yiyọ akoonu bi awọn awoṣe ati awọn titaniji.

Apeere

Pese aṣayan lati yọkuro tabi pa paati kan pẹlu .btn-close. Iṣaṣaṣe aipe jẹ opin, ṣugbọn isọdi gaan. Ṣe atunṣe awọn oniyipada Sass lati rọpo aiyipada background-image. Rii daju lati ṣafikun ọrọ fun awọn oluka iboju , bi a ti ṣe pẹlu aria-label.

<button type="button" class="btn-close" aria-label="Close"></button>

Ipo alaabo

Awọn bọtini isunmọ alaabo yipada wọn opacity. A tun ti lo pointer-events: noneati user-select: nonelati ṣe idiwọ rababa ati awọn ipinlẹ ti nṣiṣe lọwọ lati ma nfa.

<button type="button" class="btn-close" disabled aria-label="Close"></button>

Iyatọ funfun

Yi aiyipada pada .btn-closelati jẹ funfun pẹlu .btn-close-whitekilasi naa. Kilasi yii nlo ohun- filterini lati yi pada background-image.

<button type="button" class="btn-close btn-close-white" aria-label="Close"></button>
<button type="button" class="btn-close btn-close-white" disabled aria-label="Close"></button>

Sass

Awọn oniyipada

$btn-close-width:            1em;
$btn-close-height:           $btn-close-width;
$btn-close-padding-x:        .25em;
$btn-close-padding-y:        $btn-close-padding-x;
$btn-close-color:            $black;
$btn-close-bg:               url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$btn-close-color}'><path d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/></svg>");
$btn-close-focus-shadow:     $input-btn-focus-box-shadow;
$btn-close-opacity:          .5;
$btn-close-hover-opacity:    .75;
$btn-close-focus-opacity:    1;
$btn-close-disabled-opacity: .25;
$btn-close-white-filter:     invert(1) grayscale(100%) brightness(200%);