Fitur Column Ordering Pada Bootstrap
Salam hangat teman-teman, semoga teman-teman sehat selalu ya, di artikel kali ini saya akan membhas mengenai Fitur Column Ordering Di Bootstrap.
Fitur Column Ordering Di Bootstrap digunakan bagi mengubah posisi atau letak kolom pada satu baris. Ada dua operasi yang dapat di lakukan yaitu :
- Push, artinya mendorong kolom ke kanan seperti offset. Sintaksnya ialah col-x-push-xx.
- Pull, artinya menarik kolom ke kiri. Sintaksnya ialah col-x-pull-xx.
Contoh pemakaian column ordering terlihat seperti di kode program berikut :
<!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>Bootstrap 101 Tampilan</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.3/html5shiv.min.js></script>
<script src=https://oss.maxcdn.com/respond/1.4.2/respond.min.js></script>
<![endif]-->
<style type=text/css>
.col-md-4 {
border: 1px solid grey;
background-color: lightblue;
}
.col-md-8 {
border: 1px solid grey;
background-color: red;
color:#FFFFFF;
}
</style>
</head>
<body>
<div class=container>
<div class=row>
<h1>Kolom Ordering</h1>
<h3>Sebelum di pindahkan</h3>
<div class=col-md-4 col>Ini Kiri</div>
<div class=col-md-8 col>Ini Kanan</div>
</div>
<div class=row>
<h3>Setelah di pindahkan</h3>
<div class=col-md-4 col-md-push-8 col>Jadi di kanan yak</div>
<div class=col-md-8 col-md-pull-4 col>Perasaan tadi di kanan deh</div>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src=https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src=js/bootstrap.min.js></script>
</body>
</html>
Setelah kalian ketik kode program di atas dan di jalankan di broswer, karenanya akan terlihat seperti ini :
Bagaimana teman-teman gampang kan menggunakan Fitur Column Ordering Di Bootstrap. Demikianlah penjelasan mengenai column ordering di boostrap, semoga bermanfaat ya teman-teman. Selamat Mencoba.
Sumber https://kursuswebsite.org
