Fitur Bootstrap

Dalam artikel kedua dalam seri ini mari kita berurusan dengan fitur Bootstrap. Ini adalah perpustakaan lengkap sumber daya untuk desain situs web dan aplikasi, termasuk templat dan elemen untuk formulir, font, dan menu, antara lain.

Dalam artículo anterior kami berpendapat bahwa ada kalanya pengelola konten bukanlah pilihan terbaik dan itu menulis kode dari awal untuk sebuah situs web adalah alternatif yang tepat. Namun, itu tidak berarti bahwa kita harus menemukan kembali roda. Menggunakan kerangka kerja seperti Bootstrap sangat mengurangi waktu desain dan membuatnya lebih mudah untuk mendapatkan hasil.

Fitur Bootstrap

Untuk memahami fitur-fitur Bootstrap, kita perlu memahami pergeseran paradigma dalam desain website.

ketika mereka muncul situs web hanya perlu beradaptasi dengan berbagai ukuran monitor. Namun, seiring berjalannya waktu, ponsel dan tablet semakin menjadi sarana akses pilihan bagi pengguna. tantangannya adalah membuat halaman beradaptasi dengan layar yang berbeda tanpa pengguna harus memperbesar, mengecilkan, atau memindahkan konten untuk dapat melihatnya.

Pada prinsipnya pendekatan berikut diadopsi:

• Desain responsif: Desainnya sama tetapi otomatis disesuaikan dengan ukuran layar. Pendekatan ini memiliki beberapa masalah seperti pengguna mungkin terpaksa memperbesar bagian tertentu dari halaman untuk melihatnya.
• Kemajuan progresif: Ini dimulai dengan merancang situs untuk perangkat dengan sumber daya yang lebih sedikit (umumnya ponsel karena memiliki layar yang lebih kecil, browser dengan kompatibilitas yang kurang untuk fitur lanjutan, dan seringkali memerlukan penggunaan paket data untuk terhubung). Setelah selesai, berdasarkan desain ini, fitur ditambahkan untuk mendapatkan versi untuk tablet, notebook, dan komputer desktop.
• Degradasi bertahap: Ini adalah jalur sebaliknya. Situs desktop dibuat terlebih dahulu dan fitur dihapus hingga versi ramah seluler diperoleh.

Karena selalu lebih mudah untuk menambah daripada menghapus, kemajuan progresif adalah tren yang berhasil menang. B.ootstrap misalnya mengambil pendekatan "mobile first", artinya dasar desain selalu versi yang akan ditampilkan dalam ukuran layar terkecil dan, kemudian, modifikasi yang akan dilakukan saat diteruskan ke ukuran berikutnya ditetapkan.

Keuntungan ekstra menggunakan Bootstrap berkaitan dengan fakta bahwa Google memprioritaskan situs ramah seluler dalam pencariannya.

Konsep lain yang harus kita perhatikan adalah perbedaan antara desain frontend dan backend. Desain front-end menangani semua yang dilihat pengguna dan semua yang berinteraksi dengan mereka. Backend mengelompokkan apa yang dilakukan di server. Contoh yang pertama adalah formulir web. Menampilkan serangkaian opsi ditampilkan sebagai menu drop-down adalah desain frontend, bahwa opsi yang dipilih dikirim melalui surat atau ditambahkan ke database adalah desain backend.

Bootstrap adalah kerangka kerja yang menggabungkan elemen gaya CSS dan pemrograman Javascript untuk mengontrol rendering dan memberikan interaktivitas ke semua komponen halaman yang dikembangkan dalam HTML5.

Di antara hal-hal yang dapat kita kendalikan dengan Bootstrap adalah:

• Aksesibilitas: Komponen seperti menu atau dialog kompatibel dengan pembaca layar atau cocok untuk digunakan oleh orang-orang dengan mobilitas terbatas.
• Tombol: Termasuk ukuran, gaya, status dan pengelompokan.
• Formulir:  Termasuk rendering, jenis kontrol, dan validasi input.
• Perumpamaan: Mengontrol asal, perataan, dan ukuran layar gambar yang disisipkan.
• Elemen navigasi: Misalnya, bilah sisi yang dapat disembunyikan atau menu vertikal atau horizontal tergantung pada perangkat.
• Tipografi: Kontrol bagaimana berbagai bagian teks ditampilkan.
• Tata letak: Menyesuaikan rendering konten tergantung pada perangkat

Pada artikel berikutnya kita akan melihat beberapa contoh praktis penggunaannya.