স্কিপ করে মূল কন্টেন্ট এ যাও ডক্স নেভিগেশন এড়িয়ে যান
Check
in English

সতর্কতা

মুষ্টিমেয় উপলব্ধ এবং নমনীয় সতর্কতা বার্তা সহ সাধারণ ব্যবহারকারীর ক্রিয়াকলাপের জন্য প্রাসঙ্গিক প্রতিক্রিয়া বার্তা প্রদান করুন।

এই পৃষ্ঠায়

উদাহরণ

যেকোন দৈর্ঘ্যের পাঠ্যের পাশাপাশি একটি ঐচ্ছিক বন্ধ বোতামের জন্য সতর্কতা উপলব্ধ। সঠিক স্টাইলিংয়ের জন্য, আটটি প্রয়োজনীয় প্রাসঙ্গিক ক্লাসের একটি ব্যবহার করুন (যেমন, .alert-success)। ইনলাইন বরখাস্তের জন্য, সতর্কতা জাভাস্ক্রিপ্ট প্লাগইন ব্যবহার করুন ।

html 
<div class="alert alert-primary" role="alert">
  A simple primary alert—check it out!
</div>
<div class="alert alert-secondary" role="alert">
  A simple secondary alert—check it out!
</div>
<div class="alert alert-success" role="alert">
  A simple success alert—check it out!
</div>
<div class="alert alert-danger" role="alert">
  A simple danger alert—check it out!
</div>
<div class="alert alert-warning" role="alert">
  A simple warning alert—check it out!
</div>
<div class="alert alert-info" role="alert">
  A simple info alert—check it out!
</div>
<div class="alert alert-light" role="alert">
  A simple light alert—check it out!
</div>
<div class="alert alert-dark" role="alert">
  A simple dark alert—check it out!
</div>
সহায়ক প্রযুক্তির অর্থ বোঝানো

অর্থ যোগ করার জন্য রঙ ব্যবহার করা শুধুমাত্র একটি ভিজ্যুয়াল ইঙ্গিত দেয়, যা সহায়ক প্রযুক্তির ব্যবহারকারীদের - যেমন স্ক্রিন রিডারদের কাছে জানানো হবে না। নিশ্চিত করুন যে রঙ দ্বারা নির্দেশিত তথ্য হয় বিষয়বস্তু থেকে স্পষ্ট হয় (যেমন দৃশ্যমান পাঠ্য), অথবা বিকল্প উপায়ে অন্তর্ভুক্ত করা হয়েছে, যেমন .visually-hiddenক্লাসের সাথে লুকানো অতিরিক্ত পাঠ্য।

লাইভ উদাহরণ

একটি সতর্কতা দেখানোর জন্য নীচের বোতামে ক্লিক করুন (শুরু করার জন্য ইনলাইন শৈলীগুলির সাথে লুকানো), তারপর অন্তর্নির্মিত বন্ধ বোতাম দিয়ে এটিকে খারিজ (এবং ধ্বংস) করুন৷

html 
<div id="liveAlertPlaceholder"></div>
<button type="button" class="btn btn-primary" id="liveAlertBtn">Show live alert</button>

আমরা আমাদের লাইভ সতর্কতা ডেমো ট্রিগার করতে নিম্নলিখিত জাভাস্ক্রিপ্ট ব্যবহার করি:

const alertPlaceholder = document.getElementById('liveAlertPlaceholder')

const alert = (message, type) => {
  const wrapper = document.createElement('div')
  wrapper.innerHTML = [
    `<div class="alert alert-${type} alert-dismissible" role="alert">`,
    `   <div>${message}</div>`,
    '   <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>',
    '</div>'
  ].join('')

  alertPlaceholder.append(wrapper)
}

const alertTrigger = document.getElementById('liveAlertBtn')
if (alertTrigger) {
  alertTrigger.addEventListener('click', () => {
    alert('Nice, you triggered this alert message!', 'success')
  })
}

.alert-linkযেকোনো সতর্কতার মধ্যে দ্রুত মিলিত রঙিন লিঙ্কগুলি প্রদান করতে ইউটিলিটি ক্লাস ব্যবহার করুন ।

html 
<div class="alert alert-primary" role="alert">
  A simple primary alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-secondary" role="alert">
  A simple secondary alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-success" role="alert">
  A simple success alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-danger" role="alert">
  A simple danger alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-warning" role="alert">
  A simple warning alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-info" role="alert">
  A simple info alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-light" role="alert">
  A simple light alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-dark" role="alert">
  A simple dark alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>

