programming css

Nút cùng kích thước css

Bootstrap bao gồm một số kiểu nút được xác định trước, mỗi kiểu phục vụ mục đích ngữ nghĩa riêng, với một vài tính năng bổ sung được đưa vào để kiểm soát nhiều hơn

Sơ cấp Phụ thành công Thông tin cảnh báo nguy hiểm Sáng tối Liên kết

Primary
Secondary
Success
Danger
Warning
Info
Light
Dark

Link

Truyền đạt ý nghĩa cho các công nghệ hỗ trợ

Việc sử dụng màu sắc để thêm ý nghĩa chỉ cung cấp dấu hiệu trực quan, dấu hiệu này sẽ không được chuyển tải đến người dùng công nghệ hỗ trợ – chẳng hạn như trình đọc màn hình. Đảm bảo rằng thông tin được biểu thị bằng màu sắc rõ ràng từ chính nội dung [e. g. văn bản hiển thị], hoặc được bao gồm thông qua các phương tiện thay thế, chẳng hạn như văn bản bổ sung ẩn với lớp

Primary
Secondary
Success
Danger
Warning
Info
Light
Dark

Vô hiệu hóa gói văn bản

Nếu bạn không muốn văn bản của nút được ngắt dòng, bạn có thể thêm lớp

Primary
Secondary
Success
Danger
Warning
Info
Light
Dark

1 vào nút. Trong Sass, bạn có thể đặt

Primary
Secondary
Success
Danger
Warning
Info
Light
Dark

2 để tắt gói văn bản cho mỗi nút

Các lớp

Primary
Secondary
Success
Danger
Warning
Info
Light
Dark

3 được thiết kế để sử dụng với phần tử. Tuy nhiên, bạn cũng có thể sử dụng các lớp này trên các phần tử

Primary
Secondary
Success
Danger
Warning
Info
Light
Dark

4 hoặc

Primary
Secondary
Success
Danger
Warning
Info
Light
Dark

4 [mặc dù một số trình duyệt có thể áp dụng kết xuất hơi khác một chút]

Khi sử dụng các lớp nút trên các phần tử

Primary
Secondary
Success
Danger
Warning
Info
Light
Dark

4 được sử dụng để kích hoạt chức năng trong trang [chẳng hạn như thu gọn nội dung], thay vì liên kết đến các trang hoặc phần mới trong trang hiện tại, các liên kết này phải được cung cấp một

Primary
Secondary
Success
Danger
Warning
Info
Light
Dark

7 để truyền đạt mục đích của chúng một cách thích hợp tới các công nghệ hỗ trợ như

Link

Primary
Secondary
Success
Danger
Warning
Info
Light
Dark

các nút phác thảo

Cần một nút bấm, nhưng không cần màu nền nặng nề mà chúng mang lại?

Sơ cấp Phụ thành công Thông tin cảnh báo nguy hiểm Sáng tối

Primary
Secondary
Success
Danger
Warning
Info
Light
Dark

Một số kiểu nút sử dụng màu nền trước tương đối sáng và chỉ nên được sử dụng trên nền tối để có đủ độ tương phản

kích thước

Fancy nút lớn hơn hoặc nhỏ hơn?

Primary
Secondary
Success
Danger
Warning
Info
Light
Dark

Primary
Secondary
Success
Danger
Warning
Info
Light
Dark

trạng thái bị vô hiệu hóa

Làm cho các nút trông không hoạt động bằng cách thêm thuộc tính boolean

Primary
Secondary
Success
Danger
Warning
Info
Light
Dark

32 vào bất kỳ phần tử nào. Các nút bị vô hiệu hóa đã áp dụng

Primary
Secondary
Success
Danger
Warning
Info
Light
Dark

33, ngăn kích hoạt trạng thái di chuột và hoạt động

Primary
Secondary
Success
Danger
Warning
Info
Light
Dark

Primary
Secondary
Success
Danger
Warning
Info
Light
Dark

