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ư

<button type="button" class="btn btn-primary">Primarybutton>
<button type="button" class="btn btn-secondary">Secondarybutton>
<button type="button" class="btn btn-success">Successbutton>
<button type="button" class="btn btn-info">Infobutton>
<button type="button" class="btn btn-warning">Warningbutton>
<button type="button" class="btn btn-danger">Dangerbutton>
<button type="button" class="btn btn-light">Lightbutton>
<button type="button" class="btn btn-dark">Darkbutton>
<button type="button" class="btn btn-gray">Graybutton>

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

<button type="button" class="btn btn-primary">Primarybutton>
<button type="button" class="btn btn-secondary">Secondarybutton>
<button type="button" class="btn btn-success">Successbutton>
<button type="button" class="btn btn-info">Infobutton>
<button type="button" class="btn btn-warning">Warningbutton>
<button type="button" class="btn btn-danger">Dangerbutton>
<button type="button" class="btn btn-light">Lightbutton>
<button type="button" class="btn btn-dark">Darkbutton>
<button type="button" class="btn btn-gray">Graybutton>

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

<button type="button" class="btn btn-primary">Primarybutton>
<button type="button" class="btn btn-secondary">Secondarybutton>
<button type="button" class="btn btn-success">Successbutton>
<button type="button" class="btn btn-info">Infobutton>
<button type="button" class="btn btn-warning">Warningbutton>
<button type="button" class="btn btn-danger">Dangerbutton>
<button type="button" class="btn btn-light">Lightbutton>
<button type="button" class="btn btn-dark">Darkbutton>
<button type="button" class="btn btn-gray">Graybutton>

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

<button type="button" class="btn btn-primary">Primarybutton>
<button type="button" class="btn btn-secondary">Secondarybutton>
<button type="button" class="btn btn-success">Successbutton>
<button type="button" class="btn btn-info">Infobutton>
<button type="button" class="btn btn-warning">Warningbutton>
<button type="button" class="btn btn-danger">Dangerbutton>
<button type="button" class="btn btn-light">Lightbutton>
<button type="button" class="btn btn-dark">Darkbutton>
<button type="button" class="btn btn-gray">Graybutton>

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

<button type="button" class="btn btn-primary">Primarybutton>
<button type="button" class="btn btn-secondary">Secondarybutton>
<button type="button" class="btn btn-success">Successbutton>
<button type="button" class="btn btn-info">Infobutton>
<button type="button" class="btn btn-warning">Warningbutton>
<button type="button" class="btn btn-danger">Dangerbutton>
<button type="button" class="btn btn-light">Lightbutton>
<button type="button" class="btn btn-dark">Darkbutton>
<button type="button" class="btn btn-gray">Graybutton>

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

<button type="button" class="btn btn-primary">Primarybutton>
<button type="button" class="btn btn-secondary">Secondarybutton>
<button type="button" class="btn btn-success">Successbutton>
<button type="button" class="btn btn-info">Infobutton>
<button type="button" class="btn btn-warning">Warningbutton>
<button type="button" class="btn btn-danger">Dangerbutton>
<button type="button" class="btn btn-light">Lightbutton>
<button type="button" class="btn btn-dark">Darkbutton>
<button type="button" class="btn btn-gray">Graybutton>

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

<button type="button" class="btn btn-primary">Primarybutton>
<button type="button" class="btn btn-secondary">Secondarybutton>
<button type="button" class="btn btn-success">Successbutton>
<button type="button" class="btn btn-info">Infobutton>
<button type="button" class="btn btn-warning">Warningbutton>
<button type="button" class="btn btn-danger">Dangerbutton>
<button type="button" class="btn btn-light">Lightbutton>
<button type="button" class="btn btn-dark">Darkbutton>
<button type="button" class="btn btn-gray">Graybutton>

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

