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

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

হোম-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

 

বুটস্ট্রাপ মোডাল প্লাগ-ইন


মোডাল প্লাগ-ইন

মোডাল প্লাগ-ইন হলো ডায়ালগ বক্স/পপ-আপ উইন্ডো যা বর্তমান পেজের উপরে প্রদর্শিত হয়ঃ

টিপসঃ মোডাল প্লাগ-ইন ব্যবহারের জন্য আপনি চাইলে বুটস্ট্রাপের আলাদা "modal.js" ফাইল ব্যবহার করতে পারেন, অথবা বুটস্ট্রাপের সম্পূর্ণ js ফাইল "bootstrap.js" বা "bootstrap.min.js" ফাইলও ব্যবহার করতে পারেন। বুটস্ট্রাপের সম্পূর্ণ js ফাইলের মধ্যে বুটস্ট্রাপের সবগুলো কম্পোনেন্ট একত্রে থাকে। মোডাল কম্পোনেন্ট ব্যবহার করার জন্য উপরের যেকোন একটি ফাইল ওয়েবপেজে অন্তর্ভুক্ত করলেই চলবে।


কিভাবে মোডাল তৈরি করবেন?

কিভাবে একটি বেসিক মোডাল তৈরি করা যায় তা নিম্নলিখিত উদাহরণে দেখানো হলোঃ

উদাহরণ

<!DOCTYPE html>
<html>
   <head>
      <title>Bootstrap Modal 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">
			<h3>মোডালের উদাহরণ</h3>
			<!-- বাটনের মাধ্যমে মোডাল ট্রিগার -->
			<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#modalId">
			মোডাল ওপেন করুন
			</button>

			<!-- মোডাল -->
			<div class="modal fade" id="modalId" role="dialog">
				<div class="modal-dialog">
				
					<!-- মোডাল কন্টেন্ট -->
					<div class="modal-content">
						<div class="modal-header">
							<button type="button" class="close" data-dismiss="modal">×</button>
							<h4 class="modal-title">মোডাল হেডার</h4>
						</div>
						<div class="modal-body">
							<p>মোডাল বডি। এখানে মোডালের কন্টেন্ট রাখা হয়।</p>
						</div>
						<div class="modal-footer">
							<button type="button" class="btn btn-default" data-dismiss="modal">ক্লোজ</button>
						</div>
					</div>
					
				</div>
			</div>
	    </div>

   </body>
</html>

ফলাফল




উদাহরণের ব্যাখ্যা


"ট্রিগার" পার্টঃ

মোডাল উইন্ডোকে ট্রিগার করার জন্য, আপনাকে অবশ্যই একটি বাটন বা লিংক ব্যবহার করতে হবে।

তারপর বাটন বা লিংকের মধ্যে নিম্নলিখিত দুটি data-* এট্রিবিউট অন্তর্ভুক্ত করুনঃ

  • data-toggle="modal" এটি মোডাল উইন্ডো ওপেন করে
  • data-target="#myModal" এটির মাধ্যমে মোডালের আইডিকে লক্ষ্য করা হয়

"মোডাল" পার্টঃ

মোডালের পেরেন্ট <div> এ অবশ্যই একটি আইডি থাকতে হবে এবং এর ভ্যালু অবশ্যই data-target এট্রিবিউটের মতো হবে, যেটি মোডালকে ট্রিগার করার জন্য ব্যবহার করা হয় ("myModal")।

.modal ক্লাস <div> এলিমেন্টের কন্টেন্টকে মোডাল হিসেবে আইডেন্টিফাই করে এবং এর মধ্যে ফোকাস তৈরি করে।

.fade ক্লাসের মাধ্যমে মোডালে ট্রানজিশন এফেক্ট যুক্ত করা হয়েছে। আপনি চাইলে এই ক্লাসটি বাদ দিতে পারেন।

role="dialog" এট্রিবিউটটি ব্যবহার করা হয় স্ক্রিন রিডারদের এক্সেসিবিলিটি ইম্প্রুভ করার জন্য।

.modal-dialog ক্লাসের মাধ্যমে মোডালের জন্য যথাযথ প্রস্থ এবং মার্জিন নিশ্চিত করা হয়।


"মোডাল কন্টেন্ট" পার্টঃ