অতিরিক্ত সামগ্রী

সতর্কতায় অতিরিক্ত HTML উপাদান যেমন শিরোনাম, অনুচ্ছেদ এবং বিভাজক থাকতে পারে।

html 
<div class="alert alert-success" role="alert">
  <h4 class="alert-heading">Well done!</h4>
  <p>Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.</p>
  <hr>
  <p class="mb-0">Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p>
</div>

আইকন

একইভাবে, আপনি আইকন সহ সতর্কতা তৈরি করতে ফ্লেক্সবক্স ইউটিলিটি এবং বুটস্ট্র্যাপ আইকন ব্যবহার করতে পারেন। আপনার আইকন এবং বিষয়বস্তুর উপর নির্ভর করে, আপনি আরও ইউটিলিটি বা কাস্টম শৈলী যোগ করতে চাইতে পারেন।

html 
<div class="alert alert-primary d-flex align-items-center" role="alert">
  <svg xmlns="http://www.w3.org/2000/svg" class="bi bi-exclamation-triangle-fill flex-shrink-0 me-2" viewBox="0 0 16 16" role="img" aria-label="Warning:">
    <path d="M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z"/>
  </svg>
  <div>
    An example alert with an icon
  </div>
</div>

আপনার সতর্কতার জন্য একাধিক আইকন প্রয়োজন? আরও বুটস্ট্র্যাপ আইকন ব্যবহার করার কথা বিবেচনা করুন এবং একই আইকনগুলিকে বারবার উল্লেখ করার জন্য স্থানীয় SVG স্প্রাইট তৈরি করুন।

html 
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
  <symbol id="check-circle-fill" viewBox="0 0 16 16">
    <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z"/>
  </symbol>
  <symbol id="info-fill" viewBox="0 0 16 16">
    <path d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zm.93-9.412-1 4.705c-.07.34.029.533.304.533.194 0 .487-.07.686-.246l-.088.416c-.287.346-.92.598-1.465.598-.703 0-1.002-.422-.808-1.319l.738-3.468c.064-.293.006-.399-.287-.47l-.451-.081.082-.381 2.29-.287zM8 5.5a1 1 0 1 1 0-2 1 1 0 0 1 0 2z"/>
  </symbol>
  <symbol id="exclamation-triangle-fill" viewBox="0 0 16 16">
    <path d="M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z"/>
  </symbol>
</svg>

<div class="alert alert-primary d-flex align-items-center" role="alert">
  <svg class="bi flex-shrink-0 me-2" role="img" aria-label="Info:"><use xlink:href="#info-fill"/></svg>
  <div>
    An example alert with an icon
  </div>
</div>
<div class="alert alert-success d-flex align-items-center" role="alert">
  <svg class="bi flex-shrink-0 me-2" role="img" aria-label="Success:"><use xlink:href="#check-circle-fill"/></svg>
  <div>
    An example success alert with an icon
  </div>
</div>
<div class="alert alert-warning d-flex align-items-center" role="alert">
  <svg class="bi flex-shrink-0 me-2" role="img" aria-label="Warning:"><use xlink:href="#exclamation-triangle-fill"/></svg>
  <div>
    An example warning alert with an icon
  </div>
</div>
<div class="alert alert-danger d-flex align-items-center" role="alert">
  <svg class="bi flex-shrink-0 me-2" role="img" aria-label="Danger:"><use xlink:href="#exclamation-triangle-fill"/></svg>
  <div>
    An example danger alert with an icon
  </div>
</div>

খারিজ করছে

সতর্কতা জাভাস্ক্রিপ্ট প্লাগইন ব্যবহার করে, যেকোনো সতর্কতা ইনলাইন খারিজ করা সম্ভব। এখানে কিভাবে:

  • আপনি সতর্কতা প্লাগইন বা কম্পাইল করা বুটস্ট্র্যাপ জাভাস্ক্রিপ্ট লোড করেছেন তা নিশ্চিত করুন।
  • একটি বন্ধ বোতাম এবং .alert-dismissibleক্লাস যোগ করুন, যা সতর্কতার ডানদিকে অতিরিক্ত প্যাডিং যোগ করে এবং ক্লোজ বোতামটি অবস্থান করে।
  • বন্ধ বোতামে, data-bs-dismiss="alert"অ্যাট্রিবিউট যোগ করুন, যা জাভাস্ক্রিপ্ট কার্যকারিতা ট্রিগার করে। <button>সমস্ত ডিভাইস জুড়ে সঠিক আচরণের জন্য এটির সাথে উপাদানটি ব্যবহার করতে ভুলবেন না ।
  • .fadeসতর্কতাগুলিকে খারিজ করার সময় অ্যানিমেট করতে, এবং .showক্লাসগুলি যোগ করতে ভুলবেন না ।

