فرم ها در بوت استرپ
تنظیمات پیش فرض بوتسترپ
هنگام استفاده از بوتسترپ، تنظیمات فرم ها(form controls) به طور اتوماتیک، یک سری از تنظیمات استایل عمومی را از بوتسترپ دریافت می کنند:
هنگام استفاده از بوت استرپ، فرم ها به طور اتوماتیک یک سری استایل را از بوت استرپ دریافت می کنند بعنوان مثال، تمام عناصر متنی، از قبیل <input> و <textarea> و <select>، وقتی که از کلاس form-control. استفاده می کنند، دارای عرضی برابر با %100 خواهند بود.
انواع فرم ها در بوت استرپ
بوت استرپ، سه نوع فرم را ارائه می دهد:
- فرم عمودی(پیش فرض)
- فرم افقی
- فرم درون خطی
قواعد استاندارد برای هر سه طرح بندی فرم که باید آنها را رعایت کنید:
- همواره از <form role="form"> استفاده کنید(این کاردسترسی کسانی که از screen reader استفاده می کنند را بهتر می کند).
- برچسب ها(label) و فرم ها را درون یک <div class="form-group"> بسته بندی کنید.
- کلاس form-control. را به تمام عناصر <input> و <textarea> و <select> اضافه کنید.
فرم عمودی بوت استرپ(پیش فرض)
مثال زیر یک فرم عمودی را به همراه دو فیلد ورودی و یک چک باکس و یک دکمه ی submit، ایجاد می کند:
مثال (فرم های بوت استرپ)
<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>
خودتان امتحان کنید »
فرم های درون خطی بوت استرپ
در یک فرم درون خطی، تمام عناصر به صورت خطی و چپ چین می باشند و برچسب ها نیز کنار آنها می باشند.
نکته: ویژگی ذکر شده، تنها برای فرم هایی که دارای میدان دید با عرض حداقل 768 پیکسل می باشند اعمال خواهد شد.
قواعد اضافی برای ایجاد یک فرم درون خطی:
- کلاس form-inline. را به عنصر <form> اضافه کنید.
مثال زیر، یک فرم درون خطی را به همراه دو فیلد ورودی و یک چک باکس و یک دکمه ی submit ارائه می دهد:
مثال (فرم های بوت استرپ)
<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-only.، بر چسب ها را برای تمام دستگاه ها به جز صفحه خوان ها پنهان کنید.
مثال (فرم های بوت استرپ)
<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>
خودتان امتحان کنید »
فرم افقی بوت استرپ
یک فرم افقی از دیگر فرم ها متمایز می باشد، هم از نظر مقدار کدها و هم از نظر ارائه ی فرم مورد نظر.
قواعد اضافی برای یک فرم افقی:
- کلاس form-horizontal. را به عنصر <form> اضافه کنید.
- کلاس control-label. را به تمام عناصر <label> اضافه کنید.
نکته: می توانید از کلاس های شبکه بندی از پیش تعریف شده ی بوتسترپ برای تراز کردن برچسب ها و فرم ها در حالت افقی استفاده کنید.
در مثال زیر یک فرم افقی را به همراه دو فیلد ورودی و یک چک باکس و یک دکمه ی submit ایجاد می کنیم:
مثال (فرم های بوت استرپ)
<div class="form-group">
<label class="control-label col-sm-2" for="email">Email:</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>
خودتان امتحان کنید »
- نوشته شده توسط احسان عباسی
- بازدید: 17593