<button type="button" class="btn btn-primary">Primarybutton>
<button type="button" class="btn btn-secondary">Secondarybutton>
<button type="button" class="btn btn-success">Successbutton>
<button type="button" class="btn btn-info">Infobutton>
<button type="button" class="btn btn-warning">Warningbutton>
<button type="button" class="btn btn-danger">Dangerbutton>
<button type="button" class="btn btn-light">Lightbutton>
<button type="button" class="btn btn-dark">Darkbutton>
<button type="button" class="btn btn-gray">Graybutton>

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

<button type="button" class="btn btn-primary">Primarybutton>
<button type="button" class="btn btn-secondary">Secondarybutton>
<button type="button" class="btn btn-success">Successbutton>
<button type="button" class="btn btn-info">Infobutton>
<button type="button" class="btn btn-warning">Warningbutton>
<button type="button" class="btn btn-danger">Dangerbutton>
<button type="button" class="btn btn-light">Lightbutton>
<button type="button" class="btn btn-dark">Darkbutton>
<button type="button" class="btn btn-gray">Graybutton>

4,

<button type="button" class="btn btn-primary">Primarybutton>
<button type="button" class="btn btn-secondary">Secondarybutton>
<button type="button" class="btn btn-success">Successbutton>
<button type="button" class="btn btn-info">Infobutton>
<button type="button" class="btn btn-warning">Warningbutton>
<button type="button" class="btn btn-danger">Dangerbutton>
<button type="button" class="btn btn-light">Lightbutton>
<button type="button" class="btn btn-dark">Darkbutton>
<button type="button" class="btn btn-gray">Graybutton>

5 hoặc

<button type="button" class="btn btn-primary">Primarybutton>
<button type="button" class="btn btn-secondary">Secondarybutton>
<button type="button" class="btn btn-success">Successbutton>
<button type="button" class="btn btn-info">Infobutton>
<button type="button" class="btn btn-warning">Warningbutton>
<button type="button" class="btn btn-danger">Dangerbutton>
<button type="button" class="btn btn-light">Lightbutton>
<button type="button" class="btn btn-dark">Darkbutton>
<button type="button" class="btn btn-gray">Graybutton>

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

<button type="button" class="btn btn-primary">Primarybutton>
<button type="button" class="btn btn-secondary">Secondarybutton>
<button type="button" class="btn btn-success">Successbutton>
<button type="button" class="btn btn-info">Infobutton>
<button type="button" class="btn btn-warning">Warningbutton>
<button type="button" class="btn btn-danger">Dangerbutton>
<button type="button" class="btn btn-light">Lightbutton>
<button type="button" class="btn btn-dark">Darkbutton>
<button type="button" class="btn btn-gray">Graybutton>

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

Lớp

<button type="button" class="btn btn-primary">Primarybutton>
<button type="button" class="btn btn-secondary">Secondarybutton>
<button type="button" class="btn btn-success">Successbutton>
<button type="button" class="btn btn-info">Infobutton>
<button type="button" class="btn btn-warning">Warningbutton>
<button type="button" class="btn btn-danger">Dangerbutton>
<button type="button" class="btn btn-light">Lightbutton>
<button type="button" class="btn btn-dark">Darkbutton>
<button type="button" class="btn btn-gray">Graybutton>

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

<button type="button" class="btn">Default buttonbutton>

Màu nút Bootstrap

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

<button type="button" class="btn btn-primary">Primarybutton>
<button type="button" class="btn btn-secondary">Secondarybutton>
<button type="button" class="btn btn-success">Successbutton>
<button type="button" class="btn btn-info">Infobutton>
<button type="button" class="btn btn-warning">Warningbutton>
<button type="button" class="btn btn-danger">Dangerbutton>
<button type="button" class="btn btn-light">Lightbutton>
<button type="button" class="btn btn-dark">Darkbutton>
<button type="button" class="btn btn-gray">Graybutton>

9 vào lớp