আপনি এটি একটি লাইভ ডেমোর মাধ্যমে দেখতে পারেন:

html 
<div class="alert alert-warning alert-dismissible fade show" role="alert">
  <strong>Holy guacamole!</strong> You should check in on some of those fields below.
  <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
যখন একটি সতর্কতা বরখাস্ত করা হয়, তখন উপাদানটি সম্পূর্ণরূপে পৃষ্ঠার কাঠামো থেকে সরানো হয়। যদি একজন কীবোর্ড ব্যবহারকারী ক্লোজ বোতাম ব্যবহার করে সতর্কতা বাতিল করে, তাদের ফোকাস হঠাৎ হারিয়ে যাবে এবং ব্রাউজারের উপর নির্ভর করে, পৃষ্ঠা/নথির শুরুতে পুনরায় সেট করা হবে। এই কারণে, আমরা অতিরিক্ত জাভাস্ক্রিপ্ট অন্তর্ভুক্ত করার পরামর্শ দিই যা ইভেন্টের জন্য শোনে এবং পৃষ্ঠার সবচেয়ে উপযুক্ত স্থানে closed.bs.alertপ্রোগ্রাম্যাটিকভাবে সেট করে। focus()আপনি যদি একটি নন-ইন্টারেক্টিভ উপাদানে ফোকাস সরানোর পরিকল্পনা করছেন যা সাধারণত ফোকাস পায় না, tabindex="-1"তাহলে উপাদানটিতে যোগ করতে ভুলবেন না।

সিএসএস

ভেরিয়েবল

v5.2.0 এ যোগ করা হয়েছে

বুটস্ট্র্যাপের বিকশিত CSS ভেরিয়েবল পদ্ধতির অংশ হিসাবে, সতর্কতাগুলি এখন .alertউন্নত রিয়েল-টাইম কাস্টমাইজেশনের জন্য স্থানীয় CSS ভেরিয়েবল ব্যবহার করে। CSS ভেরিয়েবলের মান Sass এর মাধ্যমে সেট করা হয়, তাই Sass কাস্টমাইজেশন এখনও সমর্থিত।

  --#{$prefix}alert-bg: transparent;
  --#{$prefix}alert-padding-x: #{$alert-padding-x};
  --#{$prefix}alert-padding-y: #{$alert-padding-y};
  --#{$prefix}alert-margin-bottom: #{$alert-margin-bottom};
  --#{$prefix}alert-color: inherit;
  --#{$prefix}alert-border-color: transparent;
  --#{$prefix}alert-border: #{$alert-border-width} solid var(--#{$prefix}alert-border-color);
  --#{$prefix}alert-border-radius: #{$alert-border-radius};

Sass ভেরিয়েবল

$alert-padding-y:               $spacer;
$alert-padding-x:               $spacer;
$alert-margin-bottom:           1rem;
$alert-border-radius:           $border-radius;
$alert-link-font-weight:        $font-weight-bold;
$alert-border-width:            $border-width;
$alert-bg-scale:                -80%;
$alert-border-scale:            -70%;
$alert-color-scale:             40%;
$alert-dismissible-padding-r:   $alert-padding-x * 3; // 3x covers width of x plus default padding on either side

সাস মিক্সিন

$theme-colorsআমাদের সতর্কতার জন্য প্রাসঙ্গিক সংশোধক ক্লাস তৈরি করতে এর সাথে একত্রে ব্যবহৃত হয় ।

@mixin alert-variant($background, $border, $color) {
  --#{$prefix}alert-color: #{$color};
  --#{$prefix}alert-bg: #{$background};
  --#{$prefix}alert-border-color: #{$border};

  @if $enable-gradients {
    background-image: var(--#{$prefix}gradient);
  }

  .alert-link {
    color: shade-color($color, 20%);
  }
}

Sass লুপ

লুপ যা alert-variant()মিক্সিনের সাথে সংশোধক ক্লাস তৈরি করে।

// Generate contextual modifier classes for colorizing the alert.

@each $state, $value in $theme-colors {
  $alert-background: shift-color($value, $alert-bg-scale);
  $alert-border: shift-color($value, $alert-border-scale);
  $alert-color: shift-color($value, $alert-color-scale);

  @if (contrast-ratio($alert-background, $alert-color) < $min-contrast-ratio) {
    $alert-color: mix($value, color-contrast($alert-background), abs($alert-color-scale));
  }
  .alert-#{$state} {
    @include alert-variant($alert-background, $alert-border, $alert-color);
  }
}

