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

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

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

 

বুটস্ট্রাপ ফরম


বুটস্ট্রাপের ডিফল্ট সেটিংস

বুটস্ট্রাপ ব্যবহারে ফরম কন্ট্রোলগুলো স্বয়ংক্রিয়ভাবে কিছু সর্বজন ব্যবহার্য সাধারণ স্টাইল গ্রহন করে।

.form-control ক্লাস যুক্ত সকল টেক্সট ইনপুট এলিমেন্ট যেমনঃ <input>, <textarea> এবং <select> এর প্রশস্ততা সাধারণত ১০০% হয়।


বুটস্ট্রাপ ফরম লে-আউট

বুটস্ট্রাপে তিন ধরণের ফরম লে-আউট রয়েছেঃ

  • উলম্ব(Vertical) ফরম (এটিই ডিফল্ট)
  • আনুভূমিক(Horizontal) ফরম
  • ইনলাইন(Inline) ফরম

তিনটি ফরম লে-আউটের জন্যই স্ট্যান্ডার রুলস গুলো হলোঃ

  • সবসময় <form role="form"> ব্যবহার করুন। (স্ক্রিন রিডারদের জন্য সহায়ক)
  • লেভেল এবং ফরম কন্ট্রোলগুলো <div class="form-group"> এর মধ্যে রাখুন (কাঙ্খিত ব্যবধানের জন্য প্রয়োজন)
  • সকল টেক্সট এলিমেন্ট যেমন <input>, <textarea> এবং <select>.form-control ক্লাস যুক্ত করুন।

বুটস্ট্রাপ Vertical ফরম (ডিফল্ট)

নিচের উদাহরণে দুইটি ইনফুট ফিল্ড, একটি চেকবক্স এবং একটি সাবমিট বাটন সহ একট vertical ফরম তৈরি করা হলোঃ

উদাহরণ

<!DOCTYPE html>
<html>
   <head>
      <title>Bootstrap Forms 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>
			<form role="form">
				<div class="form-group">
					<label for="email">E-mail:</label>
					<input type="email" class="form-control" id="email">
				</div>
				<div class="form-group">
					<label for="pwd">Password:</label>
					<input type="password" class="form-control" id="pwd">
				</div>
				<div class="checkbox">
					<label><input type="checkbox"> Remember me</label>
				</div>
				<button type="submit" class="btn btn-default">Submit</button>
			</form>
	    </div>

   </body>
</html>

ফলাফল




বুটস্ট্রাপ ইনলাইন ফরম

ইনলাইন ফরমে, সকল এলিমেন্টই ইনলাইন এবং বামে এ্যালাইনযুক্ত হয়। এছাড়াও লেভেলগুলো একই সাথে থাকে।

নোটঃ এটি শুধুমাত্র সেখানের এমন দেখাবে যেখানে ভিউপোর্ট(ডিভাইসের স্ক্রিনের আকার) কমপক্ষে 768px প্রশস্ত!

ইনলাইন ফরম তৈরি করা জন্য <form> এলিমেন্টের মধ্যে .form-inline ক্লাস যুক্ত করতে হবে।

নিচের উদাহরণে দুটি ইনপুট ফিল্ড, একটি চেকবক্স এবং একটি সাবমিট বাটনসহ একটি ইনলাইন ফরম দেখানো হলোঃ

উদাহরণ

<!DOCTYPE html>
<html>
   <head>
      <title>Bootstrap Forms 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>
			<form class="form-inline" role="form">
				<div class="form-group">
					<label for="email">E-mail:</label>
					<input type="email" class="form-control" id="email">
				</div>
				<div class="form-group">
					<label for="pwd">Password:</label>
					<input type="password" class="form-control" id="pwd">
				</div>
				<div class="checkbox">
					<label><input type="checkbox"> Remember me</label>
				</div>
				<button type="submit" class="btn btn-default">Submit</button>
			</form>
	    </div>

   </body>
</html>

ফলাফল




টিপসঃ আপনি যদি আপনার ফরমের প্রতিটি ইনপুট ফিল্ডে লেভেল যুক্ত না করেন, তাহলে স্ক্রিন রিডারদের জন্য তা কষ্টদায়ক হবে। .sr-only ক্লাস ব্যবহার করে চাইলে আপনি স্ক্রিন রিডার ব্যতীত অন্য যেকোন ডিভাইসের জন্য লেভেল হাইড করতে পারেনঃ

উদাহরণ

<!DOCTYPE html>
<html>
   <head>
      <title>Bootstrap Forms 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>
			<form role="form">
				<div class="form-group">
					<label class="sr-only" for="email">E-mail:</label>
					<input type="email" class="form-control" id="email">
				</div>
				<div class="form-group">
					<label class="sr-only" for="pwd">Password:</label>
					<input type="password" class="form-control" id="pwd">
				</div>
				<div class="checkbox">
					<label><input type="checkbox"> Remember me</label>
				</div>
				<button type="submit" class="btn btn-default">Submit</button>
			</form>
	    </div>

   </body>
</html>

ফলাফল




বুটস্ট্রাপ Horizontal ফরম

একটি Horizontal ফরম মার্কআপের সংখ্যা এবং উপস্থাপনার দিক থেকে অন্যান্য ফরমের চেয়ে আলাদা।

Horizontal ফরম তৈরি করার নিয়মঃ

  1. Horizontal ফরম তৈরি করার জন্য <form> এলিমেন্টে .form-horizontal ক্লাস অন্তর্ভূক্ত করুন।
  2. এবং সকল <label> এলিমেন্টে .control-label ক্লাস যুক্ত করুন।

টিপসঃ একটি Horizontal ফরম লে-আউটে লেভেল এবং ফরম কন্ট্রোল গ্রুপকে বিন্যাস(align) করার জন্য বুটস্ট্রাপের পূর্বনির্ধারিত গ্রীড ক্লাস ব্যবহার করুন।

নিচের উদাহরণে দুটি ইনপুট ফিল্ড, একটি চেকবক্স এবং একটি সাবমিট বাটনসহ Horizontal ফরম তৈরি করা হলোঃ

উদাহরণ

<!DOCTYPE html>
<html>
   <head>
      <title>Bootstrap Forms 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>বুটস্ট্রাপ Horizontal ফরম</h2>
			<form class="form-horizontal" role="form">
				<div class="form-group">
					<label class="control-label col-sm-2" for="email">E-mail:</label>
					<div class="col-sm-10">
						<input type="email" class="form-control" id="email" placeholder="Enter email">
					</div>
				</div>
				<div class="form-group">
					<label class="control-label col-sm-2" for="pwd">Password:</label>
					<div class="col-sm-10"> 
						<input type="password" class="form-control" id="pwd" placeholder="Enter password">
					</div>
				</div>
				<div class="form-group"> 
					<div class="col-sm-offset-2 col-sm-10">
						<div class="checkbox">
							<label><input type="checkbox"> Remember me</label>
						</div>
					</div>
				</div>
				<div class="form-group"> 
					<div class="col-sm-offset-2 col-sm-10">
						<button type="submit" class="btn btn-default">Submit</button>
					</div>
				</div>
			</form>
	    </div>

   </body>
</html>

ফলাফল