1. บทนำ
Bootstrap มีระบบกริดสตรีมมิ่งที่ตอบสนองต่อมือถือเป็นครั้งแรก เมื่ออุปกรณ์หน้าจอหรือขนาดวิวพอร์ตเพิ่มขึ้น ระบบจะถูกแบ่งออกเป็นคอลัมน์สูงสุด 12 คอลัมน์โดยอัตโนมัติ มันมีคลาสที่กำหนดไว้ล่วงหน้าที่ใช้งานง่ายและผสมที่ทรงพลังสำหรับการสร้างเลย์เอาต์ความหมายมากขึ้น
2. ตัวเลือกแรสเตอร์
bootstrap3.x ใช้สี่ตัวเลือกกริดเพื่อสร้างระบบกริด การแนะนำตัวเลือกทั้งสี่นี้ในเว็บไซต์อย่างเป็นทางการมีดังนี้ หลายคนไม่เข้าใจ ที่นี่ฉันจะอธิบายความแตกต่างระหว่างตัวเลือกสี่กริดโดยละเอียด ในความเป็นจริงมีเพียงหนึ่งในความแตกต่างคือพวกเขาเหมาะสำหรับอุปกรณ์หน้าจอที่มีขนาดแตกต่างกัน มาดูรายการคำนำหน้าคลาส มาตั้งชื่อตัวเลือกสี่กริดเหล่านี้สำหรับคำนำหน้า พวกเขาคือ COL-XS, COL-SM, COL-MD และ COL-LG ผู้ที่เข้าใจภาษาอังกฤษจะรู้ว่า LG เป็นตัวย่อของขนาดใหญ่ MD เป็นตัวย่อของกลาง SM คือตัวย่อของขนาดเล็กและ XS เป็นตัวย่อของ *** การตั้งชื่อนี้สะท้อนให้เห็นถึงความกว้างของหน้าจอที่แตกต่างกันซึ่งคลาสเหล่านี้ปรับให้เข้ากับ ด้านล่างเราแนะนำลักษณะของชั้นเรียนเหล่านี้
ตารางต่อไปนี้ช่วยให้คุณเห็นรายละเอียดว่าระบบแรสเตอร์ของ Bootstrap ทำงานบนอุปกรณ์หลายหน้าจอได้อย่างไร
3. คอลัมน์ชดเชย
ใช้. col-md-offset-* เพื่อชดเชยคอลัมน์ทางด้านขวา คลาสเหล่านี้เพิ่มคอลัมน์ทั้งหมดไปยังขอบด้านซ้ายของคอลัมน์โดยใช้ตัวเลือก * ตัวอย่างเช่น .COL-MD-OFFSET-4 เปลี่ยน .COL-MD-4 ไปทางขวาโดย 4 คอลัมน์ในความกว้าง
4. คอลัมน์ซ้อนกัน
ในการทำรังนกโดยใช้ rasters ในตัวสามารถทำได้โดยการเพิ่มคอลัมน์. ROW ใหม่และชุดของคอลัมน์. col-MD-* ลงในคอลัมน์. col-md-* ที่มีอยู่แล้ว คอลัมน์ที่มีอยู่ในแถวซ้อนกันควรเพิ่มมากถึง 12
5. การเรียงคอลัมน์
ลำดับของคอลัมน์สามารถเปลี่ยนแปลงได้อย่างง่ายดายโดยใช้. col-md-push-* และ. col-md-pull-*
กรณี
<%@ page language = "java" pageencoding = "utf-8"%> <%path String = request.getContextPath ();%> <! Doctype html> <html lang = "zh-cn"> <head> http-equiv = "content-type" content = "text /html; charset = utf-8" /> <meta http-equiv = "เนื้อหาภาษา" เนื้อหา "เนื้อหา =" zh-cn " /> <meta name =" ผู้เขียน "content =" [email protected] " /> จำกัด " /> <meta http-equiv = "pragma" content = "no-cache"> <meta http-equiv = "cache-control" content = "no-cache"> <meta http-equiv = "expires" content = "0"> <meta http-equiv = "คำสำคัญ" http-equiv = "คำอธิบาย" content = "นี่คือหน้าของฉัน"> <jsp: รวม page = "/demo/base/js_bootstrap.jsp"/> <style type = "text/css">. show-grid [class ^= "col-"] {padding-top: 10px; RGBA (86, 61, 124, .15); ชายแดน: 1px Solid RGBA (86, 61, 124, .2);} </style> <script type = "text/javascript"> $ (function () {}); <div> <div> .col-lg-8 </div> <div> .col-lg-4 </div> </div> <br/> <b> col-md-*การใช้งาน </b> <div> <div> .COL-MD-1 </div> <div> .COL-MD-1 </div> <div> .COL-MD-1 </div> <div> 1 </div> <div> .COL-MD-1 </div> <div> .COL-MD-1 </div> <div> .COL-MD-1 </div> <div> .COL-MD-1 </div> <div> <b> col-md-8 </div> <div> .col-md-4 </div> </div> <br/> <b> col-sm-*การใช้งาน </b> <div> <div> .col-SM-8 </div> <div> <b> col-xs-*การใช้งาน </b> <div> <div> .col-xs-8 </div> <div> .col-xs-4 </div> </div> <br/> <b> คอลัมน์ออฟเซ็ต: col-md-offset-*</b> <div> <div> .COL-MD-4 </div> <div> .COL-MD-4 </div> <div> .COL-MD-4 </div> <div> v> .col-md-4 </div> <div> .col-md-4 </div> <div> .col-md-4 </div> <div> .col-md-4 </div> <div> D-4 </div> <div> .COL-MD-4 </div> </div> .COL-MD-4 </div> <div> .COL-MD-4 </div> <div> .COL-MD-4 </div> <div> V> <div> .COL-MD-4 </div> <div> .COL-MD-4 </div> <div> .COL-MD-4 </div> <div> .COL-MD-4 </div> <div> <br/> <b> คอลัมน์ออฟเซ็ต: col-md-offset-*</b> <div> <div> .col-md-4 </div> <div> .col-md-4 </div> <div> .col-md .col-md-offet-4 </div> .COL-MD-OFFSET-3 </div> </div> <div> <div> .COL-MD-6 .COL-MD-OFFSET-3 </div> </div> <br/> <b> คอลัมน์ซ้อนกัน: คอลัมน์ที่มีอยู่ในแถวที่ซ้อนกันควรเท่ากับ 12 </b> 2: .col-md-6 </div> </div> </div> <br/> <b> การเรียงลำดับคอลัมน์: .col-md-push-* และ .Col-MD-PULL-* </b> <div> <div> .COL-MD-9 .COL-MD-PUSH-3 </body> </html>
ผลการสาธิต
ข้างต้นเป็นความรู้ที่เกี่ยวข้องเกี่ยวกับระบบกริด bootstrap ที่แนะนำโดยบรรณาธิการ ฉันหวังว่ามันจะเป็นประโยชน์กับคุณ!