คลาส CSS ที่มากับธีม Plant
This content is not available in your language yet.
CSS Classes ที่อยู่ในธีม Plant พร้อมใช้งาน
Helper Classes
ขึ้นต้นด้วยเครื่องหมาย _ เพื่อตั้งค่าเพิ่มเติม
CSS Class | รายละเอียด |
---|---|
_mobile | แสดงผลบนมือถือและแท็บเบล็ตเท่านั้น (จอกว้างไม่เกิน 1023px) |
_desktop | แสดงผลบนจอคอมเท่านั้น (จอกว้าง 1024px ขึ้นไป) |
_space | เพิ่มระยะด้านล่าง (Margin-Bottom) โดยค่าเริ่มต้นคือ 16px, 20px, 32px สำหรับจอมือถือ, แท็บเบล็ต และจอคอม |
_guest | แสดงเฉพาะคนที่ไม่ได้ล็อกอิน |
_member | แสดงเฉพาะคนที่ล็อกอิน (แค่ซ่อนการแสดงผล ไม่ควรใช้กับข้อมูลลับ) |
_th | แสดงเฉพาะเมื่อเปิดเว็บด้วยภาษาไทย (HTML lang=“th”) |
_en | แสดงเฉพาะเมื่อเปิดเว็บด้วยภาษาอังกฤษ (HTML lang=“en-US”) |
_body | แสดงฟอนต์สำหรับตัวอ่าน (Body ใน Customizer) |
_h | แสดงฟอนต์สำหรับพาดหัว (Heading ใน Customizer) |
_heading | แสดงฟอนต์สำหรับพาดหัว (Heading ใน Customizer) และน้ำหนัก (ตัวหนา/ตัวบาง) ตามที่ตั้งไว้ |
_h_alt | แสดงฟอนต์สำหรับพาดหัวแบบที่ 2 (Heading Alt ใน Customizer) |
_heading_alt | แสดงฟอนต์สำหรับพาดหัวแบบที่ 2 (Heading Alt ใน Customizer) และน้ำหนัก (ตัวหนา/ตัวบาง) ตามที่ตั้งไว้ |
_nowrap | ตั้งค่าไม่ให้มีการตัดขึ้นบรรทัดใหม่ เข่นปุ่ม หรือหัวข้อสั้นๆ |
S-Grid
เป็นคลาสสำหรับจัดคอลัมน์พื้นฐาน ตามขนาดจอ (Mobile, Tablet, Desktop)
CSS Class | รายละเอียด |
---|---|
s-grid | แสดงผลแบบ Grid |
-m2, -m3 | จำนวนคอลัมน์ที่แสดงบนมือถือ (2,3 คอลัมน์) หากไม่ระบุคือ 1 คอลัมน์ |
-t2, -t3, -t4 | จำนวนคอลัมน์ที่แสดงบนแท็บเบล็ต (2,3,4 คอลัมน์) หากไม่ระบุ จะอิงตามมือถือ |
-d1, -d2, -d3, -d4, -d5, -d6 | จำนวนคอลัมน์ที่แสดงบนจอคอม (1-6 คอลัมน์) หากไม่ระบุ จะอิงตามมือถือ |
ตัวอย่างการใช้งาน
<div class="s-grid -m2 -t3 -d4"> <div>CONTENT 01</div> <div>CONTENT 02</div> <div>CONTENT 03</div> <div>CONTENT 04</div> <div>CONTENT 05</div> <div>CONTENT 06</div> <div>CONTENT 07</div> <div>CONTENT 08</div> <div>CONTENT 09</div> <div>CONTENT 10</div> <div>CONTENT 11</div> <div>CONTENT 12</div></div>
ผลลัพธ์ที่ได้
CONTENT 01
CONTENT 02
CONTENT 03
CONTENT 04
CONTENT 05
CONTENT 06
CONTENT 07
CONTENT 08
CONTENT 09
CONTENT 10
CONTENT 11
CONTENT 12
หมายเหตุ สามารถใช้ร่วมกับ gap-0
, gap-1
, gap-2
, ตามตารางด้านล่างได้
Tailwind Classes
คลาสที่อิงจาก Tailwind CSS เฉพาะพื้นฐานที่ใช้บ่อย ระบบใส่ !important ให้ เพื่อให้ใช้ร่วมกับ Block / Page Builder ได้
CSS Class | รายละเอียด |
---|---|
relative | position: relative |
flex | display: flex |
inline-flex | display: inline-flex |
grid | display: grid |
text-left | text-align: left จัดข้อความชิดซ้าย |
text-center | text-align: center จัดข้อความกึ่งกลาง |
text-right | text-align: right จัดข้อความชิดขวา |
justify-start | justify-content: flex-start |
justify-end | justify-content: flex-end |
justify-center | justify-content: center |
justify-between | justify-content: space-between |
items-start | align-items: flex-start |
items-center | align-items: center |
↑ รายการด้านบน รองรับ Responsive | ขึ้นด้วยด้วย sm: / md: / lg: ได้ (กว้าง 600px, 768px, 1024px) |
mx-auto | margin-left: auto; margin-right: auto (จัดกึ่งกลาง) |
m-0 | margin: 0 (ปรับให้ระยะด้านนอกเป็น 0 ทุกด้าน) |
mt-0 | margin-top: 0 |
mb-0 | margin-bottom: 0 |
mb-1 | margin-bottom: 0.25rem |
mb-2 | margin-bottom: 0.5rem |
gap-0 | gap: 0 |
gap-1 | gap: 0.25rem |
gap-2 | gap: 0.5rem |
bg-transparent | background-color: transparent |
Other Classes
คลาสอื่นๆ ที่นิยมใช้
CSS Class | รายละเอียด |
---|---|
hide | display: none ซ่อนการแสดงผล |