Màu của nút chính trong Bootstrap là gì?

Để mở rộng câu trả lời của @PortableStick - hãy xem xét tình huống bạn sử dụng một lớp như

Primary
Secondary
Success
Info
Warning
Danger
Light
Dark
Gray

1 cho tất cả các nút chính của mình, nhưng sau đó quyết định rằng bạn không thực sự muốn chúng có màu xanh lam - bạn muốn chúng có màu cam hoặc xanh lục. Tuy nhiên, bạn cũng đang sử dụng các lớp

Primary
Secondary
Success
Info
Warning
Danger
Light
Dark
Gray

1 ở nơi khác cho những thứ bạn muốn giữ nguyên màu xanh lam. Điều này làm cho một hoạt động tìm kiếm và thay thế toàn cầu ra khỏi câu hỏi. Bạn cũng không thể chỉnh sửa lớp

Primary
Secondary
Success
Info
Warning
Danger
Light
Dark
Gray

1 để xác định một màu khác với màu xanh lam [nó sẽ không còn khớp với tên và các mục bạn muốn giữ nguyên màu xanh giờ sẽ có màu khác]. Để khắc phục điều này, bạn phải tìm kiếm đánh dấu của mình và kiểm tra từng phiên bản của

Primary
Secondary
Success
Info
Warning
Danger
Light
Dark
Gray

1 để xem liệu đó có phải là phần tử cần thay đổi lớp của nó thành

Primary
Secondary
Success
Info
Warning
Danger
Light
Dark
Gray

