ในฐานะปลั๊กอินส่วนหน้าที่รองรับเค้าโครงที่ตอบสนองได้ Bootstrap มีบทบาทสำคัญ ไม่ว่าคุณจะเรียกดูเว็บบนโทรศัพท์แท็บเล็ตหรือพีซีของคุณคุณสามารถได้ผลลัพธ์ที่ดี ทั้งหมดนี้นำมาให้เราโดย Bootstrap!
วันนี้ส่วนใหญ่ฉันจะพูดคุยเกี่ยวกับรูปแบบของหน้า นี่คือสิ่งพื้นฐานที่สุด เมื่อเราออกแบบเว็บไซต์เราควรออกแบบหน้ามาตรฐานระดับโลกและรวมเป็นหนึ่งเดียว เราเรียกหน้าเค้าโครงหน้าแบบนี้และสิ่งที่สะท้อนอยู่ในหน้าเว็บคือองค์ประกอบเลย์เอาต์ซึ่งแน่นอนว่าเป็นสิ่งที่ขาดไม่ได้ใน bootstrap
เลย์เอาต์ของ Bootstrap เป็นระบบแรสเตอร์นั่นคือประกอบด้วยแถวและคอลัมน์ เมื่อใช้งานจะต้องห่อคอนเทนเนอร์. container สำหรับเนื้อหาหน้าและระบบแรสเตอร์
A.container Class ใช้สำหรับคอนเทนเนอร์ที่มีความกว้างคงที่และสนับสนุนเค้าโครงที่ตอบสนองได้
<div> ... </div> คลาส. container-fluid ใช้สำหรับภาชนะบรรจุที่มีความกว้าง 100% ครอบครองวิวพอร์ตทั้งหมด <div> ... </div>
ใน bootstrap แถวและคอลัมน์ จะแสดงด้วยแถวและ Col และมีคอลัมน์มากถึง 12 หน่วยในแถว COL-MD-1 แสดงถึงความกว้างของหนึ่งหน่วยและ COL-MD-7 แสดงถึงความกว้างของเจ็ดหน่วย พวกเขาจะถูกรวมเข้าด้วยกันเพื่อสูงสุด 12 หน่วย
<div> <div> .COL-MD-1 </div> <div> .COL-MD-1 </div> <div> .COL-MD-1 </div> <div> .COL-MD-1 </div> <div> V> <div> .COL-MD-1 </div> <div> .COL-MD-1 </div> <div> .COL-MD-1 </div> <div> .COL-MD-1 </div> <div> .COL-MD-1 </div> <div> div> .col-md-1 </div> <div> .col-md-1 </div> <div> .col-md-1 </div> </div> <div> <div> .COL-MD-8 </div> <div> > </div> <div> <div> .COL-MD-4 </div> </div> <div> <div> .COL-MD-4 </div> <div> .COL-MD-4 </div> <div>
บรรทัดที่สองและสามแสดงเอฟเฟกต์ที่คล้ายกัน
คอลัมน์ซ้อนกันสามคอลัมน์สามารถมีคอลัมน์ในคอลัมน์ เราจำเป็นต้องเปลี่ยน MD เป็น SM ในการทำรังนี้
<div> <div> ระดับ 1: .col-SM-9 <div> <div> ระดับ 2: .COL-XS-8 .COL-SM-6 </div> <div> ระดับ 2: .COL-XS-4 .COL-SM-6 </div> </div> </div>
เอฟเฟกต์คล้ายกับนี้
ด้านบนเป็นความรู้พื้นฐานของเค้าโครงหน้า bootstrap แนะนำให้คุณรู้จักโดยบรรณาธิการ ฉันหวังว่ามันจะเป็นประโยชน์กับคุณ หากคุณมีคำถามใด ๆ โปรดฝากข้อความถึงฉันและบรรณาธิการจะตอบกลับคุณทันเวลา ขอบคุณมากสำหรับการสนับสนุนเว็บไซต์ Wulin.com!