Làm thế nào để Mã số Các yếu tố Trang Web cơ bản với Bootstrap - núm vú

Video: Học lập trình Web A-Z - JAVASCRIPT- Bài 3 - Làm việc với điều kiện và các cấu trúc có điều kiện 2025

<< Ngoài bố cục tinh khiết, Bootstrap cũng có thể tạo các thành phần trang web được tìm thấy trên hầu hết các trang web. Ý tưởng ở đây cũng giống như khi làm việc với bố trí - thay vì tạo lại bánh xe mỗi lần bằng cách thiết kế nút hoặc thanh công cụ của riêng bạn, tốt hơn là sử dụng mã dựng sẵn, đã được thử nghiệm trên nhiều trình duyệt và thiết bị.

Các ví dụ sau cho thấy làm thế nào để nhanh chóng tạo ra các thành phần web phổ biến.

Thiết kế nút

Các nút là một yếu tố cơ bản trên nhiều trang web nhưng thường khó có thể thiết lập và phong cách. Như được hiển thị ở đây, các nút có thể có nhiều loại và kích cỡ khác nhau.

Hình thức thanh toán < Nút màu xanh lá cây có hiệu ứng di chuột Nút đỏ có hiệu ứng di chuột

Kích cỡ nút


btn-lgbtn-defaultbtn-sm

Nút lớn size

Kích thước nút mặc định

Kích thước nút nhỏ

Để tạo nút, hãy viết mã HTML sau:

Bắt đầu với

nút


phần tử HTML.

Trong thẻ mở cửa

bao gồm

type = "button"

. Bao gồm thuộc tính lớp với giá trị thuộc tính lớp btn
và thêm các tiền tố lớp bổ sung dựa trên hiệu quả mà bạn muốn. Để thêm các kiểu bổ sung, tiếp tục thêm tiền tố class vào thuộc tính HTML class
. nút mặc định mặc định


nút nguy hiểm nhỏ

nút mặc định mặc định


Nút mặc định nhỏ

Các loại và kích thước nút khởi động.


Kiểm tra loại nút bổ sung, kích cỡ nút, và các tùy chọn nút khác.
Điều hướng với thanh công cụ



trang web có nhiều trang hoặc chế độ xem thường có một hoặc nhiều thanh công cụ để giúp người dùng điều hướng. Dưới đây là một số tùy chọn thanh công cụ.




Biểu mẫu








Thẻ lớp








Thẻ thanh công cụ




nav-tabs






nav-pills
Thanh công cụ điều hướng theo thẻ

Pill, hoặc nút điều hướng thanh công cụ thả xuống
Thanh công cụ
 thả xuống

 caret dropdown-menu 
 Nút hoặc tab như menu thả xuống 
 Biểu tượng trình đơn thả xuống dưới xuống 



 thả xuống các mục trình đơn 


Để tạo thanh công cụ điều hướng thuốc viên hoặc nút rắn, hãy viết mã HTML sau:


Bắt đầu một danh sách không có thứ tự sử dụng phần tử


 ul
.


 Trong thẻ mở 


, bao gồm


class = "nav navy-pills"


.
Tạo nút bằng thẻ
. Bao gồm 



class = "active"

trong một thẻ mở

để chỉ định tab nào trên thanh công cụ chính sẽ xuất hiện khi được đánh dấu bằng hình ảnh khi chuột di chuột qua nút.

Để tạo một trình đơn thả xuống, hãy tổ một danh sách không có thứ tự. Xem mã bên cạnh "Thêm" với các tiền tố lớp
"thả xuống"



,

"caret"

và
"trình đơn thả xuống"



.

Bạn có thể liên kết tới các trang web khác trong trình đơn thả xuống bằng cách sử dụng thẻ

.



Hình ảnh
Bạn bè

Thêm

Địa điểm

Thể thao

Nhạc

Thanh công cụ Bootstrap với menu thả xuống.

Lớp
thả xuống-chuyển đổi


và

data-toggle = "thả xuống"




thuộc tính và giá trị làm việc cùng nhau để thêm menu thả xuống cho các phần tử, chẳng hạn như liên kết. Kiểm tra các tùy chọn thanh công cụ bổ sung.



Thêm biểu tượng



Các biểu tượng thường được sử dụng với các nút để giúp chuyển tải một số hành động. Ví dụ: chương trình email của bạn có thể sử dụng nút có biểu tượng thùng rác để xóa email. Icons nhanh chóng thông báo hành động được đề xuất cho người dùng mà không có nhiều lời giải thích.



Các biểu tượng này được gọi là






glyphs,









và Glyph Icons cung cấp các glyphs được sử dụng trong Bootstrap.



Bootstrap hỗ trợ hơn 200 glyphs, bạn có thể thêm vào các nút hoặc thanh công cụ bằng thẻ



. Ví dụ mã sau tạo ra ba nút với một ngôi sao, kẹp giấy, và thùng rác có thể glyph.












Sao
Đính kèm

Thùng rác

nút Khởi động với các biểu tượng.

Kiểm tra ở đây để biết tên của tất cả các ký hiệu Bootstrap.