<button type="button" class="btn btn-primary">Primarybutton>
<button type="button" class="btn btn-secondary">Secondarybutton>
<button type="button" class="btn btn-success">Successbutton>
<button type="button" class="btn btn-info">Infobutton>
<button type="button" class="btn btn-warning">Warningbutton>
<button type="button" class="btn btn-danger">Dangerbutton>
<button type="button" class="btn btn-light">Lightbutton>
<button type="button" class="btn btn-dark">Darkbutton>
<button type="button" class="btn btn-gray">Graybutton>

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

<button type="button" class="btn btn-primary">Primarybutton>
<button type="button" class="btn btn-secondary">Secondarybutton>
<button type="button" class="btn btn-success">Successbutton>
<button type="button" class="btn btn-info">Infobutton>
<button type="button" class="btn btn-warning">Warningbutton>
<button type="button" class="btn btn-danger">Dangerbutton>
<button type="button" class="btn btn-light">Lightbutton>
<button type="button" class="btn btn-dark">Darkbutton>
<button type="button" class="btn btn-gray">Graybutton>

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.

<button type="button" class="btn btn-primary">Primarybutton>
<button type="button" class="btn btn-secondary">Secondarybutton>
<button type="button" class="btn btn-success">Successbutton>
<button type="button" class="btn btn-info">Infobutton>
<button type="button" class="btn btn-warning">Warningbutton>
<button type="button" class="btn btn-danger">Dangerbutton>
<button type="button" class="btn btn-light">Lightbutton>
<button type="button" class="btn btn-dark">Darkbutton>
<button type="button" class="btn btn-gray">Graybutton>

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

<button type="button" class="btn btn-primary">Primarybutton>
<button type="button" class="btn btn-secondary">Secondarybutton>
<button type="button" class="btn btn-success">Successbutton>
<button type="button" class="btn btn-info">Infobutton>
<button type="button" class="btn btn-warning">Warningbutton>
<button type="button" class="btn btn-danger">Dangerbutton>
<button type="button" class="btn btn-light">Lightbutton>
<button type="button" class="btn btn-dark">Darkbutton>
<button type="button" class="btn btn-gray">Graybutton>

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ư

<button type="button" class="btn btn-primary">Primarybutton>
<button type="button" class="btn btn-secondary">Secondarybutton>
<button type="button" class="btn btn-success">Successbutton>
<button type="button" class="btn btn-info">Infobutton>
<button type="button" class="btn btn-warning">Warningbutton>
<button type="button" class="btn btn-danger">Dangerbutton>
<button type="button" class="btn btn-light">Lightbutton>
<button type="button" class="btn btn-dark">Darkbutton>
<button type="button" class="btn btn-gray">Graybutton>

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

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

<button type="button" class="btn btn-primary">Primarybutton>
<button type="button" class="btn btn-secondary">Secondarybutton>
<button type="button" class="btn btn-success">Successbutton>
<button type="button" class="btn btn-info">Infobutton>
<button type="button" class="btn btn-warning">Warningbutton>
<button type="button" class="btn btn-danger">Dangerbutton>
<button type="button" class="btn btn-light">Lightbutton>
<button type="button" class="btn btn-dark">Darkbutton>
<button type="button" class="btn btn-gray">Graybutton>

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

<button type="button" class="btn btn-primary">Primarybutton>
<button type="button" class="btn btn-secondary">Secondarybutton>
<button type="button" class="btn btn-success">Successbutton>
<button type="button" class="btn btn-info">Infobutton>
<button type="button" class="btn btn-warning">Warningbutton>
<button type="button" class="btn btn-danger">Dangerbutton>
<button type="button" class="btn btn-light">Lightbutton>
<button type="button" class="btn btn-dark">Darkbutton>
<button type="button" class="btn btn-gray">Graybutton>

04 vào phần tử

