Botons
D'aquí a allà amb estil...
Última actualización
D'aquí a allà amb estil...
Última actualización
Un botó sol ser una caixeta simple amb un enllaç a una altra pàgina.
El botó bàsic és una caixa vermella amb les vores arrodonides com es veu a la imatge següent. S'utilitza per destacar una acció que volem que els usuaris facin. En trobaràs un exemple d'ús al node de les sessions d'orientació de secundària.
Per afegir un botó cal que vagis a l'editor de codi font del node i enganxis el codi següent al punt on vulguis que hi hagi el botó:
Fet això, només et caldrà substituir els valors següents:
linkBoto → substitueix-lo per la URL de la pàgina a la qual ha de dirigir el botó.
textBoto → substitueix-lo pel text que ha de mostrar el botó.
Fixa't que, un cop hagis enganxat el codi del botó, podràs editar-lo com si fos un enllaç normal.
Si modifiques les classes del botó pots aconseguir que en canviï:
L'aparença
El color
La mida
L'amplada
...
Per defecte el botó té format de color sòlid, però el pots deixar light:
Per aconseguir que el botó sigui light, cal que les classes siguin class="btn btn-outline-primary"
També pots modificar el color del botó substituint "primary" pel codi del color dins de les classes.
Pots incloure al web botons de 3 mides diferents:
Petit: cal afegir-hi la classe btn-sm.
Mitjà: és el valor per defecte, no cal fer res (o potser et cal eliminar les classes btn-sm o btn-lg, si hi són).
Gran: cal afegir-hi la classe btn-lg.
Els enllaços destacats són un format pensat per les pàgines de menú. També els pots utilitzar en altres situacions.
En cas que l'enllaç porti a un web extern, diferent del que estàs editant, cal que la imatge sigui l'icona de sortida. Per mostrar aquesta icona has d'afegir la classe "external" a class="u-link". Hauria de quedar així: class="u-link external".
Hi ha altres tipus d'enllaços que no utilitzarem freqüentment, però que estan implementats al web i que, per tant, es poden utilitzar i resulta convenient:
En alguns nodes, com en la pàgina principal de "Qualitat i processos", hi ha unes caixes d'icones amb enllaços.
Per crear aquestes caixes cal que copiïs l'estructura HTML següent i l'enganxis al codi font de la pàgina:
Amb el codi anterior has creat el contenidor on aniran les caixetes. Per a cada caixa, cal que afegeixis a dins del contenidor (a on hi ha els ...) una estructura com aquesta:
Cal que substitueixis els textos següents:
codiClassesIcone → substitueix-lo per les classes que corresponen a la icona. Si no saps com funcionen les icones, vés a icones i les seves classes.
nomCaixeta → substitueix-lo pel text que s'ha de mostrar a la caixeta.
A les pàgines d'estudis hi ha uns destacats amb informació de contacte que corresponen a l'estructura HTML següent.