5 không. btn-cam`

Không vui. Hay hiệu quả. Và rất dễ bị lỗi

Thay vào đó, bạn định nghĩa các thuộc tính cho một lớp tổng thể theo ý nghĩa. Sau đó, nếu bạn muốn thay đổi màu của các nút chính, bạn thay đổi định nghĩa màu trên

Primary
Secondary
Success
Info
Warning
Danger
Light
Dark
Gray

6 và thay đổi chỉ ảnh hưởng đến các mục được liên kết với ý nghĩa đó. Sau đó, bạn lặp lại mô hình cho các ý nghĩa khác [bất cứ điều gì bạn nghĩ ra]

Dưới đây là tất cả CSS từ bootstrap tham khảo

Primary
Secondary
Success
Info
Warning
Danger
Light
Dark
Gray

6. Nó kiểm soát màu nền, màu đường viền, màu phông chữ ở các trạng thái khác nhau [tập trung, đang hoạt động, bị vô hiệu hóa, v.v. ]

Tất cả mà không xác định bất kỳ khía cạnh xuất hiện nào trong tên của lớp - chỉ vai trò của nút

Tìm hiểu những điều cơ bản và cách sử dụng nâng cao của các nút Bootstrap. Kiểm tra cách sử dụng màu sắc, kích thước, kiểu mặc định và kiểu mở rộng của nút Bootstrap

Mục lục

Đây là phần đầu tiên của loạt bài Tăng cường Bootstrap của bạn, trong đó tôi sẽ giải thích những điều cơ bản về Bootstrap, cách sử dụng các thành phần và tiện ích của Bootstrap cũng như cách khai thác thêm các tính năng của nó bằng Torus Kit

Lớp nút Bootstrap

Sử dụng lớp

Primary
Secondary
Success
Info
Warning
Danger
Light
Dark
Gray

3 chính trên phần tử

Primary
Secondary
Success
Info
Warning
Danger
Light
Dark
Gray

4,

Primary
Secondary
Success
Info
Warning
Danger
Light
Dark
Gray

5 hoặc

Primary
Secondary
Success
Info
Warning
Danger
Light
Dark
Gray

6. Điều này loại bỏ kiểu nút mặc định và thay thế nó bằng CSS nút Bootstrap mới. Sau đó, thêm một trong các màu của nút Bootstrap để thêm ý nghĩa ngữ nghĩa và các kiểu dáng khác như kích thước, ánh sáng hoặc chỉ báo. Các nút có lớp

Primary
Secondary
Success
Info
Warning
Danger
Light
Dark
Gray

3 tự động nhận con trỏ khi di chuột

Lớp

Primary
Secondary
Success
Info
Warning
Danger
Light
Dark
Gray

3 mặc định mà không cần thêm bất kỳ kiểu dáng nào

nút mặc định

Default button

Màu nút Bootstrap

Để đặt màu cho nút của bạn, hãy thêm lớp

Primary
Secondary
Success
Info
Warning
Danger
Light
Dark
Gray

9 vào lớp

Primary
Secondary
Success
Info
Warning
Danger
Light
Dark
Gray

3 hiện có. Các nút Bootstrap có nhiều màu, mỗi màu có ý nghĩa khác nhau

Danh sách các màu nút Bootstrap

Tiểu học Trung họcThành côngThông tinCảnh báoNguy hiểmÁnh sángTốiXám

Primary
Secondary
Success
Info
Warning
Danger
Light
Dark
Gray

Nhận tin tức và lời khuyên mới nhất

Luôn cập nhật các mẹo dành cho nhà phát triển và nhận tin tức mới nhất về Torus Kit

Kích thước nút Bootstrap

Bạn có thể thay đổi kích thước nút Bootstrap bằng hai lớp được xác định trước.

Primary
Secondary
Success
Info
Warning
Danger
Light
Dark
Gray

01, để làm cho nút nhỏ hơn và

Primary
Secondary
Success
Info
Warning
Danger
Light
Dark
Gray

02 để làm cho nó lớn hơn. Nếu vẫn chưa đủ, hãy sử dụng các tiện ích định cỡ như

Primary
Secondary
Success
Info
Warning
Danger
Light
Dark
Gray

03 để thêm phần đệm

Nút nhỏ Nút lớn Nút kích thước tùy chỉnh

Primary
Secondary
Success
Info
Warning
Danger
Light
Dark
Gray

0

Kiểu nút Bootstrap

Thay đổi giao diện mặc định của các nút bằng một số tiện ích nút Torus Kit tiện dụng. Tạo các nút dưới dạng , thêm ánh sáng, tạo các nút hình tròn hoặc tạo các tương tác nút nâng cao

Đề cương

Nếu bạn thích các nút nhẹ nhàng hơn, hãy thêm lớp

Primary
Secondary
Success
Info
Warning
Danger
Light
Dark
Gray

04 vào phần tử

Primary
Secondary
Success
Info
Warning
Danger
Light
Dark
Gray

3 để làm cho nó được phác thảo. Thao tác này sẽ thêm đường viền 1px và đặt màu nền thành trong suốt. Kiểu phác thảo rất tuyệt khi bạn có nhiều nút cùng nhau, nhưng bạn cần chỉ ra rằng nút này không quá quan trọng bằng các nút khác

nút phác thảo

Primary
Secondary
Success
Info
Warning
Danger
Light
Dark
Gray

6

Nút phong cách mềm mại

Nếu bạn cần tạo một nút nhẹ nhàng phù hợp độc đáo với thiết kế của mình, nhưng kiểu phác thảo không phù hợp với trường hợp này, hãy sử dụng kiểu của Torus Kit. Điều này làm cho nền nút sáng hơn nhưng vẫn giữ đủ độ tương phản để truy cập chính xác

Tiểu học Trung học thành công

Primary
Secondary
Success
Info
Warning
Danger
Light
Dark
Gray

7

Ánh sáng

Cần một nút Bootstrap thú vị? . Với sự trợ giúp của tiện ích Torus Kit, bạn có thể tạo một nút phát sáng đẹp mắt nổi bật so với phần còn lại của nội dung

Tiểu HọcTrung HọcNguy Hiểm

Primary
Secondary
Success
Info
Warning
Danger
Light
Dark
Gray

8

Ví dụ về nút Bootstrap

Dưới đây là một số ví dụ thực tế về cách tạo kiểu nút nâng cao và tương tác với các tiện ích Torus Kit

Nút có biểu tượng

Các nút không phải chỉ có văn bản. Bạn có thể thêm một số biểu tượng để truyền đạt ý nghĩa và làm cho điều hướng rõ ràng và trực quan hơn. Ví dụ này cho thấy cách tạo nút “Thêm vào giỏ hàng” được sử dụng trên các trang web thương mại điện tử. Chúng tôi đang sử dụng các biểu tượng Bootstrap ở đây, nhưng bất kỳ gói biểu tượng nào cũng có thể được sử dụng

Để tạo nội dung nút được căn chỉnh đẹp mắt, hãy bọc văn bản nút vào phần tử

Primary
Secondary
Success
Info
Warning
Danger
Light
Dark
Gray

06. Sau đó, thêm biểu tượng của bạn trước hoặc sau trình bao bọc văn bản này. Điều này đặt biểu tượng ở bên trái hoặc bên phải. Và cuối cùng, thêm lớp

Primary
Secondary
Success
Info
Warning
Danger
Light
Dark
Gray

07 vào phần tử

Primary
Secondary
Success
Info
Warning
Danger
Light
Dark
Gray

3. Đó là một lớp tiện ích nhỏ của Torus Kit giúp căn chỉnh nội dung của nút và thêm một lề nhỏ vào biểu tượng để làm cho nút trông hấp dẫn hơn

Thêm vào giỏThêm vào giỏ

Primary
Secondary
Success
Info
Warning
Danger
Light
Dark
Gray

2

Bạn cũng có thể sử dụng toàn bộ mã biểu tượng

Primary
Secondary
Success
Info
Warning
Danger
Light
Dark
Gray

09 bên trong một nút

Thêm vào giỏ

Primary
Secondary
Success
Info
Warning
Danger
Light
Dark
Gray

4

Cũng dễ dàng tạo nút tìm kiếm có biểu tượng bằng nhóm nút Bootstrap

Primary
Secondary
Success
Info
Warning
Danger
Light
Dark
Gray

5

nút tròn

Để tạo nút Bootstrap hình tròn, hãy thêm lớp

Primary
Secondary
Success
Info
Warning
Danger
Light
Dark
Gray

60 vào phần tử

Primary
Secondary
Success
Info
Warning
Danger
Light
Dark
Gray

3 với lớp tiện ích có kích thước phù hợp

Primary
Secondary
Success
Info
Warning
Danger
Light
Dark
Gray

62. Bạn cũng có thể xác định kích thước nút tròn bằng tiện ích đệm

Primary
Secondary
Success
Info
Warning
Danger
Light
Dark
Gray

63

Các nút hình tròn có thể chứa các biểu tượng và có thể được sử dụng để tạo các nút thông báo, hình đại diện, phân trang, v.v. Nội dung nút được căn giữa tự động trên trục ngang và trục dọc

Đã xảy ra sự cố.

Primary
Secondary
Success
Info
Warning
Danger
Light
Dark
Gray

0

Chỉ báo nút

Torus Kit đi kèm với hỗ trợ tích hợp cho các mũi tên nút và chữ V. Chỉ cần sử dụng

Primary
Secondary
Success
Info
Warning
Danger
Light
Dark
Gray

64 hoặc

Primary
Secondary
Success
Info
Warning
Danger
Light
Dark
Gray

65 để thêm chỉ báo mũi tên và

Primary
Secondary
Success
Info
Warning
Danger
Light
Dark
Gray

66 hoặc

Primary
Secondary
Success
Info
Warning
Danger
Light
Dark
Gray

67 để thêm chỉ báo chữ V. Điều này làm cho việc tạo điều hướng trở nên siêu dễ dàng. Nó cũng có thể được sử dụng để tạo phân trang, các nút đọc thêm, v.v.

Nút mũi tên Nút mũi tên Nút chevron Nút chevron

Primary
Secondary
Success
Info
Warning
Danger
Light
Dark
Gray

0

nút tải

Để biểu thị trạng thái tải trên nút, bạn có thể sử dụng thành phần Spinner hoạt hình tích hợp. Với Torus Kit Effects và Class action, bạn có thể dễ dàng tạo nút tải Bootstrap khi nhấp chuột

Việc sử dụng

Primary
Secondary
Success
Info
Warning
Danger
Light
Dark
Gray

68 sẽ chuyển đổi phần đệm và lề của

Primary
Secondary
Success
Info
Warning
Danger
Light
Dark
Gray

69 từ

Primary
Secondary
Success
Info
Warning
Danger
Light
Dark
Gray

70 thành giá trị được xác định bởi các lớp

Primary
Secondary
Success
Info
Warning
Danger
Light
Dark
Gray

71 và

Primary
Secondary
Success
Info
Warning
Danger
Light
Dark
Gray

72 và làm cho nó lớn lên và thu nhỏ lại cùng với chiều rộng của nút

Nút Đang tải. Chuyển đổi spinner Đang tải.

Primary
Secondary
Success
Info
Warning
Danger
Light
Dark
Gray

1

Hiệu ứng di chuột của nút

Thêm nhiều hiệu ứng vào các nút Bootstrap bằng công cụ Hiệu ứng mạnh mẽ của Torus Kit để tạo các tương tác di chuột nâng cao. Không cần viết bất kỳ kiểu CSS hoặc tập lệnh JS nào. Mọi thứ được định nghĩa ngay trong HTML. Đây là một vài ví dụ về cách áp dụng một số hiệu ứng trên các nút Bootstrap

Tác dụng 1 Tác dụng 2

Di chuột qua tôi

Mặt sau

Primary
Secondary
Success
Info
Warning
Danger
Light
Dark
Gray

2

kết thúc

Bootstrap thêm kiểu tùy chỉnh vào phần tử

Primary
Secondary
Success
Info
Warning
Danger
Light
Dark
Gray

4 mặc định với một vài tiện ích tiện dụng. Bạn có thể sử dụng nút Bootstrap cho các hành động trong biểu mẫu, hộp thoại, điều hướng, phân trang, v.v.

Lớp

Primary
Secondary
Success
Info
Warning
Danger
Light
Dark
Gray

3 chính, có thêm kiểu nút Bootstrap mặc định, nên được kết hợp với các biến thể màu của

Primary
Secondary
Success
Info
Warning
Danger
Light
Dark
Gray

9 để đặt kiểu nút và thêm ý nghĩa ngữ nghĩa. Sử dụng

Primary
Secondary
Success
Info
Warning
Danger
Light
Dark
Gray

01 và

Primary
Secondary
Success
Info
Warning
Danger
Light
Dark
Gray

02, bạn có thể tạo một nút nhỏ hơn hoặc lớn hơn. Cũng có thể đặt kích thước nút bằng tiện ích đệm

Primary
Secondary
Success
Info
Warning
Danger
Light
Dark
Gray

03

Torus Kit mở rộng các kiểu nút Bootstrap và thêm các kiểu mới như , hoặc

Bạn cũng có thể dễ dàng tạo bằng cách thêm lớp

Primary
Secondary
Success
Info
Warning
Danger
Light
Dark
Gray

07 vào nút và đặt phần tử biểu tượng bên trong. Điều này thêm một khoảng trống nhỏ giữa biểu tượng và văn bản nút. có thể được thực hiện nhanh chóng với việc sử dụng lớp

Primary
Secondary
Success
Info
Warning
Danger
Light
Dark
Gray

60

Và cuối cùng, Torus Kit Effects bổ sung tính tương tác cho các nút của bạn. Bạn có thể tạo các hiệu ứng di chuột nâng cao hoặc sử dụng nút để chuyển đổi các lớp bằng các tác vụ Lớp của Torus Kit

Làm cách nào để cung cấp màu cho nút trong Bootstrap?

BTN là gì

7 loại nút Bootstrap là gì?

Làm cách nào để thay đổi màu nút trong Bootstrap 4?