Bootstrap merupakan kerangka hadapan yang digunakan bagi pembangunan antara muka laman web serta aplikasi mudah alih berasaskan web seperti Cordova, Ionic, PhoneGap atau React. Kerangka ini sangat popular kerana ia jauh lebih ringan berbanding kerangka lain dalam kelasnya seperti jQuery Mobile dan Sencha.

Kerangka hadapan Bootstrap telah dibangunkan oleh Twitter pada tahun 2011 sebagai langkah penyeragaman antara semua unit dalam syarikat tersebut. Setelah beberapa bulan digunakan, kerangka ini mula diperkenal kepada pengguna awam dan mula mendapat sambutan.

Bootstrap dibina menggunakan gabungan CSS dan JavaScript, dan sering dikemas kini oleh pengaturcara dari seluruh dunia melalui repositori Github. Kerangka ini mendapat sambutan tinggi kerana paparan HTML dibina menggunakan sistem ‘grid’.

Kaedah ini memecahkan setiap barisan paparan HTML kepada 12 kotak yang memiliki saiz yang sama. Contohnya, jika paparan ialah 1,200 piksel, maka setiap kotak grid memiliki saiz 120 piksel.

Sebagai latihan pengenalan, minggu ini kita akan bina paparan HTML menggunakan sistem grid. Tanpa membuang masa, mari kita teruskan dengan latihan minggu ini.

Anda bebas menggunakan perisian pengaturcaraan yang digemari.

Semakan

Sistem grid diguna untuk membina paparan laman web HTML dalam jujukan baris (rows) dan lajur (column) yang menempatkan kandungan teks dan imej secara sistematik. Baris perlu ditempatkan di dalam kelas .container untuk tujuan susunan yang tepat.

Baris juga digunakan untuk menyusun lajur secara horizontal. Kandungan teks dan imej hanya boleh ditempatkan di dalam lajur, dan hanya lajur dibenarkan menjadi elemen child kepada baris.

Kelas grid pradaftar seperti .row dan .col-xs-4 telah disediakan kepada pengatur cara untuk membina paparan grid dengan rupa bentuk yang sekata. Lajur grid dibina dengan menyatakan jumlah lajur bahagi 12 (lajur/12) yang ingin dikembangkan.

Contohnya, tiga lajur bersamaan tiga .col-xs-4.

Soalan

Sebelum ruangan minggu ini ditamatkan, anda perlu menyelesaikan beberapa soalan latihan.

1. Berapakah jumlah lajur dalam sesuatu baris?

2. Nyatakan apakah yang dimaksudkan dengan konsep baris dan lajur?

3. Nyatakan apakah yang dimaksudkan dengan konsep grid?

Jika anda mempunyai sebarang pertanyaan atau cadangan, sila tinggalkan komen anda di www.farizgaskin.com dan kami akan cuba jawab sepantas mungkin.

Sehingga bertemu lagi dalam ruangan yang sama minggu hadapan, selamat mencuba!