Kiểm tra Bootstrap trực tuyến

Bootstrap là thư viện thành phần phổ biến nhất hiện có trên internet. Nó cũng được dùng như một kỹ năng cơ bản cho rất nhiều nhà phát triển front-end. Vì nó là nguồn mở và miễn phí, bạn không phải lo lắng rằng mình sẽ gặp phải một số vấn đề mà bạn không thể giải quyết. Đó là bởi vì trong hầu hết thời gian, bạn không đơn độc – bạn có thể tìm giải pháp trên internet

Sau khi phát hành Bootstrap 4 Beta, chúng tôi tự hào giới thiệu với bạn Trình chỉnh sửa Bootstrap 4. Đây là trình chỉnh sửa dựa trên web mà bạn có thể sử dụng để thiết kế, thử nghiệm và tạo nguyên mẫu cho trang web của mình. Điều đó có nghĩa là bạn có thể tiết kiệm nhu cầu cài đặt trình chỉnh sửa mã, nhập Bootstrap CSS và Javascripts. Quan trọng nhất, chúng tôi cung cấp các đoạn mã để bạn chèn ngay tại chỗ thay vì tiếp tục đào chúng từ tài liệu trên trang web Bootstrap chính thức

Làm bài kiểm tra trực tuyến Bootstrap và đánh giá mức độ sẵn sàng của bạn trước khi bạn xuất hiện trong bất kỳ cuộc phỏng vấn hoặc bài kiểm tra viết nào. Bao gồm các loại câu hỏi khách quan từ các khái niệm quan trọng khác nhau của Bootstrap, bài kiểm tra này đưa ra cho bạn các câu hỏi kèm theo bốn tùy chọn. Câu trả lời đúng, giải thích, ví dụ được cung cấp kèm theo mỗi câu hỏi giúp bạn hiểu rõ từng khái niệm dễ dàng hơn

Thử nghiệm trực tuyến Bootstrap này được thiết kế cho ai?

Tất cả các nhà phát triển Front End, nhà phát triển UI/UX và nhà thiết kế sẽ thấy bài kiểm tra này cực kỳ hữu ích. Tất cả sinh viên năm nhất, BCA, BE, BTech, MCA và sinh viên đại học muốn tạo dựng sự nghiệp trong lĩnh vực thiết kế giao diện người dùng sẽ được hưởng lợi rất nhiều từ bài kiểm tra này

Chủ đề kiểm tra trực tuyến Bootstrap

Bài kiểm tra trực tuyến này bao gồm các chủ đề như - Hệ thống lưới, Bố cục cố định, Bố cục linh hoạt, Bố cục đáp ứng?, Kiểu chữ, Bảng, Danh sách, Nhóm danh sách, Biểu mẫu, Nhóm đầu vào, Nút, Nhóm nút, Hình ảnh, Đối tượng phương tiện, Biểu tượng, Điều hướng, Thanh điều hướng,

1. Truy vấn phương tiện trong Bootstrap cho phép bạn di chuyển, hiển thị và ẩn nội dung dựa trên kích thước khung nhìn

a. Đúng
b. Sai

Câu trả lời

Câu trả lời. một. Thật

Giải trình. Media Query là một kỹ thuật CSS được giới thiệu trong CSS3. Truy vấn phương tiện cho phép áp dụng các thuộc tính biểu định kiểu trên thành phần web dựa trên kích thước của chế độ xem


2. Hệ thống lưới của Bootstrap cho phép tối đa _____ cột trên trang

a. 12
b. 13
c. 14
d. 11

Câu trả lời

Câu trả lời. một. 12

Giải trình. Hệ thống lưới Bootstraps cho phép tối đa 12 cột trên trang. Nếu có hơn 12 cột được đặt trong một hàng, mỗi nhóm cột bổ sung sẽ bao bọc trên một dòng mới


3. Có bao nhiêu lớp Container trong Bootstrap?

a. 1
b. 2
c. 3
d. 4

Câu trả lời

Câu trả lời. b. 2

Giải trình. Vùng chứa được sử dụng để đặt lề để xử lý hành vi phản hồi của bố cục. Nó được sử dụng để tạo nội dung đóng hộp. Có hai loại lớp vùng chứa trong Bootstraps

  • vùng chứa (chiều rộng cố định)
  • container-fluid (toàn chiều rộng)


