Membuat Grid Dinamis Dengan Salvattore dan Bootstrap Dalam 10 Menit

() translation by (you can also view the original English article)

Salvattore menggembar-gemborkan dirinya sebagai alternatif jQuery Masonry dengan satu perbedaan penting: itu menggunakan konfigurasi CSS bukannya JavaScript. Jenis grid ini dapat dilihat di seluruh web, mungkin yang paling terkenal pada Pinterest.

Hari ini, kita akan menggunakan Salvattore dikombinasikan dengan Twitter Bootstrap 3 untuk membuat struktur grid mengalir secara responsif yang menakjubkan.

Memulai: Apa Yang Akan Kamu Butuhkan

Pertama-tama, kamu perlu mengambil librari Salvattore JavaScript (minified atau sumber). Berikutnya, kamu akan ingin menautkannya dengan CSS Twitter Bootstrap. Alih-alih mendownload dan hosting salinan sendiri, kita akan meminjam ini langsung dari BootstrapCDN milik NetDNA.

<html> 
    <head> 
        <link rel="stylesheet" src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"> 
        <title>Salvattore + Bootstrap</title> 
    </head> 
    <body> 
    
    <!-- This is where the magic happens! --> 
    
    <script src="salvattore.js"></script> 
    
    </body> 
</html>

Setelah ini selesai, kamu siap untuk memulai dengan mengkonfigurasi Salvattore!

Berikutnya, kamu akan membutuhkan entah stylesheet eksternal atau sebuah tag <style type='text/CSS'> dalam header. tag in your header. tag in your header. tag in Kebanyakan dari kerja kita akan dilakukan dalam stylesheet.

Catatan: kamu harus mencantumkan atribut type dan rel untuk Salvattore untuk berkerja dengan benar.

Dasar Singkat Grid Bootstrap

Twitter Bootstrap menyediakan sebuah struktur grid fleksibel yang ampuh dan fokus pada query media dari bawah ke atas. Mari lihat pada baris umum kolom.

1	<div class="row">
2	<div class="col-xs-12 col-md-4"></div>
3	<div class="col-xs-6 col-sm-3 col-md-4"></div>
4	<div class="col-xs-6 col-sm-3 col-md-4"></div>
5	<div class="col-xs-12 col-sm-3 col-md-4"></div>
6	<div class="col-xs-6 col-md-4"></div>
7	<div class="col-xs-6 col-md-4"></div>
8	</div>

Kamu akan menyadari dalam markup di atas pola col-[size]-[column number]. Dg ukuran tersedia xs, sm, md, dan lg, kita dapat mengatur ukuran kolom yang berbeda untuk breakpoint yang berbeda tanpa menuliskan query media yang spesifik. Lihat contoh ini yang menunjukkan bagaimana kolom berubah pada lebar layar yang berbeda.

Bootstrap Panels

Kita akan membuat sebuah grid mengalir menggunakan komponen panel Bootstrap. Markup untuk membuat panel dibangun seperti ini:

1	<div class="panel panel-primary">
2	<div class="panel-heading">Panel heading without title</div>
3	<div class="panel-body">Panel content</div>
4	</div>

Menempatkannya Bersama-sama Dengan Salvattore Magic

Sekarang setelah kita memiliki potongan Bootstrap yang kita butuhkan, kita akan meletakkan semuanya bersama-sama dengan Salvattore. Untuk sekarang, kita akan mulai dengan enam panel kosong; nantinya, kita akan membuat semuanya dinamis untuk memberikan beberapa konten pada tiap panel.

Agar Salvattore berkerja dengan benar, kontainer grid kita membutuhkan atribut data-columns. Berikut adalah tampak sementara markup kita:

<div id="grid" data-columns> 
    <div class="panel panel-primary"> 
        <div class="panel-heading">Panel heading without title</div>
        <div class="panel-body"> Panel content </div> 
    </div> 
    
    <!-- repeat the panel as many times as you'd like --> 
    
</div>

Berikutnya, kita akan pergi ke stylesheet kita dan menambahkan label berikut via pseudo-elements:

@media screen and (min-width: 1px) and (max-width: 767px){
    #columns[data-columns]::before {
        content: '2 .col-xs-6';
    }
}
@media screen and (min-width:768px) and (max-width: 991px){
    #columns[data-columns]::before {
        content: '3 .col-sm-4';
    }
}
@media screen and (min-width:992px) and (max-width: 9999px){
    #columns[data-columns]::before {
        content: '4 .col-md-3';
    }
}

Breakpoint yang telah kita pilih memetakan langsung ke query media Bootstrap. Salvattore menggunakan pseudo-element ::before dan atribut content untuk menentukan class kolom yang dibuat, dan kemudian berusaha untuk memecah elemen secara merata ke dalam kolom tersebut.

Membuatnya Dinamis

Kita telah menjaga secara ketat dalam CSS sejauh ini, namun jika kamu ingin melangkah lebih jauh, JavaScript dapat menawarkan barang-barang bagus.

