Template:Card


Descrizione

Componente card da Bootstrap 4.1

Vedi anche http://getbootstrap.com/docs/4.1/components/card/

Parametri

  • {{{body}}} o {{{1}}}
  • {{{list}}}
  • {{{header}}}
  • {{{footer}}}
  • {{{image top}}}
  • {{{image bottom}}}
  • {{{class}}} - HTML class. e.g. ml-3 d-none d-md-block
  • {{{style}}} - HTML style. e.g. width: 300px; max-width: 100%;

Esempi

Card semplice

Codice:

{{Card|Questo è un card}}

Risultato:

Questo è un card

Intestazione e piè pagina

Codice:

{{Card
|header=Questa è un'intestazione di card
|body=Questo è un corpo di card
|footer=Questo è un piè di pagina di card
}}

Risultato:

Questa è un'intestazione di card
Questo è un corpo di card

Elenco

Codice:

{{Card
|header=Questa è un'intestazione di card
|list=
* Questo è un elenco
* Questo è un elenco
* Questo è un elenco
}}

Risultato:

Questa è un'intestazione di card
  • Questo è un elenco
  • Questo è un elenco
  • Questo è un elenco

Immagine

Codice:

{{Card
|image top=[[File:Firefox-logo.png|link=|300px]]
|style=width: 300px; max-width: 100%;
|list=
* Questo è un elenco
* Questo è un elenco
* Questo è un elenco
}}

Risultato:

Firefox-logo.png

  • Questo è un elenco
  • Questo è un elenco
  • Questo è un elenco

Classe di temi

{{Card
|class=text-white bg-primary
|header=Questa è un'intestazione di card
|body=Questo è un corpo di card
|footer=Questo è un piè di pagina di card
}}
Questa è un'intestazione di card
Questo è un corpo di card
{{Card
|class=text-white bg-secondary
|header=Questa è un'intestazione di card
|body=Questo è un corpo di card
|footer=Questo è un piè di pagina di card
}}
Questa è un'intestazione di card
Questo è un corpo di card
{{Card
|class=text-white bg-success
|header=Questa è un'intestazione di card
|body=Questo è un corpo di card
|footer=Questo è un piè di pagina di card
}}
Questa è un'intestazione di card
Questo è un corpo di card
{{Card
|class=text-white bg-danger
|header=Questa è un'intestazione di card
|body=Questo è un corpo di card
|footer=Questo è un piè di pagina di card
}}
Questa è un'intestazione di card
Questo è un corpo di card
{{Card
|class=text-white bg-warning
|header=Questa è un'intestazione di card
|body=Questo è un corpo di card
|footer=Questo è un piè di pagina di card
}}
Questa è un'intestazione di card
Questo è un corpo di card
{{Card
|class=text-white bg-info
|header=Questa è un'intestazione di card
|body=Questo è un corpo di card
|footer=Questo è un piè di pagina di card
}}
Questa è un'intestazione di card
Questo è un corpo di card
{{Card
|class=bg-light
|header=Questa è un'intestazione di card
|body=Questo è un corpo di card
|footer=Questo è un piè di pagina di card
}}
Questa è un'intestazione di card
Questo è un corpo di card
{{Card
|class=text-white bg-dark
|header=Questa è un'intestazione di card
|body=Questo è un corpo di card
|footer=Questo è un piè di pagina di card
}}
Questa è un'intestazione di card
Questo è un corpo di card

Bootstrap fornisce molte utili classi di utilità per le disposizioni e lo stile. Controlla il documento.

Vedi anche