หน้าแรก>การเขียนโปรแกรมที่เกี่ยวข้อง>ซอร์สโค้ดอื่น ๆ
ดาวน์โหลด

ระบบกริดที่เล็กที่สุดในโลก

Microgrid NR เป็น แบบสแตนด์อโลน ระบบกริดที่เล็กที่สุดและ เป็นอิสระ ในโลก
ขนาดของรุ่น GZipped เพียง 184 ไบต์
ตัวอย่างเช่น gzipped bootstrap-grid.min.css (bootstrap 4.1.3) คือ 3195 ไบต์

การเปรียบเทียบขนาด

ลองเปรียบเทียบขนาด gzipped ของ microgrid NR ( 184 ไบต์ ) กับระบบกริดอื่น

  • GRD (503 ไบต์) ~ 173% มากกว่า
  • SimpleGrid (644 ไบต์) ~ 250%
  • 960GS (1105 ไบต์) ~ 500% มากกว่า 500%
  • FlexBoxGrid (1591 ไบต์) ~ 1636% มากกว่า
  • ระบบกริด 4.1.3 ของ Bootstrap (3195 ไบต์) ~ 812% เพิ่มเติม

เบราว์เซอร์รองรับ

Microgrid NR เป็นเบราว์เซอร์ที่เข้ากันได้

คุณสมบัติ

  • เบาที่สุดในโลก - เพียง 184 ไบต์ gzipped (<0.9% ของ gzipped bootstrap 3 css)
  • ระบบกริด Viewport Single (12 คอลัมน์)
  • คอนเทนเนอร์แบบเต็มความกว้างและความกว้างคงที่
  • รางน้ำคอลัมน์ในตัว (ค่าเริ่มต้น: 15px)
  • เสื้อคลุมแถวที่มีรางน้ำเชิงลบ
  • คลาสการตั้งชื่อคล้ายกับคลาส bootstrap ที่รู้จักกันดี (แถวคอนเทนเนอร์คอนเทนเนอร์-ฟลูอิด, Col, XS-1 ... XS-12)
  • มีคุณสมบัติที่จำเป็นและใช้มากที่สุดในการเร่งแอปพลิเคชันของคุณ
  • ปรับให้เหมาะสมสำหรับการบีบอัด GZIP ที่ดีที่สุด
  • ไม่มี JavaScript, Fallbacks หรือ Depedencies - แค่ CSS บริสุทธิ์
  • ข้ามเบราว์เซอร์เข้ากันได้
  • มีขนาดเล็กและพร้อมใช้งาน
  • ง่ายต่อการโยกย้ายไปยัง microgrid มาตรฐาน (ตอบสนอง) เร็ว ๆ นี้ - เร็ว ๆ นี้

เอกสาร

การติดตั้ง

 <head>
	<link href = "microgrid-nr.min.css" rel = "stylesheet">
</head>

ฉันขอแนะนำให้ตั้งค่าคุณสมบัติ CSS ขนาดกล่องสำหรับองค์ประกอบ HTML ทั้งหมด (อ่านเพิ่มเติมเกี่ยวกับคุณสมบัติการปรับขนาดกล่อง)

 <head>
	<style>*{การปรับขนาดกล่อง: border-box} </style>
	<link href = "microgrid-nr.min.css" rel = "stylesheet">
</head>

องค์ประกอบ

การตั้งชื่อองค์ประกอบและโครงสร้างเหมือนกันหรือคล้ายกันใน bootstrap 3

ภาชนะบรรจุ

คอนเทนเนอร์จะต้องมีองค์ประกอบ row เท่านั้น
อนุญาตให้ใช้ container เดียวหรือ container-fluid ต่อหน้าเท่านั้น

คงที่คอนเทนเนอร์ความกว้าง
 <div class = "container"> </div>

โดยค่าเริ่มต้น container มีความกว้าง 100%
คุณสามารถเปลี่ยนเป็นค่าที่กำหนดเอง

คอนเทนเนอร์ที่มีความกว้างเต็มรูปแบบ
 <div class = "container-fluid"> </div>

แถว

ต้องวางแถวไว้ใน container หรือองค์ประกอบ container-fluid
แถวจะมีองค์ประกอบ col เท่านั้น

 <div class = "row"> </div>

คอลัมน์

คอลัมน์จะต้องวางไว้ในองค์ประกอบ row เสมอ

 <div class = "col [viewport] -6"> </div>

ตัวอย่าง:

 <div class = "col xs-6"> </div>

การชดเชย

ไม่มีคลาสในตัวสำหรับคอลัมน์ออฟเซ็ตในขณะนี้
หากคุณต้องการชดเชยคอลัมน์โปรดใช้คอลัมน์ว่างเปล่าเป็น pseudo-offsets เช่นในตัวอย่างต่อไปนี้

 <!-เริ่มต้นด้วยการปลอมแปลง->
	<div class = "col xs-6"> </div>
<!-จุดจบของหลอกหลอก>
<!-คอลัมน์เริ่มต้น->
	<div class = "col xs-6"> คอลัมน์นี้มี pseudo-offset </div>
<!- ​​คอลัมน์จบ>

ตัวอย่างเต็ม

 <html>
<head>
	<style>*{การปรับขนาดกล่อง: border-box} </style>
	<link href = "microgrid-nr.min.css" rel = "stylesheet">
</head>
<body>
	<div class = "container-fluid">
    	<div class = "row">
    		<div class = "col xs-4"> a </div>
    		<div class = "col xs-8"> b </div>
  		</div>
    	<div class = "row">
    		<div class = "col xs-12">
    			<div class = "col xs-4"> c </div>
    			<div class = "col xs-4"> d </div>
       			<div class = "col xs-4"> e </div>
            </div>
  		</div>
     	<div class = "row">
    		<div class = "col xs-8"> f </div>
    		<div class = "col xs-4"> g </div>
  		</div>
	</div>
</body>
</html>

ผู้ชม

Microgrid (NR) รองรับเพียง Viewport เดียว (XS)
หากคุณต้องการพัฒนาแอปพลิเคชัน Viewports หลายรายการคุณสามารถใช้/โยกย้ายไปยังมาตรฐาน (ตอบสนองอย่างสมบูรณ์) เวอร์ชันของ Microgrid (เร็ว ๆ นี้)

ขยาย
ข้อมูลเพิ่มเติม
แอปที่เกี่ยวข้อง
แนะนำสำหรับคุณ
ข้อมูลที่เกี่ยวข้อง ทั้งหมด