Page d'accueil>Lié à la programmation>Autre code source
Télécharger

Le plus petit système de réseau du monde

Le Microréfila NR est autonome , le plus petit système de grille sans déprédité du monde .
La taille de la version gzipped n'est que de 184 octets .
Par exemple, bootstrap-grid.min.css (bootstrap 4.1.3) est de 3195 octets de 3195 octets .

Comparaison de taille

Comparons la taille gzidipip de Microricrid NR ( 184 octets ) avec un autre système de grille.

  • GRD (503 octets) ~ 173% de plus
  • SIMPLEGRID (644 octets) ~ 250% de plus
  • 960 g (1105 octets) ~ 500% plus
  • FlexboxGrid (1591 octets) ~ 1636% plus
  • Système de grille 4.1.3 de Bootstrap (3195 octets) ~ 812% plus

Support des navigateurs

Le Microréfila NR est compatible des navigateurs croisés.

Caractéristiques

  • Le plus léger du monde - seulement 184 octets gzipipped (<0,9% du bootstrap gzippé 3 CSS)
  • Système de grille de fenêtre unique (12 colonnes)
  • Conteneurs pleine largeur et à largeur fixe
  • Gouttières de colonne intégrées (par défaut: 15px)
  • Emballages en rangée avec gouttières négatives
  • Classes nommer similaires aux classes bootstrap bien connues (rangée, conteneur, conteneur-fluid, col, xs-1 ... xs-12)
  • Contient uniquement des fonctionnalités essentielles et les plus utilisées pour accélérer votre application
  • Optimisé pour la meilleure compression GZIP
  • Pas de javascript, de replies ou de dépréances - juste du CSS pur
  • Cross Browsers Compatible
  • Minifié et prêt à l'emploi
  • Migration facile vers le microréseau standard (réactif) - bientôt

Documentation

Installation

 <adal>
	<link href = "MicroRid-nr.min.css" rel = "Stylesheet">
</ head>

Je recommande également de définir la propriété CSS de dimension de boîte pour tous les éléments HTML (en savoir plus sur les propriétés de la taille d'une boîte).

 <adal>
	<style> * {Box-Sizing: Border-Box} </ Style>
	<link href = "MicroRid-nr.min.css" rel = "Stylesheet">
</ head>

Éléments

Les éléments de dénomination et de structure sont identiques ou similaires comme dans Bootstrap 3.

Conteneurs

Les conteneurs ne doivent contenir que des éléments row .
Seul un seul container ou container-fluid par page est autorisé.

Conteneurs de largeur fixe
 <div class = "Container"> </div>

Par défaut, container a 100% de largeur.
Vous pouvez le changer en valeur personnalisée.

Conteneurs pleine largeur
 <div class = "contener-fluid"> </div>

Rangées

Les lignes doivent être placées à l'intérieur container ou container-fluid .
Les lignes ne contiendront que des éléments col .

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

Colonnes

Les colonnes doivent toujours être placées à l'intérieur de l'élément row .

 <div class = "Col [Vieille] -6"> </div>

Exemple:

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

Décalage

Il n'y a pas de classes intégrées pour les colonnes Offset en ce moment.
Si vous devez faire du décalage de la colonne, veuillez utiliser des colonnes vides comme pseudo-offensets, comme dans l'exemple suivant.

 <! - Pseudo-offset commence ->
	<div class = "Col xs-6"> </div>
<! - Pseudo-offset fin>
<! - Colonne commence ->
	<div class = "col xs-6"> Cette colonne a pseudo-offset </div>
<! - Fin de la colonne>

Exemple complet

 <html>
<adal>
	<style> * {Box-Sizing: Border-Box} </ Style>
	<link href = "MicroRid-nr.min.css" rel = "Stylesheet">
</ head>
<body>
	<div class = "contener-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>
</docy>
</html>

Fenêtres

MicroRice (NR) prend en charge uniquement la fenêtre unique (XS).
Si vous souhaitez développer une application de la fenêtre multiple, vous pouvez utiliser / migrer-to standard (entièrement réactif) de MicroRit (bientôt).

Développer
Informations supplémentaires
Applications connexes
Recommandé pour vous
Actualités connexes Tout