Bootstrap จาก Twitter เป็นเฟรมเวิร์กส่วนหน้ายอดนิยมมากที่สุดในปัจจุบัน Bootstrap ขึ้นอยู่กับ HTML, CSS และ JavaScript มันง่ายและยืดหยุ่นทำให้การพัฒนาเว็บเร็วขึ้น
ประเด็นสำคัญสำหรับการเรียนรู้:
1. ตาราง
2. ปุ่ม
ในบทเรียนนี้เราเรียนรู้เกี่ยวกับฟังก์ชั่นตารางและปุ่ม bootstrap และแสดงเอฟเฟกต์ที่หลากหลายผ่านคำจำกัดความ CSS ในตัว
หนึ่ง. แผ่น
Bootstrap จัดเตรียมรูปแบบตารางที่หลากหลายสำหรับนักพัฒนาที่จะใช้
1. รูปแบบพื้นฐาน
// ใช้รูปแบบตารางพื้นฐาน <plemes>
หมายเหตุ: เราสามารถดู CSS ที่เกี่ยวข้องผ่าน Firebug
2. รูปแบบลาย
// ให้บรรทัดใน <tbody> สร้างหนึ่งบรรทัดหลังจากอื่นและเอฟเฟกต์พื้นหลังขาวดำ <table>
หมายเหตุ: เอฟเฟกต์ตารางจะต้องขึ้นอยู่กับรูปแบบพื้นฐานตาราง
3. ตารางที่มีพรมแดน
// เพิ่มเส้นขอบลงในตาราง <bable>
4. โฮเวอร์เมาส์
// ปล่อยให้ตารางภายใต้ <tbody> วางเมาส์เพื่อให้ได้เอฟเฟกต์พื้นหลัง <bound>
5. คลาสสถานะ
// รูปแบบพื้นหลังของแต่ละบรรทัดสามารถตั้งค่าแยกต่างหาก <tr>
หมายเหตุ: มีห้าสไตล์ให้เลือก
คำอธิบายสไตล์:
เมาส์ที่ใช้งานอยู่เหนือแถวหรือเซลล์
สัญญาณความสำเร็จที่ประสบความสำเร็จหรือการกระทำในเชิงบวก
ข้อมูลทำเครื่องหมายข้อมูลหรือการกระทำตามปกติ
คำเตือนโลโก้คำเตือนหรือความสนใจของผู้ใช้เป็นสิ่งจำเป็น
อันตรายบ่งบอกถึงการกระทำที่เป็นอันตรายหรืออาจเป็นไปได้ในเชิงลบ
6. ซ่อนบรรทัด
// ซ่อนบรรทัด <tr>
7. ตารางตอบสนอง
// มีรูปแบบการตอบสนองสำหรับองค์ประกอบหลักของตารางน้อยกว่า 768px และเส้นขอบจะปรากฏ <body>
สอง. ปุ่ม
Bootstrap มีปุ่มที่หลากหลายสำหรับนักพัฒนาที่จะใช้
1. ป้ายกำกับหรือองค์ประกอบที่สามารถใช้เป็นปุ่ม
// แปลงเป็นปุ่มปกติ <a href = "###"> ลิงก์ </a> <button> ปุ่ม </pution> <อินพุต type = "button" value = "input">>
มีสามสิ่งที่ควรทราบ:
(1). สิ่งที่ควรทราบเกี่ยวกับส่วนประกอบ
แม้ว่าคลาสปุ่มสามารถนำไปใช้กับองค์ประกอบ <a> และ <aution> แต่ส่วนประกอบแถบการนำทางและการนำทางรองรับองค์ประกอบ <button> เท่านั้น
(2). สิ่งที่ควรทราบเมื่อใช้ลิงก์เป็นปุ่ม
หากองค์ประกอบ <a> ถูกใช้เป็นปุ่ม - และใช้เพื่อทริกเกอร์ฟังก์ชั่นบางอย่างในหน้าปัจจุบัน - แทนที่จะเชื่อมโยงหน้าอื่น ๆ หรือเชื่อมโยงส่วนอื่น ๆ ของหน้าปัจจุบันให้แน่ใจว่าได้ตั้งค่าคุณสมบัติ = "ปุ่ม" สำหรับมัน
(3). จอแสดงผลข้ามเบราว์เซอร์
แนวทางปฏิบัติที่ดีที่สุดที่เราสรุปคือขอแนะนำอย่างยิ่งให้ใช้องค์ประกอบ <button> เมื่อใดก็ตามที่เป็นไปได้เพื่อให้ได้เอฟเฟกต์การจับคู่การจับคู่ในแต่ละเบราว์เซอร์
นอกจากนี้เรายังค้นพบข้อผิดพลาดบนเบราว์เซอร์ใน Firefox <30 ซึ่งแสดงให้เห็นว่ามันป้องกันไม่ให้เราตั้งค่าแอตทริบิวต์ความสูงบรรทัดสำหรับปุ่มที่สร้างขึ้นตามองค์ประกอบ <put> ซึ่งทำให้เบราว์เซอร์ Firefox ไม่สอดคล้องกับปุ่มอื่น ๆ อย่างเต็มที่
2. สไตล์ที่กำหนดไว้ล่วงหน้า
// ข้อมูลทั่วไป <putton> ปุ่ม </button>
คำอธิบายสไตล์
สไตล์เริ่มต้น BTN-DEFAULT
สไตล์ BTN-Success
รูปแบบข้อมูลทั่วไป BTN-INFO
รูปแบบการเตือน BTN-Warning
สไตล์อันตราย Btn-Danger
สไตล์การตั้งค่า BTN-Primary
สไตล์ลิงค์ btn-link
3. ขนาด
// ขนาดจากขนาดใหญ่ถึงเล็ก <ปุ่ม> ปุ่ม </tonple> <button> ปุ่ม </putton> <button> ปุ่ม </button> <button> ปุ่ม </button> ปุ่ม </button>
4. ปุ่มระดับบล็อก
// block level line break </ button> button </ button> <button> ปุ่ม </button>
5. สถานะการเปิดใช้งาน
// เปิดใช้งานปุ่ม <ปุ่ม> ปุ่ม </button>
6. ปิดการใช้งานสถานะ
// ปิดการใช้งานปุ่ม <ปุ่ม> ปุ่ม </button>
ด้านบนเป็นฟังก์ชัน Bootstrap Table and Button ที่แนะนำโดยตัวแก้ไข ฉันหวังว่ามันจะเป็นประโยชน์กับทุกคน!