Le système de grille est des «systèmes de grille» en anglais, et certaines personnes la traduisent par «système de grille». Il utilise une disposition de conception de grille fixe. Son style est soigné et concis. Il est devenu très populaire après la Seconde Guerre mondiale et est devenu l'un des styles traditionnels de la conception de la publication aujourd'hui.
En 1692, Louis XIV, le roi français nouvellement ascension, estimait que le niveau d'impression de la France n'était pas satisfaisant, il a donc ordonné la création d'un comité spécial royal pour gérer l'impression. Leur première tâche consiste à concevoir de nouvelles polices scientifiques, raisonnables et fonctionnelles de valeur. Le comité était dirigé par le mathématicien Nicolas Jaugeon. Ils étaient basés sur les corps romains et utilisaient des carrés comme base de conception. Chaque grille carrée était divisée en 64 unités carrées de base, et chaque unité carrée a été divisée en 36 petites grilles. De cette façon, une disposition d'impression se compose de 2 304 petites grilles. Dans ce réseau de grille géométrique rigoureux, la forme de la police, la disposition de disposition et l'efficacité de la fonction de communication ont été conçues. Il s'agit de la première activité au monde à mener des expériences scientifiques sur les polices et les dispositions, et c'est aussi le premier prototype du système de grille.
La définition du système raster de la page Web est: l'utilisation d'un tableau de grille ordinaire pour guider et standardiser la disposition et la distribution d'informations dans la page Web. Les systèmes Web Raster sont développés à partir de systèmes Raster Planar. Pour la conception Web, l'utilisation des systèmes de grille peut non seulement rendre les informations sur les pages Web plus belles et faciles à lire, mais aussi plus utilisables. De plus, pour le développement frontal, les pages Web seront plus flexibles et standardisées.
Bootstrap fournit un système de grille de streaming mobile et réactif. À mesure que l'écran ou la taille de la fenêtre augmente, le système sera automatiquement divisé en jusqu'à 12 colonnes. Il comprend des classes prédéfinies faciles à utiliser, ainsi que des mélanges puissants pour générer plus de dispositions sémantiques.
En d'autres termes, Bootstrap divise la largeur d'un élément en 12 parties. Nous organisons les éléments de cette rangée qui sont divisés en 12 parties.
1. Objectifs de base
Faire les deux lignes suivantes, et la largeur de chaque cellule dans ces deux lignes changera en raison de dispositifs différents:
Sur le petit écran du téléphone mobile, la hausse des comptes de 2 parties B représente 10 parties, la baisse A représente 1 partie B représente 10 parties C représente 1 parties, et l'ABC partage ces 12 parties.
Sur l'écran moyen de la tablette, vers le haut A représente 8 parties B représente 4 parties, AB partage ces 12 parties, à la baisse A représente 10 parties B comptes de 1 partie C comptes pour 1 partie, ABC partage ces 12 parties.
Sur le grand écran de PC, les comptes à la hausse des comptes de 4 B pour 8 actions, AB actions ces 12 actions, en baisse des comptes de 1 B de 10 comptes C pour 1, ABC actions ces 12 actions.
2. Processus de production
Configurez d'abord le bootstrap dans le dossier Web et téléchargez les composants sur le site officiel (cliquez pour ouvrir le lien). La version bootstrap utilisée dans l'environnement de production (cliquez pour ouvrir le lien). Bootstrap3 n'est pas compatible avec 2. Il est recommandé d'utiliser Bootstrap3 directement en fonction de ses documents de développement. Après avoir décompressé le bootstrap, copiez les 3 dossiers obtenus CSS, FONTS et JS dans le répertoire du site. S'il s'agit du projet Web JSP d'Eclipse, placez-les dans le dossier WebRoot.
Le code est le suivant, veuillez consulter les commentaires pour plus de détails:
<! Doctype html public "- // w3c // dtd xhtml 1.0 transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"><html xmlns = "http://www.w3.org/1999/xhtml"> <éadf> <! - Encodage Web, fichiers externes à utiliser, s'adapter automatiquement à l'écrev href = "css / bootstrap.css" rel = "Stylesheet" media = "screen"> <meta name = "Viewport" contenu = "width = device-width, initial-scale = 1.0, user-scalable = no"> <ititle> System grid </ title> </adac Écran -> <! - Class = "Container" sera automatiquement centré -> <div> <! - Définir une ligne -> <div> <! - Xs représente le petit écran du téléphone mobile, MD représente l'écran dans la tablette, et LG représente le grand écran du PC -> <! -> <! - Bg-warning est la couleur d'arrière-plan qui définit une couleur jaune clair -> <div> a </div> <div> b </div> </div> <div> <! - La vérité ici est la même que celle ci-dessus, COL-XS-1 + B de Col-XS-1 + C de Col-XS-10 est égal à 12 -> <div> a </div> <div> b </div> <div> c </div> </div> </ody> </html>