<button type="button" class="btn btn-primary">Primarybutton>
<button type="button" class="btn btn-secondary">Secondarybutton>
<button type="button" class="btn btn-success">Successbutton>
<button type="button" class="btn btn-info">Infobutton>
<button type="button" class="btn btn-warning">Warningbutton>
<button type="button" class="btn btn-danger">Dangerbutton>
<button type="button" class="btn btn-light">Lightbutton>
<button type="button" class="btn btn-dark">Darkbutton>
<button type="button" class="btn btn-gray">Graybutton>

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

<button type="button" class="btn btn-primary">Primarybutton>
<button type="button" class="btn btn-secondary">Secondarybutton>
<button type="button" class="btn btn-success">Successbutton>
<button type="button" class="btn btn-info">Infobutton>
<button type="button" class="btn btn-warning">Warningbutton>
<button type="button" class="btn btn-danger">Dangerbutton>
<button type="button" class="btn btn-light">Lightbutton>
<button type="button" class="btn btn-dark">Darkbutton>
<button type="button" class="btn btn-gray">Graybutton>

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

<button type="button" class="btn btn-primary">Primarybutton>
<button type="button" class="btn btn-secondary">Secondarybutton>
<button type="button" class="btn btn-success">Successbutton>
<button type="button" class="btn btn-info">Infobutton>
<button type="button" class="btn btn-warning">Warningbutton>
<button type="button" class="btn btn-danger">Dangerbutton>
<button type="button" class="btn btn-light">Lightbutton>
<button type="button" class="btn btn-dark">Darkbutton>
<button type="button" class="btn btn-gray">Graybutton>

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

<button type="button" class="btn btn-primary">Primarybutton>
<button type="button" class="btn btn-secondary">Secondarybutton>
<button type="button" class="btn btn-success">Successbutton>
<button type="button" class="btn btn-info">Infobutton>
<button type="button" class="btn btn-warning">Warningbutton>
<button type="button" class="btn btn-danger">Dangerbutton>
<button type="button" class="btn btn-light">Lightbutton>
<button type="button" class="btn btn-dark">Darkbutton>
<button type="button" class="btn btn-gray">Graybutton>

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ử

<button type="button" class="btn btn-primary">Primarybutton>
<button type="button" class="btn btn-secondary">Secondarybutton>
<button type="button" class="btn btn-success">Successbutton>
<button type="button" class="btn btn-info">Infobutton>
<button type="button" class="btn btn-warning">Warningbutton>
<button type="button" class="btn btn-danger">Dangerbutton>
<button type="button" class="btn btn-light">Lightbutton>
<button type="button" class="btn btn-dark">Darkbutton>
<button type="button" class="btn btn-gray">Graybutton>

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

<button type="button" class="btn btn-primary">Primarybutton>
<button type="button" class="btn btn-secondary">Secondarybutton>
<button type="button" class="btn btn-success">Successbutton>
<button type="button" class="btn btn-info">Infobutton>
<button type="button" class="btn btn-warning">Warningbutton>
<button type="button" class="btn btn-danger">Dangerbutton>
<button type="button" class="btn btn-light">Lightbutton>
<button type="button" class="btn btn-dark">Darkbutton>
<button type="button" class="btn btn-gray">Graybutton>

07 vào phần tử

<button type="button" class="btn btn-primary">Primarybutton>
<button type="button" class="btn btn-secondary">Secondarybutton>
<button type="button" class="btn btn-success">Successbutton>
<button type="button" class="btn btn-info">Infobutton>
<button type="button" class="btn btn-warning">Warningbutton>
<button type="button" class="btn btn-danger">Dangerbutton>
<button type="button" class="btn btn-light">Lightbutton>
<button type="button" class="btn btn-dark">Darkbutton>
<button type="button" class="btn btn-gray">Graybutton>

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ỏ

