Hộp kiểm đa lựa chọn bootstrap

Question

Giải thích. Khi click vào button Launch demo modal thì popup xuất hiện. Bạn để ý cho mình đoạn mã sau

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

8

Nội dung chính Show

Tạo hộp kiểm tùy chỉnh
Create the radio button options
Hộp kiểm và nút radio trên cùng một hàng
Hộp kiểm vô hiệu hóa và nút radio tùy chỉnh
Create switch switch
Tạo phạm vi đầu vào tùy chỉnh
Đặt giá trị tối thiểu và giá trị tối đa

in which

data-target="#exampleModal" được dùng để xác định bất kỳ cửa sổ bật lên nào được gọi (nếu có nhiều cửa sổ bật lên trên cùng một trang), trong ví dụ trên cửa sổ bật lên có id là #exampleModal
data-toggle="modal" is command open a Modal Popup in Bootstrap

Phần popup bạn muốn hiển thị là đoạn mã này. Trong cửa sổ bật lên mà các bạn muốn thêm gì thì thêm ứng dụng ra sao tùy các bạn

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

________số 8

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

1

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

4

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

8

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

8

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

Bạn có thể tạo các biến có 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

8

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 checkbox


    
    Another custom checkbox

3

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

programming bootstrap

Hộp kiểm đa lựa chọn bootstrap

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

Create the radio button options

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

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

Create switch switch

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

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

Bài Viết Liên Quan

MỚI CẬP NHẬP

Xem Nhiều

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội