الصفحة الرئيسية>المتعلقة بالبرمجة>شفرة المصدر الأخرى
تنزيل

أصغر نظام شبكة في العالم

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 ٪ أكثر
  • FlexboxGrid (1591 بايت) ~ 1636 ٪ أكثر
  • نظام الشبكة 4.1.3 Bootstrap (3195 بايت) ~ 812 ٪ أكثر

دعم المتصفحات

microgrid NR هو المتصفحات المتقاطعة متوافقة.

سمات

  • أخف في العالم - 184 بايت فقط (<0.9 ٪ من Gzipped Bootstrap 3 CSS)
  • نظام شبكة عرض واحد (12 عمود)
  • حاويات العرض الكاملة وعرضها
  • مزاريب الأعمدة المدمجة (افتراضي: 15 بكسل)
  • أغلفة صف ذات مزاريب سلبية
  • فصول تسمية مشابهة لفئات bootstrap المعروفة (الصف ، الحاوية ، الحاوية السائلة ، Col ، XS-1 ... XS-12)
  • يحتوي على الميزات الأساسية والأكثر استخدامًا فقط لتسريع تطبيقك
  • تم تحسينه لأفضل ضغط GZIP
  • لا جافا سكريبت أو عوائق أو أبعاد - فقط CSS نقية
  • المتصفحات عبر التوافق
  • مصغرة وجاهزة للاستخدام
  • ترحيل سهل إلى microgrid (استجابة) - قريبا

الوثائق

تثبيت

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

أوصي أيضًا بتعيين خاصية CSS ذات حجم الصناديق لجميع عناصر HTML (اقرأ المزيد حول خاصية حجم الصناديق).

 <head>
	<style>*{box-size: border-box} </style>
	<link href = "microgrid-nr.min.css" rel = "STYLESHEET">
</head>

عناصر

العناصر التسمية والبنية هي نفسها أو ما شابه في bootstrap 3.

الحاويات

يجب أن تحتوي الحاويات على عناصر row فقط.
فقط container واحدة أو container-fluid لكل صفحة مسموح بها.

حاويات عرض ثابت
 <div class = "container"> </viv>

بشكل افتراضي ، container لها عرض 100 ٪.
يمكنك تغييره إلى قيمة مخصصة.

حاويات العرض الكاملة
 <div class = "Container-Fluid"> </viv>

الصفوف

يجب وضع الصفوف داخل container أو عنصر container-fluid .
سوف تحتوي الصفوف على عناصر col فقط.

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

الأعمدة

يجب دائمًا وضع الأعمدة داخل عنصر row .

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

مثال:

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

إزاحة

لا توجد فئات مدمجة للأعمدة الإزاحة في الوقت الحالي.
إذا كنت بحاجة إلى عمل إزاحة العمود ، فيرجى استخدام الأعمدة (الأعمدة) الفارغة كمواقع زائفة ، كما هو الحال في المثال التالي.

 <!-ابدأ الإزاحة الزائفة->
	<div class = "col xs-6"> </viv>
<!-نهاية الإزاحة الزائفة>
<!-تبدأ العمود->
	<div class = "col xs-6"> هذا العمود لديه إزاحة زائفة </div>
<!- ​​نهاية العمود>

مثال كامل

 <html>
<head>
	<style>*{box-size: 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 </iv>
    		<div class = "col xs-8"> b </iv>
  		</div>
    	<div class = "row">
    		<div class = "col xs-12">
    			<div class = "col xs-4"> c </iv>
    			<div class = "col xs-4"> d </iv>
       			<div class = "col xs-4"> e </viv>
            </div>
  		</div>
     	<div class = "row">
    		<div class = "col xs-8"> f </viv>
    		<div class = "col xs-4"> g </iv>
  		</div>
	</div>
</body>
</html>

عرض المناطق

يدعم Microgrid (NR) فقط عرض عرض واحد (XS).
إذا كنت ترغب في تطوير تطبيق متعدد المنافذ ، فيمكنك استخدام/ترحيل إلى إصدار قياسي (مستجيب تمامًا) من Microgrid (قريبًا).

يوسع
معلومات إضافية
تطبيقات ذات صلة
نوصي لك
أخبار ذات صلة الكل