4. Lớp __________ làm cho bảng nhỏ gọn hơn bằng cách cắt phần đệm ô làm đôi

a. . viền bảng
b. . đáp ứng bảng
c. . kẻ sọc
d. . thu gọn trong bảng

Câu trả lời

Câu trả lời. đ. . bảng cô đặc

Giải trình. Một bảng Bootstrap cơ bản có phần đệm nhẹ và chỉ có các ngăn ngang. Các. lớp bảng thêm kiểu dáng cơ bản vào bảng nhưng. lớp thu gọn bảng làm cho bảng nhỏ gọn hơn bằng cách cắt đôi phần đệm ô


5. Hệ thống lưới Bootstrap có bốn lớp xác định kích thước màn hình

a. s, sm, mid, lg
b. xs, sm, md, lg
c. xs, sml, mid, lg
d. x, sm, md, lg

Câu trả lời

Câu trả lời. b. xs, sm, md, lg

Giải trình. Hệ thống lưới Bootstrap có bốn lớp

  • xs (dành cho điện thoại - màn hình rộng dưới 768px)
  • sm (dành cho máy tính bảng - màn hình rộng bằng hoặc lớn hơn 768px)
  • md (đối với máy tính xách tay nhỏ - màn hình rộng bằng hoặc lớn hơn 992px)
  • lg (dành cho máy tính xách tay và máy tính để bàn - màn hình rộng bằng hoặc lớn hơn 1200px)


6. Trong Hệ thống lưới Bootstrap, bạn có thể biến bất kỳ bố cục có chiều rộng cố định nào thành bố cục có chiều rộng đầy đủ bằng cách thay đổi. lớp chứa để. chất lỏng chứa

a. Đúng
b. Sai

Câu trả lời

Câu trả lời. một. Thật

Giải trình. Hệ thống Bootstrap Grid có hai lớp container,. thùng chứa (chiều rộng cố định) và. container-fluid (toàn chiều rộng). Chúng ta có thể biến bất kỳ bố cục có chiều rộng cố định nào thành bố cục có chiều rộng đầy đủ bằng cách thay đổi lớp vùng chứa

Đám mây thử nghiệm trình duyệt chéo và thử nghiệm thiết bị chéo có hiệu suất cao để thử nghiệm Bootstrap trên quy mô lớn

Chạy thử nghiệm thủ công và tự động hóa các trang web Bootstrap trên hơn 3000 trình duyệt máy tính để bàn và thiết bị di động khác nhau

Kiểm tra Bootstrap trực tuyến

Viết, chạy và chia sẻ mã Bootstrap trực tuyến bằng trình chỉnh sửa trực tuyến Bootstrap của OneCompiler miễn phí. Đây là một trong những trình soạn thảo trực tuyến mạnh mẽ, giàu tính năng dành cho Bootstrap. Bắt đầu với trình soạn thảo trực tuyến Bootstrap của OneCompiler thực sự đơn giản và khá nhanh. Trình chỉnh sửa hiển thị mã soạn sẵn mẫu khi bạn chọn ngôn ngữ là 'Bootstrap' và bắt đầu viết mã để tìm hiểu và kiểm tra trực tuyến ngay lập tức

Bootstrap là một khung CSS miễn phí để phát triển web mặt trước. Nó chứa các mẫu thiết kế dựa trên CSS và JavaScript để tạo kiểu như kiểu chữ, biểu mẫu, nút, điều hướng và các thành phần giao diện khác. Nó giúp các nhà phát triển phát triển trang web nhanh hơn và cũng dễ sử dụng. Bạn có thể sử dụng các lớp dựng sẵn do đó bạn không cần phải phát triển các phần tử từ đầu

Màu sắc

Màu văn bản. văn bản bị tắt tiếng. văn bản chính. văn bản thành công. thông tin văn bản. văn bản cảnh báo. văn bản nguy hiểm. văn bản phụ. chữ trắng. văn bản tối. nội dung văn bản. text-light Màu nền. bg-chính. bg-success. thông tin bg. cảnh báo bg. nguy hiểm bg. bg-trung học. bg-tối. ánh sáng bg

