Bootstrap 3 เป็นมือถือเป็นครั้งแรกในแง่นี้รหัส bootstrap เริ่มต้นด้วยอุปกรณ์หน้าจอขนาดเล็ก (เช่นอุปกรณ์มือถือแท็บเล็ต) จากนั้นขยายไปยังส่วนประกอบและกริดบนอุปกรณ์หน้าจอขนาดใหญ่ (เช่นแล็ปท็อปเดสก์ท็อป)
1. กลยุทธ์ลำดับความสำคัญของอุปกรณ์มือถือ
1. เนื้อหา: การตัดสินใจว่าอะไรคือสิ่งที่สำคัญที่สุด
2. เค้าโครง
การออกแบบพิเศษของความกว้างที่เล็กกว่า
CSS พื้นฐานเป็นที่ต้องการสำหรับอุปกรณ์มือถือและการสืบค้นสื่อมีการกำหนดเป้าหมายที่แท็บเล็ตและคอมพิวเตอร์เดสก์ท็อป
3. ค่อยๆปรับปรุง
เพิ่มองค์ประกอบเมื่อขนาดหน้าจอเพิ่มขึ้น
เมื่อขนาดหน้าจอหรือวิวพอร์ตเพิ่มขึ้นระบบจะถูกแบ่งออกเป็นคอลัมน์สูงสุด 12 คอลัมน์โดยอัตโนมัติ ดังที่แสดงในรูปด้านล่าง:
2. หลักการทำงานของระบบกริด bootstrap (ระบบกริด)
ระบบกริดสร้างเค้าโครงหน้าผ่านชุดของแถวและคอลัมน์ที่มีเนื้อหา นี่คือรายการของวิธีการทำงานของระบบตาข่าย bootstrap:
1. ต้องวางแถวในคลาส. container เพื่อให้ได้การจัดตำแหน่งและการขยายที่เหมาะสม
2. ใช้แถวเพื่อสร้างกลุ่มแนวนอนของคอลัมน์
3. เนื้อหาควรวางไว้ในคอลัมน์และมีเพียงคอลัมน์เท่านั้นที่สามารถเป็นองค์ประกอบของเด็กโดยตรงของแถว
4. คลาสกริดที่กำหนดไว้ล่วงหน้าเช่น. Row และ .Col-XS-4 สามารถใช้เพื่อสร้างเลย์เอาต์กริดได้อย่างรวดเร็ว คลาสไฮบริดน้อยกว่าสามารถใช้สำหรับเลย์เอาต์ความหมายมากขึ้น
5. คอลัมน์สร้างช่องว่างระหว่างเนื้อหาคอลัมน์ผ่านช่องว่างภายใน อัตรากำไรขั้นต้นภายในนี้เป็นลบโดยระยะขอบบน. Rows ซึ่งบ่งบอกถึงการชดเชยแถวของคอลัมน์ที่ 6, คอลัมน์แรกและคอลัมน์สุดท้าย
7. ระบบกริดถูกสร้างขึ้นโดยการระบุคอลัมน์ที่มีอยู่สิบสองคอลัมน์ที่คุณต้องการขยาย ตัวอย่างเช่นในการสร้างคอลัมน์ที่เท่ากันสามคอลัมน์ให้ใช้. col-xs-4 สาม
3. การสอบถามสื่อ
การสืบค้นสื่อเป็น "กฎ CSS แบบมีเงื่อนไข" ที่เก๋ไก๋มาก มันใช้กับ CS บางตัวตามเงื่อนไขที่กำหนดไว้เท่านั้น หากเป็นไปตามเงื่อนไขเหล่านั้นรูปแบบที่สอดคล้องกันจะถูกนำไปใช้
การสืบค้นสื่อใน Bootstrap ช่วยให้คุณย้ายแสดงและซ่อนเนื้อหาตามขนาดของวิวพอร์ต แบบสอบถามสื่อต่อไปนี้ใช้ในไฟล์ที่น้อยกว่าเพื่อสร้างขีด จำกัด เบรกพอยต์ที่สำคัญในระบบ Bootstrap Grid
/* อุปกรณ์พิเศษพิเศษ (โทรศัพท์มือถือน้อยกว่า 768px)* //* ไม่มีการสืบค้นสื่อตามค่าเริ่มต้นใน bootstrap*//* อุปกรณ์ขนาดเล็ก (แท็บเล็ตเริ่มต้นจาก 768px)*/ @สื่อ (min-width: @screen-sm-min) {... อุปกรณ์ (เดสก์ท็อปขนาดใหญ่เริ่มต้นจาก 1200px) */ @Media (Min-Width: @Screen-Lg-Min) {... }บางครั้งเรารวมถึงความกว้างสูงสุดในรหัสการสืบค้นสื่อของเรา จำกัด ผลกระทบของ CSS กับขนาดหน้าจอที่น้อยกว่า
@media (max-width: @screen-xs-max) {... } @media (min-width: @screen-sm-min) และ (max-width: @screen-sm-max) {... } @media (min-width: @screen-md-min)มีสองส่วนสำหรับการสืบค้นสื่อก่อนอื่นข้อกำหนดของอุปกรณ์และจากนั้นกฎขนาด ในกรณีข้างต้นมีการตั้งค่ากฎต่อไปนี้:
มาดูรหัสบรรทัดต่อไปนี้:
@media (min-width: @screen-sm-min) และ (Max-Width: @screen-sm-max) {... }
สำหรับอุปกรณ์ทั้งหมดที่มีความกว้างขั้นต่ำ: @Screen-SM-MIN การประมวลผลบางอย่างจะเสร็จสิ้นหากความกว้างของหน้าจอมีขนาดเล็กกว่า @Screen-SM-Max
4. ตัวเลือกกริด
ตารางต่อไปนี้สรุปวิธีการทำงานของระบบตาข่าย bootstrap ในหลาย ๆ อุปกรณ์:
5. โครงสร้างกริดพื้นฐาน
นี่คือโครงสร้างพื้นฐานของตาราง bootstrap:
<div> <div> <div> </div> <div> </div> </div> <div> ... </div> </div> <div> ....
นี่คือตัวอย่างรหัสเฉพาะ:
<div> <h1> สวัสดีโลก! </h1> <div> <!-โทรศัพท์มือถืออุปกรณ์ขนาดเล็ก (<768px)-> <div style = "พื้นหลัง: #f00"> 1 </div> <div style = "พื้นหลัง: #b2b0b0"> 2 </div> style = "พื้นหลัง: #4CFF00"> 5 </div> <div style = "พื้นหลัง: #0ff"> 6 </div> <div style = "พื้นหลัง: #0094ff"> 7 </div> <div style = "พื้นหลัง: #0094ff"> 7 </div> style = "พื้นหลัง: #ff006e"> 10 </div> <div style = "พื้นหลัง: #ac5050"> 11 </div> <div style = "พื้นหลัง: #54bd4f"> 12 </div> </div> <div> <!-แท็บเล็ตอุปกรณ์ขนาดเล็ก (≥768px) #ffd800 "> 1 </div> <div style =" พื้นหลัง: #ac5050 "> 1 </div> </div> <div> <!-คอมพิวเตอร์เดสก์ท็อปขนาดกลาง (≥992px)-> <div style =" พื้นหลัง: #ac5050 "> 1 </div> (≥1200px) -> <div style = "พื้นหลัง: #ac5050"> 1 </div> <div style = "พื้นหลัง: #54bd4f"> 1 </div> </div> </div> </div>
6. คอลัมน์ออฟเซ็ต
ออฟเซ็ตเป็นคุณสมบัติที่มีประโยชน์สำหรับเลย์เอาต์มืออาชีพมากขึ้น พวกเขาสามารถใช้เพื่อสร้างพื้นที่มากขึ้นสำหรับคอลัมน์ ตัวอย่างเช่นคลาส. col-xs =* ไม่รองรับการชดเชย แต่พวกเขาสามารถทำได้โดยใช้เซลล์เปล่า
หากต้องการใช้ออฟเซ็ตบนจอภาพหน้าจอขนาดใหญ่ให้ใช้คลาส. col-md-offset-* คลาสเหล่านี้จะเพิ่มระยะขอบซ้ายของคอลัมน์โดยคอลัมน์ * ซึ่งช่วง * ช่วงตั้งแต่ 1 ถึง 11
ในตัวอย่างด้านล่างเรามี <div> .. </div> และเราจะใช้คลาส. -Col-MD-OFFSET-3 เพื่อเป็นศูนย์กลาง div นี้
<div> <div> <div style = "พื้นหลังสี: #dedef8;"> <p> คอลัมน์ออฟเซ็ตทดสอบ --- 3 คอลัมน์ถูกชดเชยไปทางขวาที่นี่ </p> </div> </div> <div> <div style = "พื้นหลัง: #f00"> 1 </div> <div style = " style = "พื้นหลัง: #ffd800"> 4 </div> <div style = "พื้นหลัง: #4cff00"> 5 </div> <div style = "พื้นหลัง: #0ff"> 6 </div> <div style = "พื้นหลัง: #0094ff"> 7 </div> <div style = " style = "พื้นหลัง: #ff006e"> 10 </div> <div style = "พื้นหลัง: #ac5050"> 11 </div> <div style = "พื้นหลัง: #54bd4f"> 12 </div> </div> </div> </div>
ผลการแสดงผล:
7. คอลัมน์ซ้อนกัน
หากต้องการทำรังกริดเริ่มต้นในเนื้อหาให้เพิ่ม. Row ใหม่และเพิ่มชุดคอลัมน์. col-MD-* ภายในคอลัมน์. col-MD-* ที่มีอยู่ แถวที่ซ้อนกันควรมีชุดคอลัมน์และจำนวนคอลัมน์ในชุดคอลัมน์นี้ต้องไม่เกิน 12 (ที่จริงแล้วไม่มีข้อกำหนดที่คุณต้องครอบครอง 12 คอลัมน์)
ในตัวอย่างต่อไปนี้เลย์เอาต์มีสองคอลัมน์และคอลัมน์ที่สองแบ่งออกเป็นสองแถวและสี่กล่อง
<div> <div> <div style = "พื้นหลัง: #b2b0b0"> คอลัมน์แรก < /div> <div style = "พื้นหลัง: #dedef8"> คอลัมน์ที่สอง-มีสี่ divs ซ้อนกันในนั้น <div> <div style = "พื้นหลัง: #0094ff"> </div> <div> <div style = "พื้นหลัง: #ff00dc"> ฉันเป็นเนื้อหาสาม <br/> <br/> <br/> </div> <div style = "พื้นหลัง: #ff006e"> ฉันเป็นเนื้อหาสี่ </div> </div> </div>
ผลการแสดงผล:
8. การเรียงคอลัมน์
คุณสมบัติที่สมบูรณ์แบบอีกอย่างหนึ่งของระบบตาข่าย bootstrap คือคุณสามารถเขียนคอลัมน์ได้อย่างง่ายดายในลำดับหนึ่งจากนั้นแสดงในที่อื่น
คุณสามารถเปลี่ยนลำดับของคอลัมน์กริดในตัวได้อย่างง่ายดายด้วย. col-md-push-* และ. col-md-pull-* คลาสโดยที่* มีตั้งแต่ 1 ถึง 11
ในตัวอย่างด้านล่างเรามีเลย์เอาต์คอลัมน์สองคอลัมน์คอลัมน์ด้านซ้ายแคบเป็นแถบด้านข้าง เราจะใช้. col-md-push-* และ. col-md-pull-* คลาสเพื่อแลกเปลี่ยนลำดับของสองคอลัมน์
<div> <div> <div style = "พื้นหลัง: #ff00dc"> ซ้าย </div> <div style = "พื้นหลัง: #ff006e"> ขวา </div> </div> </div>
ผลการแสดงผล:
หากคุณยังต้องการศึกษาในเชิงลึกคุณสามารถคลิกที่นี่เพื่อศึกษาและแนบ 3 หัวข้อที่น่าตื่นเต้นให้คุณ:
การสอนการเรียนรู้ bootstrap
การสอนการใช้งาน Bootstrap
การสอนการใช้งานปลั๊กอิน bootstrap
ข้างต้นเป็นเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการเรียนรู้ของทุกคนและฉันหวังว่าทุกคนจะสนับสนุน wulin.com มากขึ้น