Template:Card

跳转至: 导航, 搜索

描述

Bootstrap 4.1 的 Card 组件。

参见 http://getbootstrap.com/docs/4.1/components/card/

参数

  • {{{body}}} or {{{1}}}
  • {{{list}}}
  • {{{header}}}
  • {{{footer}}}
  • {{{image top}}}
  • {{{image bottom}}}
  • {{{class}}} - HTML class,例如 ml-3 d-none d-md-block
  • {{{style}}} - HTML style,例如 width: 300px; max-width: 100%;

示例

简单的卡片

代码:

{{Card|This is a card}}

效果:

This is a card

头部和脚部

代码:

{{Card
|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
|header=This is a card header
|list=
* This is a list
* This is a list
* This is a list
}}

效果:

This is a card header
  • This is a list
  • This is a list
  • This is a list

图片

代码:

{{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
}}

效果:

Firefox-logo.png

  • 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 提供了很多有用 class ,可以用来方便地布局和美化组件。点击查看文档

另见