class="modal-content" যুক্ত <div> এলিমেন্ট মোডালকে স্টাইল (border, background-color, etc.) করে। এই <div> এলিমেন্টের মধ্যেই মোডাল হেডার, মোডাল বডি এবং মোডাল ফুটার যুক্ত করতে হবে।

মোডালের হেডারকে স্টাইল করার জন্য .modal-header ক্লাস ব্যবহার করা হয়। হেডারের <button> এলিমেন্টের মধ্যে data-dismiss="modal" এট্রিবিউট থাকে যেটিতে ক্লিক করে মোডালটি ক্লোজ করা যায়। .close ক্লাসটি ক্লোজ বাটনকে স্টাইল করে এবং .modal-title ক্লাসটি মোডাল হেডারকে যথাযথ লাইন উচ্চতাসহকারে স্টাইল করে।

মোডালের বডিকে স্টাইল করার জন্য .modal-body ক্লাস ব্যবহার করা হয়। হেডারের মধ্যে আপনার প্রয়োজন মতো এইচটিএমএল মার্কআপ ট্যাগ ব্যবহার করতে পারেবেন। যেমন; প্যারাগ্রাফ, ইমেজ, ভিডিও ইত্যাদি।

মোডালের ফুটারকে স্টাইল করার জন্য .modal-footer ক্লাস ব্যবহার করা হয়। মনে রাখবেন এই অংশটি ডিফল্টভাবে ডানে এ্যালাইন অবস্থায় থাকে।


মোডালের আকার

ছোট আকারের মোডালের জন্য .modal-sm ক্লাস এবং বড় আকারের মোডালের জন্য .modal-lg ক্লাস ব্যবহার করুন।

মোডালের আকার নির্ধারণের জন্য সাইজ ক্লাস গুলো .modal-dialog ক্লাস যুক্ত <div> এলিমেন্টের মধ্যে ব্যবহার করুনঃ

ছোট আকারের মোডাল

<!DOCTYPE html>
<html>
   <head>
      <title>Bootstrap Modal 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">
			<h3>ছোট মোডালের উদাহরণ</h3>
			<!-- বাটনের মাধ্যমে মোডাল ট্রিগার -->
			<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#modalId">
			মোডাল ওপেন করুন
			</button>

			<!-- মোডাল -->
			<div class="modal fade" id="modalId" role="dialog">
				<div class="modal-dialog modal-sm">
				
					<!-- মোডাল কন্টেন্ট -->
					<div class="modal-content">
						<div class="modal-header">
							<button type="button" class="close" data-dismiss="modal">×</button>
							<h4 class="modal-title">মোডাল হেডার</h4>
						</div>
						<div class="modal-body">
							<p>মোডাল বডি। এখানে মোডালের কন্টেন্ট রাখা হয়।</p>
						</div>
						<div class="modal-footer">
							<button type="button" class="btn btn-default" data-dismiss="modal">ক্লোজ</button>
						</div>
					</div>
					
				</div>
			</div>
	    </div>

   </body>
</html>

ফলাফল




বড় আকারের মোডাল

<!DOCTYPE html>
<html>
   <head>
      <title>Bootstrap Modal 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">
			<h3>বড় মোডালের উদাহরণ</h3>
			<!-- বাটনের মাধ্যমে মোডাল ট্রিগার -->
			<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#modalId">
			মোডাল ওপেন করুন
			</button>

			<!-- মোডাল -->
			<div class="modal fade" id="modalId" role="dialog">
				<div class="modal-dialog modal-lg">
				
					<!-- মোডাল কন্টেন্ট -->
					<div class="modal-content">
						<div class="modal-header">
							<button type="button" class="close" data-dismiss="modal">×</button>
							<h4 class="modal-title">মোডাল হেডার</h4>
						</div>
						<div class="modal-body">
							<p>মোডাল বডি। এখানে মোডালের কন্টেন্ট রাখা হয়।</p>
						</div>
						<div class="modal-footer">
							<button type="button" class="btn btn-default" data-dismiss="modal">ক্লোজ</button>
						</div>
					</div>
					
				</div>
			</div>
	    </div>

   </body>
</html>

ফলাফল




ডিফল্টভাবে, মোডাল সাধারনত মিডিয়াম আকারের হয়ে থাকে।