Bootstrap จาก Twitter เป็นเฟรมเวิร์กส่วนหน้ายอดนิยมมากที่สุดในปัจจุบัน Bootstrap ขึ้นอยู่กับ HTML, CSS และ JavaScript มันง่ายและยืดหยุ่นทำให้การพัฒนาเว็บเร็วขึ้น ให้ฉันบอกประเด็นสำคัญของการเรียนรู้
ประเด็นสำคัญสำหรับการเรียนรู้:
1. ส่วนประกอบหน้าจอยักษ์
2. ส่วนประกอบส่วนประกอบ
3. องค์ประกอบขนาดย่อ
4. ส่วนประกอบกล่องคำเตือน
ในบทเรียนนี้เราจะเรียนรู้เกี่ยวกับฟังก์ชั่นองค์ประกอบสี่อย่างของ Bootstrap: ส่วนประกอบหน้าจอยักษ์ส่วนประกอบส่วนประกอบส่วนประกอบรูปทรงภาพย่อและส่วนประกอบกล่องเตือน
หนึ่ง. ส่วนประกอบหน้าจอยักษ์
ส่วนประกอบหน้าจอยักษ์ส่วนใหญ่เป็นพื้นที่สำคัญของเว็บไซต์
// ในช่วงคงที่มีมุมโค้งมน <div> <div> <h2> ชื่อเว็บไซต์ </h2> <p> นี่คือเว็บไซต์การเรียนรู้! </p> <p> <a href = "#"> เนื้อหาเพิ่มเติม </a> </p> </div> </div> // เต็มหน้าจอเต็มหน้าจอไม่มีมุมโค้งมน <div> <h2> ชื่อเว็บไซต์ </h2> <p> นี่คือเว็บไซต์การเรียนรู้! </p> <p> <a href = "#"> เนื้อหาเพิ่มเติม </a> </p> </div> </div>
สอง. ส่วนประกอบส่วนหัว
// เพิ่มพื้นที่ <div> <h1> ชื่อใหญ่ <small> คำบรรยาย </small> </h1> </div>
สาม. ส่วนประกอบรูปขนาดย่อ
// รูปขนาดย่อถูกรวมเข้ากับการตอบสนอง <div> <div> <img src = "img/pic.png"> </div> <div> <div> <img src = "img/pic.png"> </div> </div> src = "img/pic.png"> </div> </div> </div> // เนื้อหาที่กำหนดเอง <div> <div> <div> <img src = "img/pic.png"> <div> <h3> สองภาพและข้อความ </h3> <p> href = "#"> ป้อน </a> </p> </div> </div> <div> <div> <img src = "img/pic.png"> <div> <h3> รูปภาพและข้อความ </h3> <p> นี่คือภาพย่อที่มีรูปภาพและข้อความ </p> < href = "#"> ป้อน </a> </p> </div> </div> <div> <div> <img src = "img/pic.png"> <div> <h3> รูปภาพและข้อความ </h3> <p> นี่คือภาพย่อที่มีรูปภาพและข้อความ </p> </div> src = "img/pic.png"> <div> <h3> รูปภาพและข้อความ </h3> <p> นี่คือภาพขนาดย่อที่มีรูปภาพและข้อความ </p> <p> <a href = "#"> ป้อน </a> </p> </div> </div> <div> <div> <img </a> </p> </div> </div> </iv> <iMg> <img </a> </p> </div> </div> g </a> </p> </div> <div> <div> <img </a> </p> </div> </div> <div> <div> <img </a> </p> </div> <div> <div> <img </a > <div> <div> <img </a> </p> </div> <div> <div> <img </a> </p> </div> </div> </div> <div> <img </a </p> </div> </div> <div> <div> <img </a> </p> </div> <div> <div> <img </a src = "img/pic.png"> <div> <h3> สไตล์และข้อความ </h3> <p> นี่คือภาพขนาดย่อที่มีรูปภาพและข้อความ </p> <p> <a href = "#"> ป้อน </a> </p> </div>
สี่. ส่วนประกอบกล่องคำเตือน
ส่วนประกอบกล่องคำเตือนเป็นชุดของข้อความที่กำหนดไว้ล่วงหน้า
// กล่องคำเตือนพื้นฐาน <div> bootstrap </div> <div> bootstrap </div> <div> bootstrap </div> <div> bootstrap </div> <div> bootstrap </div> // กล่องเตือนด้วย <div> bootstrap <button type = HyperLink <div> bootstrap โปรดไปที่เว็บไซต์ทางการ <a href = "#"> ดาวน์โหลด </a> </div>
เนื้อหาด้านบนเป็นส่วนประกอบรูปขนาดย่อและกล่องเตือนของส่วนหัวหน้าจอขนาดใหญ่และส่วนประกอบกล่องเตือนที่ตัวแก้ไขแนะนำให้คุณรู้จัก ฉันหวังว่ามันจะเป็นประโยชน์กับทุกคน!