Các nút bị vô hiệu hóa sử dụng phần tử

Primary
Secondary
Success
Danger
Warning
Info
Light
Dark

4 hoạt động hơi khác một chút

Các

Primary
Secondary
Success
Danger
Warning
Info
Light
Dark

4 không hỗ trợ thuộc tính

Primary
Secondary
Success
Danger
Warning
Info
Light
Dark

32, vì vậy bạn phải thêm lớp

Primary
Secondary
Success
Danger
Warning
Info
Light
Dark

38 để làm cho nó có vẻ như bị vô hiệu hóa

Một số kiểu thân thiện với tương lai được bao gồm để vô hiệu hóa tất cả
```
Primary
Secondary
Success
Danger
Warning
Info
Light
Dark
```
39 trên các nút neo
Các nút bị tắt phải bao gồm thuộc tính
```
Primary
Secondary
Success
Danger
Warning
Info
Light
Dark
```
60 để cho biết trạng thái của phần tử đối với các công nghệ hỗ trợ

Primary
Secondary
Success
Danger
Warning
Info
Light
Dark

Thông báo chức năng liên kết

Lớp

Primary
Secondary
Success
Danger
Warning
Info
Light
Dark

38 sử dụng

Primary
Secondary
Success
Danger
Warning
Info
Light
Dark

33 để cố gắng vô hiệu hóa chức năng liên kết của các

Primary
Secondary
Success
Danger
Warning
Info
Light
Dark

4, nhưng thuộc tính CSS đó chưa được chuẩn hóa. Ngoài ra, ngay cả trong các trình duyệt hỗ trợ

Primary
Secondary
Success
Danger
Warning
Info
Light
Dark

33, điều hướng bàn phím vẫn không bị ảnh hưởng, nghĩa là người dùng bàn phím có thị giác và người dùng công nghệ hỗ trợ vẫn có thể kích hoạt các liên kết này. Vì vậy, để an toàn, ngoài

Primary
Secondary
Success
Danger
Warning
Info
Light
Dark

60, còn bao gồm thuộc tính

Primary
Secondary
Success
Danger
Warning
Info
Light
Dark

66 trên các liên kết này để ngăn chúng nhận tiêu điểm bàn phím và sử dụng JavaScript tùy chỉnh để tắt hoàn toàn chức năng của chúng

nút chặn

Tạo các ngăn xếp đáp ứng các “nút chặn” có chiều rộng đầy đủ, giống như trong Bootstrap 4 với sự kết hợp giữa các tiện ích hiển thị và khoảng cách của chúng tôi. Bằng cách sử dụng các tiện ích thay vì các lớp cụ thể của nút, chúng tôi có quyền kiểm soát tốt hơn nhiều đối với khoảng cách, căn chỉnh và các hành vi phản hồi

Primary
Secondary
Success
Danger
Warning
Info
Light
Dark

Ở đây, chúng tôi tạo một biến thể đáp ứng, bắt đầu với các nút được xếp chồng lên nhau theo chiều dọc cho đến điểm ngắt

Primary
Secondary
Success
Danger
Warning
Info
Light
Dark

67, trong đó

Primary
Secondary
Success
Danger
Warning
Info
Light
Dark

68 thay thế lớp

Primary
Secondary
Success
Danger
Warning
Info
Light
Dark

69, do đó vô hiệu hóa tiện ích

Primary
Secondary
Success
Danger
Warning
Info
Light
Dark

90. Thay đổi kích thước trình duyệt của bạn để xem chúng thay đổi

Primary
Secondary
Success
Danger
Warning
Info
Light
Dark

Bạn có thể điều chỉnh độ rộng của các nút khối bằng các lớp độ rộng cột lưới. Ví dụ: đối với "nút chặn" nửa chiều rộng, hãy sử dụng

Primary
Secondary
Success
Danger
Warning
Info
Light
Dark

91. Căn giữa nó theo chiều ngang với

