WorksheetsTHIẾT KẾ WEB - BÀI 6
Total questions: 28
Worksheet time: 26mins
Responsive Web Design là gì?
Thiết kế web có hiệu ứng động
Thiết kế web có màu sắc linh hoạt
Thiết kế trang web có thể tự động điều chỉnh hiển thị phù hợp với các thiết bị khác nhau
Thiết kế web chỉ chạy tốt trên desktop
Mục tiêu chính của thiết kế responsive là:
Tối ưu tốc độ tải trang
Đảm bảo trải nghiệm nhất quán trên nhiều loại thiết bị
Tăng khả năng tương tác qua JavaScript
Tạo giao diện đồ hoạ bắt mắt
Trong hệ thống thiết kế responsive, thuộc tính nào giúp hình ảnh tự co giãn phù hợp kích thước container?
max-width: 100%
width: fixed
object-fit: fill
image-flex
Thành phần Bootstrap nào dùng để hiển thị thông báo ngắn ( feedback ) cho người dùng?
.modal
.input-group
.alert
.card
Bạn đang thiết kế một trang có 3 cột. Trên mobile, bạn muốn mỗi cột chiếm toàn bộ chiều rộng, cách làm phù hợp nhất là gì?
Ẩn bớt 2 cột khi ở mobile
Sử dụng media query để thay đổi flex-direction: column
Dùng ảnh thay thế cho các cột
Dùng position: absolute cho từng cột
Bootstrap giúp giải quyết vấn đề nào phổ biến trong quá trình thiết kế frontend?
Tăng tốc truy xuất cơ sở dữ liệu
Thiết kế giao diện đồng nhất và tương thích nhiều thiết bị
Tự động cập nhật mã nguồn backend
Quản lý người dùng trên server
Trong Bootstrap, khi muốn tạo khoảng cách bên ngoài cho phần tử ta có thể dùng class nào?
p-3
padding-3
m-3
gap-3
Bạn cần tạo một form liên hệ có input và nút gửi hiển thị đẹp mắt, cách làm nhanh nhất là gì?
Sử dụng class .form-control và .btn của Bootstrap
Dùng ảnh làm giao diện form
Dùng thẻ không class
Dùng CSS thuần viết lại từ đầu
Bạn cần hiển thị một ảnh banner vừa với chiều rộng màn hình và không bị tràn. Class Bootstrap nào nên sử dụng?
img-thumbnail
img-fluid
w-100
img-responsive
Khi dùng Bootstrap Grid, bạn muốn một cột hiển thị 12/12 trên mobile và 6/12 trên màn hình lớn hơn. Bạn nên dùng class nào?
col-auto col-md-auto
col-6 col-lg-12
col-12 col-md-6
col-sm-6 col-lg-12
Để điều chỉnh style cho phần tử dựa trên kích thước thiết bị, bạn nên dùng kỹ thuật nào?
Media Query
Animation
Transition
JavaScript DOM
Đâu là hai class thường dùng trong hệ thống lưới ( grid system ) của Bootstrap? ( Chọn 2 đáp án )
.row
.col
.table-grid
.grid
Trong Media Queries, điều kiện nào thường được sử dụng để thiết kế responsive? ( Chọn 2 đáp án )
color-scheme
min-width
max-width
animation-name
Bootstrap hỗ trợ những thành phần giao diện nào sau đây? ( Chọn 2 đáp án )
Quản lý cơ sở dữ liệu
Modal (hộp thoại bật lên)
Truy vấn SQL
Form có xác thực
Những yếu tố nào sau đây giúp tạo nên một thiết kế reponsive hiệu quả? ( Chọn 2 đáp án )
Thiết kế theo kich thước màn hình lớn nhất
Đơn vị tương đối (% hoặc em)
Kích thước ảnh cố định (px)
Viewport meta tag
Bạn đang thiết kế một trang web bán hàng trực tuyến và muốn đảm bảo giao diện thân thiện với thiết bị di động. Trong các hành động dưới đây, những hành động nào bạn sẽ thực hiện để tối ưu hóa giao diện cho các thiết bị di động? ( Chọn 2 đáp án )
Thêm meta viewport trong thẻ
Dùng ảnh PNG độ phân giải cao toàn trang
Sử dụng các bảng HTML cố định chiều rộng
Sử dụng đơn vị phần trăm (%) thay cho px
Đâu là nhận định chính xác về các loại thiết kế trong web?
Responsive Design là sử dụng linh hoạt
ĐÚNG
SAI
Adaptive Design là thiết kế linh hoạt trên nhiều thiết bị
ĐÚNG
SAI
Adaptive Design là dùng điểm cố định
ĐÚNG
SAI
Responsive Design sử dụng kích thước cố định
ĐÚNG
SAI
Ghép class Bootstrap với vai trò tạo bố cục responsive:
Canh đều khoảng cách giữa các phần tử con: (a)
Cột chiếm 6 phần trên thiết bị trung bình: (b)
Tạo hàng để chứa các cột (col): (c)
Ghép cặp đúng giữa thuộc tính và công dụng trong thiết kế responsive:
Giới hạn chiều rộng tối đa của phần tử: (a)
Tùy chỉnh style theo điều kiện thiết bị: (b)
Cho phép phần tử con xuống dòng khi không đủ chỗ: (c)
Ghép thành phần Bootstrap với công dụng tương ứng:
Tạo nút có style theo chủ đề Bootstrap: (a)
Tạo danh sách được format sẵn: (b)
Tạo loạt điều khiển input đồng nhất, đẹp : (c)
Ghép các class Bootstrap với mục đích sử dụng:
Khối chứa với chiều rộng cố định: (a)
Nút có màu chủ đạo (màu xanh mặc định) : (b)
Căn giữa nội dung văn bản: (c)
Class nào trong Bootstrap giúp bố cục thay đổi theo kích thước màn hình? (Chọn 2 đáp án)
col-12 col-md-6
row-fluid
d-none d-lg-block
form-center
Hãy lựa chọn đáp án chính xác nhất cho mỗi nhận định sau đây:
Bootstrap yêu cầu sử dụng các class như .row và .col-* để tạo layout responsive
ĐÚNG
SAI
Bootstrap sẽ tự động tạo responsive layout mà không cần sử dụng Grid System.
ĐÚNG
SAI
Responsive Web Design chỉ cần áp dụng cho điện thoại và máy tính bảng.
ĐÚNG
SAI
Bootstrap dùng mặc định layout co giãn dựa trên display: flex
ĐÚNG
SAI
Thuộc tính nào trong HTML/CSS dùng để định nghĩa vùng nhìn (viewport) trên thiết bị di động?
<viewport>
responsive-view
<meta name="viewport">
@viewport
Khi sử dụng Bootstrap Grid System, class nào giúp phần tử chiếm nửa chiều ngang container?
.col-12
.col-6
.col-4
.col-3
Thành phần nào sau đây giúp tạo thanh điều hướng trong Bootstrap?
.navbar
.menu
.navigation
.navmenu
Ghép thành phần thiết kế responsive với hành động phù hợp:
Container co giãn theo độ rộng thiết bị: (a)
Ẩn hoặc điều chỉnh style cho mobile: (b)
Ẩn phần tử trên mobile, hiện ở desktop: (c)
Câu nào đúng khi nói về sự khác nhau giữa px và em trong thiết kế responsive?
em chỉ dùng cho JavaScript
em phụ thuộc kích thước phần tử cha, giúp linh hoạt hơn
px tự động thay đổi theo thiết bị
px luôn dễ scale hơn em
