10 Kesalahan Bootstrap Paling Umum Yang Dilakukan Pengembang

Sepintas, Bootstrap tampaknya cukup sederhana. Dan memang, tidak sulit untuk mulai menggunakan Bootstrap. Ada dokumentasi Bootstrap yang ditulis dengan sangat baik dengan banyak contoh kode HTML, CSS, dan JavaScript. Sebagian besar jebakan penting disebutkan di sana, tetapi masih ada beberapa kesalahan yang cukup halus, atau memiliki penyebab yang ambigu. Karena Bootstrap terlihat sangat sederhana dan mudah digunakan, banyak pengembang yang terburu-buru masuk ke dalam kerangka kerja, dan kesalahan terjadi.

Kami akan melihat 10 kesalahan, masalah, dan kesalahpahaman Bootstrap paling umum ketika pengembang mulai menggunakannya.

Kesalahan Bootstrap Umum #1: Kesalahpahaman dasar tentang kerangka kerja

Ada beberapa kesalahpahaman dasar tentang kerangka Bootstrap yang dimiliki orang. Ini mungkin karena tidak diiklankan dengan jelas di situs Bootstrap, atau karena orang tidak meluangkan cukup waktu untuk membaca dokumentasi. Faktanya adalah terkadang pengembang berakhir di sudut melakukan hal-hal yang salah, dan kemudian menyalahkan kerangka kerja. Jadi mari kita buat beberapa fakta dasar menjadi jelas.

Bootstrap komprehensif, tetapi tidak besar atau besar. Bootstrap dibundel dengan template desain HTML dan CSS dasar yang menyertakan banyak komponen UI umum. Ini termasuk Tipografi, Tabel, Formulir, Tombol, Glyphicons, Dropdown, Tombol dan Grup Input, Navigasi, Pagination, Label dan Lencana, Peringatan, Bilah Kemajuan, Modals, Tab, Akordeon, Korsel, dan banyak lagi. Anda dapat memilih dan memilih beberapa di antaranya, dan dengan konfigurasi defaultnya dengan cepat menghasilkan UI yang menangani banyak browser, perangkat, dan resolusi dengan format yang bagus.

Bootstrap tidak akan melakukan segalanya untuk Anda, tetapi menyediakan serangkaian default yang masuk akal untuk dipilih dan itu akan membantu pengembang untuk lebih berkonsentrasi pada pekerjaan pengembangan daripada mengkhawatirkan desain, dan membantu mereka untuk membuat situs web yang terlihat bagus dan berjalan dengan cepat. Ini memungkinkan pembuatan prototipe cepat, tetapi tidak membatasi pengembang di jalan.

Cukup dapat diperluas sehingga siapa pun dapat menyesuaikannya agar sesuai dengan kebutuhannya. Pada awalnya, Bootstrap memiliki beberapa keterbatasan, dan saat itu sulit untuk memperluas gaya default. Tetapi seiring dengan semakin matangnya kerangka kerja, ekstensibilitas juga meningkat.

Kesalahan Bootstrap Umum #2: Berpikir bahwa Anda tidak perlu mengetahui CSS untuk menggunakan Bootstrap, dan bahwa Anda tidak memerlukan seorang desainer

Jika Anda berpikir bahwa jika Anda menggunakan Bootstrap Anda tidak perlu tahu CSS, Anda salah besar. Setiap pengembang front-end perlu mempelajari CSS dan HTML5. Bootstrap menghapus banyak bagian CSS yang rumit dari bahu pengembang (seperti awalan khusus vendor) dan menawarkan gaya default dasar, tetapi Anda masih perlu memahami CSS. Anda tidak perlu mengetahui cara kerja kueri media, tetapi Anda perlu memahami cara kerja desain responsif. Bootstrap tidak dimaksudkan untuk mengajari Anda CSS, tetapi dapat membantu jika Anda mau. Memeriksa kode sumber dalam KURANG atau SASS adalah titik awal yang bagus.

