Bootstrap ile Responsive Form İşlemleri

Uzun zamandır yazmayı düşündüğüm fakat bir türlü fırsat bulamadığım, Twitter Bootstrap teknolojisini artık Web Tasarım kategorisi altında işleyeceğim. Bu teknolojinin getirdiği en büyük avantaj, cihaza duyarlı (responsive) sayfalar oluşturmaya imkan tanımasıdır. Yani web sitesi ister masaüstü bilgisayarda, ister tablet pc'de, ister cep telefonunda açılsın içerik okunabilir şekilde görünecektir.

Aşağıda bir kayıt formu görmektesiniz.  Kodları anlamanız için daha önce HTML ve CSS ile ilgili konulara hakim olmanız gerekmektedir. 



<!DOCTYPE html>
<html lang="tr">
  <head>
    <meta charset="utf-8">
    <title>Sürücü Kursu</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">
 
    <!-- Stil tanımlamalarını bu kısımda yapıyoruz -->
    <link href="css/bootstrap.css" rel="stylesheet">
    <style type="text/css">
      body {
        padding-top: 60px;
        padding-bottom: 40px;
      }
      
      
      .bgcolor {
        background-color: none;
      }      
      
      .lightblue {
       background-color: none;
      }
      
   .form-horizontal .control-label {
      width: 70px;
      }
      
   .form-horizontal .controls {
     margin-left: 90px;
       }      
    </style>
    <link href="css/bootstrap-responsive.css" rel="stylesheet">
 
    <!-- HTML ve IE 8 için gerekli kodlar bu kısımda -->
    <!--[if lt IE 9]>
      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
 
    </head>
 
  <body>

<!-- Sayfanın en üstündeki yatay bar menü kodları bu kısımda - navbar-->
    <div class="navbar navbar-inverse navbar-fixed-top">
      <div class="navbar-inner">
        <div class="container-fluid">
          <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </a>
          <a class="brand" href="#">Sürücü Kursu</a>
          <div class="nav-collapse collapse">
            <p class="navbar-text pull-right">
              <a href="admin.php" class="navbar-link">Kullanıcı Giriş</a>
            </p>
            <ul class="nav">
              <li class="active"><a href="adayekle.php">Aday Kayıt</a></li>
              <li><a href="listele.php">Listeleme</a></li>
              <li><a href="sorgula.php">Sorgulama</a></li>
            </ul>
          </div><!--/.nav-collapse -->
        </div>
      </div>
    </div>
 
    <!-- Formumuz burada başlıyor -->
    <div class="container-fluid">      
      <form class="form-horizontal">
      <legend>Aday Kayıt Formu</legend>
      <div class="row-fluid">
        <div class="span8">

<!-- Hata mesajı vermek için aşağıdaki kısmı aktif yapabilirsiniz -->
         <!-- <div class="row-fluid">
            <div class="span12 bgcolor">
              <div class="alert alert-error">
              <a href="#" class="close" data-dismiss="alert">×</a>
                Hata mesajları.
              </div>
            </div>
          </div> -->
          <div class="row-fluid">
            <div class="span6 bgcolor">
              <div class="control-group">
                <label class="control-label" for="adi">Adı</label>
                <div class="controls">
                  <input type="text" id="adi" placeholder="Adi">
                 
                </div>
              </div>
            </div><!--/span-->
            <div class="span6 bgcolor">
              <div class="control-group">
                <label class="control-label" for="soyadi">Soyadı</label>
                <div class="controls">
                  <input type="text" id="soyadi" placeholder="Soyadı">
                
                </div>
              </div>
            </div><!--/span-->
          </div><!--/row-->
          <div class="row-fluid">
            <div class="span6 bgcolor">
              <div class="control-group">
                <label class="control-label" for="gender">Cinsiyet</label>
                <div class="controls">
                  <select id="gender" class="span12">
<option value="1">Bay</option>
<option value="2">Bayan</option>
 </select>  
                 <!-- <span class="help-block">Cinsiyet seçiniz.</span>-->
                </div>
              </div>
            </div><!--/span-->
            <div class="span6 bgcolor">
              <div class="control-group">
                <label class="control-label" for="dogumyeri">Doğum yeri</label>
                <div class="controls">
                  <input type="text" id="dogumyeri" placeholder="dd.mm.yyyy">
                </div>
              </div>
            </div><!--/span-->
          </div><!--/row-->
          
          <fieldset>
          <legend>Adres Bilgileri</legend>
          <div class="row-fluid">
            <div class="span12 bgcolor">
              <div class="control-group">
                <label class="control-label" for="adres1">Adres(1)</label>
                <div class="controls">
                  <input type="text" class="input-xxlarge" id="street">
                </div>
              </div>             
            </div>
          </div>
  <div class="row-fluid">
            <div class="span12 bgcolor">
              <div class="control-group">
                <label class="control-label" for="adres2">Adres(2)</label>
                <div class="controls">
                  <input type="text" class="input-xxlarge" id="street">
                </div>
              </div>             
            </div>
          </div>
          <div class="row-fluid">
            <div class="span6 bgcolor">
              <div class="control-group">
                <label class="control-label" for="sehir">Şehir</label>
                <div class="controls">
                  <input type="text" id="sehir"> 
                </div>
              </div>
            </div><!--/span-->
            <div class="span6 bgcolor">
              <div class="control-group">
                <label class="control-label" for="semt">Semt/İlçe</label>
                <div class="controls">
                  <input type="text" id="semt"> 
                </div>
              </div>
            </div><!--/span-->
          </div><!--/row-->           
          <div class="row-fluid">
            <div class="span6 bgcolor">
              <div class="control-group">
                <label class="control-label" for="postakodu">Posta Kodu</label>
                <div class="controls">
                  <input type="text" id="postakodu"> 
                </div>
              </div>
            </div><!--/span-->
            <div class="span6 bgcolor">
              <div class="control-group">
                <label class="control-label" for="ulke">Ülke</label>
                <div class="controls">
                  <select id="ulke">
<option value="Türkiye">Türkiye</option>
 </select>
                </div>
              </div>            
                
            </div><!--/span-->
<div class="span6 bgcolor"></div>
   <div class="span6 bgcolor">
<button type="submit" class="btn btn-primary">Kaydet</button>
 
</div>
 
 
          </div><!--/row-->
          </fieldset>                        
        </div><!--/span-->
        
        <div class="span4">
 
        </div><!--/span-->       
      </div><!--/row-->
      </form>
 
      <hr>
 
      <footer>
        <p>&copy; Oğuzhan TAŞ 2015</p>
      </footer>
 
    </div><!--/.fluid-container sonu-->
    
 
<!-- JavaScript Kodları -->
    <script src="js/jquery-1.8.0.min.js"></script>
    <script src="js/bootstrap.js"></script>
  </body>
</html>
 

KAYNAKLAR

1) Bootstrap Sayfası 
http://getbootstrap.com

2)  Yatay ve Dikey Form Örnekleri
http://limcheekin.blogspot.com.tr/2012/08/twitter-bootstrap-multiple-columns-form.html

KODLARI İNDİR

Mutlu Kodlamalar,
Oğuzhan TAŞ,
Nisan, 2015
 
Bookmark and Share