pada tutorial ini membahas tentang fitur pendukung dari grid system yang di sediakan Bootstrap itu sendiri, yaitu Colomn Ordering. Selamat mencoba .
Sebelumnya telah di jelaskan tentang pembuatan kolom-kolom pada Bootstrap berdasarkan grid, disini akan di buat bagaimana cara membuat kolom yang telah di buat tersebut dapat berpindah atau tukar tempat. Dan ingat sebelum melanjutkan tutorial ini harus telah memiliki framework CSS Bootstrap dan juga telah menyusun struktur foldernya.
Column ordering berguna untuk menukar kolom yang telah di buat, dari kiri ke kanan atau sebaliknya kanan ke kiri. fitur pendukung ini sangat berguna ketika responsisve. Karena ketika responsive otomatis membaca dari kolom yang kiri, sedangkan dengan adanya fitur ini maka secara tidak langsung membacanya dari kanan. untuk lebih jelasnya langsung aja di coba.
Sebelum Ordering
HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| <body> <div class="container"> <div class="row"> <div class="col-md-9"> <div class="kolom2"> </div> </div> <div class="col-md-3"> <div class="kolom"> </div> </div> </div> </div></body> |
pertama kita buat struktur HTML yang terbagi dengan 2 kolom, 9 grid di kiri dan 3 grid di kanan, ini sebelum di ordering. kita bedakan height setiap kolom dengan CSS.
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
| .kolom{ width: 100%; height: 200px; background-color: #939393; margin-bottom: 10px;}.kolom2{ width: 100%; height: 400px; background-color: #939393; margin-bottom: 10px;} |
kita tambahkan CSS agar terlihat lebih jelas
Running
Desktop
Phone
Jika tidak di order, maka jika di ibaratkan yang kiri sebagai content sedangkan kanan sebagai navigasi, maka navigasi ketika di ukuran phone akan terletak di bawah, itu akan membuat website tidak user friendly.
Sesudah Ordering
HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| <body> <div class="container"> <div class="row"> <div class="col-md-3 col-md-push-9"> <div class="kolom"> </div> </div> <div class="col-md-9 col-md-pull-3"> <div class="kolom2"> </div> </div> </div> </div></body> |
kita ubah struktur HTML nya menjadi seperti ini.di sini ada fungsi push dan pull.push-9 berguna memberikan nlai left sebanyak 9 grid atau 75%, sedangakan pull-3 memberikan nilai right sebanyak 3 grid atau 25% . untuk CSS yang di gunakan sama.
Running
Desktop
ketika di jalankan di Desktop akan menghasilkan tampilan yang sama, kiri sebagai content sedangkan kanan sebagai navigasi
Phone
Sedangkan ketika di phone navigasi terletak di atas dan content terletak di awah, membuat website lebih friendly.
baca juga baca Responsive Web Design Bootstrap. Terimakasih telah melihat tutorial dari saya, nantikan tutorial Bootstrap selanjutnya dari saya.
Tidak ada komentar:
Posting Komentar