Pada topik yang sama, Anda tidak perlu menjadi seorang desainer, dan Anda dapat berargumen bahwa Anda tidak membutuhkan seorang desainer dengan Bootstrap. Namun jika memungkinkan, gunakan bantuan dari seorang desainer. Keluhan umum terhadap Bootstrap adalah bahwa semua situs Bootstrap terlihat sama, dan mudah untuk berakhir dengan situs web yang terlihat seperti situs Bootstrap lainnya. Tapi ini tidak perlu benar. Jutaan situs web di seluruh web sedang dibangun dengan Bootstrap. Pameran hebat tentang bagaimana desain yang berbeda dapat dicapai dapat ditemukan di Bootstrap Expo, yang mengumpulkan situs yang dibangun dengan Bootstrap. Lihatlah, dapatkan inspirasi, dan mulailah membuat variasi desain Anda sendiri.

Kesalahan Bootstrap Umum #3: Mengubah file CSS Bootstrap

Untuk membuatnya jelas dan sederhana: Jangan memodifikasi file bootstrap.css .

Jika Anda membuat perubahan pada file bootstrap.css , semuanya akan menjadi rumit dengan sangat cepat. Seluruh desain akan rusak ketika Anda ingin memutakhirkan file Bootstrap. Anda dapat menimpa warna bootstrap default stylesheet Anda sendiri, gaya, margin, padding, semuanya. Tidak perlu menyentuh stylesheet bootstrap.css sama sekali.

Tidak tahu KURANG atau SASS? Tidak masalah, Anda dapat membuat file CSS Anda sendiri dan menimpa apa pun yang Anda inginkan dari stylesheet bootstrap.css asli. Seperti yang kami sebutkan di kesalahan sebelumnya, mengetahui CSS adalah wajib. Buat pemilih CSS baru Anda, gunakan dalam HTML, dan selama Anda mendeklarasikan kelas CSS Anda setelah gaya Bootstrap, definisi Anda akan menimpa default Bootstrap.

Masih ingin tahu lebih banyak dan menyelam lebih dalam? Saya sangat menyarankan dan mendorong Anda untuk melakukannya. Gunakan kode sumber Bootstrap KURANG. Anda akan lebih memahami apa yang sedang terjadi, dan di mana jika Anda menggunakan sumber KURANG dan bukan CSS statis.

Kesalahan Bootstrap Umum #4: Menggunakan semua yang ditawarkan Bootstrap

Seperti yang disebutkan sebelumnya, Bootstrap bersifat komprehensif. Ini menawarkan banyak komponen UI, template desain HTML dan CSS, dan plugin JavaScript. Tapi tolong, selektiflah. Anda tidak harus menggunakan semua fitur Bootstrap.

Ini terutama berlaku untuk plugin. Pilih dan pilih hanya plugin yang masuk akal, dan jangan gunakan semuanya karena terlihat bagus dan keren. Situs web Anda dapat dengan mudah dilebih-lebihkan. Pertimbangkan untuk memulai bahwa Anda tidak menyertakan file bootstrap.js sama sekali, dan membuat situs hanya menggunakan HTML dan CSS biasa. Dan kemudian, tambahkan komponen hanya sesuai kebutuhan untuk peran tertentu, satu per satu.

Kesalahan Bootstrap Umum #5: Menyalahgunakan prompt modal

Bootstrap modals menawarkan dialog yang fleksibel dengan fungsionalitas minimum yang diperlukan, dan dilengkapi dengan smart default. Meskipun modal mudah digunakan dan menawarkan banyak penyesuaian, ada beberapa hal yang perlu kita ingat untuk menghindari penyalahgunaan yang umum.

Menampilkan lebih dari satu modal prompt pada saat itu

Bootstrap tidak mendukung modal yang tumpang tindih. Hanya satu modal pada saat itu yang dapat dilihat. Menampilkan lebih dari satu modal pada satu waktu dapat dicapai, tetapi memerlukan kode khusus untuk ditulis untuk menangani ini dengan benar.

Modal bootstrap muncul di bawah latar belakang

