in English
ক্লোজ বোতাম
মডেল এবং সতর্কতার মতো বিষয়বস্তু খারিজ করার জন্য একটি সাধারণ বন্ধ বোতাম।
এই পৃষ্ঠায়
উদাহরণ
এর সাথে একটি উপাদান খারিজ বা বন্ধ করার একটি বিকল্প প্রদান করুন .btn-close
৷ ডিফল্ট স্টাইলিং সীমিত, কিন্তু অত্যন্ত কাস্টমাইজযোগ্য। ডিফল্ট প্রতিস্থাপন করতে Sass ভেরিয়েবল পরিবর্তন করুন background-image
। স্ক্রিন রিডারদের জন্য পাঠ্য অন্তর্ভুক্ত করতে ভুলবেন না , যেমনটি আমরা করেছি aria-label
।
<button type="button" class="btn-close" aria-label="Close"></button>
প্রতিবন্ধী রাষ্ট্র
অক্ষম বন্ধ বোতাম তাদের পরিবর্তন opacity
. pointer-events: none
আমরা হোভার এবং user-select: none
সক্রিয় অবস্থাকে ট্রিগার হতে বাধা দেওয়ার জন্যও আবেদন করেছি ।
<button type="button" class="btn-close" disabled aria-label="Close"></button>
সাদা বৈকল্পিক
ক্লাসের .btn-close
সাথে সাদা হতে ডিফল্ট পরিবর্তন করুন । .btn-close-white
এই শ্রেণীটি filter
উল্টাতে সম্পত্তি ব্যবহার করে 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>
সস
ভেরিয়েবল
$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%);