Nền tảng - Các lớp khả năng hiển thị

Sự miêu tả

Foundation sử dụng các lớp khả năng hiển thị để hiển thị hoặc ẩn các phần tử dựa trên hướng thiết bị (dọc và ngang) hoặc kích thước màn hình (màn hình nhỏ, trung bình, lớn hoặc phóng to).
Nó cho phép người dùng sử dụng các phần tử dựa trên môi trường duyệt web.

Bảng sau liệt kê các lớp khả năng hiển thị của Foundation, các lớp này kiểm soát các phần tử dựa trên môi trường duyệt của chúng:

Sr.No.	Lớp hiển thị & Mô tả
1	Hiển thị theo kích thước màn hình Nó hiển thị các phần tử dựa trên thiết bị bằng cách sử dụng lớp .show .
2	Ẩn theo kích thước màn hình Nó ẩn các phần tử dựa trên thiết bị bằng cách sử dụng lớp .hide .

Foundation hỗ trợ một số lớp mà bạn có thể ẩn nội dung bằng cách sử dụng các lớp .hide và .invisible và không hiển thị gì trên trang.

Phát hiện định hướng

Các thiết bị có thể xác định phương hướng khác nhau bằng cách sử dụng cảnh quan và chân dung chức năng. Các thiết bị cầm tay như điện thoại di động chỉ định các hướng khác nhau khi bạn xoay chúng. Đối với máy tính để bàn, hướng sẽ luôn là ngang.

Khả năng tiếp cận

Bảng sau liệt kê các kỹ thuật trợ năng cho trình đọc màn hình, ẩn nội dung trong khi vẫn làm cho trình đọc màn hình có thể đọc được -

Sr.No.	Mô tả & Lớp trợ năng
1	Hiển thị cho người đọc màn hình Nó sử dụng lớp show-for-sr để ẩn nội dung trong khi ngăn trình đọc màn hình đọc nó.
2	Ẩn cho trình đọc màn hình Nó sử dụng thuộc tính aria-hidden giúp hiển thị văn bản nhưng trình đọc màn hình không thể đọc được.
3	Tạo Liên kết Bỏ qua Trình đọc màn hình sẽ tạo một liên kết bỏ qua để điều hướng đến nội dung trang web của bạn.

Tham khảo Sass

Foundation sử dụng các mixin sau để hiển thị đầu ra CSS, cho phép xây dựng cấu trúc lớp riêng cho các thành phần của bạn -

Sr.No.	Mixin & Mô tả	Tham số	Kiểu
1	show-for Theo mặc định, nó ẩn một phần tử và hiển thị nó trên kích thước màn hình nhất định.	kích thước $	Từ khóa
2	show-for-only Theo mặc định, nó ẩn một phần tử và hiển thị nó trong breakpoint.	kích thước $	Từ khóa
3	hide-for Theo mặc định, nó hiển thị một phần tử và ẩn nó trên một kích thước màn hình nhất định.	kích thước $	Từ khóa
4	hide-for-only Theo mặc định, nó hiển thị một phần tử và ẩn nó trên một kích thước màn hình nhất định.	kích thước $	Từ khóa

Giá trị mặc định của tất cả các mixin này sẽ được đặt thành không .