বুটস্ট্রাপের মাধ্যমে ইনপুটের সাইজ নির্ধারণ
ফরম ইনপুটের আকার নির্ধারণ
বুটস্ট্রাপে ফরমের আকার নির্ধারণ করার জন্য .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>
ফলাফল