Vés al contingut (premeu Retorn)

Llista completa d'estils CSS

Partint del framework Bootstrap aquests són els estils que podeu fer servir a les vostres pàgines.

Bootstrap

Els estils del Genweb 4 s'ha construït a partir del framework Bootstrap v2.1.0

 

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:

plantill.png

 

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

format.png

style.png

 

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

html.png

Imatges

class="img-rounded" class="img-circle" class="img-polaroid"class="img-shadowed"


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

text XXXL

text XXL

text XL

text L

text M

text S

text XS

text XXS

text XXXS

 

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.

 

Exemple New

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

Buttonclass=""Description
Default btn Botó gris estàndard amb degradat
Primary btn btn-primary Proporciona un pes visual addicional i identifica l'acció principal en un conjunt de botons
Info btn btn-info S'utilitza com a alternativa als estils predeterminats
Success btn btn-success Indica una acció exitosa o positiva
Warning btn btn-warning Indica que s'ha de tenir precaució amb aquesta acció
Danger btn btn-danger Indica una acció perillosa o potencialment negativa
Inverse btn btn-inverse Alternar el botó gris fosc, no lligat a una acció o ús semàntic
Link btn btn-link Desmunteu un botó fent que s'assembli a un enllaç mentre es manté el comportament dels 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 h2

Títol h3

Títol h4

Títol h5
Títol h6

Títol .liniaDalt

Lorem Ipsum

 

Títol .liniaBaix

Lorem Ipsum


Columnats

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

 

3
3
3
3
4
4
4
6
6

Regles HR: 

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




Sense classe, amb liniaDalt (ombrejat amunt) i liniaBaix (ombrejat avall).

 


Alineació

Alineació d'elements

Destacat amb float a l'esquerra


pull-left. Float d'un element a l'esquerra.

 

Destacat amb float a la dreta


pull-right. Float d'un element a la dreta.

 

clearfix. Clear de floats.

Alineació d'imatges 

Afegeix al float un marge


image-left. Imatge a l'esquerra.


image-right. Imatge a la dreta.

Alineació de text

align-left. Text alineat a l'esquerra.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque at sodales metus. Sed vel magna pretium, consectetur erat tincidunt, tristique diam. Phasellus posuere pharetra massa at viverra. Phasellus consequat faucibus felis, et rhoncus justo consequat id. Integer non felis convallis, rutrum turpis quis, interdum ex. Cras efficitur arcu et ipsum vestibulum, et faucibus justo iaculis. Proin quam eros, porttitor maximus velit at, viverra luctus lorem. Duis viverra est purus, eget vestibulum sem dignissim id. Suspendisse dictum ante lectus, vitae convallis justo maximus nec.

 

align-center. Text alineat al centre.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque at sodales metus. Sed vel magna pretium, consectetur erat tincidunt, tristique diam. Phasellus posuere pharetra massa at viverra. Phasellus consequat faucibus felis, et rhoncus justo consequat id. Integer non felis convallis, rutrum turpis quis, interdum ex. Cras efficitur arcu et ipsum vestibulum, et faucibus justo iaculis. Proin quam eros, porttitor maximus velit at, viverra luctus lorem. Duis viverra est purus, eget vestibulum sem dignissim id. Suspendisse dictum ante lectus, vitae convallis justo maximus nec.

 

align-right. Text alineat a la dreta.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque at sodales metus. Sed vel magna pretium, consectetur erat tincidunt, tristique diam. Phasellus posuere pharetra massa at viverra. Phasellus consequat faucibus felis, et rhoncus justo consequat id. Integer non felis convallis, rutrum turpis quis, interdum ex. Cras efficitur arcu et ipsum vestibulum, et faucibus justo iaculis. Proin quam eros, porttitor maximus velit at, viverra luctus lorem. Duis viverra est purus, eget vestibulum sem dignissim id. Suspendisse dictum ante lectus, vitae convallis justo maximus nec.

 

align-justify. Text justificat.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque at sodales metus. Sed vel magna pretium, consectetur erat tincidunt, tristique diam. Phasellus posuere pharetra massa at viverra. Phasellus consequat faucibus felis, et rhoncus justo consequat id. Integer non felis convallis, rutrum turpis quis, interdum ex. Cras efficitur arcu et ipsum vestibulum, et faucibus justo iaculis. Proin quam eros, porttitor maximus velit at, viverra luctus lorem. Duis viverra est purus, eget vestibulum sem dignissim id. Suspendisse dictum ante lectus, vitae convallis justo maximus nec.

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

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

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

#Columna 1Columna 2Columna 3Columna 4
Peu de la taula
Lorem ipsum Dolor sum Consecuteur est Sit amet Lorem ipsum
Consecuteur est Lorem ipsum Sit amet Dolor sum Sit amet
Sit amet Consecuteur est Dolor sum Lorem ipsum Sit amet

Taula registres

Subtítol taula
Item A Item B Item C Item D Total
DL 34 43 34 43 77
DT 34 43 34 43 77
DC 34 43 34 43 77
DJ 34 43 34 43 77
DV 34 43 34 43 77

Taula Table

#Columna 1Columna 2Columna 3Columna 4
Peu de la taula
Lorem ipsum Dolor sum Consecuteur est Sit amet Lorem ipsum
Consecuteur est Lorem ipsum Sit amet Dolor sum Sit amet
Sit amet Consecuteur est Dolor sum Lorem ipsum Sit amet

Taula Bordered

#Columna 1Columna 2Columna 3Columna 4
Peu de la taula
Lorem ipsum Dolor sum Consecuteur est Sit amet Lorem ipsum
Consecuteur est Lorem ipsum Sit amet Dolor sum Sit amet
Sit amet Consecuteur est Dolor sum Lorem ipsum Sit amet

Taula Striped

#Columna 1Columna 2Columna 3Columna 4
Peu de la taula
Lorem ipsum Dolor sum Consecuteur est Sit amet Lorem ipsum
Consecuteur est Lorem ipsum Sit amet Dolor sum Sit amet
Sit amet Consecuteur est Dolor sum Lorem ipsum Sit amet

Taula Hover

#Columna 1Columna 2Columna 3Columna 4
Peu de la taula
Lorem ipsum Dolor sum Consecuteur est Sit amet Lorem ipsum
Consecuteur est Lorem ipsum Sit amet Dolor sum Sit amet
Sit amet Consecuteur est Dolor sum Lorem ipsum Sit amet

Taula Hover sense heading

#Columna 1Columna 2Columna 3Columna 4
Peu de la taula
Lorem ipsum Dolor sum Consecuteur est Sit amet Lorem ipsum
Consecuteur est Lorem ipsum Sit amet Dolor sum Sit amet
Sit amet Consecuteur est Dolor sum Lorem ipsum Sit amet

Taula Notebook

#Columna 1Columna 2Columna 3Columna 4
Peu de la taula
Lorem ipsum Dolor sum Consecuteur est Sit amet Lorem ipsum
Consecuteur est Lorem ipsum Sit amet Dolor sum Sit amet
Sit amet Consecuteur est Dolor sum Lorem ipsum Sit amet

Taula Notebook + Bordered + Hover

#Columna 1Columna 2Columna 3Columna 4
Peu de la taula
Lorem ipsum Dolor sum Consecuteur est Sit amet Lorem ipsum
Consecuteur est Lorem ipsum Sit amet Dolor sum Sit amet
Sit amet Consecuteur est Dolor sum Lorem ipsum Sit amet

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.

Fitxes

sheet 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.