Explorez cinq frameworks de mise en page CSS populaires
Le cadre de mise en page CSS révélé : analyse de cinq cadres populaires
Introduction :
Dans le processus de conception et de développement Web, comment obtenir une bonne mise en page a toujours été un défi important. Le cadre de mise en page CSS nous aide à créer plus facilement des mises en page complexes et améliore l'efficacité du développement en fournissant des outils et des composants puissants. Dans cet article, nous explorerons cinq frameworks de mise en page CSS populaires et fournirons des exemples de code concrets.
1. Bootstrap
Bootstrap est actuellement l'un des frameworks de mise en page CSS les plus populaires. Il fournit un grand nombre de styles et de composants, nous permettant de créer rapidement des pages Web réactives. Vous trouverez ci-dessous un exemple simple illustrant l'utilisation de Bootstrap pour implémenter une mise en page comprenant une barre de navigation, une zone de contenu et des informations de droit d'auteur en bas.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.0/dist/css/bootstrap.min.css">
<title>Bootstrap Layout Example</title>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Logo</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</nav>
<div class="container">
<div class="row">
<div class="col-md-8">
<h1 id="Welcome-to-our-website">Welcome to our website</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
</div>
<div class="col-md-4">
<h3 id="Side-bar">Side bar</h3>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
</div>
</div>
<footer class="footer mt-auto py-3 bg-light">
<div class="container">
<span class="text-muted">© 2020. All rights reserved.</span>
</div>
</footer>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.0/dist/js/bootstrap.min.js"></script>
</body>
</html>2. Foundation
Foundation est un autre framework de mise en page CSS populaire, qui fournit également une multitude de composants et de styles. Vous trouverez ci-dessous un exemple de mise en page de base implémentée à l'aide de Foundation.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/foundation-sites/dist/css/foundation.min.css">
<title>Foundation Layout Example</title>
</head>
<body>
<nav class="top-bar">
<div class="top-bar-left">
<ul class="menu">
<li class="menu-text">Logo</li>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</nav>
<div class="grid-container">
<div class="grid-x">
<div class="cell medium-8">
<h1 id="Welcome-to-our-website">Welcome to our website</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
</div>
<div class="cell medium-4">
<h3 id="Side-bar">Side bar</h3>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
</div>
</div>
<footer>
<div class="grid-container">
<div class="grid-x">
<div class="cell">
<p>© 2020. All rights reserved.</p>
</div>
</div>
</div>
</footer>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/foundation-sites/dist/js/foundation.min.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>3. Semantic UI
Semantic UI est un cadre de mise en page CSS qui se concentre sur la sémantique. Sa dénomination et son utilisation sont très intuitives. Vous trouverez ci-dessous un exemple de mise en page de base implémentée à l'aide de l'interface utilisateur sémantique.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui/dist/semantic.min.css">
<title>Semantic UI Layout Example</title>
</head>
<body>
<div class="ui inverted menu">
<a class="active item">Logo</a>
<a class="item" href="#">Home</a>
<a class="item" href="#">About</a>
<a class="item" href="#">Services</a>
<a class="item" href="#">Contact</a>
</div>
<div class="ui container">
<div class="ui grid">
<div class="eleven wide column">
<h1 id="Welcome-to-our-website">Welcome to our website</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
</div>
<div class="five wide column">
<h3 id="Side-bar">Side bar</h3>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
</div>
</div>
<div class="ui inverted vertical footer segment">
<div class="ui container">
<p>© 2020. All rights reserved.</p>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/semantic-ui/dist/semantic.min.js"></script>
</body>
</html>4. Bulma
Bulma est un framework de mise en page CSS léger. Sa conception est simple et belle, facile à utiliser et à personnaliser. Vous trouverez ci-dessous un exemple de mise en page de base implémentée avec Bulma.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma/css/bulma.min.css">
<title>Bulma Layout Example</title>
</head>
<body>
<nav class="navbar" role="navigation" aria-label="main navigation">
<div class="navbar-brand">
<a class="navbar-item" href="#">Logo</a>
</div>
<div class="navbar-menu">
<div class="navbar-start">
<a class="navbar-item" href="#">Home</a>
<a class="navbar-item" href="#">About</a>
<a class="navbar-item" href="#">Services</a>
<a class="navbar-item" href="#">Contact</a>
</div>
</div>
</nav>
<div class="container">
<div class="columns">
<div class="column is-three-quarters">
<h1 id="Welcome-to-our-website">Welcome to our website</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
</div>
<div class="column">
<h3 id="Side-bar">Side bar</h3>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
</div>
</div>
<footer class="footer">
<div class="container">
<p>© 2020. All rights reserved.</p>
</div>
</footer>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bulma"></script>
</body>
</html>5. Tailwind CSS
Tailwind CSS est un framework CSS hautement personnalisable qui fournit une multitude de cours pratiques qui peuvent être utilisés directement en HTML. Vous trouverez ci-dessous un exemple de mise en page de base implémentée à l'aide de Tailwind CSS.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@1.4.6/dist/tailwind.min.css" rel="stylesheet">
<title>Tailwind CSS Layout Example</title>
</head>
<body>
<nav class="bg-gray-200">
<div class="container mx-auto">
<ul class="flex">
<li class="p-4">Logo</li>
<li class="p-4"><a href="#">Home</a></li>
<li class="p-4"><a href="#">About</a></li>
<li class="p-4"><a href="#">Services</a></li>
<li class="p-4"><a href="#">Contact</a></li>
</ul>
</div>
</nav>
<div class="container mx-auto">
<div class="flex">
<div class="w-3/4 p-8">
<h1 id="Welcome-to-our-website">Welcome to our website</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div class="w-1/4 p-8">
<h3 id="Side-bar">Side bar</h3>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
</div>
</div>
<footer class="bg-gray-200">
<div class="container mx-auto p-8">
<p>© 2020. All rights reserved.</p>
</div>
</footer>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script>
// Tailwind CSS does not require JavaScript
</script>
</body>
</html>Conclusion :
Cet article présente cinq frameworks de mise en page CSS populaires, à savoir Bootstrap, Foundation, Semantic UI, Bulma et Tailwind CSS. En utilisant ces frameworks, nous pouvons implémenter plus efficacement des mises en page Web complexes. Chaque framework a ses propres caractéristiques et son style. Choisissez le framework qui vous convient en fonction de vos besoins réels.
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!
Outils d'IA chauds
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Undress AI Tool
Images de déshabillage gratuites
Clothoff.io
Dissolvant de vêtements AI
AI Hentai Generator
Générez AI Hentai gratuitement.
Article chaud
Outils chauds
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
Sujets chauds
Une plongée approfondie dans la signification et l'utilisation du code d'état HTTP 460
Feb 18, 2024 pm 08:29 PM
Analyse approfondie du rôle et des scénarios d'application du code d'état HTTP 460 Le code d'état HTTP est une partie très importante du développement Web et est utilisé pour indiquer l'état de la communication entre le client et le serveur. Parmi eux, le code d'état HTTP 460 est un code d'état relativement spécial. Cet article analysera en profondeur son rôle et ses scénarios d'application. Définition du code d'état HTTP 460 La définition spécifique du code d'état HTTP 460 est "ClientClosedRequest", ce qui signifie que le client ferme la requête. Ce code d'état est principalement utilisé pour indiquer
iBatis et MyBatis : comparaison et analyse des avantages
Feb 18, 2024 pm 01:53 PM
iBatis et MyBatis : analyse des différences et des avantages Introduction : Dans le développement Java, la persistance est une exigence courante, et iBatis et MyBatis sont deux frameworks de persistance largement utilisés. Bien qu’ils présentent de nombreuses similitudes, il existe également des différences et des avantages clés. Cet article fournira aux lecteurs une compréhension plus complète grâce à une analyse détaillée des fonctionnalités, de l'utilisation et des exemples de code de ces deux frameworks. 1. Fonctionnalités d'iBatis : iBatis est un ancien framework de persistance qui utilise des fichiers de mappage SQL.
Explication détaillée de l'erreur Oracle 3114 : comment la résoudre rapidement
Mar 08, 2024 pm 02:42 PM
Explication détaillée de l'erreur Oracle 3114 : Comment la résoudre rapidement, des exemples de code spécifiques sont nécessaires Lors du développement et de la gestion de la base de données Oracle, nous rencontrons souvent diverses erreurs, parmi lesquelles l'erreur 3114 est un problème relativement courant. L'erreur 3114 indique généralement un problème avec la connexion à la base de données, qui peut être provoqué par une défaillance du réseau, un arrêt du service de base de données ou des paramètres de chaîne de connexion incorrects. Cet article expliquera en détail la cause de l'erreur 3114 et comment résoudre rapidement ce problème, et joindra le code spécifique.
Analyse des nouvelles fonctionnalités de Win11 : Comment ignorer la connexion au compte Microsoft
Mar 27, 2024 pm 05:24 PM
Analyse des nouvelles fonctionnalités de Win11 : Comment ignorer la connexion à un compte Microsoft Avec la sortie de Windows 11, de nombreux utilisateurs ont constaté qu'il apportait plus de commodité et de nouvelles fonctionnalités. Cependant, certains utilisateurs n'aiment pas que leur système soit lié à un compte Microsoft et souhaitent ignorer cette étape. Cet article présentera quelques méthodes pour aider les utilisateurs à ne pas se connecter à un compte Microsoft dans Windows 11 afin d'obtenir une expérience plus privée et autonome. Tout d’abord, comprenons pourquoi certains utilisateurs hésitent à se connecter à leur compte Microsoft. D'une part, certains utilisateurs craignent
Analyse de la signification et de l'utilisation du point médian en PHP
Mar 27, 2024 pm 08:57 PM
[Analyse de la signification et de l'utilisation du point médian PHP] En PHP, le point médian (.) est un opérateur couramment utilisé, utilisé pour connecter deux chaînes ou propriétés ou méthodes d'objets. Dans cet article, nous approfondirons la signification et l’utilisation des points médians en PHP, en les illustrant avec des exemples de code concrets. 1. Opérateur de point médian de chaîne de connexion L’utilisation la plus courante en PHP consiste à connecter deux chaînes. En plaçant . entre deux chaînes, vous pouvez les assembler pour former une nouvelle chaîne. $string1=&qu
Apache2 ne peut pas analyser correctement les fichiers PHP
Mar 08, 2024 am 11:09 AM
En raison de contraintes d'espace, voici un bref article : Apache2 est un logiciel de serveur Web couramment utilisé et PHP est un langage de script côté serveur largement utilisé. Lors du processus de création d'un site Web, vous rencontrez parfois le problème qu'Apache2 ne peut pas analyser correctement le fichier PHP, ce qui entraîne l'échec de l'exécution du code PHP. Ce problème est généralement dû au fait qu'Apache2 ne configure pas correctement le module PHP ou que le module PHP est incompatible avec la version d'Apache2. Il existe généralement deux manières de résoudre ce problème :
Parsing Wormhole NTT : un framework ouvert pour n'importe quel jeton
Mar 05, 2024 pm 12:46 PM
Wormhole est un leader en matière d'interopérabilité blockchain, axé sur la création de systèmes décentralisés résilients et évolutifs qui donnent la priorité à la propriété, au contrôle et à l'innovation sans autorisation. Le fondement de cette vision est un engagement envers l'expertise technique, les principes éthiques et l'alignement de la communauté pour redéfinir le paysage de l'interopérabilité avec simplicité, clarté et une large suite de solutions multi-chaînes. Avec l’essor des preuves sans connaissance, des solutions de mise à l’échelle et des normes de jetons riches en fonctionnalités, les blockchains deviennent plus puissantes et l’interopérabilité devient de plus en plus importante. Dans cet environnement d’applications innovant, de nouveaux systèmes de gouvernance et des capacités pratiques offrent des opportunités sans précédent aux actifs du réseau. Les créateurs de protocoles se demandent désormais comment opérer dans ce nouveau marché multi-chaînes.
Analyse des fonctions exponentielles en langage C et exemples
Feb 18, 2024 pm 03:51 PM
Analyse détaillée et exemples de fonctions exponentielles en langage C Introduction : La fonction exponentielle est une fonction mathématique courante, et il existe des fonctions de bibliothèque de fonctions exponentielles correspondantes qui peuvent être utilisées en langage C. Cet article analysera en détail l'utilisation des fonctions exponentielles en langage C, y compris les prototypes de fonctions, les paramètres, les valeurs de retour, etc. et donnera des exemples de code spécifiques afin que les lecteurs puissent mieux comprendre et utiliser les fonctions exponentielles. Texte : La fonction math.h de la bibliothèque de fonctions exponentielles en langage C contient de nombreuses fonctions liées aux exponentielles, dont la plus couramment utilisée est la fonction exp. Le prototype de la fonction exp est le suivant
