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

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

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

 

বুটস্ট্রাপের মাধ্যমে ইনপুটের আকার নির্ধারণ


ফরম ইনপুটের আকার নির্ধারণ

বুটস্ট্রাপে ফরমের আকার নির্ধারণ করার জন্য .input-lg এবং .input-sm ক্লাস ব্যবহার করা হয়।

এছাড়াও বুটস্ট্রাপের গ্রীড ক্লাস ব্যবহারের মাধ্যমে ফরমের আকার নির্ধারণ করা যায়। এজন্য ফরম ইনপুট এলিমেন্ট অথবা এর প্যারেন্ট এলিমেন্টের মধ্যে গ্রীড ক্লাসগুলো ব্যবহার করতে হবে।


উচ্চতা নির্ধারণ

নিচের উদাহরণে বিভিন্ন উচ্চতাসহ ইনপুট এলিমেন্ট দেখানো হলোঃ

উদাহরণ

<!DOCTYPE html>
<html>
   <head>
      <title>Bootstrap Forms Size 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>নিচের ফরমে .input-lg and .input-sm ক্লাসের সাহায্যে বিভিন্ন আকারের ইনপুট এলিমেন্ট দেখানো হলো:</p>
			<form role="form">
				<div class="form-group">
					<label>ডিফল্ট ইনপুট</label>
					<input class="form-control" type="text">
				</div>
				<div class="form-group">
					<label>input-lg(বড় আকারের ইনপুট)</label>
					<input class="form-control input-lg" type="text">
				</div>
				<div class="form-group">
					<label>input-sm(ছোট আকারের ইনপুট)</label>
					<input class="form-control input-sm" type="text">
				</div>
				<div class="form-group">
					<label>ডিফল্ট সিলেক্ট লিস্ট</label>
					<select class="form-control">
						<option>১</option>
						<option>২</option>
						<option>৩</option>
						<option>৪</option>
					</select>
				</div>
				<div class="form-group">
					<label>input-lg(বড় আকারের সিলেক্ট লিস্ট)</label>
					<select class="form-control input-lg">
						<option>১</option>
						<option>২</option>
						<option>৩</option>
					</select>
				</div>
				<div class="form-group">
					<label>input-sm(ছোট আকারের সিলেক্ট লিস্ট)</label>
					<select class="form-control input-sm">
						<option>১</option>
						<option>২</option>
						<option>৩</option>
					</select>
				</div>
			</form>
	    </div>

   </body>
</html>

ফলাফল




Horizontal ফরমে লেভেল এবং ফরম কন্ট্রোলগুলোর আকার নির্ধারন করার জন্য <div class="form-group"> ক্লাসের সাথে .form-group-* ক্লাস ব্যবহার করুনঃ

উদাহরণ

<!DOCTYPE html>
<html>
   <head>
      <title>Bootstrap Forms Size 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>Horizontal ফরমে লেভেল এবং ফরম কন্ট্রোলগুলো আকার নির্ধারন করার জন্য .form-group ক্লাসের সাথে .form-group-lg 
			   অথবা .form-group-sm ক্লাস ব্যবহার করুন:</p>
			<form class="form-horizontal" role="form">
				<div class="form-group form-group-lg">
					<label class="col-sm-2 control-label" for="lg">form-group-lg</label>
					<div class="col-sm-10">
						<input class="form-control" type="text" id="lg">
					</div>
				</div>
				<div class="form-group form-group-sm">
					<label class="col-sm-2 control-label" for="sm">form-group-sm</label>
					<div class="col-sm-10">
						<input class="form-control" type="text" id="sm">
					</div>
				</div>
			</form>
	    </div>

   </body>
</html>

ফলাফল




কলামের আকার নির্ধারণ

নিম্নলিখিত উদাহরণে .col-xs-* ক্লাসের সাহায্যে বিভিন্ন প্রশস্তের(width) ইনপুট এলিমেন্ট দেখানো হলোঃ

উদাহরণ

<!DOCTYPE html>
<html>
   <head>
      <title>Bootstrap Forms Size 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>নিচের ফরমে .col-xs-* ক্লাসের সাহায্যে বিভিন্ন প্রশস্তের ইনপুট দেখানো হলো:</p>
			<form role="form">
				<div class="form-group">
					<div class="col-xs-4">
						<label>col-xs-4</label>
						<input class="form-control" type="text">
					</div>
					<div class="col-xs-4">
						<label>col-xs-4</label>
						<input class="form-control" type="password">
					</div>
					<div class="col-xs-4">
						<label>col-xs-4</label>
						<input class="form-control" type="date">
					</div>
				</div>
			</form>
	    </div>

   </body>
</html>

ফলাফল




সাহায্যকারী টেক্সট

ফরমের মধ্যে ব্লক লেভেল সাহায্যকারী টেক্সট যুক্ত করার জন্য <p>, <span> অথবা <div> এলিমেন্টের মধ্যে .help-block ক্লাস ব্যবহার করুনঃ

উদাহরণ

<!DOCTYPE html>
<html>
   <head>
      <title>Bootstrap Forms Size 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>ফরমে ব্লক লেভেল হেল্প টেক্সট যুক্ত করার জন্য .help-block ক্লাস ব্যবহার করুনঃ</p>
			<form role="form">
				<div class="form-group">
					<label>Password:</label>
					<input type="password" class="form-control" placeholder="password">
					<span class="help-block">এগুলো হলো কিছু হেল্প টেক্সট যা প্রয়োজন ভেদে একের অধিক লাইনের হতে পারে।</span>
				</div>
				<button type="submit" class="btn btn-default">Submit</button>
			</form>
	    </div>

   </body>
</html>

ফলাফল