Bootstrap
Pada saat kita belajar bootstrap sebagai pemula kita akan dihadapkan pada aturan dalam mendesign sebuah website, seperti aturan mengunakan grid system, #grid system adalah salah satu cara dalam bootstrap yang bisa membantu kita membuat layout atau tampilan sebuah website menjadi lebih rapi atapun website lebih seperti website yang profesional.
Di dalam bootstrap, grid system dibagi dalam 12 kolom (
col-*) dimana dalam tiap barisnya (.row) yang diset dalam empat model xs (extra small), md (medium), sm (small), lg (large) sesuai lebar dari layar monitor atau responsive terhadap perangkat yang kita gunakan.
Ok sobat kita lihat salah satu tampilan layout dengan mengunakan gryd system.
Info news20
Coba sobat ketikan script di bawah ini untuk mencoba grid system untuk membuat form login, form register seperti di atas atau sobat bisa memodifikasi dengan yang lain, sesuai kebutuhan agan agan sekalian
<!DOCTYPE html>
<html lang=”en”>
<head>
<title>Klikwebku</title>
<meta charset=”utf-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<link rel=”stylesheet” href=”css/bootstrap.min.css”>
<link rel=”stylesheet” href=”css/bootstrap.css”>
<link rel=”stylesheet” href=”css/bootstrap-theme.css”>
<link rel=”stylesheet” href=”css/bootstrap-theme.min.css”>
<script src=”js/jquery.min.js”></script>
<script src=”js/bootstrap.min.js”></script>
<script src=”js/npm.js”></script>
</head>
<body><div class=”well container” style=”margin-top:15px”>
<div class=”row”>
<div class=”col-sm-4″>
<h2>Login Member</h2>
<form role=”form”>
<div class=”form-group”>
<label for=”username”>Username</label>
<input type=”text” class=”form-control” id=”username” placeholder=”Username”>
</div>
<div class=”form-group”>
<label for=”password”>Password:</label>
<input type=”password” class=”form-control” id=”password” placeholder=”Password”>
</div>
<div class=”checkbox”>
<label><input type=”checkbox”>Ingat saya</label>
</div>
<button type=”submit” class=”btn btn-primary”>Login</button>
<button type=”submit” class=”btn btn-warning”>Register</button>
</form>
</div>
<div class=”col-sm-4″>
<h2>Register Member</h2>
<form role=”form”>
<div class=”form-group”>
<label for=”username”>Username</label>
<input type=”text” class=”form-control” id=”username” maxlength=”6″ placeholder=”Maksimal 6 Karakter”>
</div>
<div class=”form-group”>
<label for=”password”>Password:</label>
<input type=”password” class=”form-control” id=”password” maxlength=”6″ placeholder=”Maksimal 6 Karakter”>
</div>
<div class=”form-group”>
<label for=”nohp”>No. Handphone</label>
<input type=”nohp” class=”form-control” id=”nohp” maxlength=”13″ placeholder=”Maksimal 13 Karakter”>
</div>
<div class=”form-group”>
<label for=”email”>Email</label>
<input type=”email” class=”form-control” id=”email” placeholder=”example:klikwebku@gmail.com”>
</div>
<button type=”submit” class=”btn btn-primary”>Daftar</button>
</form>
</div>
<div class=”col-sm-4″>
<h2>Daftar Melalui Media Sosial
<br/>
<button type=”submit” class=”btn btn-primary”>Daftar Facebook</button>
<button type=”submit” class=”btn btn-info”>Daftar Twitter</button>
</div>
</div>
</div>
</body>
</html>
Selamat mencoba, sobat sekalian bisa download link di bawah ini untuk mencobanya dengan mengunakan xampp atau webserver yang lain.
Grid Sistem Bootstrap261.07 KB
0 komentar:
Posting Komentar