dalam bootstrap , sudah di sediakan class untuk membuat Form, bahkan responsive tentunya ,berikut cara membuat nya , yang pertama untuk mulai tutorial ini sediakan:
Kemudian Untuk isi setiap folder seperti gambar di bawah ini kiranya sudah jelas.
Member Login/
├── css/
│ ├── bootstrap.css
│ ├── bootstrap.css.map
│ ├── bootstrap.min.css
│ ├── bootstrap.min.css.map
│ ├── bootstrap-theme.css
│ ├── bootstrap-theme.css.map
│ ├── bootstrap-theme.min.css
│ └── bootstrap-theme.min.css.map
├── js/
│ ├── bootstrap.js
│ └── bootstrap.min.js
└── fonts/
├── glyphicons-halflings-regular.eot
├── glyphicons-halflings-regular.svg
├── glyphicons-halflings-regular.ttf
├── glyphicons-halflings-regular.woff
└── glyphicons-halflings-regular.woff2
Di sini saya sudah menghubungkan file index.html dengan css bootstrap , javascript bootstrap
Oke temen-temen kita langsung aja ke scripnya.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Member Login</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body style="background:#eee;">
<div class="container">
<p><br/></p>
<div class="row">
<div class="col-md-8"></div>
<div class="col-md-4">
<div class="panel panel-default">
<div class="panel-body">
<div class="page-header">
<h3>Login Area</h3>
</div>
<form role="form">
<div class="form-group">
<label for="exampleInputEmail1">Email or Username</label>
<div class="input-group">
<span class="input-group-addon" id="basic-addon1"><span class="glyphicon glyphicon-user"></span></span>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
</div>
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<div class="input-group">
<span class="input-group-addon" id="basic-addon1"><span class="glyphicon glyphicon-star"></span></span>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
</div>
<div class="form-group">
<label for="exampleInputFile">File input</label>
<input type="file" id="exampleInputFile">
<p class="help-block">Example block-level help text here.</p>
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Check me out
</label>
</div>
<button type="button" class="btn btn-success"><span class="glyphicon glyphicon-arrow-left"></span>Back</button>
<button type="submit" class="btn btn-primary"><span class="glyphicon glyphicon-lock"></span>Login</button>
<p><br/></p>
</form>
</div>
</div>
</div>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="js/bootstrap.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
Berikut penampakannya jika dijalankan melalui browser:
sekian Tutorial Bootstrap : Membuat Form Member Login responsive dengan Bootstrap . semoga bermanfaat bagi teman-teman yang membutuhkan tutorial ini . sampai jumpa di tutorial selanjutnya .
Sekian tutorial dari saya semiga bermanfaat bagi kawan-kawan.
apabila kawan-kawan ingin men download sourcodenya bisa di download di bwah ini.
apabila kawan-kawan ingin men download sourcodenya bisa di download di bwah ini.
Nice artikel gan
ReplyDeletemksi gan.
Deleteblm ada waktu nih mw bljr bootstarp gan..
ReplyDeletehe bisa lain waktu gan
Deletemantep gan, emang bootstrap selalu jadi andalan
ReplyDeleteiya gan mantap
Deletekalo bootstrap bikin berat ga sih mas?
ReplyDeleteengk gan malah bikin cantik tampilanx gan
DeleteBootstrap twitter yah gan
ReplyDeletebukan gan,,bootstrap framework css js gan
ReplyDeletekerennn...ntar deh kapan-kapan dipraktekin :)
ReplyDeleteiy di coba gan.
Delete