Fondation - Groupe de largeur uniforme
La description
La classe .expanded peut être utilisée pour afficher automatiquement les boutons en pleine largeur. Selon le nombre de boutons, ils peuvent être agrandis en pleine largeur; un maximum de six boutons peut être étendu.
Exemple
L'exemple suivant montre comment utiliser un groupe de boutons de largeur uniforme dans Foundation.
<html>
<head>
<title>Even-width Group</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/foundation.min.css" integrity="sha256-1mcRjtAxlSjp6XJBgrBeeCORfBp/ppyX4tsvpQVCcpA= sha384-b5S5X654rX3Wo6z5/hnQ4GBmKuIJKMPwrJXn52ypjztlnDK2w9+9hSMBz/asy9Gw sha512-M1VveR2JGzpgWHb0elGqPTltHK3xbvu3Brgjfg4cg5ZNtyyApxw/45yHYsZ/rCVbfoO5MSZxB241wWq642jLtA==" crossorigin="anonymous">
</head>
<body>
<div class = "expanded button-group">
<a class = "button">One</a>
<a class = "button">Two</a>
<a class = "button">Three</a>
<a class = "button">Four</a>
<a class = "button">Five</a>
<a class = "button">Six</a>
</div>
<div class = "expanded button-group">
<a class = "button">One</a>
<a class = "button">Two</a>
<a class = "button">Three</a>
<a class = "button">Four</a>
<a class = "button">Five</a>
<a class = "button">Six</a>
<a class = "button">Seven</a>
</div>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/vendor/jquery.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/foundation.min.js"></script>
<script>
$(document).ready(function() {
$(document).foundation();
})
</script>
</body>
</html>
Production
Exécutons les étapes suivantes pour voir comment fonctionne le code donné ci-dessus -
Enregistrez le code html ci-dessus button_group_even_width.html fichier.
Ouvrez ce fichier HTML dans un navigateur, une sortie s'affiche comme indiqué ci-dessous.