Halo teman-teman Dumet School, kembali lagi dengan saya di kursus web design. Kali ini saya akan membahas tentang cara Memanfaatkan Column Ordering Pada Bootstrap 3. Dimana fungsi dari column ordering pada bootstrap 3 dapat mengubah suatu urutan kolom grid internal dengan menggunakan class .col-md-push-* dan .col-md-pull-*.
Untuk dapat Memanfaatkan Column Ordering Pada Bootstrap 3 kita buat struktur htmlnya terlebih dahulu sebagai berikut.Teman-teman bisa langsung saja salin di halaman getbootstrap.com untuk mendapatkan struktur dasar htmlnnya. Lalu teman-teman tinggal pilih offline atau online untuk menggunakan bootstrapnya. Kebetulan disini saya online ya menggunakan bootstrapnya. Jadi tidak perlu download file bootstrapnya. Berikut kode htmlnya.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
<!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"> <title>Memanfaatkan Column Ordering Pada Bootstrap 3</title> <!-- Bootstrap --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <style> .push{background: salmon} .pull{background: lightblue} </style> </head> <body> <div class="container"> <div class="row"> <div class="jumbotron"> <h1>Memanfaatkan Column Ordering Pada Bootstrap 3</h1> <h3>Mengubah urutan kolom grid internal dengan mudah menggunakan column ordering bootstrap</h3> </div> </div> <div class="row"> <div class="col-md-9 col-md-push-3 push"> <h4>.col-md-9 .col-md-push-3</h4> </div> <div class="col-md-3 col-md-pull-9 pull"> <h4>.col-md-3 .col-md-pull-9</h4> </div> </div> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </body> </html> |
Nah jika sudah jangan lupa teman-teman simpan terlebih dahulu dengan format html. Sebelum kita jalankan di browser, teman-teman bisa perhatikan class .col-md-push-* dan .col-md-pull-* dimana class ini berfungsi untuk mengubah urutan grid. Ketika di layar xs atau versi mobile maka urutan gridnya akan bertukar tempat. Dan pada saat di layar medium maka akan sesuai dengan urutan gridnya yang asli.
Oke langsung saja teman-teman bisa langsung jalankan di browser masing-masing. Jika di jalankan di browser masing-masing maka akan tampak seperti pada gambar di bawah ini perubahannya.
Lalu urutan grid akan berubah seperti pada gambar di bawah ini.
Demikian artikel tentang cara Memanfaatkan Column Ordering Pada Bootstrap 3. Sampai jumpa di pembahasan selanjutnya ya teman-teman. Semoga artikel ini bisa bermanfaat dan menambah ilmu baru buat teman-teman. Selamat mencoba teman-teman.