Bootstrap จาก Twitter เป็นเฟรมเวิร์กส่วนหน้ายอดนิยมมากที่สุดในปัจจุบัน Bootstrap ขึ้นอยู่กับ HTML, CSS และ JavaScript มันง่ายและยืดหยุ่นทำให้การพัฒนาเว็บเร็วขึ้น
ประเด็นสำคัญสำหรับการเรียนรู้:
1. ส่วนประกอบไอคอนขนาดเล็ก
2. ส่วนประกอบเมนูแบบดึงลง
3. ส่วนประกอบกลุ่มปุ่ม
4. เมนูแบบเลื่อนลงสไตล์ปุ่ม
ในบทเรียนนี้เราจะเรียนรู้เกี่ยวกับฟังก์ชั่นองค์ประกอบสามอย่างของ bootstrap: ส่วนประกอบไอคอนขนาดเล็กส่วนประกอบเมนูแบบเลื่อนลงและส่วนประกอบปุ่มต่างๆ
หนึ่ง. ส่วนประกอบไอคอนขนาดเล็ก
Bootstrap ให้ไอคอนขนาดเล็กฟรี 263 รายการ (นับสองครั้ง) สำหรับรายละเอียดโปรดดูลิงค์ส่วนประกอบของเว็บไซต์ทางการของจีน:
http://v3.bootcss.com/components/#glyphicons
ไอคอนบางอย่างมีดังนี้:
คุณสามารถใช้แท็ก <i> หรือ <span> ที่จะใช้ดังนี้:
// ใช้ไอคอนขนาดเล็ก <i> </i> <span> </span> // คุณยังสามารถรวมปุ่มเข้ากับ <ปุ่ม> <span> </span> </pution> <button> <button> <pan> </span>
สอง. ส่วนประกอบเมนูแบบเลื่อนลง
เมนูแบบเลื่อนลงคือคลิกองค์ประกอบหรือปุ่มเพื่อเรียกรายการที่ซ่อนอยู่ที่จะแสดง
// รูปแบบพื้นฐาน <div> <button data-toggle = "dropdown"> เมนูแบบเลื่อนลง <span> </span> </ปุ่ม> <ul> <li> <a href = "#"> home </a> </li> <li> <a href = "#"> ข้อมูล </a> </li> <li> </a> </li> </ul> </div>
ปุ่มและเมนูจะต้องห่อในคอนเทนเนอร์. dropdown และเนื่องจากปุ่มองค์ประกอบที่คลิกต้อง data-toggle = "ดรอปดาวน์" จะต้องตั้งค่าให้มีประสิทธิภาพ สำหรับส่วนเมนูการตั้งค่าสามารถซ่อนและเพิ่มสไตล์คงที่โดยอัตโนมัติ ตั้งลูกศรให้ขึ้นหรือลง
// ตั้งค่าเป็น Trigger <div> // รายการเมนูอยู่ในแนวที่อยู่ทางขวาค่าเริ่มต้นคือ Dropdown-Menu-Left <ul> // ตั้งชื่อชื่อของเมนูอย่าเพิ่มไฮเปอร์ลิงก์ <li> การนำทางเว็บไซต์ </li> // ตั้งค่าบรรทัดการหารของเมนู <li> </li> // เมนูที่จะแสดง <div> โดยค่าเริ่มต้น
สาม. ส่วนประกอบกลุ่มปุ่ม
กลุ่มปุ่มเป็นเอฟเฟกต์ที่ไม่ซ้ำกันของการรวมปุ่มหลายปุ่มลงในคอนเทนเนอร์
// รูปแบบพื้นฐาน <div> <button type = "ปุ่ม"> ซ้าย </button> <button type = "ปุ่ม"> กลาง </ปุ่ม> <button type = "ปุ่ม"> ขวา </button> </div> // รวมปุ่มหลายปุ่มเพื่ออำนวยความสะดวกในการจัดการ <div> <div> type = "ปุ่ม"> </button> <button> <button type = "ปุ่ม"> </button> <button> <button type = "button"> </button> <button> <button type = "ปุ่ม"> </ button> <button> <button type = "ปุ่ม" <div> <button type = "ปุ่ม"> ซ้าย </ปุ่ม> <button type = "ปุ่ม"> กลาง </ปุ่ม> <ปุ่มประเภท = "ปุ่ม"> ขวา </button> <div> <buttondata-toggle = "dropdown"> เมนูแบบหล่นลง </pan> </pan> href = "#"> ข้อมูล </a> </li> <li> <a href = "#"> ผลิตภัณฑ์ </a> </li> <li> <a href = "#"> เกี่ยวกับ </a> </li></ul> </div> </div>
หมายเหตุ: สิ่งนี้ไม่ได้ถูกนำไปใช้ใน <div> ผ่านการวิเคราะห์ซอร์สโค้ดคุณรู้ว่ารังของตัวเองมีตำแหน่งดังนั้นคุณไม่จำเป็นต้องตั้งค่า และเพิ่มอีกหนึ่งมุมโค้งมนทางด้านขวา
// ตั้งค่ากลุ่มปุ่มจัดเรียงในแนวตั้ง <Div> // ตั้งค่ากลุ่มปุ่มจัดตำแหน่งที่ปลายทั้งสองใช้แท็ก <a> <a> <a> <a type = "ปุ่ม"> ซ้าย </a> <a type = "ปุ่ม"> กลาง </a> <a type = "ปุ่ม"> ขวา </a> </iv> // type = "ปุ่ม"> ซ้าย </button> </div> <div> <button type = "ปุ่ม"> ขวา </button> </div>
สี่. เมนูแบบเลื่อนลงสไตล์ปุ่ม
เมนูแบบเลื่อนลงนี้จริง ๆ แล้วเป็นจุดความรู้ที่สองยกเว้นว่านี่อยู่ในกลุ่มและไม่จำเป็นต้องประกาศคลาส = "ดรอปดาวน์"
// เมนูแบบเลื่อนลงปุ่ม <div> <button type = "button" data-toggle = "dropdown"> เมนูแบบเลื่อนลง <pan> </span> </ปุ่ม> <ul> <li> <a href = "#"> บ้าน </a> </li> <li> <a href = "#"> ข้อมูล </a> </li> href = "#"> เกี่ยวกับ </a> </li> </ul> </div> // ปุ่มแยกเมนูแบบเลื่อนลง <div> <button type = "ปุ่ม"> เมนูแบบดรอปดาวน์ </button> <button type = "ปุ่ม" data-toggle = "Dropdown"> <pan> </pan> href = "#"> ข้อมูล </a> </li> <li> <a href = "#"> ผลิตภัณฑ์ </a> </li> <li> <a href = "#"> เกี่ยวกับ </a> </li>
เนื้อหาด้านบนเป็นส่วนประกอบของปุ่มเมนูของส่วนประกอบ bootstrap ที่แนะนำโดยตัวแก้ไข ฉันหวังว่ามันจะเป็นประโยชน์กับทุกคน!