Salam hangat teman-teman, semoga teman-teman sehat selalu ya, pada artikel kali ini saya akan membhas tentang Fitur Column Ordering Pada Bootstrap.
Fitur Column Ordering Pada Bootstrap digunakan untuk mengubah posisi atau letak kolom dalam satu baris. Ada dua operasi yang bisa di lakukan yaitu :
- Push, artinya mendorong kolom ke kanan seperti offset. Sintaksnya adalah col-x-push-xx.
- Pull, artinya menarik kolom ke kiri. Sintaksnya adalah col-x-pull-xx.
Contoh penggunaan column ordering terlihat seperti pada 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 Template</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 pada broswer, maka akan terlihat seperti ini :
Bagaimana teman-teman mudah kan menggunakan Fitur Column Ordering Pada Bootstrap. Sekian penjelasan tentang column ordering pada boostrap, semoga bermanfaat ya teman-teman. Selamat Mencoba.