Conception Web Responsive - Frameworks
Il existe de nombreux frameworks CSS gratuits qui offrent un design réactif.
Utilisation de W3.CSS
Un excellent moyen de créer un design réactif est d'utiliser une feuille de style adaptée, comme W3.CSS
W3.CSS facilite le développement de sites qui sont esthétiques à toutes les tailles !
Démo W3.CSS
Redimensionnez la page pour voir la réactivité !
Londres
Londres est la capitale de l'Angleterre.
C'est la ville la plus peuplée du Royaume-Uni, avec une zone métropolitaine de plus de 13 millions d'habitants.
Paris
Paris est la capitale de la France.
La région parisienne est l'un des plus grands centres de population en Europe, avec plus de 12 millions d'habitants.
Tokyo
Tokyo est la capitale du Japon.
C'est le centre de la région métropolitaine du Grand Tokyo, et la zone métropolitaine la plus peuplée du monde.
Exemple
<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.formation-ti.org/w3css/4/w3.css">
<body>
<div class="w3-container w3-blue">
<h1>formation-ti.org Démo</h1>
<p>Redimensionnez cette page réactive !</p>
</div>
<div class="w3-row-padding">
<div class="w3-third">
<h2>Londres</h2>
<p>Londres est la capitale de l'Angleterre.</p>
<p>C'est la ville la plus peuplée du Royaume-Uni,
avec une zone métropolitaine de plus de 13 millions d'habitants.</p>
</div>
<div class="w3-third">
<h2>Paris</h2>
<p>Paris est la capitale de la France.</p>
<p>La région parisienne est l'un des plus grands centres de population en Europe,
avec plus de 12 millions d'habitants.</p>
</div>
<div class="w3-third">
<h2>Tokyo</h2>
<p>Tokyo est la capitale du Japon.</p>
<p>C'est le centre de la région métropolitaine du Grand Tokyo,
et la zone métropolitaine la plus peuplée du monde.</p>
</div>
</div>
</body>
</html> Pour en savoir plus sur W3.CSS, lisez notre Tutoriel W3.CSS .
Bootstrap
Un autre framework populaire est Bootstrap. Il utilise HTML et CSS pour créer des pages web réactives :
Exemple
<!DOCTYPE html>
<html lang="en">
<head>
<title>Exemple Bootstrap 5</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container-fluid p-5 bg-primary text-white text-center">
<h1>Ma Première Page Bootstrap</h1>
<p>Redimensionnez cette page réactive pour voir l'effet !</p>
</div>
<div class="container mt-5">
<div class="row">
<div class="col-sm-4">
<h3>Colonne 1</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
</div>
<div class="col-sm-4">
<h3>Colonne 2</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
</div>
<div class="col-sm-4">
<h3>Colonne 3</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
</div>
</div>
</div>
</body>
</html> Pour en savoir plus sur Bootstrap, rendez-vous sur notre Tutoriel Bootstrap .
Vous avez déjà entendu parler de formation-ti.org Spaces ? Ici, vous pouvez créer votre site web à partir de zéro ou utiliser un modèle.
* aucune carte de crédit requise