Haloo teman-teman Dumet School, kembali lagi dengan saya shelli ripati. Kali ini saya masih membahas kembali kelas-kelas yang ada di bootstrap 4 Part 1 yang bisa kita manfaatkan untuk membuat sebuah website. Kemarin kita sudah membahas kelas dari bootstrap 4 untuk mengatur column secara vertical alignment dan horizontal alignment. Nah kali ini kita akan bahas tentang Mengenal Class Reordering Pada Bootstrap 4 Part 1.
Kelas ordering pada bootstrap 4 ini berfungsi untuk membantu kita mengatur urutan posisi atau letak dari column dengan menambahkan .order- lalu dilanjut dengan nomor sesuai kebutuhan. Cara mainnya seperti ini ya teman-teman. Misalnya disini saya memberikan .order-5 pada .col-md-6 pertama dan kemudian saya berikan .order-2 pada .col-md-6 kedua maka column yang ada di posisi pertama atau sebelah kiri adalah yang saya berikan .order-2 karena nomornya lebih kecil dari .order-5 seperti itu. Dan yang .order-5 berada di posisi kedua yaitu sebelah kanan.
Nah disini agar lebih Mengenal Class Reordering Pada Bootstrap 4 Part 1 saya akan langsung praktekkan untuk membuat struktur htmlnya. Berikut scriptnya ya teman-teman bisa langsung di salin aja.
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<title>Mengenal Class Reordering Pada Bootstrap 4</title>
</head>
<body>
<div class="container text-center">
<h1>Mengenal Class Reordering Pada Bootstrap 4</h1>
<div class="row text-light">
<div class="col bg-secondary">
column ke 1 posisi pertama dan bukan class ordering
</div>
<div class="col order-2 bg-secondary">
column ke 2 posisi terakhir dan class ordering
</div>
<div class="col order-1 bg-info">
column ke 3 posisi kedua dan class ordering
</div>
</div>
<div class="row text-light">
<div class="col order-8 bg-secondary">
column ke 1 posisi kedua dan class ordering
</div>
<div class="col bg-info">
column ke 2 posisi pertama dan bukan class ordering
</div>
<div class="col order-12 bg-info">
column ke 3 posisi kedua dan class ordering
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
</body>
</html>
Disini saya pakai versi online untuk bootstrap 4 nya ya teman-teman. Kalau teman-teman mau buat versi offline sama saja, teman-teman bisa langsung download di website resminya bootstrap disini get.bootstrap.com. Jika sudah selesai maka teman-teman bisa langsung lihat tampilannya di browser masing-masing. Maka tampilannya akan seperti pada gambar di bawah ini.
Teman-teman bisa lihat kembali scriptnya dan perhatikan juga hasil tampilannya. Dimana saya memiliki 3 col dalam 1 row dan row pertama di col pertama saya tidak memberikan .order- maka secara default dia akan berada posisinya paling kiri. Lalu di lanjut masih dalam row pertama lalu col kedua disini saya memberikan .order-2 dan col ketiga .order-1 otomatis posisi col ketiga ada di posisi kedua karena .order-1 lebih kecil dari .order-2. Dan row kedua teman-teman bisa analisa sendiri ya.
Demikian artikel tentang Mengenal Class Reordering Pada Bootstrap 4 Part 1. Sampai jumpa di pembahasan part 2, karena saya akan membahas masih tentang kelas reordering pada bootstrap 4.