Pada kali ini kita akan belajar cara membuat penomoran di remote control dengan bootstrap, jadi dengan bootstrap kita bisa menirukan nomor atau mendesign nomor yang tersusun di sebuah remote control, tentunya dengan bantuan grid system yang terdapat pada bootstrap mempermudahkan kita membuat nomor di remote ini, oke bagaimana caranya simak terus ya teman-teman.
Untuk belajar cara membuat penomoran di remote control dengan bootstrap, Versi yang masih saya pakai adalah versi 3.7 ya teman-teman, oke dari pada menunggu lama kita langsung coba saja:
<!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>Cara Membuat Penomoran Di Remote Control dengan Bootstrap</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<-e-style type="text/css">
.tepi{
border: 1px solid red;
border-radius: 10px;
box-shadow: 2px 2px 2px 2px #333;
}
<-e-/style>
<!-- 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]>
<-e-script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"><-e-/script>
<-e-script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"><-e-/script>
<![endif]-->
</head>
<body>
<h1>Hello, world!</h1>
<div class="container">
<div class="row">
<div class="col-md-5"></div>
<div class="col-md-2 tepi">
<div class="row">
<div class="col-md-4">
<a href="#" class="thumbnail">
<img src="nomor-1.jpg" alt="..." class="img-responsive">
</a>
</div>
<div class="col-md-4">
<a href="#" class="thumbnail">
<img src="nomor-2.jpg" alt="..." class="img-responsive">
</a>
</div>
<div class="col-md-4">
<a href="#" class="thumbnail">
<img src="nomor-3.jpg" alt="..." class="img-responsive">
</a>
</div>
</div>
<div class="row">
<div class="col-md-4">
<a href="#" class="thumbnail">
<img src="nomor-4.jpg" alt="..." class="img-responsive">
</a>
</div>
<div class="col-md-4">
<a href="#" class="thumbnail">
<img src="nomor-5.jpg" alt="..." class="img-responsive">
</a>
</div>
<div class="col-md-4">
<a href="#" class="thumbnail">
<img src="nomor-6.jpg" alt="..." class="img-responsive">
</a>
</div>
</div>
<div class="row">
<div class="col-md-4">
<a href="#" class="thumbnail">
<img src="nomor-7.jpg" alt="..." class="img-responsive">
</a>
</div>
<div class="col-md-4">
<a href="#" class="thumbnail">
<img src="nomor-8.jpg" alt="..." class="img-responsive">
</a>
</div>
<div class="col-md-4">
<a href="#" class="thumbnail">
<img src="nomor-9.jpg" alt="..." class="img-responsive">
</a>
</div>
</div>
<div class="row">
<div class="col-md-4"></div>
<div class="col-md-4">
<a href="#" class="thumbnail">
<img src="nomor-0.jpg" alt="..." class="img-responsive">
</a>
</div>
<div class="col-md-4"></div>
</div>
</div>
<div class="col-md-5"></div>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<-e-script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"><-e-/script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<-e-script src="js/bootstrap.min.js"><-e-/script>
</body>
</html>
Cukup panjang ya teman-teman padahal baru membuat penomoran, teman-teman perhatikan saja grid-grid system yang saya pakai, jika dilihat memang gambarnya tidak sama besar ya hehe, nanti teman-teman bisa buat sendiri yang lebih rapi, jangan kaya saya hehe, oke lalu bagaimana hasilnya:
Mirip seperti remote radio, ya hehe, oke saya rasa cukup sampai disini belajar kita cara membuat penomoran di remote control dengan bootstrap, semoga bermanfaat dan sampai jumpa pada artikel selanjutnya, terimakasih.
The post Cara Membuat Penomoran Di Remote Control dengan Bootstrap appeared first on Kursus Website Terbaik.