Share
Dans cette partie de "Foundation for Beginners", nous examinerons les boutons, les menus déroulants et le plug-in "Effacement"..
Foundation a un ensemble de boutons solide et ils sont très faciles à mettre en œuvre. Ajoutez simplement une classe de «bouton» à tout élément d'ancrage, d'entrée, de division ou de bouton pour le voir se transformer en un magnifique bouton de style Foundation. Cela vous donne simplement le bouton de boîte standard, mais il existe une large gamme de styles et de types de boutons que vous pouvez utiliser. Voici un exemple rapide:
Bouton par défaut Petit bouton Petit bouton Grand bouton Bouton secondaire Bouton d'alerte Bouton de réussite Bouton rayon bouton rond Bouton désactivé
Cet exemple montre toutes les tailles, styles et états prédéfinis. Ils offrent chacun beaucoup de flexibilité; tous les préréglages peuvent être remplacés par des styles personnalisés, ce qui signifie que vous n'avez pas besoin de créer vos boutons à partir de zéro.
Les boutons utilisent des classes chaînées pour obtenir différents styles. Par exemple, commencez par "bouton" puis ajoutez une taille, "petit", une couleur, "succès" et un rayon "rond". Vous pouvez également désactiver n'importe quel bouton en ajoutant "disabled", illustrant à quel point cette approche stylistique est polyvalente..
Les boutons de base sont assez simples à implémenter et les groupes de boutons sont tout aussi faciles. Ils utilisent une structure de liste simple comme ceci:
Cela vous donnera un groupe standard de trois boutons, mais vous pouvez ajouter des classes de rayon et des classes pour contrôler la largeur, "même-2", "même-3" jusqu'à "même-8". Ces classes de largeur sont utilisées pour remplir l'espace disponible avec vos boutons et sont utilisées au mieux lorsque le nombre dans la classe paire correspond à la quantité de boutons présents. Par exemple, si vous avez quatre boutons, alors «même-4» serait le meilleur choix..
Les barres de boutons peuvent être décrites comme un groupe de groupes de boutons. Prenez une div, ajoutez class = "barre de boutons" sur cette division et placez autant de groupes de boutons que vous le souhaitez. Cela peut être une aide précieuse pour les dispositions de boutons plus complexes. Voici un exemple:
- Bouton 1
- Bouton 2
- Bouton 3
- Bouton 1
- Bouton 2
- Bouton 3
Sur de petits écrans, chaque groupe de boutons de la barre est automatiquement empilé, ce qui permet d’obtenir une apparence nette sur n’importe quel écran. En prenant les options couvertes dans chacune des sections ci-dessus, vous pouvez vraiment aller en ville avec vos boutons.
Dans la dernière révision majeure de Foundation, un nouveau plugin JavaScript appelé «dropdowns» a été introduit, ce qui est vraiment pratique lorsqu'il est superposé à des boutons. Le balisage nécessite essentiellement que vous ajoutiez une classe "dropdown" à votre bouton, avec l'ajout d'un attribut personnalisé à savoir "data-dropdown"..
Suivez ceci avec une liste non ordonnée contenant un identifiant correspondant à votre attribut de liste de données, par exemple:
Bouton Dropdown
Il est également important de noter que la classe 'f-dropdown' sur le paramètre ul est très importante. N'oubliez pas de l'ajouter..
Remarque: N'oubliez pas d'inclure le menu déroulant js dans votre téléchargement de Foundation.
La dernière couche de flexibilité avec laquelle vous devez jouer est la possibilité d’ajouter une division dans vos boutons. Ceci peut être utilisé pour indiquer la disponibilité d'une liste déroulante, d'un téléchargement, de tout ce que vous voulez vraiment. Ajoutez-le sur votre bouton en utilisant la classe 'split' et un élément span qui devrait inclure le même attribut 'data-dropdown' que nous avons utilisé précédemment dans notre exemple de liste déroulante..
Bouton Dropdown
Comme le menu déroulant JavaScript est un simple plugin, il n’ya qu’une option à jouer: définir le nom de la classe appliqué au menu déroulant lorsqu’il est ouvert:
Accentsconagua
$ (document) .foundation ('dropdown', activeClass: 'open'); La suppression facilite la création de lightbox sensibles avec des images de toutes tailles.
Clearing est un plugin ultra rapide pour lightbox. Comme vous pouvez l’imaginer, le balisage est extrêmement simple et très utile lorsque le curseur d’orbite ne fonctionne pas pour vous..
A présent, vous connaissez très bien le fonctionnement de Foundation avec les structures de liste, qui sont à nouveau au cœur de ce plugin. Construisez une liste non ordonnée, avec du contenu dans chaque élément de la liste. Ajouter une classe 'clearing-thumbs' au ul, plus un attribut personnalisé vide de 'data-clearing'.
Si vous deviez ajouter une classe d '"éléments de compensation" au premier li de votre structure ul, Foundation l'afficherait alors comme image sélectionnée dans votre sélection de lightbox. Il est intéressant de noter que la compensation utilise la structure de grille de blocs que nous avons abordée précédemment dans la série. Cela permet de s’assurer que toutes les vignettes ont la même hauteur et sont uniformément réparties..
Suite à notre couverture complète des boutons et des listes déroulantes, nous pouvons envisager de couvrir des formulaires et des commutateurs personnalisés. on se verra là bas!
