Cara Membuat Penomoran Di Remote Control dengan Bootstrap
Di kali ini kita akan belajar cara merancang penomoran di remote control dengan bootstrap, jadi dengan bootstrap kita dapat menirukan nomor atau mendesign nomor yang tertata di sebuah remote control, pastinya dengan bantuan grid system yang terdapat di bootstrap mempermudahkan kita merancang nomor di remote ini, oke bagaimana caranya simak terus ya teman-teman.
Bagi belajar cara merancang penomoran di remote control dengan bootstrap, Versi yang masih saya gunakan yaitu versi 3.7 ya teman-teman, oke dari di menunggu lama kita seketika 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 Merancang 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=cara merancang penomoran di remote control dengan bootstrap Cara Merancang Penomoran Di Remote Control dengan Bootstrap class=img-responsive>
</a>
</div>
<div class=col-md-4>
<a href=# class=thumbnail>
<img src=nomor-2.jpg alt=cara merancang penomoran di remote control dengan bootstrap Cara Merancang Penomoran Di Remote Control dengan Bootstrap class=img-responsive>
</a>
</div>
<div class=col-md-4>
<a href=# class=thumbnail>
<img src=nomor-3.jpg alt=cara merancang penomoran di remote control dengan bootstrap Cara Merancang Penomoran Di Remote Control dengan Bootstrap class=img-responsive>
</a>
</div>
</div>
<div class=row>
<div class=col-md-4>
<a href=# class=thumbnail>
<img src=nomor-4.jpg alt=cara merancang penomoran di remote control dengan bootstrap Cara Merancang Penomoran Di Remote Control dengan Bootstrap class=img-responsive>
</a>
</div>
<div class=col-md-4>
<a href=# class=thumbnail>
<img src=nomor-5.jpg alt=cara merancang penomoran di remote control dengan bootstrap Cara Merancang Penomoran Di Remote Control dengan Bootstrap class=img-responsive>
</a>
</div>
<div class=col-md-4>
<a href=# class=thumbnail>
<img src=nomor-6.jpg alt=cara merancang penomoran di remote control dengan bootstrap Cara Merancang Penomoran Di Remote Control dengan Bootstrap class=img-responsive>
</a>
</div>
</div>
<div class=row>
<div class=col-md-4>
<a href=# class=thumbnail>
<img src=nomor-7.jpg alt=cara merancang penomoran di remote control dengan bootstrap Cara Merancang Penomoran Di Remote Control dengan Bootstrap class=img-responsive>
</a>
</div>
<div class=col-md-4>
<a href=# class=thumbnail>
<img src=nomor-8.jpg alt=cara merancang penomoran di remote control dengan bootstrap Cara Merancang Penomoran Di Remote Control dengan Bootstrap class=img-responsive>
</a>
</div>
<div class=col-md-4>
<a href=# class=thumbnail>
<img src=nomor-9.jpg alt=cara merancang penomoran di remote control dengan bootstrap Cara Merancang Penomoran Di Remote Control dengan Bootstrap 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=cara merancang penomoran di remote control dengan bootstrap Cara Merancang Penomoran Di Remote Control dengan Bootstrap 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>
Lumayan panjang ya teman-teman padahal baru merancang penomoran, teman-teman perhatikan saja grid-grid system yang saya gunakan, seandainya dilihat memang gambarnya tak sama besar ya hehe, nanti teman-teman dapat bikin sendiri yang lebih rapi, jangan kaya saya hehe, oke lalu bagaimana hasilnya:
Mirip seperti remote radio, ya hehe, oke saya rasa lumayan hingga disini belajar kita cara merancang penomoran di remote control dengan bootstrap, semoga bermanfaat dan hingga jumpa di artikel berikutnya, terimakasih.
Sumber https://kursuswebsite.org