Jika wadah modal atau elemen induknya memiliki posisi tetap atau relatif, modal tidak akan ditampilkan dengan benar. Selalu pastikan bahwa wadah modal dan elemen induknya tidak menerapkan pemosisian khusus. Praktik terbaik adalah menempatkan HTML modal tepat sebelum tag penutup </body> , atau bahkan lebih baik lagi di posisi teratas dalam dokumen tepat setelah tag <body> pembuka. Ini adalah cara terbaik untuk menghindari komponen lain yang memengaruhi penampilan dan fungsionalitas modal.

Modal di perangkat seluler

Ada beberapa peringatan yang perlu diperhatikan pengembang ketika berhadapan dengan modal pada perangkat seluler dengan keyboard virtual. Hal ini terutama berlaku untuk perangkat iOS, di mana terdapat bug rendering yang tidak memperbarui posisi elemen tetap saat keyboard virtual dipicu. Ini tidak ditangani oleh Bootstrap, jadi terserah pengembang untuk menangani situasi ini dalam kode dengan cara terbaik untuk aplikasi yang bersangkutan.

Kesalahan Bootstrap Umum # 6: Masalah komponen tombol input file

Bootstrap tidak memiliki komponen khusus untuk tombol unggah file. Solusi sederhana dan elegan hanya dengan menggunakan HTML dan CSS dapat dicapai dengan kode contoh berikut:

 <span class="btn btn-default btn-file"> Browse <input type="file"> </span>

 .btn-file { position: relative; overflow: hidden; } .btn-file input[type=file] { position: absolute; top: 0; right: 0; min-width: 100%; min-height: 100%; font-size: 100px; text-align: right; filter: alpha(opacity=0); opacity: 0; outline: none; background: white; cursor: inherit; display: block; }

Ada banyak contoh bagaimana mendapatkan efek serupa. Contoh kode ini dipinjam dari Cory LaViska, dan di situsnya Anda dapat membaca penjelasan lebih rinci tentang masalah ini. Ada juga contoh yang diperluas dengan lebih banyak fungsi yang menggunakan kode JavaScript tambahan.

Kesalahan Bootstrap Umum #7: Terlalu rumit dengan JavaScript dan mengabaikan atribut “data-”

Desainer, atau hanya pengembang JavaScript pemula, dapat dengan mudah menyelami pengembangan web dan membuat halaman web hanya menggunakan HTML, CSS, dan Bootstrap. Jika mereka tidak pandai coding, mereka bisa terjebak dalam penyalahgunaan JavaScript atau hanya terlalu rumit. Penting untuk menyatakan bahwa semua plugin Bootstrap dapat digunakan murni melalui API markup, tanpa menulis satu baris JavaScript. Ini adalah API kelas satu Bootstrap dan harus menjadi pertimbangan pertama Anda saat menggunakan plugin.

Misalnya, kita dapat mengaktifkan dialog modal tanpa menulis JavaScript apa pun hanya dengan menyetel data-toggle="modal" pada elemen pengontrol seperti tombol atau jangkar, dan meneruskan parameter tambahan menggunakan atribut data- . Pada kode di bawah ini, kami menargetkan kode HTML dengan ID #myModal . Kami telah menetapkan bahwa modal tidak akan ditutup ketika pengguna mengklik di luar modal dengan menggunakan opsi data-backdrop , dan kami telah menonaktifkan event kunci escape yang menutup modal dengan opsi data-keyboard . Semua dalam satu baris kode HTML:

 <button type="button" data-toggle="modal" data-target="#myModal" data-backdrop="static" data-keyboard="false">Launch my modal</button>

Kesalahan Bootstrap Umum #8: Mengabaikan alat yang memudahkan pengembangan Bootstrap

Kesalahan terjadi, dan setiap pengembang terkadang melakukannya. Ini tidak bisa dihindari, tetapi bagaimana Anda menangani kesalahan yang penting. Tim Bootstrap memperhatikan dengan melihat pelacak masalah bahwa orang lebih sering melakukan kesalahan. Itu sebabnya mereka mencoba untuk mengotomatisasi proses pengembangan. Hasilnya adalah Bootlint, alat linting HTML untuk proyek Bootstrap. Bootlint dapat digunakan baik di dalam browser atau dari baris perintah melalui Node.js, dan secara otomatis akan memeriksa halaman web Bootstrap untuk menemukan banyak kesalahan umum penggunaan Bootstrap. Menambahkan Bootlint ke rantai alat pengembangan web Anda dapat menghilangkan banyak kesalahan umum yang biasanya memperlambat pengembangan proyek.

