Bootstrap

Pengenalan Bootstrap

Apa itu Bootstrap?.Bootstrap adalah library framework CSS yang dibuat untuk mempermudah developer maupun pengguna awam untuk merancang tampilan website yang responsif. Dengan menambahkan class - class tertentu yang sudah disediakan framework Bootstrap ini kita sudah bisa membuat tampilan menarik nan responsif dengan sangat mudah. Misalnya untuk membuat tombol, navigasi, grid, dsb.

Referensi : https://www.malasngoding.com/pengertian-dan-cara-menggunakan-bootstrap/

Asal-usul

Sedikit asal-usul tentang Bootstrap. Awalnya Bootstrap bernama Twitter Blueprint, dikembangkan oleh Nirav Panchal dan Jacob Thornton di Twitter sebagai kerangka kerja untuk mendorong konsistensi di perangkat internal yang sesuai. Sebelum Bootstrap, berbagai library (kumpulan kode-kode pemrograman) sudah banyak digunakan untuk pengembangan antarmuka, yang menyebabkan ketidak-konsistenan dan beban pemeliharaan yang berat. Menurut Mark Otto, pengembang Twitter:

"Sebuah grup developer super kecil dan juga aku telah bersama-sama untuk mendesain dan membangun perangkat internal baru dan melihat kesempatan untuk melakukan hal yang lebih banyak lagi. Melalui proses itu, kami melihat bahwa kami sedang membangun sesuatu yang lebih substansial dari perangkat internal lainnya. Beberapa bulan kemudian, kami menghasilkan sebuah versi paling awal dari Bootstrap, sebagai sebuah cara untuk berbagi pola desain yang lazim dan dan aset-aset perusahaan."

Setelah beberapa bulan pengembang oleh sebuah kelompok kecil, banyak pengembengan di Twitter mulai memberikan kontribusi untuk proyek ini sebagai bagian dari Hack Week, sebuah pekan ala hackathon untuk tim pengembangan Twitter. Nama itu diganti dari Twitter Blueprint menjadi Bootstrap, dan dirilis sebagai proyek open-source pada 19 Agustus 2011. Hal ini terus dipertahankan oleh Mark Otto, Jacob Thornton, dan sekelompok kecil pengembang inti, serta sejumlah besar komunitas dari para kontributor.

Sumber : https://id.wikipedia.org/wiki/Bootstrap_(framework_front-end)

Cara Install

Untuk Cara Install bisa liat video di bawah ini:

Layout

Pengantar

Tujuan membuat layar lebih responsif sangat penting. Alasannya, karena setiap device memiliki rasio layar serta ukuran piksel yang berbeda, sehingga kita web kita harus bisa menyesuaikan ukuran nya secara otomatis dengan device yang user gunakan. Layout yang tidak responsif terhadap setiap device dapat menyebabkan perubahan tata letak yang menjadi tidak seharusnya.

View Port

Merupakan area yang dapat dilihat oleh pengguna pada halaman web
viewport bervariasi antara device
dan viewport Secara garis besar, tag tersebut akan mengatur layout lintas-perangkat untuk anda dengan sendirinya.

Grid View

banyak halaman web dirancang berdasarkan tampilan grid.
tampilan grid membagi halaman menjadi berbagai kolom
grid-view responsif sering terdiri dari 12 kolom dari total 100%
komponen utama yang dapat menampilkan dan menampung data dalam jumlah yang banyak dalam bentuk grid (baris dan kolom). Biasanya implementasinya adalah menampilkan katalog barang pada mobile commerce, gallery Image dsb.

SUMBER : https://www.slideshare.net/cdiqsanz/layout-listview-gridview-and-adapter

Media Query

Media query terdiri dari jenis media (media type) dan dapat, sesuai dengan spesifikasi CSS3, mengandung satu atau lebih ekspresi, diekspresikan sebagai fitur media, baik benar (true) atau salah (false). Hasil query adalah benar jika jenis media yang disebutkan dalam media query cocok dengan jenis alat yang digunakan untuk menampilkan dokumen dan semua ekspresi di dalam media query adalah benar.
SUMBER : https://developer.mozilla.org/id/docs/Web/Guide/CSS/Media_queries

Mobile First Design

Desain mobile-first mirip dengan merancang aplikasi seluler dan kemudian mengadaptasi tata letak yang dapat dilihat dengan rapi di perangkat tablet dan desktop tanpa terlalu banyak modifikasi. Seluruh desain dan tata letak Anda didasarkan pada penyediaan pengalaman pengguna seluler yang luar biasa: kecepatan unduh yang cepat, konten media yang kaya untuk membuat audiens target Anda tetap tertarik, navigasi layar sentuh yang mudah, dan sebagainya.

Tahapan membuat layout responsif

Definisikan meta yang digunakan
Ketikan Kode berikut pada tag style di bagian head (untuk tampilan dekstop)
Ketikan juga untuk tampilan Tablet
Selanjutnya untuk mobile phone
Jangan lupa menggunakan box sizing untuk setiap tag agar kamu bisa mengetahui tata letaknya (jika sudah benar kalian bisa menghapus box-sizing)
Pada Tag body ketikan kode seperti berikut
Hasil

Perlu diingat property float adalah hal yang sangat penting dalam layout responsif. Cobalah dengan tanpa menggunakan float pada koding yang sudah dibuat tadi.

Contoh untuk Layout Responsif:

See the Pen Contoh Layout responsif by David Steven (@davidst19) on CodePen.