Ini melanjutkan tutorial saya tentang RWD (Responsive Web Design) dengan Grid System Bootsrtap. pada tutorial ini membahas tentang fitur pendukung dari grid system yang di sediakan Bootstrap itu sendiri, yaitu Nesting Colomn. Selamat mencoba .
Sebelumnya telah di jelaskan tentang pembuatan kolom-kolom pada Bootstrap berdasarkan grid, disini akan di buat bagaimana cara membuat kolom dalam kolom. Dan ingat sebelum melanjutkan tutorial ini harus telah memiliki framework CSS Bootstrap dan juga telah menyusun struktur foldernya.
Nesting Column
Seperti yang telah di jelaskan tadi, Nesting kolom pada Bootstrap merupakan pembuatan kolom dalam kolom, yaitu pembagian grid yang terdapat pada column tersebut. pertama kita akan membuat dua buah kolom yang terdiri dari 4 grid dan 8 grid.
HTML
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
| <html> <head> <!-- Bootstrap CSS --> <link href="css/bootstrap.min.css" rel="stylesheet" > <link href="css/bootstrap-theme.css" rel="stylesheet"> <!-- Style CSS --> <link href="css/style.css" rel="stylesheet"> <!-- JS --> <script src="js/bootstrap.js"></script> </head> <body> <div class="container"> <div class="row"> <div class="col-md-4"> <div class="kolom"> </div> </div> <div class="col-md-8"> <div class="kolom"> </div> </div> </div> </div> </body></html> |
kita buat struktur HTML nya terbagi dalam 2 kolom 4 grid dan 8 grid
CSS
1
2
3
4
5
6
| .kolom{ width: 100%; height: 600px; background-color: #939393; margin-bottom: 10px;} |
tambahkan CSS agar kolomnya terlihat jelas.
Running
setelah di buat 2 kolom, kita akan membuat kolom dalam kolom. untuk membuat kolom dalam kolom pada bootstrap kita harus membuat row terlebih dahulu, karena row pada bootstrap digunakan untuk membuat margin left dan right menjadi -15px. Sehingga tidak ada space pada kolom yang kita buat.
HTML
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
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
| <html> <head> <!-- Bootstrap CSS --> <link href="css/bootstrap.min.css" rel="stylesheet" > <link href="css/bootstrap-theme.css" rel="stylesheet"> <!-- Style CSS --> <link href="css/style.css" rel="stylesheet"> <!-- JS --> <script src="js/bootstrap.js"></script> </head> <body> <div class="container"> <div class="row"> <div class="col-md-4"> <div class="kolom"> <div class="row"> <div class="col-md-6"> <div class="dalam"></div> </div> <div class="col-md-6"> <div class="dalam"></div> </div> <div class="col-md-12"> <div class="dalam"></div> </div> </div> </div> </div> <div class="col-md-8"> <div class="kolom"> <div class="row"> <div class="col-md-12"> <div class="dalam"></div> </div> <div class="col-md-4"> <div class="dalam"></div> </div> <div class="col-md-4"> <div class="dalam"></div> </div> <div class="col-md-4"> <div class="dalam"></div> </div> </div> </div> </div> </div> </div> </body></html> |
pada kolom pertama tadi diatasnya bagi 2 kolom (6+6), lalu di bawahnya tetap 1 kolom (12). Sedangkan pada kolom kedua di atasnya tetap 1 kolom (12), lalu di bawahnya 3 kolom (4+4+4). kita dapat membuat pembagian sesuai kebutuhan.
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
| .kolom{ width: 100%; height: 600px; background-color: #939393; margin-bottom: 10px;}.dalam{ background-color: #bebebe; height: 280px; margin: 10px 0; width: 100%} |
kita tambahkan CSS agar kolom yang telah kita buat terlihat lebih jelas
Running
kita dapat membagi kolom yang kita buat sesuai kebutuhan, dan perlu di perhatikan untuk membuat kolom di dalam dolom atau Nesting Column pada bootstrap harus dibuat row terlebih dahulu, agar tidak ada space kiri dan kanan pada kolom tersebut. Dan jika ingin menambahkan Responsive tinggal di tambahkan class sesuai ukuran devicenya, atau baca Responsive Web Design Bootstrap.
terimakasih telah melihat tutorial dari saya, nantikan tutorial bootstrap selanjutnya dari saya.
Tidak ada komentar:
Posting Komentar