Bố cục và kiểu Ninja Forms Tổng quan về tiện ích mở rộng GPL:
Tiện ích mở rộng Ninja Forms Layout & Styles cung cấp cho bạn khả năng tạo các kiểu và bố cục biểu mẫu rất phức tạp theo mặc định và trên cơ sở mỗi biểu mẫu nhưng hiểu được thứ tự mà các kiểu được áp dụng là rất quan trọng để tận dụng tối đa tiện ích mở rộng này.
Các tính năng của GPL Layout và Styles Ninja Forms:
- Thêm kiểu – Cho dù bạn đang chỉnh sửa kiểu biểu mẫu mặc định, kiểu trường mặc định, kiểu kiểu trường, kiểu lỗi hoặc kiểu trường riêng lẻ, bạn sẽ có nhiều tùy chọn giống nhau. Trong tài liệu này, tôi hy vọng sẽ giải thích những kiến thức cơ bản về CSS mà bạn có thể cần biết để khai thác sức mạnh của tiện ích mở rộng Bố cục & Kiểu cho Ninja Forms.
- Thuộc tính CSS cơ bản – Mặc dù chúng tôi có thể bổ sung thêm trong tương lai, nhưng ở đây chúng tôi vẫn giữ các phần tử cơ bản có sẵn để bạn tạo kiểu cho các phần tử biểu mẫu của mình.
- Màu nền – Điều này cung cấp một công cụ chọn màu rất đơn giản để bạn quay số bằng màu đã chọn hoặc nhập giá trị màu HEX.
- Chiều rộng đường viền – Điều này có thể chấp nhận từ 1 đến 4 giá trị. Kiểm tra các ví dụ sau: Màu đường viền. Điều này cung cấp một bộ chọn màu rất đơn giản để bạn quay số bằng màu đã chọn hoặc nhập giá trị màu HEX.
- Màu văn bản – Điều này cung cấp một công cụ chọn màu rất đơn giản để bạn quay số bằng màu đã chọn hoặc nhập giá trị màu HEX.
- Chiều cao – Chọn chiều cao của phần tử của bạn với một số nguyên theo sau là px hoặc%. Như trong 500px hoặc 100%.
- Chiều rộng – Chọn chiều rộng phần tử của bạn với một số nguyên theo sau là px hoặc%. Như trong 500px hoặc 100%.
- Thuộc tính CSS nâng cao – Đây là những mục bạn có thể không cần thường xuyên đối với người dùng bình thường, nhưng chúng tôi bao gồm chúng trong trường hợp bạn muốn kiểm soát nhiều hơn một chút.
- Float – Điều này chấp nhận trái, phải hoặc không.
- Kích cỡ phông chữ – Đây thường sẽ là một số nguyên theo sau là px hoặc em. Như trong 16px hoặc 1 em.
- Ký quỹ – Giá trị này có thể chấp nhận từ 1 đến 4 giá trị. Nó thêm khoảng trắng ở bên ngoài những gì bạn áp dụng miễn là nó là một phần tử cấp khối. Kiểm tra các ví dụ sau: Padding Điều này có thể chấp nhận từ 1 đến 4 giá trị. Nó thêm khoảng trắng vào bên trong của những gì bạn áp dụng nó miễn là nó là một phần tử cấp khối. Kiểm tra các ví dụ sau:
- CSS nâng cao – Tùy chọn này dành cho những người thành thạo CSS hoặc không ngại thử nghiệm. Tại đây, bạn có thể viết bất kỳ quy tắc nào mà bạn muốn, giống như bạn làm nếu bạn đang viết CSS trong tệp của chính nó.
- Layout & Styles Hierarchy – Tiện ích mở rộng Ninja Forms Layout & Styles cung cấp cho bạn khả năng tạo các kiểu và bố cục biểu mẫu rất phức tạp theo mặc định và trên cơ sở mỗi biểu mẫu nhưng hiểu được thứ tự mà các kiểu được áp dụng là rất quan trọng để tận dụng tối đa điều này sự mở rộng.
- Để bắt đầu, khi bạn cài đặt tiện ích mở rộng Bố cục & Kiểu dáng, bạn sẽ nhận được menu phụ Kiểu dáng bên dưới Menu Biểu mẫu Ninja của bạn. Khi nhấp vào đó, bạn sẽ thấy 4 tab và các tab này đại diện cho phong cách mặc định của Ninja Forms. Khi bạn đặt các tùy chọn này, chúng sẽ được áp dụng theo một thứ tự rất cụ thể.
- Tab Form Styles – Tab này đại diện cho các giá trị mặc định cho các phần tử của Ninja Forms của bạn. Những thứ như vùng chứa chính, hàng và thông báo thành công được đặt ở đây và được áp dụng cho mọi biểu mẫu mà bạn tạo với Biểu mẫu Ninja, vì vậy hãy đảm bảo rằng bạn muốn các kiểu này được áp dụng cho mọi biểu mẫu trước khi tiếp tục.
- Tab Kiểu trường mặc định – Khi bạn tạo một trường hoặc bất kỳ phần tử nào khác với Ninja Forms, nó sẽ tạo ra đầu ra chắc chắn được yêu cầu. Một div bao quanh một nhãn và phần tử thực. Các ngoại lệ duy nhất là các phần tử bố cục không có nhãn và có lẽ không có div bao, trong trường hợp này chỉ có các Kiểu phần tử sẽ được áp dụng.
- Trong mọi trường hợp, các kiểu này áp dụng cho TẤT CẢ các trường được tạo trong Biểu mẫu Ninja bất kể loại nào. Một lần nữa nếu bạn không muốn nó được áp dụng cho mọi thứ hoàn toàn, hãy sử dụng tùy chọn này một cách tiết kiệm.
- Tab Kiểu Trường – Tại đây, bạn sẽ thấy các tùy chọn tương tự như Kiểu Trường Mặc định với việc bổ sung tùy chọn để chọn một trường hoặc loại phần tử cụ thể. Điều này có nghĩa là bạn có thể tạo kiểu cho tất cả các hộp văn bản của mình theo một cách và tất cả các nút Gửi của bạn theo cách khác. Về cơ bản, bạn có thể tạo kiểu mặc định cho mọi loại vật phẩm mà Ninja Forms cho phép bạn tạo.
- Tab Kiểu Lỗi – Nếu biểu mẫu không được hoàn thành đúng cách, sẽ có các thông báo được hiển thị ở đầu biểu mẫu cũng như với mỗi trường có lỗi kèm theo. Điều này sẽ cho phép bạn tạo kiểu cho các thông báo này và các trường có lỗi cho tất cả các Biểu mẫu Ninja của bạn.
- Hiểu về Hệ thống phân cấp – Về cơ bản, bạn càng cụ thể, thì phong cách đó càng được áp dụng nhiều hơn. Với lưu ý này, các Kiểu Trường đã được áp dụng trước rồi đến Kiểu Trường Mặc định. Hãy ghi nhớ điều này khi mọi thứ dường như không xuất hiện theo cách bạn nghĩ.
- Thay đổi số cột trong danh sách bằng cách sử dụng tên lớp – Bạn có thể sử dụng tên lớp NUMBER-col-list làm tên lớp vùng chứa trường danh sách trong tùy chọn trường danh sách.
Đánh giá Ninja Forms Layout and Styles GPL v3.0.29 Extension