dash-bootstrap-卡片

from logging import debug
import dash
from dash import Input, Output, State
import dash_html_components as html
from dash.html.Colgroup import Colgroup
import dash_bootstrap_components as dbc
from dash_bootstrap_components.themes import BOOTSTRAP

app = dash.Dash()
# className="float-start ms-2" float-start实现块级元素在同一行排列，设置ms-间距
card_content = [
    dbc.CardHeader("卡头"),
    dbc.CardBody(
        [
            html.H5("卡的标题", className="card-title"),
            html.P(
                "这是我们的卡片的里面的内容，可以重复使用的巴拉巴拉巴拉",
                className="card-text",
            ),
        ]
    ),
]

cards = html.Div(
    [
        # 图片放在顶部，加一个按钮
        dbc.Card(
            [
                dbc.CardImg(src="/assets/01.jpg", top=True),
                dbc.CardBody(
                    [
                        html.H4("迪丽热巴", className="card-title"),
                        html.P(
                            "迪丽热巴（Dilraba），1992年6月3日出生于新疆乌鲁木齐市，"
                            "中国内地影视女演员、歌手，毕业于上海戏剧学院。",
                            className="card-text",
                        ),
                        dbc.Button(
                            "查看详情",
                            color="primary",
                            href="https://baike.baidu.com/item/%E8%BF%AA%E4%B8%BD%E7%83%AD%E5%B7%B4/1180418?fr=aladdin",
                        ),
                    ]
                ),
            ],
            style={"width": "18rem"},
            className="float-start ms-2",
        ),
        # 图片放在底部，加一个链接
        dbc.Card(
            [
                dbc.CardBody(
                    [
                        html.H4("迪丽热巴", className="card-title"),
                        html.P(
                            "迪丽热巴（Dilraba），1992年6月3日出生于新疆乌鲁木齐市，"
                            "中国内地影视女演员、歌手，毕业于上海戏剧学院。",
                            className="card-text",
                        ),
                        dbc.CardLink(
                            "查看详情",
                            href="https://baike.baidu.com/item/%E8%BF%AA%E4%B8%BD%E7%83%AD%E5%B7%B4/1180418?fr=aladdin",
                        ),
                    ]
                ),
                dbc.CardImg(src="/assets/01.jpg", bottom=True),
            ],
            style={"width": "18rem"},
            className=" float-start ms-2",
        ),
        # 图像叠加
        dbc.Card(
            [
                dbc.CardImg(
                    src="/assets/01.jpg",
                    top=True,
                    # 不透明度
                    style={"opacity": 0.3},
                ),
                dbc.CardImgOverlay(
                    dbc.CardBody(
                        [
                            html.P(
                                "迪丽热巴（Dilraba），1992年6月3日出生于新疆乌鲁木齐市，"
                                "中国内地影视女演员、歌手，毕业于上海戏剧学院。",
                                className="card-text",
                            ),
                            # dbc.CardLink("查看详情", href="https://www.baidu.com"),
                            dbc.Button(
                                "查看详情",
                                color="primary",
                                href="https://baike.baidu.com/item/%E8%BF%AA%E4%B8%BD%E7%83%AD%E5%B7%B4/1180418?fr=aladdin",
                            ),
                        ],
                    ),
                ),
            ],
            style={"width": "18rem"},
            className="float-start ms-2",
        ),
        dbc.Card(card_content, color="primary", inverse=True),
    ],
)


mp_card = dbc.Card(
    [
        dbc.Row(
            [
                dbc.Col(
                    dbc.CardImg(
                        src="/assets/02.jpg",
                        className="img-fluid rounded-start",
                    ),
                    className="col-md-4",
                ),
                dbc.Col(
                    dbc.CardBody(
                        [
                            html.H4("迪丽热巴 / 名片", className="card-title"),
                            html.P(
                                "迪丽热巴（Dilraba），1992年6月3日出生于新疆乌鲁木齐市， "
                                "中国内地影视女演员、歌手，毕业于上海戏剧学院。 ",
                                className="card-text",
                            ),
                            html.Small(
                                "演员，歌手",
                                className="card-text text-muted",
                            ),
                        ]
                    ),
                    className="col-md-8",
                ),
            ],
            className="g-0 d-flex align-items-center",
        )
    ],
    className="mb-3 float-start ms-2 mt-3",
    style={"maxWidth": "540px"},
)


app.layout = dbc.Container([cards, mp_card], fluid=True)

if __name__ == "__main__":
    app.run_server(debug=True)