<button type="button" class="btn btn-primary">Primarybutton>
<button type="button" class="btn btn-secondary">Secondarybutton>
<button type="button" class="btn btn-success">Successbutton>
<button type="button" class="btn btn-info">Infobutton>
<button type="button" class="btn btn-warning">Warningbutton>
<button type="button" class="btn btn-danger">Dangerbutton>
<button type="button" class="btn btn-light">Lightbutton>
<button type="button" class="btn btn-dark">Darkbutton>
<button type="button" class="btn btn-gray">Graybutton>

2

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

<button type="button" class="btn btn-primary">Primarybutton>
<button type="button" class="btn btn-secondary">Secondarybutton>
<button type="button" class="btn btn-success">Successbutton>
<button type="button" class="btn btn-info">Infobutton>
<button type="button" class="btn btn-warning">Warningbutton>
<button type="button" class="btn btn-danger">Dangerbutton>
<button type="button" class="btn btn-light">Lightbutton>
<button type="button" class="btn btn-dark">Darkbutton>
<button type="button" class="btn btn-gray">Graybutton>

09 bên trong một nút

Thêm vào giỏ

<button type="button" class="btn btn-primary">Primarybutton>
<button type="button" class="btn btn-secondary">Secondarybutton>
<button type="button" class="btn btn-success">Successbutton>
<button type="button" class="btn btn-info">Infobutton>
<button type="button" class="btn btn-warning">Warningbutton>
<button type="button" class="btn btn-danger">Dangerbutton>
<button type="button" class="btn btn-light">Lightbutton>
<button type="button" class="btn btn-dark">Darkbutton>
<button type="button" class="btn btn-gray">Graybutton>

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

<button type="button" class="btn btn-primary">Primarybutton>
<button type="button" class="btn btn-secondary">Secondarybutton>
<button type="button" class="btn btn-success">Successbutton>
<button type="button" class="btn btn-info">Infobutton>
<button type="button" class="btn btn-warning">Warningbutton>
<button type="button" class="btn btn-danger">Dangerbutton>
<button type="button" class="btn btn-light">Lightbutton>
<button type="button" class="btn btn-dark">Darkbutton>
<button type="button" class="btn btn-gray">Graybutton>

5

nút tròn

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

<button type="button" class="btn btn-primary">Primarybutton>
<button type="button" class="btn btn-secondary">Secondarybutton>
<button type="button" class="btn btn-success">Successbutton>
<button type="button" class="btn btn-info">Infobutton>
<button type="button" class="btn btn-warning">Warningbutton>
<button type="button" class="btn btn-danger">Dangerbutton>
<button type="button" class="btn btn-light">Lightbutton>
<button type="button" class="btn btn-dark">Darkbutton>
<button type="button" class="btn btn-gray">Graybutton>

60 vào phần tử

<button type="button" class="btn btn-primary">Primarybutton>
<button type="button" class="btn btn-secondary">Secondarybutton>
<button type="button" class="btn btn-success">Successbutton>
<button type="button" class="btn btn-info">Infobutton>
<button type="button" class="btn btn-warning">Warningbutton>
<button type="button" class="btn btn-danger">Dangerbutton>
<button type="button" class="btn btn-light">Lightbutton>
<button type="button" class="btn btn-dark">Darkbutton>
<button type="button" class="btn btn-gray">Graybutton>

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

<button type="button" class="btn btn-primary">Primarybutton>
<button type="button" class="btn btn-secondary">Secondarybutton>
<button type="button" class="btn btn-success">Successbutton>
<button type="button" class="btn btn-info">Infobutton>
<button type="button" class="btn btn-warning">Warningbutton>
<button type="button" class="btn btn-danger">Dangerbutton>
<button type="button" class="btn btn-light">Lightbutton>
<button type="button" class="btn btn-dark">Darkbutton>
<button type="button" class="btn btn-gray">Graybutton>

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

