বুটস্ট্রাপ সিএসএস এইচটিএমএল জাভাস্ক্রিপ্ট জেকুয়েরি পিএইচপি এসকিউএল এঙ্গুলার জেএস
ফোরাম
×

বুটস্ট্রাপ টিউটোরিয়াল

হোম-Home শুরু করুন-Get Started গ্রীড বেসিক-Grid Basic

সিএসএস কম্পোনেন্ট

টাইপোগ্রাফী-Typography টেবিল-Table ইমেজ-Image জামবোর্টন-Jumbotron বুটস্ট্রাপ Well এলার্ট-Alert বাটন-Button বাটন গ্রুপ-Button Group গ্লিফআইকন-Glypicon ব্যাজ/লেভেল-Badge/Label প্রোগ্রেস বার-Progress Bar পেজিনেশন-Pagination পেজার-Pager লিস্ট গ্রুপ-List Group প্যানেল-Panel ফরম-Form ইনপুট-Input ইনপুট(২)-Input(2) ইনপুটের আকার-Input Sizing সাহায্যকারী-Helper

JS কম্পোনেন্ট

ড্রপডাউন-Dropdown কলাপ্স-Collapse ট্যাব/পিল-Tab/Pill ন্যাভবার-Navbar ক্যারোসেল-Carousel মোডাল-Modal টুলটিপ-Tooltip পপওভার-Popover স্ক্রলস্পাই-Scrollspy এফিক্স-Affix

বুটস্ট্রাপ গ্রীড সিস্টেম

গ্রীড সিস্টেম-Grid System বুটস্ট্রাপ Stacked/Horizontal গ্রীড ছোট-Grid Small গ্রীড মিডিয়াম-Grid Medium গ্রীড বড়-Grid Large গ্রীড উদাহরণ-Grid Example

বুটস্ট্রাপ রেফারেন্স

ড্রপডাউন-Dropdown কলাপ্স-Collapse ট্যাব-Tab বাটন-Button ক্যারোসেল-Carousel মোডাল-Modal স্ক্রলস্পাই-Scrollspy এফিক্স-Affix

 

বুটস্ট্রাপ এলার্ট


এলার্ট

বুটস্ট্রাপের মাধ্যমে খুব সহজে সতর্কবার্তা তৈরি করা যায়।

বুটস্ট্রাপ এলার্ট তৈরি করার জন্য .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 এলার্ট রেফারেন্স পেজে ভিজিট করুন।