Maison >interface Web >tutoriel CSS >Découvrez cinq frameworks de mise en page CSS couramment utilisés

Découvrez cinq frameworks de mise en page CSS couramment utilisés

WBOYoriginal: 2024-01-16 09:20:17633parcourir

Cadre de mise en page CSS : Explorez les cinq cadres de mise en page couramment utilisés

Introduction :
Dans la conception Web, la mise en page est un élément crucial. Le cadre de mise en page CSS peut nous aider à créer rapidement des pages Web avec différents styles de mise en page. Cet article présentera cinq frameworks de mise en page CSS couramment utilisés et fournira des exemples de code spécifiques pour aider les lecteurs à mieux comprendre et utiliser ces frameworks.

1. Bootstrap :
Bootstrap est actuellement l'un des frameworks de mise en page CSS les plus populaires. Il possède des composants riches et de puissantes fonctionnalités réactives qui peuvent nous aider à créer rapidement des pages Web modernes. Voici un exemple de code simple qui montre comment utiliser Bootstrap pour implémenter une mise en page Web commune :

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.0/dist/css/bootstrap.min.css">
</head>
<body>
  <div class="container">
    <div class="row">
      <div class="col-md-3">左侧栏</div>
      <div class="col-md-6">中间内容</div>
      <div class="col-md-3">右侧栏</div>
    </div>
  </div>
</body>
</html>

Le code ci-dessus utilise le système de grille de Bootstrap pour diviser la page en trois colonnes, la colonne de gauche, le contenu du milieu et la barre latérale droite. et s'adapte automatiquement aux différentes tailles d'écran.

2. UI sémantique :
Semantic UI est un autre cadre de mise en page CSS populaire et facile à utiliser. Il fournit des noms de classes sémantiques, qui peuvent rendre le code plus lisible et plus maintenable. Voici un exemple de code utilisant Semantic UI :

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" />
</head>
<body>
  <div class="ui grid">
    <div class="three column row">
      <div class="column">左侧栏</div>
      <div class="column">中间内容</div>
      <div class="column">右侧栏</div>
    </div>
  </div>
</body>
</html>

Le code ci-dessus utilise le système de grille de Semantic UI, divise la page en trois colonnes et utilise des noms de classe sémantique pour rendre le code plus lisible.

3. Foundation :
Foundation est un framework CSS flexible et puissant qui inclut non seulement des fonctions de mise en page, mais fournit également de nombreux composants d'interface utilisateur. Voici un exemple de code utilisant Foundation :

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/foundation/6.2.4/foundation.min.css">
</head>
<body>
  <div class="grid-container">
    <div class="grid-x">
      <div class="cell small-4">左侧栏</div>
      <div class="cell small-4">中间内容</div>
      <div class="cell small-4">右侧栏</div>
    </div>
  </div>
</body>
</html>

Le code ci-dessus utilise le système de grille de Foundation pour diviser la page en trois colonnes et utiliser différents noms de classe pour définir la largeur des colonnes.

4. PureCSS :
PureCSS est un framework CSS léger, principalement utilisé pour créer rapidement des mises en page simples. Bien que la fonctionnalité soit relativement simple, elle est facile à démarrer et à personnaliser. Voici un exemple de code utilisant PureCSS :

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pure/2.0.5/pure-min.css">
</head>
<body>
  <div class="pure-g">
    <div class="pure-u-1-3">左侧栏</div>
    <div class="pure-u-1-3">中间内容</div>
    <div class="pure-u-1-3">右侧栏</div>
  </div>
</body>
</html>

Le code ci-dessus utilise le système de grille de PureCSS pour diviser la page en trois colonnes et spécifier la largeur des colonnes à l'aide des noms de classe.

5. Tailwind CSS :
Tailwind CSS est un tout nouveau framework CSS. Il adopte une méthode différente des frameworks traditionnels, définissant des styles en combinant des noms de classes. Voici un exemple de code utilisant Tailwind CSS :

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tailwindcss@1.5.1/dist/tailwind.min.css">
</head>
<body>
  <div class="grid grid-cols-3">
    <div class="col-span-1">左侧栏</div>
    <div class="col-span-1">中间内容</div>
    <div class="col-span-1">右侧栏</div>
  </div>
</body>
</html>

Le code ci-dessus utilise le système de grille de Tailwind CSS pour diviser la page en trois colonnes et définir la largeur des colonnes via les noms de classe.

Conclusion :
Grâce à l'introduction de cet article, nous avons découvert cinq frameworks de mise en page CSS couramment utilisés, à savoir Bootstrap, Semantic UI, Foundation, PureCSS et Tailwind CSS. Ils ont chacun leurs propres caractéristiques et vous pouvez choisir le cadre approprié pour la mise en page Web en fonction de différents besoins. J'espère que les lecteurs pourront mieux maîtriser et appliquer ces cadres de mise en page grâce à l'introduction et aux exemples de code de cet article.

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!

css bootstrap ui Foundation

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Étapes pour introduire les styles CSS dans les pages Web à l'aide du framework CIArticle suivant：Étapes pour introduire les styles CSS dans les pages Web à l'aide du framework CI

Articles Liés

Voir plus