Jika Anda ingin berkontribusi pada proyek Bootstrap, ada baiknya memeriksa Rorschach. Rorschach adalah bot pemeriksa kewarasan permintaan tarik Bootstrap, yang menjalankan beberapa pemeriksaan pada setiap permintaan tarik baru. Jika pemeriksaan kewarasan gagal, ia meninggalkan komentar informatif pada permintaan tarik yang menjelaskan kesalahan dan cara memperbaikinya, dan kemudian menutup permintaan tarik.

Kesalahan Bootstrap Umum #9: IE8 dan masalah ketidakcocokan browser lama

Bootstrap dibuat untuk bekerja sebaik mungkin di browser desktop dan seluler terbaru. Browser lama mungkin menampilkan komponen dan elemen dengan gaya berbeda, tetapi semuanya harus berfungsi penuh. Dukungan mencakup Internet Explorer 8 dan 9, dengan catatan penting bahwa beberapa properti CSS3 dan elemen HTML5 tidak sepenuhnya didukung oleh browser ini.

Untuk mendapatkan dukungan penuh untuk Internet Explorer 8 dan browser lama lainnya, Anda perlu menggunakan polyfill untuk CSS3 Media Queries Respond.js, HTML 5 shim yang memungkinkan penggunaan elemen HTML5, dan tag IE <meta> yang tepat di kepala HTML ke memastikan bahwa IE tidak berjalan dalam mode kompatibilitas. Kepala HTML Anda pada akhirnya akan terlihat seperti ini:

 <head> ... <meta http-equiv="X-UA-Compatible" content="IE=edge"> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> <![endif]--> </head>

Dalam hal Respond.js , waspadalah terhadap peringatan berikut di lingkungan pengembangan dan produksi.

Kesalahan Bootstrap Umum #10: Mengabaikan praktik terbaik

Salah satu pertanyaan umum di Stack Overflow adalah bagaimana membuat dropdown menu Bootstraps terbuka saat diarahkan, bukan saat diklik. Meskipun solusi untuk pertanyaan ini tidak rumit dan dapat dilakukan hanya dengan menggunakan CSS, namun tidak disarankan. Fitur ini sengaja dikeluarkan dari kerangka kerja, dan ini adalah keputusan desain yang dibuat oleh tim pengembangan. Sekali lagi, itu bisa dilakukan, tetapi orang perlu memahami dampaknya dan memahami bahwa ada praktik terbaik, terutama untuk kerangka kerja seluler pertama. Alasan di balik masalah khusus ini adalah membuat segala sesuatunya berfungsi dengan mengarahkan kursor tidak membantu pengguna yang memiliki perangkat sentuh. Pada perangkat tersebut tidak ada hover, hanya acara sentuh. Dengan demikian, ini tidak akan berfungsi dengan baik pada perangkat yang mendukung sentuhan.

Kesimpulan Kesalahan Bootstrap

Saya harap panduan Bootstrap singkat ini akan membantu Anda menghindari beberapa kesalahan umum, menghilangkan kesalahpahaman yang biasa terjadi, dan membantu Anda mendapatkan sebagian besar kerangka kerja. Perlu diingat, Bootstrap bukan untuk semua orang, juga tidak cocok untuk setiap proyek. Saat memilih kerangka kerja, Anda perlu meluangkan waktu untuk membaca dokumentasi, dan Anda perlu meluangkan waktu untuk bermain dengan kerangka kerja untuk mendapatkan pemahaman dan gambaran yang lebih baik tentang cara kerjanya. Ini juga berlaku untuk Bootstrap.

Baca dokumentasi, mainkan dan bereksperimen dengan sampel, dapatkan dasar-dasarnya dengan benar, dan nikmati pembuatan desain baru dan indah.