বুটস্ট্রাপ এলার্ট
এলার্ট
বুটস্ট্রাপের মাধ্যমে খুব সহজে সতর্কবার্তা তৈরি করা যায়।
বুটস্ট্রাপ এলার্ট তৈরি করার জন্য .alert ক্লাস এবং সাথে এই ক্লাসগুলোর যেকোন একটি ব্যবহার করুন। যেমন:- .alert-success, .alert-info, .alert-warning অথবা
.alert-danger:
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Alert Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>সতর্ক বার্তা</h2>
<div class="alert alert-success">
<strong>Success!</strong> এই বক্স দ্বারা সফলতা বা ইতিবাচক কাজ বুঝায়।
</div>
<div class="alert alert-info">
<strong>Info!</strong> এই বক্স দ্বারা তথ্যবহুল কোন পরিবির্তন বা তথ্য বুঝায়।
</div>
<div class="alert alert-warning">
<strong>Warning!</strong> এই বক্স দ্বারা সাবধানবাণী বা সতর্কবাণী বুঝায়।
</div>
<div class="alert alert-danger">
<strong>Danger!</strong> এই বক্স দ্বারা বিপজ্জনক বার্তা বা নেতিবাচক কাজ বুঝায়।
</div>
</div>
</body>
</html>
ফলাফল
এলার্ট ক্লোজ করা
এলার্ট বক্সটি ক্লোজ করার জন্য <a> এলিমেন্টের মধ্যে class="close" এবং data-dismiss="alert" এট্রিবিউট যুক্ত করুনঃ
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Alert Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>সতর্কবার্তা</h2>
<p>এখানে class="close" এবং data-dismiss="alert" ব্যবহার করা হয়েছে। যা দ্বারা প্রত্যেকটি বক্সের ডানদিকে একটি ক্লোজ বাটন তৈরি হয়েছে।</p>
<div class="alert alert-success">
<a href="#" class="close" data-dismiss="alert" aria-label="close">×</a>
<strong>Success!</strong> এই বক্স দ্বারা সফলতা বা ইতিবাচক কাজ বুঝায়।
</div>
<div class="alert alert-info">
<a href="#" class="close" data-dismiss="alert" aria-label="close">×</a>
<strong>Info!</strong> এই বক্স দ্বারা তথ্যবহুল কোন পরিবির্তন বা তথ্য বুঝায়।
</div>
<div class="alert alert-warning">
<a href="#" class="close" data-dismiss="alert" aria-label="close">×</a>
<strong>Warning!</strong> এই বক্স দ্বারা সাবধানবাণী বা সতর্কবাণী বুঝায়।
</div>
<div class="alert alert-danger">
<a href="#" class="close" data-dismiss="alert" aria-label="close">×</a>
<strong>Danger!</strong> এই বক্স দ্বারা বিপজ্জনক বার্তা বা নেতিবাচক কাজ বুঝায়।
</div>
</div>
</body>
</html>
ফলাফল
এ্যানিমেশনযুক্ত এলার্ট
এলার্ট মেসেজ ক্লোজ হওয়ার সময় ফেডিং(fading) ইফেক্ট যুক্ত করার জন্য .alert ক্লাসের সাথে .fade এবং .in ক্লাস যুক্ত করুনঃ
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Alert Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>সতর্কবার্তা</h2>
<p>.fade এবং .in ক্লাস ব্যাবহার করে সতর্কবার্তা ক্লোজ করার সময় এ্যানিমেশন তৈরি করা যায়।</p>
<div class="alert alert-success fade in">
<a href="#" class="close" data-dismiss="alert" aria-label="close">×</a>
<strong>Success!</strong> এই বক্স দ্বারা সফলতা বা ইতিবাচক কাজ বুঝায়।
</div>
<div class="alert alert-info fade in">
<a href="#" class="close" data-dismiss="alert" aria-label="close">×</a>
<strong>Info!</strong> এই বক্স দ্বারা তথ্যবহুল কোন পরিবির্তন বা তথ্য বুঝায়।
</div>
<div class="alert alert-warning fade in">
<a href="#" class="close" data-dismiss="alert" aria-label="close">×</a>
<strong>Warning!</strong> এই বক্স দ্বারা সাবধানবাণী বা সতর্কবাণী বুঝায়।
</div>
<div class="alert alert-danger fade in">
<a href="#" class="close" data-dismiss="alert" aria-label="close">×</a>
<strong>Danger!</strong> এই বক্স দ্বারা বিপজ্জনক বার্তা বা নেতিবাচক কাজ বুঝায়।
</div>
</div>
</body>
</html>
ফলাফল
বুটস্ট্রাপ এলার্টের সম্পূর্ণ রেফারেন্স
বুটস্ট্রাপ টুলটিপের অপশন, মেথড এবং ইভেন্টের সম্পূর্ণ রেফারেন্সের জন্য আমাদের বুটস্ট্রাপ JS এলার্ট রেফারেন্স পেজে ভিজিট করুন।