มูลนิธิ - ชั้นเรียนทัศนวิสัย
คำอธิบาย
Foundation ใช้คลาสการมองเห็นเพื่อแสดงหรือซ่อนองค์ประกอบตามการวางแนวอุปกรณ์ (แนวตั้งและแนวนอน) หรือขนาดหน้าจอ (หน้าจอเล็กกลางใหญ่หรือใหญ่)
อนุญาตให้ผู้ใช้ใช้องค์ประกอบตามสภาพแวดล้อมการท่องเว็บ
ตารางต่อไปนี้แสดงรายการระดับการมองเห็นของ Foundation ซึ่งควบคุมองค์ประกอบตามสภาพแวดล้อมการเรียกดู -
ซีเนียร์ | ระดับการมองเห็นและคำอธิบาย |
---|---|
1 | แสดงตามขนาดหน้าจอ มันแสดงองค์ประกอบตามอุปกรณ์โดยใช้. show class |
2 | ซ่อนตามขนาดหน้าจอ มันซ่อนองค์ประกอบตามอุปกรณ์โดยใช้. hidden class |
Foundation รองรับบางคลาสที่คุณสามารถซ่อนเนื้อหาได้โดยใช้คลาส. hiddenและ . invisibleและไม่แสดงอะไรบนเพจ
การตรวจจับการวางแนว
อุปกรณ์สามารถกำหนดทิศทางที่แตกต่างกันได้โดยใช้ฟังก์ชันแนวนอนและแนวตั้ง อุปกรณ์มือถือเช่นโทรศัพท์มือถือจะระบุทิศทางที่แตกต่างกันเมื่อคุณหมุน สำหรับเดสก์ท็อปการวางแนวจะเป็นแนวนอนเสมอ
การเข้าถึง
ตารางต่อไปนี้แสดงรายการเทคนิคการช่วยการเข้าถึงสำหรับโปรแกรมอ่านหน้าจอซึ่งจะซ่อนเนื้อหาในขณะที่ทำให้โปรแกรมอ่านหน้าจอสามารถอ่านได้ -
ซีเนียร์ | คลาสการช่วยสำหรับการเข้าถึงและคำอธิบาย |
---|---|
1 | แสดงสำหรับโปรแกรมอ่านหน้าจอ ใช้คลาสshow-for-srเพื่อซ่อนเนื้อหาในขณะที่ป้องกันโปรแกรมอ่านหน้าจอไม่ให้อ่าน |
2 | ซ่อนสำหรับโปรแกรมอ่านหน้าจอ ใช้แอตทริบิวต์aria-hiddenซึ่งทำให้มองเห็นข้อความได้ แต่โปรแกรมอ่านหน้าจอไม่สามารถอ่านได้ |
3 | การสร้างข้ามลิงค์ โปรแกรมอ่านหน้าจอจะสร้างลิงก์ข้ามเพื่อรับการนำทางไปยังเนื้อหาของไซต์ของคุณ |
การอ้างอิง Sass
Foundation ใช้มิกซ์อินต่อไปนี้เพื่อแสดงเอาต์พุต CSS ซึ่งช่วยให้สร้างโครงสร้างคลาสของตัวเองสำหรับส่วนประกอบของคุณ -
ซีเนียร์ | Mixin & คำอธิบาย | พารามิเตอร์ | ประเภท |
---|---|---|---|
1 | show-for โดยค่าเริ่มต้นจะซ่อนองค์ประกอบและแสดงเหนือขนาดหน้าจอที่กำหนด |
ขนาด $ | คำสำคัญ |
2 | show-for-only โดยค่าเริ่มต้นจะซ่อนองค์ประกอบและแสดงภายในเบรกพอยต์ |
ขนาด $ | คำสำคัญ |
3 | hide-for โดยค่าเริ่มต้นจะแสดงองค์ประกอบและซ่อนไว้เหนือขนาดหน้าจอที่กำหนด |
ขนาด $ | คำสำคัญ |
4 | hide-for-only โดยค่าเริ่มต้นจะแสดงองค์ประกอบและซ่อนไว้เหนือขนาดหน้าจอที่กำหนด |
ขนาด $ | คำสำคัญ |
ค่าเริ่มต้นของทุก mixins เหล่านี้จะถูกตั้งค่าไม่มี