25 Pertanyaan dan Jawaban Wawancara Bootstrap Teratas [Untuk Freshers & Berpengalaman]

Jika Anda seorang pengembang web seluler, Anda mungkin pernah mendengar tentang Bootstrap dan signifikansinya dalam membangun UI yang cepat, responsif, dan dirancang secara estetis. Merupakan prioritas setiap bisnis saat ini untuk menghadirkan antarmuka pengguna dan pengalaman pengguna (UI/UX) yang intuitif dan fleksibel. Dan Bootstrap membantu Anda melakukan hal itu!

Karena bisnis tertarik untuk mengembangkan desain front-end yang dapat disesuaikan untuk perangkat dengan ukuran layar yang bervariasi, menjadi ahli di Bootstrap saat ini sangat berharga.

Jadi, jika Anda memulai karir teknis atau mengincar posisi yang lebih tinggi, berikut adalah beberapa pertanyaan dan jawaban wawancara Bootstrap yang paling sering diajukan untuk membantu Anda mendapatkan pekerjaan impian itu. Jadi, tanpa basa-basi lagi, mari kita mulai!

25 Pertanyaan dan Jawaban Wawancara Bootstrap Teratas

Pertanyaan 1: Apa itu Bootstrap?

Bootstrap adalah kerangka kerja front-end yang sangat responsif dan mudah digunakan yang digunakan untuk membuat aplikasi web dengan HTML, CSS, dan JS. Ini memiliki tata letak yang cepat dan intuitif untuk kepentingan penggunanya. Bootstrap memungkinkan pengguna untuk membangun antarmuka pengguna yang tajam dan estetis untuk aplikasi seluler menggunakan templat desain yang ada. Fitur-fiturnya termasuk menu Dropdown, Buttons, Forms, Glyphicons dan Alerts Tab, untuk beberapa nama.

Pertanyaan 2: Apa saja Komponen Utama Bootstrap?

Bootstrap dimuat dengan sejumlah komponen yang membuka jalan bagi pengalaman pengguna yang luar biasa. Ini termasuk fitur interaktif seperti pop-up, menu dropdown, bilah navigasi, tombol, formulir, peringatan, dll.

Berikut ini adalah komponen kunci dari Bootstrap:

1. Plugin JS: di sinilah plugin JS dan jQuery berada
2. Kustomisasi: digunakan untuk menyesuaikan kerangka kerja
3. CSS: termasuk file CSS
4. Scaffolding: berisi sistem grid, gaya latar belakang, dll

Pertanyaan 3: Apa yang Membuat Bootstrap menjadi Opsi Efektif untuk Pengembangan Seluler dan Web?

Tata letak Bootstrap yang cepat dan mudah digunakan memungkinkan pengembangan aplikasi seluler dan web yang lebih cepat. Template desain yang disertakan sangat responsif dan secara otomatis menyesuaikan diri dengan ukuran layar yang berbeda tanpa kompromi dengan esensi halaman web.

Pertanyaan 4: Apa Saja Berbagai Fitur Bootstrap?

Berikut ini adalah beberapa fitur Bootstrap:

– Ini adalah platform sumber terbuka gratis; memungkinkan pengembang untuk berkontribusi pada peningkatannya.

– Bootstrap cepat, responsif, dan sangat mudah digunakan

– Ini kompatibel untuk digunakan dengan semua browser

– Bootstrap memiliki perpustakaan desain dan template yang kaya untuk dipilih

Pertanyaan 5: Apa itu Glyphicon?

Glyphicons di Bootstrap adalah ikon berformat font yang digunakan untuk menunjukkan tindakan seperti peringatan, hapus, zoom, edit, dll. Ada sekitar 200 ikon seperti itu yang terdapat dalam satu kelas.

Sintaks untuk menggunakan glyphicon ini adalah:

<p><span class = “glyphicons glyphicon-pencil”></span></p>

Pertanyaan 6: Jelaskan Dropdown dan Grup Tombol di Bootstrap.

Dropdown adalah menu sakelar dinamis yang berisi daftar item tertaut di bawahnya. Ini adalah salah satu elemen desain terbersih dari sebuah situs web.

Sintaks untuk menggunakan Dropdown ini adalah:

<div class= “dropdown”><!– masukkan daftar Anda dengan class .dropdown-menu –></div>

Button Groups adalah serangkaian tombol yang ditempatkan secara berdekatan. Komponen Bootstrap ini mengharuskan elemen divisi dengan kelas .btn-group didefinisikan terlebih dahulu. Setelah itu, elemen tombol disarangkan menggunakan kelas using.btn.