<button type="button" class="btn btn-primary">Primarybutton>
<button type="button" class="btn btn-secondary">Secondarybutton>
<button type="button" class="btn btn-success">Successbutton>
<button type="button" class="btn btn-info">Infobutton>
<button type="button" class="btn btn-warning">Warningbutton>
<button type="button" class="btn btn-danger">Dangerbutton>
<button type="button" class="btn btn-light">Lightbutton>
<button type="button" class="btn btn-dark">Darkbutton>
<button type="button" class="btn btn-gray">Graybutton>

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ố.

<button type="button" class="btn btn-primary">Primarybutton>
<button type="button" class="btn btn-secondary">Secondarybutton>
<button type="button" class="btn btn-success">Successbutton>
<button type="button" class="btn btn-info">Infobutton>
<button type="button" class="btn btn-warning">Warningbutton>
<button type="button" class="btn btn-danger">Dangerbutton>
<button type="button" class="btn btn-light">Lightbutton>
<button type="button" class="btn btn-dark">Darkbutton>
<button type="button" class="btn btn-gray">Graybutton>

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

<button type="button" class="btn btn-primary">Primarybutton>
<button type="button" class="btn btn-secondary">Secondarybutton>
<button type="button" class="btn btn-success">Successbutton>
<button type="button" class="btn btn-info">Infobutton>
<button type="button" class="btn btn-warning">Warningbutton>
<button type="button" class="btn btn-danger">Dangerbutton>
<button type="button" class="btn btn-light">Lightbutton>
<button type="button" class="btn btn-dark">Darkbutton>
<button type="button" class="btn btn-gray">Graybutton>

64 hoặc

<button type="button" class="btn btn-primary">Primarybutton>
<button type="button" class="btn btn-secondary">Secondarybutton>
<button type="button" class="btn btn-success">Successbutton>
<button type="button" class="btn btn-info">Infobutton>
<button type="button" class="btn btn-warning">Warningbutton>
<button type="button" class="btn btn-danger">Dangerbutton>
<button type="button" class="btn btn-light">Lightbutton>
<button type="button" class="btn btn-dark">Darkbutton>
<button type="button" class="btn btn-gray">Graybutton>

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

<button type="button" class="btn btn-primary">Primarybutton>
<button type="button" class="btn btn-secondary">Secondarybutton>
<button type="button" class="btn btn-success">Successbutton>
<button type="button" class="btn btn-info">Infobutton>
<button type="button" class="btn btn-warning">Warningbutton>
<button type="button" class="btn btn-danger">Dangerbutton>
<button type="button" class="btn btn-light">Lightbutton>
<button type="button" class="btn btn-dark">Darkbutton>
<button type="button" class="btn btn-gray">Graybutton>

66 hoặc

<button type="button" class="btn btn-primary">Primarybutton>
<button type="button" class="btn btn-secondary">Secondarybutton>
<button type="button" class="btn btn-success">Successbutton>
<button type="button" class="btn btn-info">Infobutton>
<button type="button" class="btn btn-warning">Warningbutton>
<button type="button" class="btn btn-danger">Dangerbutton>
<button type="button" class="btn btn-light">Lightbutton>
<button type="button" class="btn btn-dark">Darkbutton>
<button type="button" class="btn btn-gray">Graybutton>

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

<button type="button" class="btn btn-primary">Primarybutton>
<button type="button" class="btn btn-secondary">Secondarybutton>
<button type="button" class="btn btn-success">Successbutton>
<button type="button" class="btn btn-info">Infobutton>
<button type="button" class="btn btn-warning">Warningbutton>
<button type="button" class="btn btn-danger">Dangerbutton>
<button type="button" class="btn btn-light">Lightbutton>
<button type="button" class="btn btn-dark">Darkbutton>
<button type="button" class="btn btn-gray">Graybutton>

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

<button type="button" class="btn btn-primary">Primarybutton>
<button type="button" class="btn btn-secondary">Secondarybutton>
<button type="button" class="btn btn-success">Successbutton>
<button type="button" class="btn btn-info">Infobutton>
<button type="button" class="btn btn-warning">Warningbutton>
<button type="button" class="btn btn-danger">Dangerbutton>
<button type="button" class="btn btn-light">Lightbutton>
<button type="button" class="btn btn-dark">Darkbutton>
<button type="button" class="btn btn-gray">Graybutton>

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

