Bất kể bạn đang tạo một trang web portfolio đơn giản, một ứng dụng đơn lẻ cho một công ty lớn, một blog hay một diễn đàn, rất có thể bạn sẽ cần một menu thả xuống.
Menu thả xuống đặc biệt hữu ích khi bạn có nhiều liên kết hoặc hành động nhưng không đủ dung lượng trên trang để hiển thị tất cả chúng cùng một lúc.
Thông thường, trình đơn thả xuống yêu cầu một chút JavaScript.
Nếu bạn chưa bắt đầu tìm hiểu nó hoặc chỉ muốn một giải pháp nhanh chóng, Bootstrap là lựa chọn hoàn hảo.
Bootstrap là gì?
Bạn có thể đã nghe thấy từ này rất nhiều lần, nhưng Bootstrap là gì?
Đó là một khung CSS front-end (với một chút JavaScript). Điều này có nghĩa rằng đó là một loại giàn giáo được tạo ra trước đó để tăng tốc độ phát triển đáng kể. Các lập trình viên cam kết một khoảng thời gian nhất định để phát triển một tiêu chuẩn cần tuân thủ và bao gồm tất cả các thiết lập điều kiện tiên quyết cần thiết vào chính khung, vì vậy chúng tôi không phải làm điều đó mỗi lần.
Một kiểu chuẩn được áp dụng cho các thành phần nhất định trong Bootstrap thường được xây dựng, như các phần tử nút, nhóm nút và thanh điều hướng. Điều này có nghĩa là chúng ta có thể áp dụng tất cả các phong cách đó bằng cách sử dụng một vài từ khóa được xác định trước thay vì viết nhiều dòng mã lặp đi lặp lại.
Điều này giúp ích rất nhiều cho sự nhất quán vì một nhóm gồm nhiều nhà phát triển làm việc trên các ứng dụng lớn hơn không cần phải lo lắng về việc áp dụng các kiểu giống nhau. Tất cả các kiểu đều được xác định trong khuôn khổ.
81% người tham gia cho biết họ cảm thấy tự tin hơn về triển vọng công việc công nghệ của mình sau khi tham gia một cuộc thi đào tạo. Kết hợp với bootcamp ngay hôm nay.
Sinh viên tốt nghiệp bootcamp trung bình dành ít hơn sáu tháng để chuyển đổi nghề nghiệp, từ khi bắt đầu bootcamp đến khi tìm được công việc đầu tiên của họ.
Thiết lập Bootstrap
Để sử dụng Bootstrap, chúng ta cần thêm một vài dòng mã vào cấu trúc HTML của mình.
Chúng tôi sẽ sử dụng Bootstrap CDN để thiết lập nhanh nhất và đơn giản nhất.
Trước hết, chúng ta cần một mẫu HTML5 thích hợp, điều này có thể dễ dàng thực hiện trong các trình soạn thảo mã hiện đại. Trong VSCode, chỉ cần gõ! và nhấn enter hoặc tab để nhận cấu trúc tài liệu HTML5 trông giống như sau:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> </body> </html>
Bây giờ, bên trong thẻ
, hãy dán các dòng sau lên trên bất kỳ biểu định kiểu nào khác:<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk"
crossorigin="anonymous"
/> Bootstrap phụ thuộc vào một số thư viện JavaScript bên dưới, vì vậy chúng ta cũng cần bao gồm các thẻ