Dynamic Blinkie Text Generator at TextSpace.net

Feedburner

I heart FeedBurner

Kamis, 06 April 2017

Matriks layout dengan boostrap

Bootstrap menyediakan fasilitas layouting konten web dengan Sistem Grid, cara kerjanya mirip seperti penggunaan <table> pada html. Dengan menggunakan sistem grid pembuatan struktur konten jadi lebih rapih dan mudah. Nah, cara menggunakannya kita hanya perlu mengeset atribut class pada div yang berisi konten yang dikehendaki, ada class yang bernama “row” dan “col-x-xx”.

Struktur dasarnya seperti ini :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!-- <table> -->
<div class="container">
    <!-- <tr> -->
    <div class="row">
        <!-- <td> -->
        <div class="col-x-xx">Kolom 1 baris 1</div>
        <!-- </td> -->
        <!-- <td> -->
        <div class="col-x-xx">Kolom 2 baris 1</div>
        <!-- </td> -->
    </div>
    <!-- </tr> -->
    <!-- <tr> -->
    <div class="row">
        <!-- <td> -->
        <div class="col-x-xx">Kolom 1 baris 2</div>
        <!-- </td> -->
        <!-- <td> -->
        <div class="col-x-xx">Kolom 2 baris 2</div>
        <!-- </td> -->
    </div>
    <!-- </tr> -->
<!-- </table> -->
</div>
Mirip dengan penggunaan tabel kan ?
Row harus ada di dalam kelas container dan col-x-xx di dalam kelas row. Namun ada beberapa aturan tambahan yang diterapkan pada sistem grid ini, diantaranya adalah lebar kolom pada setiap baris dibatasi dengan 12 kolom saja. Dan setiap kolom yang didefinisikan harus menyertakan lebar kolom tersebut (seperti colspan) pada bagian xx dari col-x-xx yang dapat diisi dari angka 1 sampai 12.
Untuk bagian x dari col-x-xx diisi dengan atribut yang sudah disediakan oleh bootstrap berikut:
  1. xs ( Extra small devices [Hape] )
    • Untuk target device dengan resolusi <768px
    • Maksimal lebar div container yang diijinkan tidak ada (auto)
    • Maksimal lebar kolom yang diijinkan tidak ada (auto)
  2. sm ( Small devices [Tablet] )
    • Untuk target device dengan resolusi >=768px
    • Maksimal lebar div container yang diijinkan 750px
    • Maksimal lebar kolom yang diijinkan 60px
  3. md ( Medium devices [Desktop] )
    • Untuk target device dengan resolusi >=992px
    • Maksimal lebar div container yang diijinkan 970px
    • Maksimal lebar kolom yang diijinkan 78px
  4. lg ( Large devices [Desktop] )
    • Untuk target device dengan resolusi >=1200px
    • Maksimal lebar div container yang diijinkan 1170px
    • Maksimal lebar kolom yang diijinkan 95px