<button type="button" class="btn btn-primary">Primarybutton>
<button type="button" class="btn btn-secondary">Secondarybutton>
<button type="button" class="btn btn-success">Successbutton>
<button type="button" class="btn btn-info">Infobutton>
<button type="button" class="btn btn-warning">Warningbutton>
<button type="button" class="btn btn-danger">Dangerbutton>
<button type="button" class="btn btn-light">Lightbutton>
<button type="button" class="btn btn-dark">Darkbutton>
<button type="button" class="btn btn-gray">Graybutton>

69 từ

<button type="button" class="btn btn-primary">Primarybutton>
<button type="button" class="btn btn-secondary">Secondarybutton>
<button type="button" class="btn btn-success">Successbutton>
<button type="button" class="btn btn-info">Infobutton>
<button type="button" class="btn btn-warning">Warningbutton>
<button type="button" class="btn btn-danger">Dangerbutton>
<button type="button" class="btn btn-light">Lightbutton>
<button type="button" class="btn btn-dark">Darkbutton>
<button type="button" class="btn btn-gray">Graybutton>

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

<button type="button" class="btn btn-primary">Primarybutton>
<button type="button" class="btn btn-secondary">Secondarybutton>
<button type="button" class="btn btn-success">Successbutton>
<button type="button" class="btn btn-info">Infobutton>
<button type="button" class="btn btn-warning">Warningbutton>
<button type="button" class="btn btn-danger">Dangerbutton>
<button type="button" class="btn btn-light">Lightbutton>
<button type="button" class="btn btn-dark">Darkbutton>
<button type="button" class="btn btn-gray">Graybutton>

71 và

<button type="button" class="btn btn-primary">Primarybutton>
<button type="button" class="btn btn-secondary">Secondarybutton>
<button type="button" class="btn btn-success">Successbutton>
<button type="button" class="btn btn-info">Infobutton>
<button type="button" class="btn btn-warning">Warningbutton>
<button type="button" class="btn btn-danger">Dangerbutton>
<button type="button" class="btn btn-light">Lightbutton>
<button type="button" class="btn btn-dark">Darkbutton>
<button type="button" class="btn btn-gray">Graybutton>

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.

<button type="button" class="btn btn-primary">Primarybutton>
<button type="button" class="btn btn-secondary">Secondarybutton>
<button type="button" class="btn btn-success">Successbutton>
<button type="button" class="btn btn-info">Infobutton>
<button type="button" class="btn btn-warning">Warningbutton>
<button type="button" class="btn btn-danger">Dangerbutton>
<button type="button" class="btn btn-light">Lightbutton>
<button type="button" class="btn btn-dark">Darkbutton>
<button type="button" class="btn btn-gray">Graybutton>

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

<button type="button" class="btn btn-primary">Primarybutton>
<button type="button" class="btn btn-secondary">Secondarybutton>
<button type="button" class="btn btn-success">Successbutton>
<button type="button" class="btn btn-info">Infobutton>
<button type="button" class="btn btn-warning">Warningbutton>
<button type="button" class="btn btn-danger">Dangerbutton>
<button type="button" class="btn btn-light">Lightbutton>
<button type="button" class="btn btn-dark">Darkbutton>
<button type="button" class="btn btn-gray">Graybutton>

2

kết thúc

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

<button type="button" class="btn btn-primary">Primarybutton>
<button type="button" class="btn btn-secondary">Secondarybutton>
<button type="button" class="btn btn-success">Successbutton>
<button type="button" class="btn btn-info">Infobutton>
<button type="button" class="btn btn-warning">Warningbutton>
<button type="button" class="btn btn-danger">Dangerbutton>
<button type="button" class="btn btn-light">Lightbutton>
<button type="button" class="btn btn-dark">Darkbutton>
<button type="button" class="btn btn-gray">Graybutton>

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

