Startseite>Programmierbezogen>Anderer Quellcode
Herunterladen

Das kleinste Netzsystem der Welt

Microgrid NR ist eigenständig , weltweit kleinste und DepeDeDeDeds Free Grid System.
Die Größe der GZIP -Version beträgt nur 184 Bytes .
Zum Beispiel beträgt GZIPED bootstrap-grid.min.css (Bootstrap 4.1.3) 3195 Bytes .

Größenvergleich

Vergleichen wir die Gziped -Größe von Microgrid -NR ( 184 Bytes ) mit einem anderen Gittersystem.

  • GRD (503 Bytes) ~ 173% mehr
  • SimpleGrid (644 Bytes) ~ 250% mehr
  • 960 g (1105 Bytes) ~ 500% mehr
  • Flexboxgrid (1591 Bytes) ~ 1636% mehr
  • Das 4,1.3 -Gittersystem von Bootstrap (3195 Bytes) ~ 812% mehr

Browser unterstützen

Microgrid NR ist Kreuzbrowser kompatibel.

Merkmale

  • Hellste der Welt - nur 184 Bytes gziped (<0,9% der Gziped Bootstrap 3 CSS)
  • Einzelansichtsnetzsystem (12 Spalten)
  • Container mit Vollbreite und fester Breite
  • Integrierte Spaltenrinnen (Standard: 15px)
  • Reihenverpackungen mit negativen Dachrinnen
  • Klassen, die nennen, ähnlich bekannte Bootstrap-Klassen (Zeile, Container, Container-Fluid, Col, XS-1 ... xs-12)
  • Enthält nur wichtige und am meisten verwendete Funktionen, um Ihre Anwendung zu beschleunigen
  • Optimiert für die beste GZIP -Komprimierung
  • Kein JavaScript, Fallbacks oder Depedencies - nur reines CSS
  • Cross Browser kompatibel
  • Abgebaut und verwendet zu verwenden
  • Einfache Migration in Standard (reaktionsschnell) Mikrogrid - bald

Dokumentation

Installation

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

Ich empfehle auch, die CSS-Eigenschaft der Boxgrößen für alle HTML-Elemente festzulegen (mehr zu Box-Größen-Eigenschaften).

 <kopf>
	<Styles>*{Box-Größe: Border-Box} </style>
	<link href = "microgrid-nr.min.css" rel = "stylesheet">
</head>

Elemente

Elemente benennen und strukturieren sind gleich oder ähnlich wie in Bootstrap 3.

Behälter

Behälter müssen nur row enthalten.
Es sind nur einzelne container oder container-fluid pro Seite zulässig.

Behälter mit fester Breite
 <div class = "container"> </div>

Standardmäßig hat container 100% Breite.
Sie können es in benutzerdefinierten Wert ändern.

Behälter in voller Breite
 <div class = "Containerfluid"> </div>

Reihen

Zeilen müssen im container oder container-fluid -Element platziert werden.
Zeilen enthalten nur col -Elemente.

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

Spalten

Spalten müssen immer im row platziert werden.

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

Beispiel:

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

Offsets

Derzeit gibt es keine integrierten Kurse für Spaltenversatz.
Wenn Sie die Spaltenversatz durchführen müssen, verwenden Sie bitte leere Spalten als Pseudo-Aussets, wie im folgenden Beispiel.

 <!-Pseudo-Offset beginnen->
	<div class = "col xs-6"> </div>
<!-Pseudo-Offset End>
<!-Spalte beginnen->
	<div class = "col xs-6"> Diese Spalte hat Pseudo-Offset </div>
<!- ​​Spaltenende>

Vollständiges Beispiel

 <html>
<kopf>
	<Styles>*{Box-Größe: 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>

Ansichtsfenster

Microgrid (NR) unterstützt nur ein einzelnes Ansichtsfenster (XS).
Wenn Sie mehrere Ansichtsfenster-Anwendungen entwickeln möchten, können Sie (in Kürze) (bald) (vollständig reaktionsschnelle) Versionen (vollständig reaktionsschnell) von Microgrid/Migrate-to-Standard-Version verwenden.

Expandieren
Zusätzliche Informationen
Ähnliche Anwendungen
Empfohlen für Sie
Ähnliche Nachrichten Alle