Nhãn Bootstrap 5

Các ví dụ cơ bản về việc sử dụng nhãn nổi

sao chép

    
    Email address





    
    Password





    
    Input with value

Trạng thái xác thực biểu mẫu hoạt động như mong đợi

sao chép

    
    Valid input





    
    Invalid input

Textarea với các tùy chọn chiều cao mặc định và tùy chỉnh

sao chép

    
    Comments





    
    Comments

Nhãn nổi cũng có sẵn trên các thành phần chọn biểu mẫu

sao chép

    
        
        
        
        
    
    Works with selects

Đầu vào nhãn nổi với kiểu nền vững chắc

sao chép

    
    Email address





Works with selects


Comments

"Form-floating" hoạt động để bật các nhãn nổi với các trường biểu mẫu văn bản trong phiên bản Bootstrap 5. Nhãn nổi bootstrap 5 là nhãn văn bản hiển thị ở kích thước phông chữ đầy đủ trong trường nhập liệu. Nhãn "nổi" phía trên trường nhập khi tương tác, cho phép người dùng nhập giá trị

Bootstrap 5 Nhãn nổi cho biết loại đầu vào cần thiết cho một trường. Ngoại trừ các trường văn bản có chiều rộng đầy đủ, sử dụng thuộc tính giữ chỗ của đầu vào, mọi Trường văn bản và Chọn phải có nhãn. Nhãn luôn hiển thị và căn chỉnh với dòng đầu vào. Chúng có thể nổi hoặc nghỉ ngơi. Nhãn là một mô tả văn bản hoặc tiêu đề cho Trường văn bản

Nhãn nổi mặc định

Bootstrap 5 nhãn nổi còn được gọi là nhãn động. Kèm theo một cặp và các thành phần trong ". form-floating" để bật các nhãn nổi với đầu vào trường văn bản của Bootstrap. Trình giữ chỗ sử dụng cho kiểu CSS trong nhãn nổi

Kích thước tập tin. 92. 4 KBViews Tổng cộng. 7079Cập nhật lần cuối. 04/11/2022 03. 40. 00 UTC Ngày Xuất bản. 20/04/2021 01. 20. 48 UTCTrang web chính thức. Tới trang webGiấy phép. MIT

Tải xuống bản trình diễn

Thêm trong danh mục này

Xem các plugin được đề xuất

TOP 100 Plugin jQuery 2022

Chrome, IE9+, FireFox, Opera, Safari#Bootstrap 5#Bootstrap#bootstrap 4#Nhãn đầu vào#Mẫu nhãn nổi

Đây là thư viện CSS/SCSS có thêm các nhãn nổi vào các điều khiển biểu mẫu Bootstrap 5 hoặc Bootstrap 4 như đầu vào, vùng văn bản và chọn

Xem thêm

• Loading Indicator For Bootstrap Form Controls - Input Spinner
• 10 giải pháp nhãn nổi tốt nhất cho hình thức UX tốt hơn

Làm thế nào để sử dụng nó

1. Cài đặt gói với NPM

# NPM
$ npm i @tkrotoff/bootstrap-floating-label

2. Nhập Nhãn nổi Bootstrap vào dự án Bootstrap của bạn

@import '~bootstrap/scss/bootstrap';
@import '[email protected]/bootstrap-floating-label/src/bootstrap-floating-label';

3. Thêm các điều khiển biểu mẫu của bạn vào các bộ chứa DIV với lớp CSS của 'nhãn nổi' và xác định văn bản sẽ được hiển thị trong các nhãn nổi

  
  Floating Label Text




  
  Floating Label Text




  
    1
    2
    3
    4
    5
  
  select

4. Xác định kích thước của nhãn nổi

• nhãn-lg. Lớn
• nhãn-md. Vừa phải
• nhãn-sm. Nhỏ bé

Nhật ký thay đổi

v0. 11. 4 (2022-04-11)

• Cập nhật các gói npm, chuyển sang Parcel 2
• Ví dụ với xác nhận

v0. 11. 3 (27-11-2021)

• Khắc phục "Cảnh báo không dùng nữa. Việc sử dụng / để chia không được dùng nữa và sẽ bị xóa trong Dart Sass 2. 0. 0"
• Cập nhật các gói npm

v0. 11. 2 (2021-05-09)

• Đã cập nhật cho Bootstrap 5. 0. 0 ổn định

v0. 11. 1 (2021-05-08)

• Sửa chiều cao dòng nhãn

v0. 11. 0 (2021-04-30)

• Xóa màu nền bị vô hiệu hóa của nhãn. không chơi đẹp với quá trình chuyển đổi
• Chiều cao dòng nhỏ hơn cho nhãn

Plugin jQuery tuyệt vời này được phát triển bởi tkrotoff. Để biết thêm Cách sử dụng nâng cao, vui lòng kiểm tra trang demo hoặc truy cập trang web chính thức

Làm cách nào để thêm nhãn trong Bootstrap?