آموزش Bootstrap - قسمت 9

[M_Piyer]

لایه بندی فرم ها در بوت استرپ بوت استرپ لایه بندی های زیر را برای استایل دهی به فرم ها فراهم میکند
فرم های عمودی (پیش فرض - Default)

فرم های درون خطی (inline forms)
فرم های افقی

فرم های عمودی یا فرم پایه در بوت استرپ :

برای ایجاد یک فرم در بوت استرپ مراحل زیر را انجام دهید:

یک نقش (role) با عنوان form به تگ form اصلی بدهید
تمام کنترل های درون تگ form را داخل یک div با کلاس form-group قرار دهید. با استفاده از این کلاس ایجاد فاصله بهینه بین کنترل های فرم بهینه میشود.
به تمام کنترل های متنی با تگ های input,textarea, select یک کلاس به نام form-control اضافه کنی


مثال




<div class="container">
<div class="row">
<div class="col-md-6">
<form role="form">
<div class="form-group">
<label for="name">نام</label>
<input type="text" class="form-control" id="name"
placeholder="نام خود را وارد کنید">
</div>
<div class="form-group">
<label for="inputfile">آپلود فایل </label>
<input type="file" id="inputfile">
<p class="help-block">متن کمکی برای آپلود.</p>
</div>
<div class="checkbox">
<label>
<input type="checkbox"> چک باکس
</label>
</div>
<button type="submit" class="btn btn-success">ثبت </button>
</form>
</div>
</div>
</div>