Bootstrap จาก Twitter เป็นเฟรมเวิร์กส่วนหน้ายอดนิยมมากที่สุดในปัจจุบัน Bootstrap ขึ้นอยู่กับ HTML, CSS และ JavaScript มันง่ายและยืดหยุ่นทำให้การพัฒนาเว็บเร็วขึ้น
ประเด็นสำคัญสำหรับการเรียนรู้:
1. องค์ประกอบพา ธ
2. ส่วนประกอบการแบ่งหน้า
3. ส่วนประกอบแท็ก
4. ส่วนประกอบตรา
ในบทเรียนนี้เราจะเรียนรู้เกี่ยวกับฟังก์ชั่นองค์ประกอบสี่อย่างของ bootstrap: ส่วนประกอบพา ธ , ส่วนประกอบเพจ, ส่วนประกอบฉลากและส่วนประกอบป้าย
หนึ่ง. ส่วนประกอบเส้นทาง
ส่วนประกอบพา ธ เรียกอีกอย่างว่าการนำทาง breadcrumb
// การนำทาง breadcrumb <ol> <li> <a href = "#"> home </a> </li> <li> <a href = "#"> รายการผลิตภัณฑ์ </a> </li> <li> เสื้อสเวตเตอร์แคชเมียร์รุ่นเกาหลี 2015 </li> </ol>
สอง. ส่วนประกอบการปนเปื้อน
ส่วนประกอบการเพจสามารถจัดเตรียมฟังก์ชั่นพร้อมหน้าจอแสดงผล
// การแบ่งหน้าเริ่มต้น <ul> <li> <a href = "#"> « </a> </li> <li> <a href = "#"> 1 </a> </li> <li> <a href = "#"> 2 </a> </li> <li> href = "#"> 4 </a> </li> <li> <a href = "#"> 5 </a> </li> </ul> // การตั้งค่าและปิดการใช้งาน <li> <a href = "#"> 1 </a> </li> เอฟเฟกต์ <ul> <li> <a href = "#"> 1 </a> </li> </li> // ตั้งค่าขนาดสี่ lg, ค่าเริ่มต้น, sm และ xs <ul> // การเปิดหน้าเอฟเฟกต์ <ul> <li> <a href = "#"> หน้าก่อนหน้า </a> </li> <li> <ul> <li> <a href = "#"> หน้าก่อนหน้า </a> </li> </ul> // ปิดการใช้งานรายการเปิดหน้า <li> <a href = "#"> หน้าก่อนหน้า </a> </li>
สาม. ฉลาก
// แท็กด้วยแท็ก <h3> แท็ก <span> ใหม่ </span> </h3> // แท็กของโทนเสียงที่แตกต่างกัน <h3> แท็ก <span> ใหม่ </span> </h3> <h3> แท็ก <span> </h3> </h3> <h3> <h3> <h3> <span> ใหม่ </span> </h3>
สี่. ตราสัญลักษณ์
// UNREAD ข้อมูลปริมาณข้อมูล <a href = "#"> ข้อมูล <span> 10 </span> </a> // ใช้ตราสัญลักษณ์ในปุ่ม <ปุ่ม> ส่ง <span> 3 </span> </button> // สถานะการเปิดใช้งานจะปรับเสียงโดยอัตโนมัติ <ul> <li> <a href = "#" href = "#"> ข้อมูล </a> </li></ul>
ด้านบนเป็นแท็ก Path Pagination และส่วนประกอบป้ายของส่วนประกอบ bootstrap ที่แนะนำโดยตัวแก้ไข ฉันหวังว่ามันจะเป็นประโยชน์กับทุกคน!