Salvattore membawa hal-hal selangkah lebih jauh dengan menawarkan fungsionalitas penambahan. Dengan function dan sebuah koneksi ke API (kita menggunakan Google's Book API untuk menarik buku oleh Ernest Hemingway), kita dapat menggunakan grid dinamis. Berikut JavaScript yang akan kita gunakan:

function append(title, content) {
    // build/select our elements
    var grid = $('#columns')[0];
    var item = document.createElement('div');
    // build the html
    var h = '<div class="panel panel-primary">';
    h += '<div class="panel-heading">';
    h += title;
    h += '</div>';
    h += '<div class="panel-body">';
    h += content;
    h += '</div>';
    h += '</div>';
    salvattore['append_elements'](grid, [item])
    item.outerHTML = h;
}
$.getJSON("https://www.googleapis.com/books/v1/volumes?q=inauthor:Ernest+Hemingway&callback=?", function (data) {
    $(data.items).each(function (i, book) {
        append(book.volumeInfo.title, book.volumeInfo.description);
    });
});

Catatan: Diperlukan jQuery

Pertama-tama buat sebuah function append yang membawa judul dan konten, dan membungkusnya dalam markup panel. Kemudian kita menggunakan function salvattore['append_elements'](grid, [item]) untuk menambahkan item ke grid kita. Terakhir, kita menjalankan panggilan AJAX untuk menarik data dinamis.

Agar ini berkerja dengan benar, kita akan ingin menghilangkan semua konten di dalam grid holder.

1	<div id="grid" data-columns></div>

Salvattore akan mengisi kolom untuk kita.

Markup final akan tampak seperti ini:

<!DOCTYPE html>

<html>
<head>
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
    <style type="text/css">
        @media screen and min-width 1px and max-width 767px {
            #columns[data-columns]::before {
                content: '2 .col-xs-6';
            }
        
        }
        
        @media screen and min-width768px and max-width 991px {
            #columns[data-columns]::before {
                content: '3 .col-sm-4';
            }
        
        }
        
        @media screen and min-width992px and max-width 9999px {
            #columns[data-columns]::before {
                content: '4 .col-md-3';
            }
        
        }       
    </style>

    <title></title>
</head>

<body>
    <div class="container">
        <h1 class="col-xs-12">Books by Ernest Hemingway</h1>

        <div data-columns="" id="columns">
            <div></div> 
            <div></div> 
            <div></div>          
        </div>
    </div>
    
    <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
    <script src="salvattore.js"></script>
    <script>
        function append(title, content) {
            var grid = document.querySelector('#columns');
            var item = document.createElement('div');
            var h = '<div class="panel panel-primary">';
            h += '<div class="panel-heading">';
            h += title;
            h += '</div>';
            h += '<div class="panel-body">';
            h += content;
            h += '</div>';
            h += '</div>';
            salvattore['append_elements'](grid, [item]) item.outerHTML = h;
        }
        $.getJSON("https://www.googleapis.com/books/v1/volumes?q=inauthor:Ernest+Hemingway&callback=?", function (data) {
            $(data.items).each(function (i, book) {
                append(book.volumeInfo.title, book.volumeInfo.description);
            });
        });
    </script>
</body>
</html>

Kesimpulan

Salvattore membuat grid bergaya Masonry yang dinamis sangat mudah bagi seseorang yang tidak tahu banyak tentang JavaScript. Dengan mengatakan itu, dengan jumlah kecil JavaScript, membuat grid dinamis dan dipasangkan dengan konten dinamis terasa sangat menyenangkan. Terakhir, Bootstrap menyediakan struktur penamaan class yang fleksibel untuk membangun grid dengan mudah untuk breakpoint manapun.

1	<!DOCTYPE html>
2
3	<html>
4	<head>
5	<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
6	<style type="text/css">
7	@media screen and min-width 1px and max-width 767px {
8	#columns[data-columns]::before {
9	content: '2 .col-xs-6';
10	}
11
12	}
13
14	@media screen and min-width768px and max-width 991px {
15	#columns[data-columns]::before {
16	content: '3 .col-sm-4';
17	}
18
19	}
20
21	@media screen and min-width992px and max-width 9999px {
22	#columns[data-columns]::before {
23	content: '4 .col-md-3';
24	}
25
26	}
27	</style>
28
29	<title></title>
30	</head>
31
32	<body>
33	<div class="container">
34	<h1 class="col-xs-12">Books by Ernest Hemingway</h1>
35
36	<div data-columns="" id="columns">
37	<div></div>
38	<div></div>
39	<div></div>
40	</div>
41	</div>
42
43	<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
44	<script src="salvattore.js"></script>
45	<script>
46	function append(title, content) {
47	var grid = document.querySelector('#columns');
48	var item = document.createElement('div');
49	var h = '<div class="panel panel-primary">';
50	h += '<div class="panel-heading">';
51	h += title;
52	h += '</div>';
53	h += '<div class="panel-body">';
54	h += content;
55	h += '</div>';
56	h += '</div>';
57	salvattore['append_elements'](grid, [item]) item.outerHTML = h;
58	}
59	$.getJSON("https://www.googleapis.com/books/v1/volumes?q=inauthor:Ernest+Hemingway&callback=?", function (data) {
60	$(data.items).each(function (i, book) {
61	append(book.volumeInfo.title, book.volumeInfo.description);
62	});
63	});
64	</script>
65	</body>
66	</html>