<button type="button" class="btn btn-primary">Primarybutton>
<button type="button" class="btn btn-secondary">Secondarybutton>
<button type="button" class="btn btn-success">Successbutton>
<button type="button" class="btn btn-info">Infobutton>
<button type="button" class="btn btn-warning">Warningbutton>
<button type="button" class="btn btn-danger">Dangerbutton>
<button type="button" class="btn btn-light">Lightbutton>
<button type="button" class="btn btn-dark">Darkbutton>
<button type="button" class="btn btn-gray">Graybutton>

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

<button type="button" class="btn btn-primary">Primarybutton>
<button type="button" class="btn btn-secondary">Secondarybutton>
<button type="button" class="btn btn-success">Successbutton>
<button type="button" class="btn btn-info">Infobutton>
<button type="button" class="btn btn-warning">Warningbutton>
<button type="button" class="btn btn-danger">Dangerbutton>
<button type="button" class="btn btn-light">Lightbutton>
<button type="button" class="btn btn-dark">Darkbutton>
<button type="button" class="btn btn-gray">Graybutton>

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

<button type="button" class="btn btn-primary">Primarybutton>
<button type="button" class="btn btn-secondary">Secondarybutton>
<button type="button" class="btn btn-success">Successbutton>
<button type="button" class="btn btn-info">Infobutton>
<button type="button" class="btn btn-warning">Warningbutton>
<button type="button" class="btn btn-danger">Dangerbutton>
<button type="button" class="btn btn-light">Lightbutton>
<button type="button" class="btn btn-dark">Darkbutton>
<button type="button" class="btn btn-gray">Graybutton>

01 và

<button type="button" class="btn btn-primary">Primarybutton>
<button type="button" class="btn btn-secondary">Secondarybutton>
<button type="button" class="btn btn-success">Successbutton>
<button type="button" class="btn btn-info">Infobutton>
<button type="button" class="btn btn-warning">Warningbutton>
<button type="button" class="btn btn-danger">Dangerbutton>
<button type="button" class="btn btn-light">Lightbutton>
<button type="button" class="btn btn-dark">Darkbutton>
<button type="button" class="btn btn-gray">Graybutton>

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

<button type="button" class="btn btn-primary">Primarybutton>
<button type="button" class="btn btn-secondary">Secondarybutton>
<button type="button" class="btn btn-success">Successbutton>
<button type="button" class="btn btn-info">Infobutton>
<button type="button" class="btn btn-warning">Warningbutton>
<button type="button" class="btn btn-danger">Dangerbutton>
<button type="button" class="btn btn-light">Lightbutton>
<button type="button" class="btn btn-dark">Darkbutton>
<button type="button" class="btn btn-gray">Graybutton>

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

<button type="button" class="btn btn-primary">Primarybutton>
<button type="button" class="btn btn-secondary">Secondarybutton>
<button type="button" class="btn btn-success">Successbutton>
<button type="button" class="btn btn-info">Infobutton>
<button type="button" class="btn btn-warning">Warningbutton>
<button type="button" class="btn btn-danger">Dangerbutton>
<button type="button" class="btn btn-light">Lightbutton>
<button type="button" class="btn btn-dark">Darkbutton>
<button type="button" class="btn btn-gray">Graybutton>

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

<button type="button" class="btn btn-primary">Primarybutton>
<button type="button" class="btn btn-secondary">Secondarybutton>
<button type="button" class="btn btn-success">Successbutton>
<button type="button" class="btn btn-info">Infobutton>
<button type="button" class="btn btn-warning">Warningbutton>
<button type="button" class="btn btn-danger">Dangerbutton>
<button type="button" class="btn btn-light">Lightbutton>
<button type="button" class="btn btn-dark">Darkbutton>
<button type="button" class="btn btn-gray">Graybutton>

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?