Öncelikle, “Bootstrap” dediğimizde kastedilen şey, sıradan bir çizmeye değil, web dünyasının vazgeçilmez araçlarından birine işaret ediyor. Bootstrap, web geliştiricilerinin kullanabileceği bir CSS ve JavaScript kütüphanesidir. Peki, neden bu kadar önemli? Çünkü Bootstrap, mobil uyumlu ve şık görünümlü web sayfaları oluşturmak için bize gerekli olan her şeyi sunuyor. İşte bu yüzden Bootstrap, form oluştururken de başvurulabilecek birinci sınıf bir araç !
Adım 1: Başlangıç
Öncelikle yapmamız gereken şey, işe koyulmak! Bir web sayfasında kullanacağımız formu tasarlamak için HTML belgemizi oluşturalım. Başlamak için basit bir HTML dosyası oluşturalım ve içine şunları ekleyelim:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap Form Makinesi</title>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body>
<!-- Form buraya gelecek -->
<!-- Bootstrap JS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>
Adım 2: Form Tasarımı
Şimdi gelelim asıl mevzuya: Form tasarımı! Bootstrap'in form bileşenlerini kullanarak bir form oluşturalım. İşte bir örnek;
<div class="container mt-5">
<form>
<div class="form-group">
<label for="exampleInputEmail1">Email Adresi</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Email adresinizi girin">
<small id="emailHelp" class="form-text text-muted">Email adresiniz hiçbir şekilde paylaşılmayacaktır.</small>
</div>
<div class="form-group">
<label for="exampleInputPassword1">Parola</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Parolanızı girin">
</div>
<button type="submit" class="btn btn-primary">Gönder</button>
</form>
</div>
Adım 3: Stil Verme
Şimdi formumuz var ama biraz şıklık katmaya ne dersiniz? Bootstrap'in sunduğu stillerle formumuzu süsleyelim:
<style>
body {
background-color: #f8f9fa;
}
form {
background-color: #fff;
padding: 20px;
border-radius: 10px;
box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
}
</style>
Ve işte bu kadar! Artık web sayfamızda şık bir Bootstrap formuna sahibiz. Hem de bu kadar kolay! Bootstrap'in sunduğu hazır bileşenlerle, web formu oluşturmak çocuk oyuncağı. Şimdi sıra sizde! Hayal gücünüzü kullanarak, Bootstrap'in sunduğu diğer harika bileşenlerle formunuzu özelleştirin ve web dünyasında bir iz bırakın!
Umarım bu makale, Bootstrap formları hakkında size temel bir anlayış sağlamıştır. Şimdi form yapmaya devam edin ve web dünyasını daha da şık hale getirin!
26 Yaşında. Araştırmayı seven, bir şeyler öğretmeye meraklı bir Bilgisayar Mühendisi
