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

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

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

 

বুটস্ট্রাপ ফরম ইনপুট (অন্যান্য)


Static কন্ট্রোল

যদি আপনি static কোন কন্ট্রোল সরাসরি প্রবেশ করাতে চান তাহলে একটি <p> এলিমেন্টের মধ্যে .form-control-static ক্লাস ব্যবহার করতে পারেনঃ

উদাহরণ

<!DOCTYPE html>
<html>
   <head>
      <title>Bootstrap Forms Input 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">
				<div class="form-group">
				<label class="control-label">E-mail:</label>
					<p class="form-control-static">someone@email.com</p>
				</div>
				<div class="form-group">
				<label class="control-label">password:</label>
					<input type="password" class="form-control" placeholder="password">
				</div>
				<div class="form-group">
					<button type="submit" class="btn btn-default">submit</button>
				</div>
			</form>
	    </div>

   </body>
</html>

ফলাফল




বুটস্ট্রাপ ফরম কন্ট্রোলের বিভিন্ন অবস্থা

  1. ফোকাস ইনপুট - ফোকাস অবস্থায় ইনপুটের আউটলাইন বাদ হয়ে যায় এবং তার পরিবর্তে স্যাডো বক্স ব্যবহৃত হয়।
  2. ডিসেবল(disabled) ইনপুট - একটি ইনপুট ফিল্ডকে disabled করার জন্য ঐ ইনপুট ফিল্ডে disabled এট্রিবিউট ব্যবহার করুন।
  3. ডিসেবল ফিল্ডসেট(FIELDSET) - একটি ফিল্ডসেটের সকল ইনপুট disabled করার জন্য ঐ ফিল্ডসেটে disabled এট্রিবিউট ব্যবহার করুন।
  4. শুধুমাত্র পঠনযোগ্য ইনপুট - একটি ইনপুটকে ইউজারের নিকট শুধুমাত্র পঠনযোগ্য করে উপস্থাপনের জন্য ঐ ইনপুট ফিল্ডে readonly এট্রিবিউট ব্যবহার করুন। এই ধরনের ইনপুট ইউজার পরিবর্তন/এডিট করতে পারেনা।
  5. ভ্যালিডেশন অবস্থা(STATES) - বুটস্ট্রাপে ভূল, সতর্কতা এবং সফলতা বার্তার জন্য ভ্যালিডেশন স্টাইল রয়েছে। বুটস্ট্রাপের এই ভ্যালিডেশন স্টাইল ব্যবহার করার জন্য পেরেন্ট এলিমেন্টে .has-warning, .has-error অথবা .has-success ক্লাস যুক্ত করুন।
  6. আইকন - আপনি .has-feedback ক্লাস এবং একটি আইকনের সাহায্যে ফিডব্যাক যুক্ত করতে পারেন।
  7. অদৃশ্যমান লেভেল - লেভেল অদৃশ্যমান অবস্থায় রাখার জন্য লেভেলে .sr-only ক্লাস যুক্ত করুন।

নিম্নলিখিত উদাহরণে একটি আনুভূমিক(Horizontal) ফরমে কিছু ফরম কন্ট্রোলের বিভিন্ন অবস্থা দেখানো হলোঃ

উদাহরণ

<!DOCTYPE html>
<html>
   <head>
      <title>Bootstrap Forms Input 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">ফোকাস</label>
				<input class="form-control" type="text" placeholder="ফোকাস দেখার জন্য ক্লিক করুন">
				</div>
				<div class="form-group">
				<label class="control-label">Disabled</label>
				<input class="form-control" type="text" placeholder="এটি একটি disable ইনপুট" disabled>
				</div>
				<fieldset disabled>
				<div class="form-group">
					<label class="control-label">Disable ইনপুট এবং সিলেক্ট লিস্ট (disabled ফিল্ডসেট)</label>
					<input type="text" class="form-control" placeholder="disabled input">
				</div>
				<div class="form-group">
					<label class="control-label"></label>
						<select class="form-control">
						<option>Disabled সিলেক্ট অপশন</option>
						</select>
				</div>
				</fieldset>
				<div class="form-group has-success has-feedback">
				<label class="control-label">সফল ইনপুট এবং glyphicon</label>
					<input type="text" class="form-control">
					<span class="glyphicon glyphicon-ok form-control-feedback"></span>
				</div>
				<div class="form-group has-warning has-feedback">
				<label class="control-label">সতর্কতাসহ ইনপুট এবং glyphicon</label>
					<input type="text" class="form-control">
					<span class="glyphicon glyphicon-warning-sign form-control-feedback"></span>
				</div>
				<div class="form-group has-error has-feedback">
				<label class="control-label">ভূল ইনপুট এবং glyphicon</label>
					<input type="text" class="form-control">
					<span class="glyphicon glyphicon-remove form-control-feedback"></span>
				</div>
			</form>
	    </div>

   </body>
</html>

ফলাফল




এবং এখানে ইনলাইন ফরম স্টাইলে কিছু ফরম কন্ট্রোলের বিভিন্ন ভ্যালিডেশন স্টেট দেখানো হলোঃ

উদাহরণ

<!DOCTYPE html>
<html>
   <head>
      <title>Bootstrap Forms Input 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 class="control-label">ফোকাস</label>
				<input class="form-control" type="text" placeholder="ফোকাস দেখার জন্য ক্লিক করুন">
				</div>
				<div class="form-group">
				<label class="control-label">Disabled</label>
				<input class="form-control" type="text" placeholder="এটি একটি disable ইনপুট" disabled>
				</div>
				<fieldset disabled>
				<div class="form-group">
					<label class="control-label">Disable ইনপুট এবং সিলেক্ট লিস্ট (disabled ফিল্ডসেট)</label>
					<input type="text" class="form-control" placeholder="disabled input">
				</div>
				<div class="form-group">
					<label class="control-label"></label>
						<select class="form-control">
						<option>Disabled সিলেক্ট অপশন</option>
						</select>
				</div>
				</fieldset>
				<div class="form-group has-success has-feedback">
				<label class="control-label">সফল ইনপুট এবং glyphicon</label>
					<input type="text" class="form-control">
					<span class="glyphicon glyphicon-ok form-control-feedback"></span>
				</div>
				<div class="form-group has-warning has-feedback">
				<label class="control-label">সতর্কতাসহ ইনপুট এবং glyphicon</label>
					<input type="text" class="form-control">
					<span class="glyphicon glyphicon-warning-sign form-control-feedback"></span>
				</div>
				<div class="form-group has-error has-feedback">
				<label class="control-label">ভূল ইনপুট এবং glyphicon</label>
					<input type="text" class="form-control">
					<span class="glyphicon glyphicon-remove form-control-feedback"></span>
				</div>
			</form>
	    </div>

   </body>
</html>

ফলাফল