Bootstrap Alert বুটস্ট্রাপ এলার্ট
বুটস্ট্রাপ এলার্ট
এলার্ট
বুটস্ট্রাপের মাধ্যমে খুব সহজে সতর্কবার্তা তৈরি করা যায়।
বুটস্ট্রাপ এলার্ট তৈরি করার জন্য
.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>
ফলাফল
No comments