ระบบกริดคือ "ระบบกริด" เป็นภาษาอังกฤษและบางคนแปลว่าเป็น "ระบบกริด" ใช้เลย์เอาต์การออกแบบกริดคงที่ สไตล์ของมันเรียบร้อยและรัดกุม มันกลายเป็นที่นิยมมากหลังสงครามโลกครั้งที่สองและได้กลายเป็นหนึ่งในรูปแบบหลักของการออกแบบสิ่งพิมพ์ในปัจจุบัน
ในปี ค.ศ. 1692 หลุยส์ที่สิบสี่กษัตริย์ฝรั่งเศสขึ้นใหม่รู้สึกว่าระดับการพิมพ์ของฝรั่งเศสนั้นไม่น่าพอใจดังนั้นเขาจึงสั่งให้จัดตั้งคณะกรรมการพิเศษเพื่อจัดการการพิมพ์ ภารกิจแรกของพวกเขาคือการออกแบบแบบอักษรใหม่ที่มีการใช้งานทางวิทยาศาสตร์สมเหตุสมผลและมีคุณค่า คณะกรรมการนำโดยนักคณิตศาสตร์ Nicolas Jaugeon พวกเขาขึ้นอยู่กับร่างกายโรมันและใช้สี่เหลี่ยมเป็นพื้นฐานการออกแบบ แต่ละตารางตารางแบ่งออกเป็น 64 หน่วยสี่เหลี่ยมพื้นฐานและแต่ละหน่วยสี่เหลี่ยมแต่ละหน่วยแบ่งออกเป็น 36 กริดขนาดเล็ก ด้วยวิธีนี้เลย์เอาต์การพิมพ์ประกอบด้วยกริดขนาดเล็ก 2,304 กริด ในเครือข่ายกริดเรขาคณิตที่เข้มงวดนี้รูปร่างของตัวอักษรการจัดเรียงเค้าโครงและประสิทธิภาพของฟังก์ชั่นการสื่อสารได้รับการออกแบบ นี่เป็นกิจกรรมแรกสุดในโลกที่จะทำการทดลองทางวิทยาศาสตร์เกี่ยวกับแบบอักษรและเลย์เอาต์และเป็นต้นแบบที่เก่าแก่ที่สุดของระบบกริด
คำจำกัดความของระบบหน้าเว็บแรสเตอร์คือ: การใช้อาร์เรย์กริดปกติเพื่อแนะนำและสร้างมาตรฐานการจัดวางและการกระจายข้อมูลในหน้าเว็บ ระบบเว็บแรสเตอร์ได้รับการพัฒนาจากระบบระนาบแรสเตอร์ สำหรับการออกแบบเว็บการใช้ระบบกริดไม่เพียง แต่ทำให้ข้อมูลบนหน้าเว็บสวยงามและอ่านง่ายขึ้น แต่ยังใช้งานได้มากขึ้น ยิ่งไปกว่านั้นสำหรับการพัฒนาส่วนหน้าเว็บเพจจะมีความยืดหยุ่นและเป็นมาตรฐานมากขึ้น
Bootstrap ให้ระบบกริดสตรีมมิ่งมือถือที่ตอบสนองต่อมือถือ เมื่อขนาดหน้าจอหรือวิวพอร์ตเพิ่มขึ้นระบบจะถูกแบ่งออกเป็นคอลัมน์สูงสุด 12 คอลัมน์โดยอัตโนมัติ มันมีคลาสที่กำหนดไว้ล่วงหน้าที่ใช้งานง่ายและยังมีการผสมผสานที่ทรงพลังสำหรับการสร้างเลย์เอาต์ความหมายมากขึ้น
กล่าวอีกนัยหนึ่ง Bootstrap แบ่งความกว้างขององค์ประกอบออกเป็น 12 ส่วน เราจัดเรียงองค์ประกอบในแถวนี้ซึ่งแบ่งออกเป็น 12 ส่วน
1. วัตถุประสงค์พื้นฐาน
ทำสองแถวต่อไปนี้และความกว้างของแต่ละเซลล์ในสองแถวนี้จะเปลี่ยนไปเนื่องจากอุปกรณ์ต่าง ๆ :
บนหน้าจอขนาดเล็กของโทรศัพท์มือถือบัญชี A Upward A สำหรับ 2 ส่วน B บัญชีสำหรับ 10 ส่วนบัญชี A ลงบัญชีสำหรับ 1 ส่วน B บัญชีสำหรับ 10 ส่วน C บัญชีสำหรับ 1 ส่วนและ ABC แบ่งปัน 12 ส่วนเหล่านี้
บนหน้าจอขนาดกลางของแท็บเล็ตขึ้นไปบัญชีสำหรับ 8 ส่วน B บัญชีสำหรับ 4 ส่วน AB แบ่งปัน 12 ส่วนเหล่านี้ลงบัญชีสำหรับ 10 ส่วน B บัญชีสำหรับ 1 ส่วน C บัญชีสำหรับ 1 ส่วน ABC แบ่งปัน 12 ส่วนเหล่านี้
บนหน้าจอขนาดใหญ่ของพีซีขึ้นไปบัญชีสำหรับ 4 B บัญชีสำหรับ 8 หุ้น AB หุ้น 12 หุ้นเหล่านี้ลงบัญชี A บัญชี 1 B สำหรับบัญชี 10 C สำหรับ 1 ABC หุ้น 12 หุ้นเหล่านี้
2. กระบวนการผลิต
ก่อนกำหนด bootstrap ในโฟลเดอร์เว็บและดาวน์โหลดส่วนประกอบบนเว็บไซต์อย่างเป็นทางการ (คลิกเพื่อเปิดลิงค์) รุ่น bootstrap ที่ใช้ในสภาพแวดล้อมการผลิต (คลิกเพื่อเปิดลิงค์) Bootstrap3 ไม่สามารถใช้งานได้กับ 2 ขอแนะนำให้ใช้ bootstrap3 โดยตรงตามเอกสารการพัฒนา หลังจากบีบอัด bootstrap ให้คัดลอก 3 โฟลเดอร์ CSS, แบบอักษรและ JS ไปยังไดเรกทอรีไซต์ หากเป็นโครงการ JSP Web ของ Eclipse ให้วางไว้ใต้โฟลเดอร์ Webroot
รหัสมีดังนี้โปรดดูความคิดเห็นสำหรับรายละเอียด:
<! doctype html public "-// w3c // dtd xhtml 1.0 transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> xmlns = "http://www.w3.org/1999/xhtml"> <head> <!-การเข้ารหัสเว็บ, ไฟล์ภายนอกที่จะใช้, ปรับให้เข้ากับหน้าจอโดยอัตโนมัติ-> <meta http-equiv = "content-type" เนื้อหา = "ข้อความ/html; href = "css/bootstrap.css" rel = "stylesheet" media = "หน้าจอ"> <meta name = "viewport" content = "width = ความกว้างของอุปกรณ์, ระดับเริ่มต้น = 1.0, user-scalable = no"> <title> หน้าจอ-> <!-class = "คอนเทนเนอร์" จะเป็นศูนย์กลางโดยอัตโนมัติ-> <div> <!-กำหนดบรรทัด-> <div> <!-XS แสดงหน้าจอขนาดเล็กของโทรศัพท์มือถือ MD หมายถึงหน้าจอในแท็บเล็ตและ LG หมายถึงหน้าจอขนาดใหญ่ -> <!-BG-Warning เป็นสีพื้นหลังที่กำหนดสีเหลืองอ่อน-> <div> a </div> <div> b </div> </div> <div> <! -> <div> a </div> <div> b </div> <div> c </div> </div> </body> </html>