Llista completa d'estils CSS

Genweb 6 està construït sobre el framework Bootstrap 5.3, podeu veure tots els estils que defineix a les següents pàgines. Podeu aplicar lliurement tots aquests estils a les vostres pàgines, tot i que alguns es veuran lleugerament modificats per integrar-los dintre del disseny de Genweb:

• Bootstrap 5.3
• Tutorial de W3Schools de Bootstrap

Color UPC

Contrastos

Com incorporar aquests estils a les vostres pàgines?

Molts d'aquest estils formen part de les plantilles predefinides que us oferim amb el genweb i que podeu incorporar des de l'editor:

D'altres els podeu incorporar des dels desplegables de format i de style de l'editor.

I d'altres són per usuaris avançats i necessiteu coneixements HTML per incorporar-los des de la opció HTML.

Imatges

class="rounded" class="rounded-circle" class="img-thumbnail"

Icones fitxer

Les classes són: pdf, doc, ppt, xls, down, txt, https, down, vid, img.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu te feugait nulla facilisi. Nam liber tempor nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, parum claram, anteposuerit litterarum formas humanitatis per seaculaquarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.

Veure totes les icones.

Textos

Mostra/amaga text per tipus usuari

"amaga-autenticat"  els usuaris identificats correctament NO veuran aquest text.

"amaga-no-autenticat" els usuaris no identificats (anònims) NO veuran aquest text

Text correcte/incorrecte

text correcte 

text incorrecte

Mida de text de samarreta

Color lletra

Lletra de color blanc: "white_text" Text en blanc, .white_text

Colors de fons

class="error"

class="pink-background"

class="warning"

class="orange-background"

class="info"

class="blueDark-background"

class="success"

class="green-background"

class="purple-background"

class="purpleDark-background"

class="gray-background"

class="grayLight-background"

class="grayLighter-background"

Etiquetes

Les etiquetes (labels) s'utilitzen per oferir informació adicional sobre alguna cosa.

Es poden fer servir amb diferents classes de contexte (colors): label-primary, .label-info, .label-important, .label-warning, etc.

New New New New New New New

Botons

Mides de botons

Afegeix btn-large, btn-small, o btn-mini per mides diferents.

Large button Large button

Default button Default button

Small button Small button

Mini button Mini button

Botons de bloc

Ocupen el 100% de l'espai on es col·loquin, sigui una capa, columna etc.

Crea botons de bloc —que ocupen el 100% del contenidor pare que els contingui— afegint btn-block com a classe.

Block level button Block level button

Possibilitat de deshabilitar el botó

Afegeix la classe disabled a <a>.

Primary link Link

Títols

Mida de Títols de h1 a h6

Títol .liniaDalt

Lorem Ipsum

Títol .liniaBaix

Lorem Ipsum

Columnats

div.row-fluid i dins div.spanX (de 1 a 12) 

Regles HR: 

La etiqueta <hr> serveix per indicar un canvi temàtic a un contingut.

Alineació

Alineació d'elements

clearfix. Clear de floats.

Alineació d'imatges 

Afegeix al float un marge

image-left. Imatge a l'esquerra.

Alineació de text

align-left. Text alineat a l'esquerra.

align-center. Text alineat al centre.

align-right. Text alineat a la dreta.

align-justify. Text justificat.

Destacats

lead Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

lead-large Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

lead-small Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

Llistes

<ul class="list"><li>asfasfasf</li></ul>

Desordenades

Sense res

• Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.
• Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus.

Unstyled

• Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.
• Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus.

Hover

• Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.
• Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus.

Striped

• Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.
• Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus.

Condensed

• Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.
• Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus.

Bordered

• Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.
• Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus.

Index

• Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.
• Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus.

Links

• Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.
• Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus.

Highlighted

• Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.
• Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus.

Notebook

• Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.
• Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus.

Es poden sumar classes

Bordered + Condensed + Links

• Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.
• Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus.
• Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.
• Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus.

Notebook + Hover + Striped

• Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.
• Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus.
• Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.
• Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus.

Taules 

Taula neta

Taula registres

Taula Table

Taula Bordered

Taula Striped

Taula Hover

Taula Hover sense heading

Taula Notebook

Taula Notebook + Bordered + Hover

Contenidors

Pous

well Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

well well-gradient Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

well well-large Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

well well-small Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

Caixes

box Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

box  box-gradient Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

box box-example Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

Nota La paraula "exemple", generada pel content de CSS, es tradueix aprofitant el "lang=ca" de l'HTML.

box box-large Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

box box-small Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.