Bootstrap จาก Twitter เป็นเฟรมเวิร์กส่วนหน้ายอดนิยมมากที่สุดในปัจจุบัน Bootstrap ขึ้นอยู่กับ HTML, CSS และ JavaScript มันง่ายและยืดหยุ่นทำให้การพัฒนาเว็บเร็วขึ้น
ประเด็นสำคัญสำหรับการเรียนรู้:
1. กลุ่มเสริม
2. เครื่องมือตอบสนอง
ในบทเรียนนี้เราเรียนรู้เกี่ยวกับชั้นเรียนกลุ่มเสริมของ Bootstrap และเครื่องมือตอบสนองเป็นหลัก คลาสเสริมจัดเตรียมชุดของคลาสเพื่อช่วยในการออกแบบหน้ากลุ่มในขณะที่เครื่องมือที่ตอบสนองใช้การสืบค้นสื่อเพื่อแสดงหรือซ่อนเนื้อหาบางอย่าง
หนึ่ง. เสริม
Bootstrap มีรูปแบบกลุ่มเสริมขนาดเล็กในแง่ของเค้าโครงซึ่งใช้ในการตั้งค่าสีข้อความและสีพื้นหลังแสดงไอคอนปิด ฯลฯ
1. สีข้อความสถานการณ์
รายการสไตล์ชื่อชื่อคำอธิบายข้อความที่ทำด้วยข้อความสีเทาสีเทาหลักหลักสีน้ำเงินมวลชนประสบความสำเร็จความสำเร็จสีเขียวข้อความ info สีน้ำเงินเตือนข้อความสีเหลือง danger danger danger สีแดง // ฟอนต์ของโทนเสียงต่าง ๆ <p> วิดีโอการสอน bootstrap </p> <p> bootstrap tutorial </p> การสอนวิดีโอ </p> <p> การสอนวิดีโอ bootstrap </p> <p> การสอนวิดีโอ bootstrap </p> <p> tutorial วิดีโอ bootstrap </p> <p> tutorial วิดีโอ bootstrap </p>
2. สถานการณ์สีพื้นหลัง
รายการสไตล์ชื่อชื่อคำอธิบาย BG หลักหลัก BG-Success ความสำเร็จสีเขียว bg-info ข้อมูลสีน้ำเงิน BG-Warning คำเตือนสีเหลือง bg-danger อันตรายสีแดง // พื้นหลังของโทนเสียงต่าง ๆ <p> การสอนวิดีโอ bootstrap </p> <p> bootstrap tutorial </p> <p> การสอน </p> <p> การสอนวิดีโอ bootstrap </p> <p> การสอนวิดีโอ bootstrap </p> <p> การสอนวิดีโอ bootstrap </p>
3. ปิดปุ่ม
<button type = "ปุ่ม"> × </button>
4. สัญลักษณ์สามเหลี่ยม
<span> </span>
5. ลอยอย่างรวดเร็ว
<div> ซ้าย </div> <div> ขวา </div>
หมายเหตุ: การลอยนี้เป็นแบบลอยตัวจริง แต่มันถูกใช้! ที่สำคัญได้ปรับปรุงลำดับความสำคัญ
6. ระดับบล็อกอยู่กึ่งกลาง
<div> ศูนย์ </div>
หมายเหตุ: มันเป็นอัตรากำไรขั้นต้น: x auto; และจอแสดงผล: บล็อก; ถูกตั้งค่า
7. ทำความสะอาดลอย
<div> </div>
หมายเหตุ: DIV นี้สามารถวางไว้ที่ด้านหน้าของบล็อกลอยตัวที่ต้องทำความสะอาด
8. แสดงและซ่อน
<div> แสดง </div> <div> Hidden </div>
สอง. เครื่องมือตอบสนอง
เมื่อค้นหาสื่อบางครั้งเนื้อหาบางครั้งจำเป็นต้องแสดงและซ่อนเร้นสำหรับขนาดหน้าจอที่แตกต่างกัน คลาสเครื่องมือที่ตอบสนองได้จัดเตรียมโซลูชันนี้
// การเปิดใช้งานหน้าจอขนาดเล็กสุดยอด <div> bootstrap </div> // การเปิดใช้งานหน้าจอขนาดเล็ก Super Small Hide <div> Bootstrap </div>
หมายเหตุ: มีสามตัวแปรสำหรับเนื้อหาที่แสดงคือ: บล็อก, อินไลน์บล็อกและอินไลน์
ข้างต้นเป็นเนื้อหาที่เกี่ยวข้องของคลาส Bootstrap Component Auxiliary Group และเครื่องมือตอบสนองที่บรรณาธิการแนะนำให้คุณ ฉันหวังว่ามันจะเป็นประโยชน์กับคุณ!