Xóa nút Bootstrap

Bạn đã bao giờ mở một bảng tính và nhìn thấy một loạt các trường biểu mẫu ở góc chưa?

Trong hướng dẫn ngắn ngày hôm nay, chúng ta sẽ tạo một bảng Bootstrap với các nút thêm, chỉnh sửa và xóa. Bảng sẽ hoàn toàn đáp ứng

Một nét đẹp cũng sẽ là chú giải công cụ JavaScript trên các nút, cung cấp thêm ngữ cảnh người dùng

Bootstrap cho phép bạn làm điều gì đó tương tự với các nút và nhóm nút trong mã HTML của bạn. Có rất nhiều tùy chọn nút khác nhau trong Bootstrap. Tôi sẽ chỉ cho bạn cách sử dụng thành phần nút bên phải tùy thuộc vào hành động đang được thực hiện và nội dung bạn muốn nút của mình nói

Hãy làm nó

Bootstrap là gì?

Bootstrap là một công cụ tuyệt vời để tạo hình ảnh trên trang web của bạn với mã hóa tối thiểu. Đó là một điểm khởi đầu tuyệt vời cho bất kỳ nhà thiết kế hoặc nhà phát triển nào cần xây dựng thứ gì đó một cách nhanh chóng. Bootstrap được xây dựng trên CSS và HTML thuần túy, có nghĩa là bạn có thể sử dụng nó ở mọi nơi, ngay lập tức

Tại sao ngày nay bạn cần thiết kế web đáp ứng?

Thiết kế web đáp ứng là cách mới để xây dựng trang web.  

Thiết kế web đáp ứng cung cấp trải nghiệm tối ưu trên tất cả các thiết bị, với một cơ sở mã duy nhất. Nó đáp ứng nhu cầu của mọi cá nhân hoặc doanh nghiệp và giúp cải thiện trải nghiệm người dùng, lưu lượng truy cập và tỷ lệ chuyển đổi

Nếu bạn thích đoạn trích này, bạn cũng có thể thích khám phá các tab dọc Bootstrap hoặc danh sách hộp kiểm Bootstrap

Xin lưu ý rằng trình chỉnh sửa tương tác trên trang này nên được xem trên máy tính xách tay hoặc máy tính để bàn của bạn để có kết quả tốt nhất

Tải xuống

Tải xuống SVG để sử dụng hoặc chỉnh sửa

Tải xuống SVG

phông chữ biểu tượng

Sử dụng phông chữ web?

điểm mã

• bảng chữ cái. U+F5DE
• CSS. \F5DE
• JS. \uF5DE
• HTML. 

Sao chép HTML

Dán SVG ngay vào mã dự án của bạn

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

0

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

4hoặ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 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

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

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

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?

Large button
Large button

Small button
Small button

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

Large button
Large button

2 vào bất kỳ phần tử nào. Các nút đã tắt có

Large button
Large button

3 áp dụng cho, ngăn không cho kích hoạt trạng thái di chuột và hoạt động

Large button
Large button

4

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

  Large button
  Large button

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

  Large button
  Large button

  8 để 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 để vô hiệu hóa tất cả

  Large button
  Large button

  9 trên các nút neo
• Các nút bị tắt phải bao gồm thuộc tính

  Small button
  Small button

  0 để 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

8 sử dụng

Large button
Large button

3 để 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ợ

Large button
Large button

3, đ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ị lự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, để đảm bảo an toàn, ngoài

Small button
Small button

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

Small button
Small button

6 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 để vô hiệu hóa 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

  Button
  Button

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

Small button
Small button

7, trong đó

Small button
Small button

8 thay thế lớp

Small button
Small button

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

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

  Button
  Button

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

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

2

  Button
  Button

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

0

plugin nút

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

Nhìn bề ngoài, các nút chuyển đổi này giống hệt với nút. 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ó hình thức như vậy nhưng 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

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

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

5 và

6 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

1

Link

2

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

3

MethodDescription

7Toggles push state. Cung cấp cho nút xuất hiện rằng nó đã được kích hoạt.

8Hủ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)_______21_______9 Phươ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 link
Link

0

Primary link
Link

1Phương thức tĩnh trả về phiên bản nút được liên kết với phần tử DOM hoặc tạo một phiên bản 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 link
Link

2

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

Link

4

ngổ ngáo

Biến

Link

5

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 link
Link

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

Link

6

Link

7

Link

8

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 link
Link

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

Primary link
Link

5

Làm cách nào để xóa viền nút trong Bootstrap 5?

Làm cách nào để tạo nút đóng trong Bootstrap?

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

Làm cách nào để xóa hiệu ứng di chuột trong Bootstrap?