Khởi động nút radio

You are watching. Top 14+ Nhóm Nút Cách Sử Dụng

Thông tin và kiến ​​thức về chủ đề cách sử dụng nhóm nút hay nhất là Truyền hình cáp sông thu lọc và tổng hợp cùng với các chủ đề liên quan khác

Bootstrap cho phép bạn tùy chỉnh các điều khiển biểu mẫu mặc định của trình duyệt để tạo các bố cục chung biểu mẫu trang nhã hơn. Giờ đây, bạn có thể tạo các hộp kiểm, nút radio, đầu vào tệp, chọn danh sách thả xuống, đầu vào phạm vi,. tùy chỉnh và hoàn toàn tương thích với nhiều trình duyệt

Trong các phần sau, bạn sẽ thấy cách tạo từng phần tử biểu mẫu tùy chỉnh đó

Tạo hộp kiểm tùy chỉnh

Để tạo các hộp kiểm (hộp kiểm) tùy chỉnh, hãy bao bọc mỗi hộp kiểm

    
    Custom radio


    
    Another custom radio

2 và phần tử

    
    Custom radio


    
    Another custom radio

2 tương ứng của chúng trong một phần tử

và áp dụng các lớp như được hiển thị trong ví dụ sau.

    
    Custom checkbox


    
    Another custom checkbox

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

Create the radio button options

Tương tự như vậy, bạn có thể tạo tùy chọn nút radio bằng Bootstrap như sau

    
    Custom radio


    
    Another custom radio

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

Hộp kiểm và nút radio trên cùng một hàng

Bạn có thể đặt các hộp kiểm tra tùy chỉnh này và các nút radio trong cùng một hàng bằng cách chỉ cần thêm lớp

    
    Custom radio


    
    Another custom radio

4 vào phần tử

    
    Custom radio


    
    Another custom radio

5

Ví dụ sau sẽ hiển thị các hộp kiểm trong cùng một hàng

    
    Custom checkbox


    
    Another custom checkbox

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

Tương tự, bạn có thể đặt các nút radio vào cùng một hàng, như được hiển thị trong ví dụ sau

    
    Custom radio





Another custom radio

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

Hộp kiểm vô hiệu hóa và nút radio tùy chỉnh

Hộp kiểm và nút radio tùy chỉnh cũng có thể bị vô hiệu hóa. Chỉ cần thêm thuộc tính boolean

    
    Custom radio


    
    Another custom radio

6 vào phần tử

    
    Custom radio


    
    Another custom radio

2, như được hiển thị trong ví dụ sau

    
    Custom radio


    
    Another custom radio

0

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

Create switch switch

Công tắc tương tự như hộp kiểm tra tùy chỉnh — sự khác biệt duy nhất là — nó sử dụng lớp

    
    Custom radio


    
    Another custom radio

8 để hiển thị một công tắc tắt. Công tắc cũng hỗ trợ thuộc tính

    
    Custom radio


    
    Another custom radio

6

Hãy thử ví dụ sau để hiểu về cơ bản nó hoạt động như thế nào

    
    Custom radio


    
    Another custom radio

3

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

Bạn có thể tùy chỉnh các menu thả xuống được chọn bằng cách chỉ cần thêm lớp

    
    Custom checkbox


    
    Another custom checkbox

0 vào phần tử

    
    Custom checkbox


    
    Another custom checkbox

1 và không thể sửa đổi các phần tử

    
    Custom radio


    
    Another custom radio

2 do các giới hạn của trình duyệt duyệt

    
    Custom radio





    
    Another custom radio

7

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

Bạn có thể thêm thuộc tính

    
    Custom radio


    
    Another custom radio

6 vào một tùy chọn chỉnh sửa

    
    Custom checkbox


    
    Another custom checkbox

4 để làm cho nó xuất hiện màu xám và xóa các sự kiện con trỏ, như được hiển thị trong ví dụ sau

    
    Custom radio


    
    Another custom radio

7

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

Bạn có thể tạo các biến thể lớn và nhỏ của các tùy chỉnh

    
    Custom checkbox


    
    Another custom checkbox

4 để phù hợp với chiều cao của các đầu vào có kích thước tương tự của Bootstrap cũng bằng cách sử dụng các lớp

    
    Custom checkbox


    
    Another custom checkbox

6 và

    
    Custom checkbox


    
    Another custom checkbox

7 trên phần tử

    
    Custom checkbox


    
    Another custom checkbox

8

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

    
    Custom checkbox


    
    Another custom checkbox

9 tùy chỉnh Bootstrap cũng hỗ trợ các thuộc tính của

    
    Custom radio


    
    Another custom radio

0 và

    
    Custom radio


    
    Another custom radio

1 như

    
    Custom checkbox





Another custom checkbox

4 thông thường

    
    Custom radio


    
    Another custom radio

7

Tạo phạm vi đầu vào tùy chỉnh

Để tạo phạm vi đầu vào tùy chỉnh, chỉ cần áp dụng lớp

    
    Custom radio


    
    Another custom radio

3 cho phần tử

    
    Custom radio


    
    Another custom radio

2

    
    Custom radio


    
    Another custom radio

2

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

Bạn cũng có thể thêm thuộc tính

    
    Custom radio


    
    Another custom radio

6 vào phạm vi đầu vào để làm cho nó xuất hiện màu xám và xóa các sự kiện con trỏ, như được hiển thị trong ví dụ sau

    
    Custom radio


    
    Another custom radio

0

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

Đặt giá trị tối thiểu và giá trị tối đa

Theo mặc định, phạm vi đầu vào có các giá trị ngưỡng định mức tối thiểu và tối đa tối đa - 0 và 100, tương ứng. Tuy nhiên, bạn có thể chỉ định các giá trị mới cho các giá trị sử dụng thuộc tính

    
    Custom radio


    
    Another custom radio

6 và

    
    Custom radio


    
    Another custom radio

7

Ngoài ra, theo mặc định, phạm vi đầu vào "gắn" vào các giá trị nguyên. Để thay đổi điều này, bạn có thể chỉ định một giá trị

    
    Custom radio


    
    Another custom radio

8. Trong ví dụ sau, chúng tôi đã tăng gấp đôi số bước bằng cách sử dụng

    
    Custom radio


    
    Another custom radio

9