Vés al contingut (premeu Retorn)

Llista completa d'estils CSS

Bootstrap

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

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.

Veure totes les icones a RECURSOS


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"


Badges

class="badge"

class="badge primary"

class="badge badge-inverse"

class="badge badge-info"

class="badge badge-important"

class="badge badge-warning"

class="badge success"


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

Marcadors

Labels: 1 2 3 4 5 5 6

Badges: 1 2 3 4 5 5 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.