Bootstrap Horizontal Form

Semih
19 Ağustos 2015 Çarşamba
0

<form> etiketiyle formumuz oluşturulur.

<form>...</form>

Her bir label ve form elemanının gruplanıp yatay olarak hizalanması için form-horizontal sınıfı form etiketine eklenir.

<form class="form-horizontal">...</form>

İnput nesnelerinin Bootstrap'ın modern görünümüne kavuşması için input'lara form-control sınıfı eklenir.

Labellerin form elemanına yapışıp birlikte hareket etmesi için de labellere control-label sınıfı eklenir.

Örnek Form:

<div class="container">
<form class="form-horizontal">
	
	<div class="form-group">
		<label for="inputMail" class="col-sm-3 control-label">Mail Adresiniz</label>
		<div class="col-sm-4">
		<input type="email" class="form-control" id="inputMail" placeholder="Mail adresi gir...">
		</div>
	</div>
	
	<div class="form-group">
		<label for="inputPassword" class="col-sm-3 control-label">Şifreniz</label>
		<div class="col-sm-4">
		<input type="password" class="form-control" id="inputPassword" placeholder="Şifre gir...">
		</div>
	</div>
	
	<div class="form-group">
		<div class="col-sm-offset-3 col-sm-4">
			<button type="submit" class="btn btn-default">Gönder</button>
		</div>
	</div>
</form>
</div>

Bootstrap Grid Sistemi makalemizde bahsettiğimiz gibi small(sm): 768px'den büyük ve eşit cihazlar. (Tablet) içindir.

 

col-sm-3 sınıfı ile labellere 3 grid'lik bir alan ayrılır. Daha sonra input nesnelerine de col-sm-4 sınıfı ile 4 grid'lik alan ayrılır. Böylece 12 grid'lik alandan 7 grid'lik alan kullanılır.

 

Butonu input nesneleri ile aynı hizadan başlatmak için col-sm-offset-3 sınıfı ile soldan 3 grid itilmesi sağlanır. ( Bootstrap Grid Sistemi makalemizde Offset ve Push Kullanımı konusunu inceleyebilirsiniz. )



Yorum yaz