Ulangan Bootstrap
Authored by Ahmad Syaefudin
Information Technology (IT)
Vocational training
25 Questions
Used 6+ times
AI Actions
Add similar questions
Adjust reading levels
Convert to real-world scenario
Translate activity
More...
Content View
Student View
1.
MULTIPLE CHOICE QUESTION
1 min • 1 pt
Seorang siswa membuat navigasi pada website menggunakan Bootstrap 5. Setelah diuji, navbar tampil baik di layar besar, namun pada layar kecil menu tidak muncul sebelum tombol ditekan. Jika siswa ingin memastikan bahwa menu bisa berubah menjadi collapsible secara otomatis pada layar kecil, class manakah yang paling berperan untuk mengatur perilaku tersebut?
navbar-light
navbar-expand-lg
navbar-toggler
collapse navbar-collapse
nav-item
2.
MULTIPLE CHOICE QUESTION
1 min • 1 pt
Seorang siswa membuat project website menggunakan Bootstrap. Ia menambahkan link berikut di dalam tag <head>:
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
Ketika diuji di komputer yang tidak memiliki akses internet, tampilan Bootstrap tidak muncul.
Jika siswa ingin memastikan project tetap berjalan meskipun tanpa koneksi internet, langkah yang paling tepat adalah...
Menambahkan class offline-bootstrap pada tag <link>
Mengganti CDN Bootstrap dengan file lokal hasil download
Mengubah rel="stylesheet" menjadi rel="offline"
enambahkan integrity dan crossorigin agar bisa diakses offline
Menggunakan class container-fluid untuk mengaktifkan Bootstrap
3.
MULTIPLE CHOICE QUESTION
1 min • 1 pt
Anda membuat halaman web menggunakan Bootstrap dan menerapkan grid system dengan class col-lg-4 col-md-6 col-sm-12 pada sebuah elemen konten. Setelah diuji pada perangkat dengan ukuran layar yang berbeda, Anda menyadari bahwa tampilan pada perangkat dengan layar sedang (tablet) tidak sesuai yang diinginkan.
Apa yang salah dalam implementasi tersebut?
Anda menggunakan class yang salah untuk kolom pada perangkat dengan layar sedang.
Class col-sm-12 sudah cukup untuk membuat tampilan responsif di tablet.
Anda tidak menggunakan class yang sesuai untuk ukuran layar kecil.
Anda perlu menambahkan media query khusus untuk layar tablet.
Menambah kelas col pada baris lain
4.
MULTIPLE CHOICE QUESTION
1 min • 1 pt
Anda sedang merancang halaman web responsif untuk sebuah blog dengan menggunakan Bootstrap. Halaman tersebut memiliki header, sidebar, dan konten utama yang harus tetap berada dalam satu baris pada perangkat desktop dan menumpuk secara vertikal pada perangkat mobile.
Manakah dari kombinasi berikut yang paling tepat untuk mencapai desain tersebut?
Menggunakan row dengan col-md-4 untuk sidebar dan col-md-8 untuk konten utama.
Menggunakan row dengan col-12 untuk seluruh bagian di semua ukuran layar.
Menggunakan col-lg-3 untuk sidebar dan col-lg-9 untuk konten utama dengan media query tambahan.
Menggunakan container untuk elemen sidebar dan konten tanpa menggunakan grid.
Menggunakan 2 class col-6
5.
MULTIPLE CHOICE QUESTION
1 min • 1 pt
Dalam proyek web Anda, Anda diminta untuk menampilkan beberapa gambar produk dalam bentuk galeri yang dapat dipindahkan dengan tombol next dan previous. Manakah dari komponen berikut yang paling tepat digunakan untuk tujuan tersebut di Bootstrap?
Carousel
Grid System
Card
Modal
Image
6.
MULTIPLE CHOICE QUESTION
1 min • 1 pt
Pada halaman web Anda, terdapat sebuah button yang memiliki warna latar belakang hijau, namun teks di dalamnya sangat sulit dibaca karena warnanya juga hijau. Anda ingin mengganti warna teks menjadi putih tanpa merubah warna latar belakang. Manakah dari pilihan berikut yang akan mengatasi masalah ini dengan menggunakan utility classes di Bootstrap?
btn-success text-white
btn-primary text-dark
btn-success text-muted
btn-danger text-light
btn-white text-dark
7.
MULTIPLE CHOICE QUESTION
1 min • 1 pt
Dalam halaman web yang Anda buat dengan Bootstrap, Anda menggunakan container dan row untuk membungkus beberapa elemen. Setelah mengujinya, Anda melihat bahwa elemen-elemen tersebut tidak berbaris dengan benar pada layar dengan ukuran kecil (mobile).
Apa yang perlu Anda periksa atau ubah?
Pastikan untuk menggunakan col-12 pada setiap elemen dalam row.
Hapus penggunaan row karena itu tidak diperlukan di perangkat mobile.
Gunakan container-fluid agar elemen tetap responsif.
Gunakan col-sm-6 untuk membatasi ukuran kolom.
Gunakan col dan row secara bersamaan
Access all questions and much more by creating a free account
Create resources
Host any resource
Get auto-graded reports
Continue with Google
Continue with Email
Continue with Classlink
Continue with Clever
or continue with
Microsoft
%20(1).png)
Apple
Others
Already have an account?
Similar Resources on Wayground
20 questions
Kelas 8 - Halaman 23 (UH Bab 1A - PilGan)
Quiz
•
8th Grade
20 questions
asesmen CP Literasi Digital TP 1 - 6
Quiz
•
12th Grade
20 questions
Quiz Elemen Komputer
Quiz
•
9th Grade
20 questions
UKD Informatika 9 TIK
Quiz
•
9th - 12th Grade
20 questions
PTS Ganjil Grade XII 2024
Quiz
•
12th Grade
20 questions
Ulangan Harian Siskom+Analisis Data Kelas 8
Quiz
•
8th Grade
20 questions
Keterampilan Informatika Kelas 9
Quiz
•
9th Grade
20 questions
ASESMEN DIAGNOSTIK INFORMATIKA KELAS 9
Quiz
•
9th Grade - University
Popular Resources on Wayground
5 questions
This is not a...winter edition (Drawing game)
Quiz
•
1st - 5th Grade
25 questions
Multiplication Facts
Quiz
•
5th Grade
10 questions
Identify Iconic Christmas Movie Scenes
Interactive video
•
6th - 10th Grade
20 questions
Christmas Trivia
Quiz
•
6th - 8th Grade
18 questions
Kids Christmas Trivia
Quiz
•
KG - 5th Grade
11 questions
How well do you know your Christmas Characters?
Lesson
•
3rd Grade
14 questions
Christmas Trivia
Quiz
•
5th Grade
20 questions
How the Grinch Stole Christmas
Quiz
•
5th Grade