Tutoriel HTML : Comment utiliser le système de grille pour la mise en page-tutoriel HTML-php.cn

Tutoriel HTML : Comment utiliser le système de grille pour la mise en page

WBOY

Libérer： 2023-10-20 12:42:35

original

1325 Les gens l'ont consulté

Tutoriel HTML : Comment utiliser le système de grille pour la mise en page

Dans la conception Web, la mise en page est un lien très important. Une bonne mise en page peut non seulement améliorer l’expérience utilisateur, mais également rendre les pages Web plus belles et plus faciles à parcourir. Afin d'obtenir une mise en page flexible et réactive, nous pouvons utiliser un système de grille. Le système de grille est une méthode de division de la page en colonnes de même largeur. En divisant la page en différents nombres de colonnes et largeurs, divers styles de mise en page flexibles peuvent être obtenus. Cet article vous expliquera comment utiliser le système de grille pour la mise en page et fournira des exemples de code spécifiques.

Le concept de base du système de grille est de diviser la page en lignes et colonnes. L'espace horizontal de la page est divisé en 12 colonnes, et on peut placer un élément dans une ou plusieurs colonnes d'une ligne selon les besoins. Des effets de mise en page flexibles peuvent être obtenus en définissant différentes largeurs de colonnes et décalages de colonnes.

Tout d'abord, nous devons introduire les fichiers CSS requis dans la page. Habituellement, le code CSS du système de grille est déjà regroupé dans un ou plusieurs fichiers, il suffit de l'ajouter à la balise

du fichier HTML, comme indiqué ci-dessous :

<link rel="stylesheet" href="grid.css">

Copier après la connexion

Ensuite, nous pouvons commencer à utiliser le grille Le système présente la page. Dans la structure HTML, nous pouvons utiliser des éléments

pour créer des lignes et des colonnes. Par exemple, nous pouvons utiliser le code suivant pour créer une mise en page avec deux colonnes :

<div class="row">
  <div class="col-6">这是第一列</div>
  <div class="col-6">这是第二列</div>
</div>

Copier après la connexion

Dans le code ci-dessus, nous avons créé une ligne avec deux colonnes. Chaque colonne utilise la classe « col-6 », ce qui signifie que la colonne occupe 50 % de la largeur de la ligne. Étant donné que la largeur totale de la ligne est de 12 colonnes, le nombre de colonnes occupées par chaque colonne peut être 1, 2, 3, 4, 6 ou 12. En définissant différentes largeurs de colonnes, nous pouvons créer différents effets de mise en page.

Si nous voulons créer une mise en page à trois colonnes, où les colonnes de gauche et de droite occupent 25% de la largeur et la colonne du milieu occupe 50% de la largeur, nous pouvons utiliser le code suivant :

<div class="row">
  <div class="col-3">这是左列</div>
  <div class="col-6">这是中间列</div>
  <div class="col-3">这是右列</div>
</div>

Copier après la connexion

De plus Pour définir la largeur de la colonne, nous pouvons également utiliser les classes Move offset pour créer des effets de mise en page plus flexibles. La classe offset permet de déplacer une colonne vers la droite d'un certain nombre de colonnes. Par exemple, nous pouvons décaler la colonne du milieu de la disposition à trois colonnes ci-dessus de deux colonnes vers la droite, créant l'effet suivant :

<div class="row">
  <div class="col-3">这是左列</div>
  <div class="col-6 offset-2">这是中间列</div>
  <div class="col-3">这是右列</div>
</div>

Copier après la connexion

Dans le code ci-dessus, nous avons ajouté la classe "offset-2" à la colonne du milieu, ce qui signifie que la colonne du milieu est décalée à droite de la largeur de deux colonnes.

En plus des exemples ci-dessus, le système de grille prend également en charge la mise en page réactive. En ajoutant "-md", "-lg" et d'autres suffixes au nom de la classe de colonne, la disposition peut être automatiquement ajustée en fonction de la taille de l'écran. Par exemple, nous pouvons utiliser le code suivant pour créer une disposition à deux colonnes sur de grands écrans et une disposition à une colonne sur de petits écrans :

<div class="row">
  <div class="col-md-6">这是第一列</div>
  <div class="col-md-6">这是第二列</div>
</div>

Copier après la connexion

Dans le code ci-dessus, le "-md" dans le nom de la classe de colonne signifie que sur écrans de taille moyenne efficaces. Nous pouvons également utiliser des suffixes tels que « -sm » et « -lg » pour spécifier différentes tailles d'écran.

Avec le système de grille, nous pouvons facilement créer diverses mises en page flexibles. Mais en même temps, vous devez également noter qu’un trop grand nombre de colonnes et d’imbrications compliqueront le code et affecteront la vitesse de chargement de la page Web. Lors de la conception de l'aménagement, le système de grille doit être utilisé de manière rationnelle en fonction des besoins réels.

Pour résumer, la mise en page est une partie importante de la conception Web. L'utilisation du système de grille peut obtenir des effets de mise en page flexibles et réactifs. Dans cet article, nous avons découvert les concepts de base et l'utilisation des systèmes de grille et fourni des exemples de code spécifiques. J'espère que grâce à l'introduction de cet article, tout le monde pourra maîtriser comment utiliser le système de grille pour la mise en page et améliorer la qualité et l'expérience utilisateur de la conception Web.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!