Dalam tutorial kali ini, coba kita gunakan atribut md untuk desktop standar. Untuk melihat lebar setiap kolom dengan lebar yang berbeda – beda coba ketikan potongan kode berikut :
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
53
54
<!DOCTYPE html>
<html>
<head>
    <title>Latihan Bootstrap 1</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="bootstrap-3.1.1-dist/css/bootstrap.min.css">
    <style type="text/css">
        .col{
            box-shadow : inset 1px -1px 1px #444, inset -1px 1px 1px #444;;
            background-color: #dedef8;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="row" align="center">
            <div class="col-md-1 col">1</div>
        </div>
        <div class="row" align="center">
            <div class="col-md-2 col">2</div>
        </div>
        <div class="row" align="center">
            <div class="col-md-3 col">3</div>
        </div>
        <div class="row" align="center">
            <div class="col-md-4 col">4</div>
        </div>
        <div class="row" align="center">
            <div class="col-md-5 col">5</div>
        </div>
        <div class="row" align="center">
            <div class="col-md-6 col">6</div>
        </div>
        <div class="row" align="center">
            <div class="col-md-7 col">7</div>
        </div>
        <div class="row" align="center">
            <div class="col-md-8 col">8</div>
        </div>
        <div class="row" align="center">
            <div class="col-md-9 col">9</div>
        </div>
        <div class="row" align="center">
            <div class="col-md-10 col">10</div>
        </div>
        <div class="row" align="center">
            <div class="col-md-11 col">11</div>
        </div>
        <div class="row" align="center">
            <div class="col-md-12 col">12</div>
        </div>
    </div>
</body>
</html>
Hasilnya seperti berikut :
Saungkode
Catatan :
Penambahan class col disini digunakan untuk menambahkan warna background serta border pada kolom dan akan digunakan pada kode – kode selanjutnya.
Sehingga untuk mengisi satu baris penuh dibutuhkan kolom dengan total lebar 12, misal 3 buah kolom dengan lebar 4 , 2 buah kolom dengan lebar 6 dan sebagainya. Contohnya tambahkan kode ini di dalam div container dari kode yang sudah ada di atas :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<div class="row" align="center">
    <div class="col-md-3 col">3</div>
    <div class="col-md-3 col">3</div>
    <div class="col-md-3 col">3</div>
    <div class="col-md-3 col">3</div>
</div>
<div class="row" align="center">
    <div class="col-md-4 col">4</div>
    <div class="col-md-4 col">4</div>
    <div class="col-md-4 col">4</div>
</div>
<div class="row" align="center">
    <div class="col-md-6 col">6</div>
    <div class="col-md-6 col">6</div>
</div>
<div class="row" align="center">
    <div class="col-md-12 col">12</div>
</div>
Hasilnya :
Screenshot - 080414 - 11:46:15
Kita juga dapat membubuhkan lebih dari satu kelas untuk atribut kolom, misalnya :
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
<div class="container">
    <div class="row">
        <div class="col-sm-3 col-md-6 col">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
        eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
        enim ad minim veniam, quis nostrud exercitation ullamco laboris
        nisi ut aliquip ex ea commodo consequat.
        </p>
        <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem
        accusantium doloremque laudantium, totam rem aperiam, eaque ipsa
        quae ab illo inventore veritatis et quasi architecto beatae vitae
        dicta sunt explicabo.
        </p>
        </div>
        <div class="col-sm-9 col-md-6 col">
        <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem
        accusantium doloremque laudantium.
        </p>
        <p> Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet,
        consectetur, adipisci velit, sed quia non numquam eius modi
        tempora incidunt ut labore et dolore magnam aliquam quaerat
        voluptatem.
        </p>
        </div>
    </div>
</div>
Maka ketika device yang digunakan adalah small device, konten akan dirender dengan panjang kolom 3 dan 9 lalu akan dirender dengan panjang 6 dan 6 bila device yang digunakan termasuk kategori medium device.
Screenshot - 080414 - 11:46:29Saungkode
Skala 6 :6 (atas) dan 3 : 9 (bawah)

Nested Columns

Grid System ini juga mendukung penempatan kolom secara bersarang artinya memasukkan kolom di dalam kolom atau baris lagi. Penggunaannya sama seperti <table> juga, langsung lihat saja contohnya :
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
<div class="container">
    <div class="row">
        <div class="col-md-3 col">
            <h4>Kolom Pertama</h4>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
        </div>
 
        <div class="col-md-9 col">
            <h4>Kolom kedua yang dibagi menjadi 4</h4>
 
            <div class="row">
                <div class="col-md-6 col">
                    <p>Consectetur art party Tonx culpa semiotics. Pinterest
                    assumenda minim organic quis.
                    </p>
                </div>
                <div class="col-md-6 col">
                    <p> sed do eiusmod tempor incididunt ut labore et dolore magna
                    aliqua. Ut enim ad minim veniam, quis nostrud exercitation
                    ullamco laboris nisi ut aliquip ex ea commodo consequat.
                    </p>
                </div>
            </div>
            <div class="row">
                <div class="col-md-6 col">
                    <p>quis nostrud exercitation ullamco laboris nisi ut
                    aliquip ex ea commodo consequat.
                    </p>
                </div>
                <div class="col-md-6 col">
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
                    sed do eiusmod tempor incididunt ut labore et dolore magna
                    aliqua. Ut enim ad minim.</p>
                </div>
            </div>
        </div>
    </div>
</div>
Menghasilkan :
Saungkode

Column Offset

Lalu bagaimana caranya jika kita ingin menampilkan kolom dengan panjang 6 tapi berada di tengah layar? Cukup dengan menambahkan offset pada kolom.. Offset berfungsi menggeser kolom ke kanan sepanjang kolom yang diberikan, contohnya jika panjang 6 dan ingin di posisikan di tengah berarti offsetnya 3.. Syntax-nya col-x-offset-xx .
1
2
3
4
5
6
7
8
9
10
11
<div class="container">
    <div class="row" align="center">
        <div class="col-md-6 col-md-offset-3 col">6</div>
    </div>
    <div class="row" align="center">
        <div class="col-md-5 col-md-offset-7 col">5</div>
    </div>
    <div class="row" align="center">
        <div class="col-md-10 col-md-offset-1 col">10</div>
    </div>
</div>
Bisa diibaratkan seperti menambahkan kolom kosong di depan.
Screenshot - 080414 - 11:46:59

Column Ordering

Ada satu lagi nih fitur yang cukup menarik, yaitu column ordering. Kita dapat mengubah posisi atau letak kolom dalam satu baris, ada dua operasi yaitu :
  • Push, mendorong kolom ke kanan seperti offset. Syntax-nya col-x-push-xx
  • Pull, menarik kolom ke kiri. Syntax-nya col-x-pull-xx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<div class="container">
    <div class="row">
        <p>Sebelum dipindahkan</p>
        <div class="col-md-4 col">Saya di kiri</div>
        <div class="col-md-8 col">Saya ada di kanan</div>
    </div><br/>
    <div class="row">
        <p>Setelah dipindahkan</p>
        <div class="col-md-4 col-md-push-8 col">
            Lah, tadi kan saya di kiri
        </div>
        <div class="col-md-8 col-md-pull-4 col">
            Lho? perasaan tadi saya ada di kanan
        </div>
    </div>
</div>
Hingga Hasilnya :
Saungkode
Sumber : tutorialspoint.com

Tidak ada komentar:

Posting Komentar