Šablona:Karta

Přejít na: navigace, hledání


Popis

Komponenta Card z Bootstrapu 4.1

Viz také http://getbootstrap.com/docs/4.1/components/card/

Parametry

  • {{{body}}} nebo {{{1}}} - tělíčko
  • {{{list}}} - seznam
  • {{{header}}} - hlavička
  • {{{footer}}} - patička
  • {{{image top}}} - obrázek nahoře
  • {{{image bottom}}} - obrázek dole
  • {{{class}}} - HTML třída. Např. ml-3 d-none d-md-block
  • {{{style}}} - HTML styl. Např. width: 300px; max-width: 100%;

Příklady

Jednoduchá karta

Kód:

{{Karta|Toto je karta}}

Výsledek:

Toto je karta

Hlavička a patička

Kód:

{{Karta
|header=Toto je hlavička karty
|body=Toto je tělíčko karty
|footer=Toto je patička karty
}}

Výsledek:

Toto je hlavička karty
Toto je tělíčko karty

Seznam

Kód:

{{Karta
|header=Toto je hlavička karty
|list=
* Toto je seznam
* Toto je seznam
* Toto je seznam
}}

Výsledek:

Toto je hlavička karty
  • Toto je seznam
  • Toto je seznam
  • Toto je seznam

Obrázek

Kód:

{{Karta
|image top=[[File:Firefox-logo.png|link=|300px]]
|style=width: 300px; max-width: 100%;
|list=
* Toto je seznam
* Toto je seznam
* Toto je seznam
}}

Výsledek:

Firefox-logo.png

  • Toto je seznam
  • Toto je seznam
  • Toto je seznam

Třída tématu

{{Karta
|class=text-white bg-primary
|header=Toto je hlavička karty
|body=Toto je tělíčko karty
|footer=Toto je patička karty
}}
Toto je hlavička karty
Toto je tělíčko karty
{{Karta
|class=text-white bg-secondary
|header=Toto je hlavička karty
|body=Toto je tělíčko karty
|footer=Toto je patička karty
}}
Toto je hlavička karty
Toto je tělíčko karty
{{Karta
|class=text-white bg-success
|header=Toto je hlavička karty
|body=Toto je tělíčko karty
|footer=Toto je patička karty
}}
Toto je hlavička karty
Toto je tělíčko karty
{{Karta
|class=text-white bg-danger
|header=Toto je hlavička karty
|body=Toto je tělíčko karty
|footer=Toto je patička karty
}}
Toto je hlavička karty
Toto je tělíčko karty
{{Karta
|class=text-white bg-warning
|header=Toto je hlavička karty
|body=Toto je tělíčko karty
|footer=Toto je patička karty
}}
Toto je hlavička karty
Toto je tělíčko karty
{{Karta
|class=text-white bg-info
|header=Toto je hlavička karty
|body=Toto je tělíčko karty
|footer=Toto je patička karty
}}
Toto je hlavička karty
Toto je tělíčko karty
{{Karta
|class=bg-light
|header=Toto je hlavička karty
|body=Toto je tělíčko karty
|footer=Toto je patička karty
}}
Toto je hlavička karty
Toto je tělíčko karty
{{Karta
|class=text-white bg-dark
|header=Toto je hlavička karty
|body=Toto je tělíčko karty
|footer=Toto je patička karty
}}
Toto je hlavička karty
Toto je tělíčko karty

Bootstrap nabízí množství užitečných nástrojových tříd pro rozvržení a stylování. Prohlédněte si dokument.

Vizte také