Những cái bàn

Lớp Mô tả. bảng cơ bản. table-stripedthêm sọc ngựa vằn vào một cái bàn. table-borderedadds viền trên tất cả các cạnh của bảng và các ô. table-hoverthêm hiệu ứng di chuột với màu nền xám trên các hàng của bảng. table-primarythêm màu xanh lam vào hàng của bảng biểu thị một hành động quan trọng. table-darkathêm nền đen vào bảng. table-successadds Màu xanh lá cây vào hàng của bảng biểu thị hành động thành công hoặc tích cực. table-dangeradds Màu đỏ cho hàng của bảng biểu thị một hành động tiêu cực. table-infoadds Màu xanh nhạt cho hàng của bảng biểu thị hành động hoặc thay đổi thông tin trung tính. table-warningOrange đến hàng của bảng biểu thị sự chú ý cần thiết. table-activeáp dụng màu di chuột Xám cho hàng của bảng hoặc ô của bảng. table-secondaryGrey. Chỉ ra một hành động ít quan trọng hơn một chút. table-light Nền bảng hoặc hàng của bảng màu xám nhạt. table-darkNền bảng hoặc hàng của bảng màu xám đậm. thead-darkathêm nền đen vào tiêu đề bảngheadsthead-lightthêm nền xám vào tiêu đề bảng

Hình ảnh

Kiểm tra Bootstrap trực tuyến
LớpMô tả. roundthêm các góc tròn vào một hình ảnh. round-circle định hình ảnh thành hình tròn. img-thumbnail định hình ảnh thành hình thu nhỏ. float-right/. float-leftfloats hình ảnh sang phải/trái. mx-auto. d-blockCenter một hình ảnh bằng cách thêm các lớp tiện ích. mx-auto (lề. ô tô) và. khối d (hiển thị. chặn). img-fluid Hình ảnh đáp ứng tự động điều chỉnh để phù hợp với kích thước màn hình

nút

Các lớp nút bên dưới có thể được sử dụng trên hoặc .

Basic Button Primary Button Secondary Button Success Button Info Button Warning Button Danger Button Dark Button Light Button Link Button Primary Outline Button Secondary Outline Button Success Outline Button Info Outline Button Warning Outline Button Danger Outline Button Dark Outline Button Light Outline Button

người kéo sợi






















lưới

Lớp Mô tả. col-thêm thiết bị nhỏ có chiều rộng màn hình nhỏ hơn 576px. thiết bị col-sm-small có chiều rộng màn hình bằng hoặc lớn hơn 576px. thiết bị col-md-medium có chiều rộng màn hình bằng hoặc lớn hơn 768px. thiết bị col-lg-large có chiều rộng màn hình bằng hoặc lớn hơn 992px. thiết bị col-xl-xlarge có chiều rộng màn hình bằng hoặc lớn hơn 1200px

col-3

col-6

col-3

Chú giải công cụ

Thêm data-toggle="tooltip" để tạo chú giải công cụ cho một phần tử

Run

Codeply có miễn phí không?

Codeply là trình chỉnh sửa trực tuyến miễn phí, nhanh chóng bao gồm hàng chục khung, mẫu cơ bản và hơn 50.000 đoạn mã.

Bootstrap 3 có phải là thiết bị di động đầu tiên không?

Với Bootstrap 3, chúng tôi đã viết lại dự án để thân thiện với thiết bị di động ngay từ đầu. Thay vì thêm vào các kiểu di động tùy chọn, chúng được đưa ngay vào cốt lõi. Trên thực tế, Bootstrap ưu tiên cho thiết bị di động . Có thể tìm thấy các kiểu đầu tiên dành cho thiết bị di động trong toàn bộ thư viện thay vì trong các tệp riêng biệt.

Bootstrap là gì?

Bootstrap là một khung phát triển web mã nguồn mở và miễn phí. Nó được thiết kế để giảm bớt quá trình phát triển web của các trang web đáp ứng, ưu tiên thiết bị di động bằng cách cung cấp một bộ cú pháp cho các thiết kế mẫu