programming bootstrap

Làm cách nào để tùy chỉnh các nút bootstrap?

Các nút Bootstrap có thể được tạo bằng cách sử dụng lớp chính btn theo sau là các lớp tùy chọn về kiểu dáng và kích thước của nó

Ví dụ: btn-info chỉ định nút màu xanh nhạt với kích thước bình thường. Tương tự, btn-primary có màu xanh đậm, btn-success có màu xanh lục, v.v.

Một nút với các lớp Bootstrap

A Bootstrap button with large size

Bản trình diễn nhanh các nút trong hướng dẫn này kích thước và màu sắc hoạt động và tắt Nút tùy chỉnh Nút thả xuống Chia nút thanh điều hướng thả xuống

Để tìm hiểu về các nút Bootstrap 4, hãy xem hướng dẫn của nó với các bản trình diễn tại đây

Một vài điểm để tạo các nút theo kiểu Bootstrap

Bạn có thể tạo các nút bằng cách sử dụng thẻ đầu vào, thẻ nút hoặc thẻ liên kết
Lớp nút chính được sử dụng là btn, lớp Bootstrap
Màu sắc của các nút có thể được thay đổi bằng cách sử dụng các lớp được xác định trước như btn-info, btn-default, btn-primary, btn-danger
Kích thước của nút cũng có thể được xác định bằng cách sử dụng các lớp được xác định trước e. g. để sử dụng nút lớn. btn-lg Đối với nút nhỏ, hãy sử dụng. btn-sm và để sử dụng thêm lớp btn-xs

Xem ví dụ sau để tạo các nút bằng cách sử dụng các lớp Bootstrap. Trong phần tiếp theo, tôi sẽ chỉ cho bạn cách ghi đè các lớp mặc định để thay đổi một số thuộc tính như sử dụng một số màu khác với cùng kiểu Bootstrap HOẶC thay đổi kích thước theo nhu cầu của trang web của bạn

Các nút Bootstrap với các kích cỡ và màu sắc khác nhau

Trong bản trình diễn này, tôi sẽ chỉ sử dụng các lớp được xác định trước để chỉ ra cách bạn có thể tạo các nút với các lớp bootstrap. Xem bản demo trực tuyến với mã

Xem bản demo và mã trực tuyến

Trong bản trình diễn, bạn có thể thấy các nút có kích thước và kiểu dáng khác nhau ở các hàng khác nhau. Sau đây là các mã cho từng phong cách

Đối với kích thước bình thường của các nút Bootstrap, không chỉ định bất kỳ kích thước nào như sau