Panduan Pemula untuk Membangun Situs Web Responsif dengan Bootstrap – Bagian 1

Terakhir Diperbarui pada 5 Juni 2019

Artikel ini dimaksudkan untuk mendidik pengembang web tentang penggunaan prinsip-prinsip dasar Kerangka Bootstrap untuk membuat situs web responsif dengan cepat dan efektif. Ini mengurangi biaya produksi dan memungkinkan perusahaan untuk memberdayakan pengembang mereka untuk mengelola dan membangun situs web dan halaman dengan mudah. Saya akan melalui proses mengunduh kerangka Bootstrap dan keuntungan menggunakan kerangka kerja ini untuk upaya pengembangan web Anda.

Apa itu Bootstrap?

Menurut situs resmi Bootstrap (getbootstrap.com), “Bootstrap adalah kerangka kerja HTML, CSS, dan JavaScript paling populer untuk pengembangan responsif dan proyek pertama seluler di web”. Dalam istilah yang lebih sederhana, Bootstrap adalah kerangka kerja yang sangat sederhana untuk membantu membuat pengembangan web front-end lebih cepat serta menarik bagi pengembang dari berbagai tingkat keahlian.

Mengapa menggunakan Bootstrap?

Potensi untuk merancang situs web untuk berbagai media termasuk layar besar, layar biasa, ponsel dan tablet, membuat Bootstrap sangat menarik dan pilihan cerdas untuk memproduksi konten web. Kerangka kerja seperti Bootstrap menyediakan fungsionalitas generik yang dapat diubah dengan mudah untuk mengoptimalkan situs web untuk berbagai fungsi dan responsivitas yang tidak memerlukan pengkodean keras. Singkatnya, ini adalah salah satu cara paling sederhana untuk membangun situs web dan masih memiliki kemampuan untuk menyesuaikan, tidak seperti situs WordPress.

Bagaimana Memulainya?

