Kích thước nút CSS

Sử dụng các kiểu nút tùy chỉnh của Bootstrap cho các hành động trong biểu mẫu, hộp thoại, v.v. với sự hỗ trợ cho nhiều kích cỡ, trạng thái, v.v.

ví dụ

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

Link

2

Các lớp

Link

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ử

Link

4hoặc

Link

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ử

Link

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 tới 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 cấp một ____1_______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

Link

8

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

kích thước

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

Large button
Large button

Small button
Small button

Tạo các nút cấp độ khối—những nút trải rộng toàn bộ chiều rộng của nút gốc—bằng cách thêm

Primary
Secondary
Success
Danger
Warning
Info
Light
Dark

2

Nút cấp khối Nút cấp khối

Block level button
Block level button

trạng thái hoạt động

Các nút sẽ xuất hiện khi được nhấn (với nền tối hơn, đường viền tối hơn và bóng bên trong) khi hoạt động. Không cần thêm lớp vào s vì chúng sử dụng lớp giả. Tuy nhiên, bạn vẫn có thể buộc giao diện hoạt động tương tự với

Primary
Secondary
Success
Danger
Warning
Info
Light
Dark

3 (và bao gồm thuộc tính

Primary
Secondary
Success
Danger
Warning
Info
Light
Dark

4) nếu bạn cần sao chép trạng thái theo chương trình

Primary link
Link

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

5 vào bất kỳ

yếu tố

Primary
Secondary
Success
Danger
Warning
Info
Light
Dark

6

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

Link

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

• Link
  

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

  Primary
  Secondary
  Success
  Danger
  Warning
  Info
  Light
  Dark

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

  Large button
  Large button

  0 để 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 đưa vào để tắt tất cả

  Large button
  Large button

  1 trên các nút neo. Trong các trình duyệt hỗ trợ thuộc tính đó, bạn sẽ hoàn toàn không thấy con trỏ bị vô hiệu hóa
• Các nút bị tắt phải bao gồm thuộc tính

  Large button
  Large button

  2 để cho biết trạng thái của phần tử đối với các công nghệ hỗ trợ

Primary link
Link

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

Lớp

Large button
Large button

0 sử dụng

Large button
Large button

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

Link

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ợ

Large button
Large button

4, đ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, hãy thêm thuộc tính

Large button
Large button

7 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 chức năng của chúng

plugin nút

Làm nhiều hơn với các nút. Trạng thái nút điều khiển hoặc tạo nhóm nút cho nhiều thành phần hơn như thanh công cụ

Chuyển trạng thái

Thêm

Large button
Large button

8 để chuyển đổi trạng thái

Large button
Large button

9 của nút. Nếu bạn đang chuyển đổi trước một nút, bạn phải thêm thủ công lớp

Primary
Secondary
Success
Danger
Warning
Info
Light
Dark

3 và

Primary
Secondary
Success
Danger
Warning
Info
Light
Dark

4 vào

Small button
Small button

2

Hộp kiểm và nút radio

Các kiểu

Small button
Small button

3 của Bootstrap có thể được áp dụng cho các phần tử khác, chẳng hạn như ____1_______4, để cung cấp hộp kiểm hoặc nút chuyển đổi kiểu radio. Thêm

Small button
Small button

5 vào một

Small button
Small button

6 chứa các nút đã sửa đổi đó để kích hoạt hành vi chuyển đổi của chúng thông qua JavaScript và thêm

Small button
Small button

7 để tạo kiểu cho các

Link

4 trong các nút của bạn. Lưu ý rằng bạn có thể tạo các nút hoặc nhóm được hỗ trợ đầu vào đơn lẻ

Trạng thái đã chọn cho các nút này chỉ được cập nhật thông qua sự kiện

Small button
Small button

9 trên nút. Nếu bạn sử dụng một phương pháp khác để cập nhật đầu vào—e. g. , với

Link

4 hoặc bằng cách áp dụng thuộc tính

Block level button
Block level button

1 của đầu vào theo cách thủ công—bạn sẽ cần chuyển đổi

Primary
Secondary
Success
Danger
Warning
Info
Light
Dark

3 trên

Link

4 theo cách thủ công

Lưu ý rằng các nút được kiểm tra trước yêu cầu bạn phải thêm thủ công lớp

Primary
Secondary
Success
Danger
Warning
Info
Light
Dark

3 vào lớp

Link

4 của đầu vào

Làm cách nào để thay đổi chiều cao của nút trong CSS?

Làm cách nào để tạo nút có chiều rộng 100%?

Làm cách nào để thay đổi kích thước nút trong js?