Bootstrap nút chưa được tạo kiểu

Chúng được sử dụng cho các mục đích khác nhau như, gửi hoặc đặt lại biểu mẫu HTML, thực hiện các hành động tương tác như hiển thị hoặc ẩn thứ gì đó trên trang web khi nhấp vào nút, chuyển hướng người dùng đến một trang . v

Bootstrap cung cấp một cách nhanh chóng và dễ dàng để tạo và tùy chỉnh các nút

Các kiểu nút trong Bootstrap

Các lớp khác nhau có sẵn trong Bootstrap để tạo kiểu cho các nút cũng như biểu thị các trạng thái hoặc ngữ nghĩa khác nhau. Các loại nút có thể được áp dụng cho bất kỳ phần tử nào. Tuy nhiên, nó thường được áp dụng cho các phần tử

Primary
Secondary
Success
Danger
Warning
Info
Dark
Light

0,

Primary
Secondary
Success
Danger
Warning
Info
Dark
Light

0 và để hiển thị tốt nhất

Ví dụ sau sẽ chỉ cho bạn cách tạo các kiểu nút khác nhau trong Bootstrap

Primary
Secondary
Success
Danger
Warning
Info
Dark
Light

2

Kết quả của ví dụ trên sẽ giống như sau

Các kiểu nút viền trong Bootstrap

Bạn cũng có thể tạo các nút viền bằng cách thay thế các lớp bổ trợ kiểu nút trong Bootstrap, như sau

Primary
Secondary
Success
Danger
Warning
Info
Dark
Light

Kết quả của ví dụ trên sẽ giống như sau

Thay đổi kích thước của các nút

Bootstrap cung cấp cho bạn thêm tùy chọn để tăng hoặc giảm kích thước của nút

Để làm cho các nút lớn hơn, hãy thêm một lớp bổ sung

Primary
Secondary
Success
Danger
Warning
Info
Dark
Light

3 cho các nút, như sau

Large button
Large button

Kết quả của ví dụ trên sẽ giống như sau

Tương tự, để làm cho các nút nhỏ hơn, hãy thêm một lớp bổ sung

Primary
Secondary
Success
Danger
Warning
Info
Dark
Light

4 cho các nút, như sau

________số 8

Kết quả của ví dụ trên sẽ giống như sau

Bạn cũng có thể tạo các nút có chiều rộng đầy đủ hoặc các khối nút (các nút bao phủ toàn bộ chiều rộng của các phần tử cha) thông qua việc sử dụng các lớp tiện ích khoảng trống và hiển thị của Bootstrap

Những tiện ích này cung cấp khả năng kiểm tra giám sát tốt hơn nhiều đối với khoảng cách, căn chỉnh và các hành vi trả lời

    Block button
    Block button

Kết quả của ví dụ trên sẽ giống như sau

Bạn cũng có thể tạo biến thể trả lời câu hỏi của các nút này bằng cách sử dụng các lớp

Primary
Secondary
Success
Danger
Warning
Info
Dark
Light

5

Trong ví dụ sau, các nút sẽ được xếp chồng lên nhau theo chiều dọc trên các thiết bị nhỏ và cực nhỏ (tức là chiều rộng khung nhìn <768px). Từ điểm ngắt trung bình (

Primary
Secondary
Success
Danger
Warning
Info
Dark
Light

6) trở lên, lớp

Primary
Secondary
Success
Danger
Warning
Info
Dark
Light

7 thay thế lớp

Primary
Secondary
Success
Danger
Warning
Info
Dark
Light

8, do đó vô hiệu lớp

Primary
Secondary
Success
Danger
Warning
Info
Dark
Light

9. Hãy cùng dùng thử và xem nó thực sự hoạt động như thế nào

Primary
Secondary
Success
Danger
Warning
Info
Dark
Light

5

Các nút bị vô hiệu hóa Bootstrap

Đôi khi chúng ta cần phải tắt một nút vì một số lý do nhất định, chẳng hạn như người dùng trong trường hợp không đủ điều kiện để thực hiện hành động cụ thể này hoặc chúng ta muốn chắc chắn rằng người dùng phải thực hiện tất cả . Vui lòng xem làm thế nào để làm điều đó

Tạo nút bị vô hiệu hóa bằng cách sử dụng nút phần tử và đầu vào

Các nút được tạo thông qua thẻ hoặc

Primary
Secondary
Success
Danger
Warning
Info
Dark
Light

0có thể bị vô hiệu hóa bằng cách bổ sung thuộc tính

Large button
Large button

1 vào phần tử tương ứng, như được hiển thị trong ví dụ sau.

Large button
Large button

2

Kết quả của ví dụ trên sẽ giống như sau

Tạo các nút bị vô hiệu hóa bằng cách sử dụng neo phần tử

Các nút được tạo thông qua thẻ

Primary
Secondary
Success
Danger
Warning
Info
Dark
Light

0 có thể bị vô hiệu hóa bằng cách thêm lớp

Large button
Large button

4, như sau

2

Kết quả của ví dụ trên sẽ giống như sau

Lưu ý. Lớp

Large button
Large button

4 chỉ làm cho các liên kết hiển thị trực quan như bị vô hiệu hóa, tuy nhiên các liên kết sẽ vẫn có thể nhấp được trừ khi bạn xóa thuộc tính

Large button
Large button

6 khỏi nó. Ngoài ra, bạn có thể triển khai JavaScript tùy chỉnh để ngăn chặn các cú nhấp chuột đó

Các nút hoạt động trong Bootstrap

Ngoài ra, bạn cũng có thể áp dụng lớp

Large button
Large button

7 để buộc các nút trông giống như đang hoạt động (tức là được nhấn). Thông thường, bạn không cần thêm lớp này vào các nút, vì trạng thái hoạt động của chúng được Bootstrap tự động tạo kiểu bằng cách sử dụng lớp giả CSS

Large button
Large button

8. This is a ví dụ

7

Kết quả của ví dụ trên sẽ giống như sau

Tạo nút đang tải

Với Bootstrap, bạn có thể dễ dàng đưa biểu tượng con quay vào một nút để hiển thị trạng thái đang tải trong ứng dụng của mình. Vui lòng xem ví dụ sau để xem nó hoạt động như thế nào

8

Kết quả của ví dụ trên sẽ giống như sau

Trong chương trình tiếp theo, bạn sẽ học cách kết hợp nhiều nút theo chiều ngang hoặc chiều dọc trong một hàng như các công cụ thanh bằng cách sử dụng thành phần nhóm nút Bootstrap. Ngoài ra, trong phần nâng cao, bạn sẽ học cách tạo các nút bật tắt mà không cần sử dụng bất kỳ mã JavaScript nào