Sintaksnya adalah sebagai berikut:

<div class=“btn-group”><button class= “btn”>Benar</button></div>

<div class=“btn-group”><button class= “btn”>Salah</button></div>

Dengan menggunakan dua komponen di atas, Anda dapat membuat komponen baru yang disebut Dropdown Tombol yang memungkinkan Anda memicu dropdown menggunakan elemen tombol.

Sintaksis:

<button class = “btn-default dropdown-toggle”><!— komponen dropdown ada di sini –></button>

Pertanyaan 7: Apa itu Grup Input?

Grup input adalah ekstensi ke kelas kontrol bentuk yang memungkinkan Anda menambahkan string teks atau menyertakan tombol di salah satu sisi bidang input.

Kelas .input-group dan kelas .input-group-addon digunakan bersama untuk mengimplementasikan Grup Input.

Sintaksis:

<div class="input-group">

<span class=”input-group-addon” id=”basic-addon1″>@</span>

<input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1″>

</div>

Pertanyaan 8: Apa Empat Kelas Kontekstual yang Digunakan dengan Progressive Bar Bootstrap.

Berikut adalah empat kelas kontekstual yang digunakan dengan bilah progresif Bootstrap:

1. Kemajuan-keberhasilan
2. info kemajuan
3. Peringatan kemajuan
4. Kemajuan-bahaya

Pertanyaan 9: Berapa Banyak Gaya Tombol yang Berbeda di Bootstrap? Apakah mereka?

Ada 7 gaya berbeda di mana tombol Bootstrap dapat digunakan. Mereka adalah sebagai berikut:

1. .btn-info
2. .btn-peringatan
3. .btn-bahaya
4. .btn-sukses
5. .btn-link
6. .btn-primer
7. .btn-default

Pertanyaan 10: Jelaskan Peringatan Bootstrap.

Peringatan bootstrap digunakan dalam pembuatan dugaan pesan peringatan. Hal ini dilakukan terutama untuk menata pesan sehingga dapat terlihat lebih terlihat oleh pengguna.

Berikut adalah empat kelas dalam peringatan:

1. .alert-sukses
2. .alert-info
3. .peringatan-peringatan
4. .alert-bahaya.

Pertanyaan 11: Bagaimana Anda Membuat Formulir Vertikal atau Dasar di Bootstrap?

Berikut ini adalah langkah-langkah untuk membuat bentuk dasar vertikal di Bootstrap:

Langkah 1: Ke elemen <form> induk, tambahkan formulir peran.

Langkah 2: Tambahkan label dan kontrol di dalam <div> dengan class.form-group

Langkah 3: Tambahkan kelas .form-control ke setiap URL teks <input>, semua elemen <textarea> serta <select>.

Pertanyaan 12: Apa itu Pagination di Bootstrap?

Seperti yang disarankan oleh label, Pagination memungkinkan Anda untuk membagi konten situs web Anda menjadi halaman yang berbeda untuk memudahkan navigasi.

Sintaksis:

<ul class = “pagination”><!—Daftar elemen ada di sini –></ul>

Pertanyaan 13: Apa itu Bootstrap Container?

Wadah bootstrap pada dasarnya adalah wadah untuk menambahkan kode HTML. Situs penampung ini kemudian menjadi bagian dari halaman tempat konten dapat ditambahkan. Ini membuat UI Anda lebih cepat dan lebih responsif.

Baca Juga Bootstrap vs Material UI

Pertanyaan 14: Sebutkan Tiga Komponen Bootstrap.

1. Navbar: bertindak seperti tajuk untuk navigasi di situs web Anda

Sintaks: <nav class = “navbar”><!—Kode elemen DOM navigasi Anda –></nav>

2. Jumbotron: berperilaku seperti viewport; dapat mengasumsikan layar penuh untuk berkonsentrasi pada konten utama

Sintaks: <div class = “jumbotron”><!—Tulis konten Anda dalam elemen DOM di sini –></div>

3. Bilah kemajuan: menampilkan umpan balik yang menyoroti kemajuan suatu tindakan

Sintaks: <div class=”progress-bar” role=”progressbar” aria-valuenow=”60″ aria-valuemin=”0″ aria-valuemax=”100″ style=”width: 60%;”>

Pertanyaan 15: Apa Dua Jenis Tata Letak di Bootstrap?

1. Tata Letak Cairan
2. Tata Letak Tetap

Pertanyaan 16: Apa itu Tata Letak Fluida?

