มูลนิธิกลุ่มปุ่ม
มูลนิธิกลุ่มปุ่ม
กลุ่มปุ่ม
มูลนิธิสามารถสร้างชุดของปุ่มในแถวเดียวกัน
คุณสามารถใช้ <ul> องค์ประกอบและเพิ่ม .button-group ชั้นเรียนเพื่อสร้างกลุ่มปุ่ม
ตัวอย่าง
<li> <ชนิดปุ่ม = " ปุ่ม" = "ปุ่ม" ชั้น> แอปเปิ้ล </ ปุ่ม> </ li>
<li> <ชนิดปุ่ม = " ปุ่ม" = "ปุ่ม" ชั้น> ซัมซุง </ ปุ่ม> </ li>
<li> <ชนิดปุ่ม = " ปุ่ม" = "ปุ่ม" ชั้น> โซนี่ </ ปุ่ม> </ li>
</ ul>
ลอง»
กลุ่มปุ่มแนวตั้ง
กลุ่มปุ่มการใช้งานในแนวตั้ง .stack ระดับในการสร้าง โปรดทราบว่าปุ่มครอบคลุมกว้างทั้งหมดขององค์ประกอบหลัก:
ตัวอย่าง
<li> <ชนิดปุ่ม = " ปุ่ม" = "ปุ่ม" ชั้น> แอปเปิ้ล </ ปุ่ม> </ li>
<li> <ชนิดปุ่ม = " ปุ่ม" = "ปุ่ม" ชั้น> ซัมซุง </ ปุ่ม> </ li>
<li> <ชนิดปุ่ม = " ปุ่ม" = "ปุ่ม" ชั้น> โซนี่ </ ปุ่ม> </ li>
</ ul>
ลอง»
.stack-for-small ชั้นเรียนสำหรับขนาดที่เล็กของหน้าจอมีปุ่มจัดแนวนอนเป็นแนวตั้ง:
ตัวอย่าง
<li> <ชนิดปุ่ม = " ปุ่ม" = "ปุ่ม" ชั้น> แอปเปิ้ล </ ปุ่ม> </ li>
<li> <ชนิดปุ่ม = " ปุ่ม" = "ปุ่ม" ชั้น> ซัมซุง </ ปุ่ม> </ li>
<li> <ชนิดปุ่ม = " ปุ่ม" = "ปุ่ม" ชั้น> โซนี่ </ ปุ่ม> </ li>
</ ul>
ลอง»
กลุ่มปุ่มโค้งมน
ปุ่มการใช้งานกลุ่ม .radius และ .round ปุ่มชั้นเรียนเพื่อเพิ่มมุมโค้งมน:
ตัวอย่าง
<li> <ชนิดปุ่ม = " ปุ่ม" = "ปุ่ม" ชั้น> แอปเปิ้ล </ ปุ่ม> </ li>
<li> <ชนิดปุ่ม = " ปุ่ม" = "ปุ่ม" ชั้น> ซัมซุง </ ปุ่ม> </ li>
<li> <ชนิดปุ่ม = " ปุ่ม" = "ปุ่ม" ชั้น> โซนี่ </ ปุ่ม> </ li>
</ ul>
<ระดับ Ul = "ปุ่มกลุ่ม รอบ">
<li> <ชนิดปุ่ม = " ปุ่ม" = "ปุ่ม" ชั้น> แอปเปิ้ล </ ปุ่ม> </ li>
<li> <ชนิดปุ่ม = " ปุ่ม" = "ปุ่ม" ชั้น> ซัมซุง </ ปุ่ม> </ li>
<li> <ชนิดปุ่ม = " ปุ่ม" = "ปุ่ม" ชั้น> โซนี่ </ ปุ่ม> </ li>
</ ul>
ลอง»
กลุ่มปุ่มขยายเครื่องแบบ
.even-num ระดับความกว้างของปุ่มกลุ่มปุ่มและเครื่องแบบกระจายทั่วทั้งความกว้างขององค์ประกอบหลักของแท้ 100% ที่
NUM คือจำนวนของปุ่มในกลุ่มปุ่ม, 1-8:
ตัวอย่าง
<li> <ชนิดปุ่ม = " ปุ่ม" = "ปุ่ม" ชั้น> แอปเปิ้ล </ ปุ่ม> </ li>
<li> <ชนิดปุ่ม = " ปุ่ม" = "ปุ่ม" ชั้น> ซัมซุง </ ปุ่ม> </ li>
<li> <ชนิดปุ่ม = " ปุ่ม" = "ปุ่ม" ชั้น> โซนี่ </ ปุ่ม> </ li>
</ ul>
<ul class = "ปุ่มกลุ่ม แม้-5">
<li> <ชนิดปุ่ม = " ปุ่ม" = "ปุ่ม" ชั้น> แอปเปิ้ล </ ปุ่ม> </ li>
<li> <ชนิดปุ่ม = " ปุ่ม" = "ปุ่ม" ชั้น> ซัมซุง </ ปุ่ม> </ li>
<li> <ชนิดปุ่ม = " ปุ่ม" = "ปุ่ม" ชั้น> โซนี่ </ ปุ่ม> </ li>
<li> <ชนิดปุ่ม = " ปุ่ม" class = "ปุ่ม"> HTC </ ปุ่ม> </ li>
<li> <ชนิดปุ่ม = " ปุ่ม" = "ปุ่ม" ชั้น> หัวเว่ย </ ปุ่ม> </ li>
</ ul>
<ul class = "ปุ่มกลุ่ม แม้-8">
<li> <ชนิดปุ่ม = " ปุ่ม" = "ปุ่ม" ชั้น> เอ </ ปุ่ม> </ li>
<li> <ชนิดปุ่ม = " ปุ่ม" = "ปุ่ม" ชั้น> B </ ปุ่ม> </ li>
<li> <ชนิดปุ่ม = " ปุ่ม" = "ปุ่ม" ชั้น> C </ ปุ่ม> </ li>
<li> <ปุ่ม type = " ปุ่ม" class = "ปุ่ม"> D </ ปุ่ม> </ li>
<li> <ชนิดปุ่ม = " ปุ่ม" class = "ปุ่ม"> E </ ปุ่ม> </ li>
<li> <ชนิดปุ่ม = " ปุ่ม" = "ปุ่ม" ชั้น> F </ ปุ่ม> </ li>
<li> <ชนิดปุ่ม = " ปุ่ม" = "ปุ่ม" ชั้น> g </ ปุ่ม> </ li>
<li> <ชนิดปุ่ม = " ปุ่ม" = "ปุ่ม" ชั้น> H </ ปุ่ม> </ li>
</ ul>
ลอง»
ปุ่มแบบเลื่อนลง
ปุ่มเมนูแบบเลื่อนลงจะช่วยให้ผู้ใช้สามารถเลือกกำหนดค่าที่ดี
ตัวอย่าง
<A href = "#" ข้อมูล -dropdown = "id01" class = "button dropdown"> เลื่อนลงปุ่ม </ a>
<! - แบบเลื่อนลงที่เกิดขึ้นจริง ->
<ul id = "id01" ข้อมูล -dropdown เนื้อหา class = "F-แบบเลื่อนลง">
<li> <a href = "#"> 1 Link </ a> </ li>
<li> <a href = "#"> 2 Link </ a> </ li>
<li> <a href = "#"> เชื่อมโยง 3 </ a> </ li>
</ ul>
<! - เตรียมมูลนิธิ JS ->
<script>
$ (เอกสาร) .ready (ฟังก์ชั่น () {
$ (เอกสาร) .foundation ();
})
</ script>
ลอง»
ตัวอย่างของการวิเคราะห์
.dropdown ชั้นเรียนเพื่อสร้างปุ่มเมนูแบบเลื่อนลง
ใช้กับ data-dropdown=" id " ปุ่มแอตทริบิวต์หรือการเชื่อมโยงเพื่อเปิดเมนูแบบเลื่อนลง
ค่า ID ต้องตรงกับเนื้อหาเมนูแบบเลื่อนลง (id01)
ใน <ul> เพิ่มใน .f-dropdown ชั้นเรียนและ data-dropdown-content แอตทริบิวต์การสร้างเมนูแบบเลื่อนลงเนื้อหา
เริ่มต้นล่าสุดมูลนิธิ JS
ปุ่มสปลิต
นอกจากนี้เรายังสามารถสร้างเมนูแบบเลื่อนลงปุ่มแยกของ เพียง แต่คุณต้องเพิ่มปุ่ม .split การเรียนและการใช้องค์ประกอบช่วงในการสร้างปุ่มทิศทางลูกศร
ตัวอย่าง
<span ข้อมูลแบบเลื่อนลง = "id01 "> </ span>
</ ปุ่ม>
<ul id = "id01" ข้อมูล -dropdown เนื้อหา class = "F-แบบเลื่อนลง">
<li> <a href = "#"> 1 Link </ a> </ li>
<li> <a href = "#"> 2 Link </ a> </ li>
<li> <a href = "#"> เชื่อมโยง 3 </ a> </ li>
</ ul>
<! - เตรียมมูลนิธิ JS ->
<script>
$ (เอกสาร) .ready (ฟังก์ชั่น () {
$ (เอกสาร) .foundation ();
})
</ script>
ลอง»
 | เคล็ดลับ: ต่อมาในการกวดวิชานี้เราจะเรียนรู้เพิ่มเติมเกี่ยวกับเมนูแบบเลื่อนลงเป็นความรู้ |
|---|