فرم های درون خطی بوت استرپ
در یک فرم درون خطی، تمام عناصر به صورت خطی و چپ چین می باشند و برچسب ها نیز کنار آنها می باشند.
نکته: ویژگی ذکر شده، تنها برای فرم هایی که دارای میدان دید با عرض حداقل 768 پیکسل می باشند اعمال خواهد شد.
قواعد اضافی برای ایجاد یک فرم درون خطی:
- کلاس form-inline. را به عنصر <form> اضافه کنید.
مثال زیر، یک فرم درون خطی را به همراه دو فیلد ورودی و یک چک باکس و یک دکمه ی submit ارائه می دهد:
مثال (فرم های بوت استرپ)
<form class="form-inline" role="form">
<div class="form-group">
<label for="email">Email address:</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 class="form-group">
<label for="email">Email address:</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>
خودتان امتحان کنید »
نکته: در صورتی که شما برای هر عنصر ورودی(input) یک برچسب اضافه نکنید، صفحه خوان ها با فرم شما به مشکل برخواهند خورد. می توانید با استفاده از کلاس sr-onlyy.، بر چسب ها را برای تمام دستگاه ها به جز صفحه خوان ها پنهان کنید.
مثال (فرم های بوت استرپ)
<form class="form-inline" role="form">
<div class="form-group">
<label class="sr-only" for="email">Email address:</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 class="form-group">
<label class="sr-only" for="email">Email address:</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>
خودتان امتحان کنید »