Primary
Secondary
Success
Danger
Warning
Info
Light
Dark

92, quá

Primary
Secondary
Success
Danger
Warning
Info
Light
Dark

Các tiện ích bổ sung có thể được sử dụng để điều chỉnh căn chỉnh các nút khi nằm ngang. Ở đây, chúng tôi đã lấy ví dụ phản hồi trước đó của mình và thêm một số tiện ích linh hoạt và tiện ích lề trên nút để căn chỉnh các nút khi chúng không còn được xếp chồng lên nhau

Link

plugin nút

Plugin nút cho phép bạn tạo các nút bật/tắt đơn giản

Về mặt trực quan, các nút chuyển đổi này giống hệt với các nút chuyển đổi hộp kiểm. Tuy nhiên, chúng được truyền đạt khác nhau bởi các công nghệ hỗ trợ. các nút chuyển đổi hộp kiểm sẽ được trình đọc màn hình thông báo là "đã chọn"/"không được chọn" [vì, mặc dù có vẻ ngoài như vậy, về cơ bản chúng vẫn là các hộp kiểm], trong khi các nút chuyển đổi này sẽ được thông báo là "nút"/"đã nhấn nút". Lựa chọn giữa hai cách tiếp cận này sẽ tùy thuộc vào loại chuyển đổi bạn đang tạo và việc chuyển đổi đó có ý nghĩa với người dùng hay không khi được thông báo dưới dạng hộp kiểm hoặc dưới dạng nút thực tế

Chuyển trạng thái

Thêm ________ 193 để chuyển trạng thái nút ________ 194. Nếu bạn đang chuyển đổi trước một nút, bạn phải thêm lớp

Primary
Secondary
Success
Danger
Warning
Info
Light
Dark

95 và

Primary
Secondary
Success
Danger
Warning
Info
Light
Dark

96 theo cách thủ công để đảm bảo rằng nó được chuyển tải phù hợp với các công nghệ hỗ trợ

Nút chuyển đổi Nút chuyển đổi đang hoạt động Nút chuyển đổi đã tắt

Link

Link

phương pháp

Ví dụ, bạn có thể tạo một phiên bản nút bằng hàm tạo nút

Link

MethodDescription

Primary
Secondary
Success
Danger
Warning
Info
Light
Dark

97Chuyển đổi trạng thái đẩy. Cung cấp cho nút xuất hiện rằng nó đã được kích hoạt.

Primary
Secondary
Success
Danger
Warning
Info
Light
Dark

98Hủy nút của một phần tử. [Xóa dữ liệu được lưu trữ trên phần tử DOM] ____199Phương thức tĩnh cho phép bạn lấy phiên bản nút được liên kết với phần tử DOM, bạn có thể sử dụng nó như thế này.

Primary
Secondary
Success
Danger
Warning
Info
Light
Dark

Primary
Secondary
Success
Danger
Warning
Info
Light
Dark

71Phương thức tĩnh trả về một phiên bản nút được liên kết với một phần tử DOM hoặc tạo một phần tử mới trong trường hợp nó không được khởi tạo. Bạn có thể sử dụng nó như thế này.

Primary
Secondary
Success
Danger
Warning
Info
Light
Dark

Ví dụ: để chuyển đổi tất cả các nút

Link

ngổ ngáo

Biến

Link

hỗn hợp

Có ba mixin cho các nút. mixin biến thể của nút và phác thảo nút [cả hai đều dựa trên

Primary
Secondary
Success
Danger
Warning
Info
Light
Dark

73], cộng với một mixin kích thước nút

Link

Link

Link

vòng lặp

Các biến thể của nút [đối với các nút thông thường và nút phác thảo] sử dụng các mixin tương ứng của chúng với bản đồ

Primary
Secondary
Success
Danger
Warning
Info
Light
Dark

73 của chúng tôi để tạo các lớp bổ trợ trong

Primary
Secondary
Success
Danger
Warning
Info
Light
Dark