Tata Letak Fluida adalah fitur yang berguna ketika lebar total layar perlu digunakan dalam desain. Saat Anda memilih opsi ini, tata letak menyesuaikan sendiri sesuai dengan ukuran browser.

Pertanyaan 17: Apa itu Tata Letak Tetap?

Tata Letak Tetap berbeda dari Tata Letak Fluid sehingga tidak menyesuaikan diri sesuai ukuran browser. Namun, masih cepat dan responsif pada 940px.

Pertanyaan 18: Apa itu Modal Plugin di Bootstrap?

Jendela warisan yang ditempatkan sebagai lapisan di atas jendela induk dikenal sebagai jendela Modal. Jendela ini menambah nilai pengalaman pengguna dengan membuatnya berfungsi. Plugin yang digunakan untuk membuat Modal windows disebut modal plugin.

Pertanyaan 19: Apa itu Elemen Bootstrap Collaps?

Anda dapat menutup elemen Bootstrap apa pun tanpa kode JavaScript. Ini dapat dilakukan dengan menambahkan data-toggle= ”collapse” ke elemen pengontrol. Target data juga disertakan untuk memberinya kontrol untuk menciutkan elemen.

Untuk menggunakan fitur Bootstrap ini, gunakan .collapse(options).

Pertanyaan 20: Definisikan Sumur Bootstrap?

Sumur bootstrap mirip dengan wadah Bootstrap dan membantu konten terlihat lebih tertekan dan bersih di halaman. Itu juga dapat digunakan untuk membungkus konten dengan menambahkan kelas .well.

Pertanyaan 21: Apa itu Plugin Carousel di Bootstrap.

Plugin Carousel memungkinkan Anda membuat slider di halaman web Anda. Penggeser memungkinkan blok konten yang besar untuk disembunyikan ke ruang kecil di halaman.

Beberapa plugin carousel yang dapat Anda gunakan adalah:

.carousel(opsi)

.carousel('jeda')

.carousel(siklus')

.carousel('sebelumnya')

.carousel('berikutnya')

Soal 22: Jelaskan Keluaran dari Kode Berikut.

<div class="kemajuan">

<div class="progress-bar progress-bar-success" style="width: 65%">

<span class=”sr-only”>75% berhasil diselesaikan</span>

</div>

<div class="progress-bar progress-bar-warning" style="width: 20%">

<span class=”sr-only”>30% selesai dengan peringatan</span>

</div>

<div class="progress-bar progress-bar-danger" style="width: 15%">

<span class=”sr-only”>15% tidak selesai</span>

</div>

</div>

Jawaban: Output dari kode di atas akan menunjukkan lebar penuh dan hasil terisi penuh pada bilah kemajuan. Ini karena Bootstrap menumpuk beberapa batang menjadi satu batang saat ditempatkan di elemen induk kemajuan yang sama. Juga, jumlah total progress bar adalah 100%.

Pertanyaan 23: Sebutkan Kode yang digunakan untuk Tampilan Kode di Bootstrap?

Jawaban: Ada dua kode yang digunakan untuk tampilan kode. Mereka:

1. tag <kode>
2. tag <pra>

Pertanyaan 24: Jelaskan Normalisasi di Bootstrap.

Bootstrap normalize adalah fitur di Bootstrap yang menggunakan file CSS kecil untuk meningkatkan konsistensi lintas-browser.

Pertanyaan 25: Apa Metode untuk Menyesuaikan Tautan Pagination di Bootstrap?

Gunakan .disabled untuk tautan yang tidak dapat diklik dan gunakan .active untuk mereferensikan halaman saat ini.

Checkout: Bootstrap vs Material UI

Pelajari Kursus Perangkat Lunak online dari Universitas top dunia. Dapatkan Program PG Eksekutif, Program Sertifikat Tingkat Lanjut, atau Program Magister untuk mempercepat karier Anda.

Kesimpulan

Kami harap pertanyaan dan jawaban ini membantu Anda meningkatkan pengetahuan Anda tentang Bootstrap. Semoga berhasil dengan wawancara itu!

Jika Anda tertarik untuk mempelajari lebih lanjut tentang pengembangan perangkat lunak full-stack, lihat Program PG Eksekutif upGrad & IIIT-B dalam Pengembangan Perangkat Lunak Full-stack yang dirancang untuk profesional yang bekerja dan menawarkan 500+ jam pelatihan yang ketat, 9+ proyek dan tugas, status Alumni IIIT-B, proyek batu penjuru praktis & bantuan pekerjaan dengan perusahaan-perusahaan top.