Untuk memulai dengan Bootstrap, Anda harus mengunjungi situs resmi Bootstrap (http://getbootstrap.com/). Bootstrap adalah proyek sumber terbuka dan di-host, dikembangkan, dan dipelihara di GitHub; ini memungkinkan pengguna untuk memiliki akses ke kode sumber dan memahami cakupan penuh kerangka kerja sebagai alat untuk membangun situs web.

Ada tiga cara untuk mengunduh versi Bootstrap saat ini (v3.3.6): Anda dapat mengunduh versi Bootstrap yang sesuai, Anda dapat mengunduh kode sumber Bootstrap, dan Anda dapat mem-port kerangka kerja Bootstrap dari Less ke Sass. Dalam hal ini, jika Anda seorang pemula, saya sarankan hanya mengunduh versi Bootstrap yang sesuai. Jika Anda ingin mengintegrasikan kerangka Bootstrap dalam proyek Rails, Compass atau Sass-only, saat itulah Anda harus mem-port unduhan dari Less ke Sass.

Setelah Anda mengunduh file Boostrap, Anda harus membuka zip folder terkompresi untuk melihat struktur kerangka Bootstrap yang sesuai. Lihat di bawah untuk melihat struktur file:

Sekarang Anda bisa memasukkan file-file ini ke sistem file proyek web apa pun yang sedang Anda kerjakan dan mulai bekerja dengan Bootstrap untuk merancang dan membangun proyek yang Anda inginkan. Untuk informasi lebih lanjut tentang fungsionalitas Bootstrap, yang akan kita bahas di Bagian 2 dari posting ini lebih lanjut, silakan kunjungi situs web getboostrap.com untuk melihat komponen, fitur CSS, dan fungsi JavaScript yang dapat diakses dengan framework.

Desain responsif

Desain responsif adalah salah satu fitur khas dari kerangka Bootstrap; kemampuan untuk berkembang secara responsif dengan Bootstrap memungkinkan pengembang untuk dapat mengembangkan satu situs web yang dapat diformat dengan benar di semua platform tampilan. Sering kali, sebuah situs web dapat dirancang dengan baik dan pengalaman pengguna optimal hanya pada satu platform atau ukuran layar tertentu. Bootstrap melakukan pekerjaan luar biasa untuk mengatasi masalah ini dengan memungkinkan pengembang untuk menetapkan kolom tertentu dari halaman web menjadi ukuran tertentu ketika dibaca di layar yang lebih kecil. Ada empat jenis perangkat yang diperhitungkan Bootstrap saat membuat situs web responsif:

• Perangkat Ekstra Kecil (Ponsel pintar <768px)
• Perangkat Kecil (Tablet >= 768px)
• Perangkat Sedang (Desktop >= 992px)
• Perangkat Besar (Desktop >= 1200px)

Pengembang dapat menambahkan tag ke kelas-kelas di atas untuk mengatur konten web tertentu untuk mengecilkan, memperluas, menyembunyikan atau terlihat pada platform tertentu. Ini sangat membantu untuk menyederhanakan proses membangun tampilan dan nuansa situs web.

Sistem jaringan

Bootstrap memiliki sistem grid yang merupakan fitur utama yang memungkinkan framework digunakan untuk mendesain website responsif. Semua baris di Bootstrap harus ditempatkan di kelas wadah, dan kemudian baris berikutnya dapat didefinisikan sebagai ukuran tertentu.

Berikut adalah contoh notasi untuk sistem grid:

• Kelas baris yang telah ditentukan menghasilkan baris
• Di dalam baris itu, kelas kedua menentukan "col-md-6"
• Ini berarti bahwa kelas menghasilkan kolom yang mencakup 6 kolom di seluruh halaman web
• "md" menentukan bahwa ini hanya akan terjadi pada perangkat menengah atau desktop yang kurang dari atau sama dengan 768 px.
• Kelas "offset" berarti kolom-kolom itu akan dibiarkan kosong. Dalam hal ini offsetnya adalah 3, jadi tiga kolom akan dibiarkan kosong untuk mengisi beberapa konten.
  Sistem grid ini memungkinkan pengembang untuk dengan cepat menentukan bagian konten dan memiliki jarak yang sesuai antara konten untuk memiliki desain yang bersih dan responsif.

Tantangan dengan Bootstrap

Ukuran file JavaScript dan CSS besar ketika mengunduh langsung semua file Bootstrap. Ini dapat menyebabkan beberapa tantangan saat membuat halaman cepat. Ini karena semua file dalam file Bootstrap tidak sepenuhnya digunakan dan ini dapat berarti bahwa mengunduh data yang tidak perlu dapat menjadi masalah. Ini dapat memengaruhi pengalaman pengguna, jadi jangan ragu untuk memeriksanya lebih mendalam dengan mengunjungi pos, Cara Menggunakan Dasar-dasar Bootstrap untuk Meningkatkan Pengalaman Pengguna (https://moz.com/ugc/how-to-use-bootstrap- dasar-untuk-meningkatkan-pengalaman pengguna).

Saya harap Anda semua akan mencoba Bootstrap, karena ini adalah kerangka kerja yang fantastis untuk membangun desain situs web yang responsif dan bersih. Nantikan posting berikutnya dalam seri yang membahas lebih banyak konsep awal tentang Bootstrap.

Penulis: Esme Vazquez, Pengembang Web Junior

Pembuat, artis, gamer, pembuat kode, pengembang web, dan blogger; Esme adalah pencipta publikasi blog terbaru Indiellect di situs blog manajemen konten, Medium. Pengalamannya saat ini terletak pada pengembangan web dan pengembangan game; dia saat ini bekerja dan sedang dilatih dalam SEO di That! Perusahaan di Leesburg, FL sebagai Pengembang Web Junior mereka. Dia bercita-cita untuk membuat video game di masa depan yang menggambarkan keindahan kemanusiaan. Jika ada pertanyaan, silakan tweet dia di @EsmeVazquez18 dan/atau tambahkan dia di LinkedIn.