জাভাস্ক্রিপ্ট আচরণ

শুরু করুন

সতর্কতা হিসাবে উপাদান আরম্ভ করুন

const alertList = document.querySelectorAll('.alert')
const alerts = [...alertList].map(element => new bootstrap.Alert(element))

একটি সতর্কতা খারিজ করার একমাত্র উদ্দেশ্যে, JS API এর মাধ্যমে উপাদানটিকে ম্যানুয়ালি আরম্ভ করার প্রয়োজন নেই। ব্যবহার করেdata-bs-dismiss="alert" , উপাদানটি স্বয়ংক্রিয়ভাবে শুরু হবে এবং সঠিকভাবে বরখাস্ত করা হবে।

ট্রিগার দেখুনআরো বিস্তারিত জানার জন্য

ট্রিগার

নীচে প্রদর্শিত হিসাবে সতর্কতার মধ্যেdata একটি বোতামের বৈশিষ্ট্য দিয়ে বরখাস্ত করা যেতে পারে :

<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>

বা সতর্কতার বাইরের একটি বোতামে ব্যবহার করে data-bs-targetনীচে প্রদর্শিত হিসাবে:

<button type="button" class="btn-close" data-bs-dismiss="alert" data-bs-target="#my-alert" aria-label="Close"></button>

মনে রাখবেন যে একটি সতর্কতা বন্ধ করা হলে এটি DOM থেকে মুছে যাবে।

পদ্ধতি

আপনি সতর্কতা কনস্ট্রাক্টরের সাথে একটি সতর্কতা উদাহরণ তৈরি করতে পারেন, উদাহরণস্বরূপ:

const bsAlert = new bootstrap.Alert('#myAlert')

এটি data-bs-dismiss="alert"অ্যাট্রিবিউট আছে এমন বংশধর উপাদানগুলিতে ক্লিক ইভেন্টগুলির জন্য একটি সতর্কতা শোনায়৷ (ডেটা-এপিআই-এর স্বয়ংক্রিয়-সূচনা ব্যবহার করার সময় প্রয়োজনীয় নয়।)

পদ্ধতি বর্ণনা
close DOM থেকে এটিকে সরিয়ে একটি সতর্কতা বন্ধ করে। যদি .fadeএবং .showক্লাসগুলি উপাদানটিতে উপস্থিত থাকে তবে সতর্কতাটি সরানোর আগে বিবর্ণ হয়ে যাবে।
dispose একটি উপাদানের সতর্কতা ধ্বংস করে। (DOM উপাদানে সঞ্চিত ডেটা সরিয়ে দেয়)
getInstance স্ট্যাটিক পদ্ধতি যা আপনাকে একটি DOM উপাদানের সাথে যুক্ত সতর্কতার উদাহরণ পেতে দেয়। উদাহরণস্বরূপ: bootstrap.Alert.getInstance(alert).
getOrCreateInstance স্ট্যাটিক পদ্ধতি যা একটি DOM উপাদানের সাথে যুক্ত একটি সতর্কতা দৃষ্টান্ত প্রদান করে বা এটি আরম্ভ করা না হলে একটি নতুন তৈরি করে৷ আপনি এটি এই মত ব্যবহার করতে পারেন: bootstrap.Alert.getOrCreateInstance(element).

মৌলিক ব্যবহার:

const alert = bootstrap.Alert.getOrCreateInstance('#myAlert')
alert.close()

ঘটনা

বুটস্ট্র্যাপের সতর্কতা প্লাগইন সতর্কতার কার্যকারিতার সাথে হুক করার জন্য কয়েকটি ইভেন্ট প্রকাশ করে।

ঘটনা বর্ণনা
close.bs.alert closeইনস্ট্যান্স পদ্ধতি কল করা হলে অবিলম্বে আগুন .
closed.bs.alert সতর্কতা বন্ধ হয়ে গেলে এবং CSS ট্রানজিশন সম্পন্ন হলে বরখাস্ত করা হয়। 
const myAlert = document.getElementById('myAlert')
myAlert.addEventListener('closed.bs.alert', event => {
  // do something, for instance, explicitly move focus to the most appropriate element,
  // so it doesn't get lost/reset to the start of the page
  // document.getElementById('...').focus()
})