The wikis are now using the new authentication system.
If you did not migrate your account yet, visit https://idp-portal-info.suse.com/
If you did not migrate your account yet, visit https://idp-portal-info.suse.com/
テンプレート:Card
目次
Description
Card component from Bootstrap 4.1
See also http://getbootstrap.com/docs/4.1/components/card/
Parameters
- {{{body}}} or {{{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%;
Examples
Simple card
Code:
{{Card|This is a card}}
Result:
This is a card
Code:
{{Card |header=This is a card header |body=This is a card body |footer=This is a card footer }}
Result:
This is a card header
This is a card body
List
Code:
{{Card |header=This is a card header |list= * This is a list * This is a list * This is a list }}
Result:
This is a card header
- This is a list
- This is a list
- This is a list
Image
Code:
{{Card |image top=[[File:Firefox-logo.png|link=|300px]] |style=width: 300px; max-width: 100%; |list= * This is a list * This is a list * This is a list }}
Result:
- This is a list
- This is a list
- This is a list
Theme class
{{Card |class=text-white bg-primary |header=This is a card header |body=This is a card body |footer=This is a card footer }}
This is a card header
This is a card body
{{Card |class=text-white bg-secondary |header=This is a card header |body=This is a card body |footer=This is a card footer }}
This is a card header
This is a card body
{{Card |class=text-white bg-success |header=This is a card header |body=This is a card body |footer=This is a card footer }}
This is a card header
This is a card body
{{Card |class=text-white bg-danger |header=This is a card header |body=This is a card body |footer=This is a card footer }}
This is a card header
This is a card body
{{Card |class=text-white bg-warning |header=This is a card header |body=This is a card body |footer=This is a card footer }}
This is a card header
This is a card body
{{Card |class=text-white bg-info |header=This is a card header |body=This is a card body |footer=This is a card footer }}
This is a card header
This is a card body
{{Card |class=bg-light |header=This is a card header |body=This is a card body |footer=This is a card footer }}
This is a card header
This is a card body
{{Card |class=text-white bg-dark |header=This is a card header |body=This is a card body |footer=This is a card footer }}
This is a card header
This is a card body
Bootstrap provides a lot of useful utility classes for layout and styling. Check the document.
See also
- Bootstrap templates
- Template:AppCard
- Template:Button[[cs:{{{1}}}]]
[[de:{{{1}}}]]
[[el:{{{1}}}]]
[[en:{{{1}}}]]
[[es:{{{1}}}]]
[[fr:{{{1}}}]]
[[is:{{{1}}}]]
[[it:{{{1}}}]]
[[hu:{{{1}}}]]
[[nl:{{{1}}}]]
[[pl:{{{1}}}]]
[[pt:{{{1}}}]]
[[ru:{{{1}}}]]
[[fi:{{{1}}}]]
[[sv:{{{1}}}]]
[[tr:{{{1}}}]]
[[vi:{{{1}}}]]