首页 > 其他分享 >前端学习-UI框架学习-Bootstrap5-016-卡片

前端学习-UI框架学习-Bootstrap5-016-卡片

时间:2024-04-09 10:13:12浏览次数:20  
标签:卡片 移除 边距 UI 016 简单 Bootstrap5 链接

菜鸟教程链接

简单的卡片

<template>
    <div class="card">
        <h4 class="card-title">标题</h4>
        <img src="../assets/th.jfif" alt="537" class="card-img-top" style="width: 50px;">
        <div class="card-header">简单的卡片头部</div>
        <div class="card-body">
            <p class="card-text">简单的卡片正文 使用card-text修饰p,最后一行可以移除底部边距</p>
            <a href="#" class="card-link text-danger">链接</a>
        </div>
        <img src="../assets/th.jfif" alt="537" class="card-img-bottom" style="width: 50px;">
        <div class="card-footer">简单的卡片底部</div>
    </div>
    <div class="card img-fluid bg-primary">
        <img src="../assets/th.jfif" alt="537" class="card-img-top">
        <div class="card-img-overlay">
            <div class="card-body">
                <p class="card-text">简单的卡片正文 使用card-text修饰p,最后一行可以移除底部边距</p>
                <a href="#" class="card-link text-danger">链接</a>
            </div>
        </div>
    </div>
</template>


标签:卡片,移除,边距,UI,016,简单,Bootstrap5,链接
From: https://www.cnblogs.com/ayubene/p/18110468

相关文章

  • openGauss 支持备机build备机
    支持备机build备机可获得性本特性自openGauss3.0.0版本开始引入。特性简介备机build备机加快备机故障的恢复。减小主机io和带宽压力。客户价值当业务压力过大时,从主机build备机会对主机的资源造成影响,导致主机性能下降、build变慢的情况。使用备机build备机不会对主机业务......
  • 关于 Vision Pro 核心 UI 呈现“2D”的探讨
    近期,关于苹果VP的UI为何呈现“2D”的讨论引起了我的关注,以下是我对大家观点的总结:保证系统一致性:为了在苹果生态系统中保持一致性,VisionPro的用户界面采用2D设计。易于实现:考虑到未来开发终极AR眼镜,如VisionAir,2DUI更容易实现。先进的3D集成:苹果在操作系统和......
  • 2024年4月8日-UE5-开始菜单、事件分发器、UI预构造
    做个简单的菜单在主页面这里新建一个地图,按CTRL+N 把地面复制过来在开始关卡新建一个摄像机 打开关卡蓝图,先左键选中摄像机,然后在关卡蓝图里点右键,把摄像机拖下来   在UI里新建一个用户控件 再新建一个通用按钮 打开按钮的控件蓝图拖一个按钮进来 然......
  • Unity类银河恶魔城学习记录12-7-2 p129 Craft UI - part 2源代码
    Alex教程每一P的教程原代码加上我自己的理解初步理解写的注释,可供学习Alex教程的人参考此代码仅为较上一P有所改变的代码 【Unity教程】从0编程制作类银河恶魔城游戏_哔哩哔哩_bilibiliUI_CraftWindow.csusingUnityEngine.UI;usingTMPro;usingUnityEngine;usingU......
  • RuntimeError: requested profile "F:\code\chromium_git\chromium\src\chrome\
    RuntimeError:requestedprofile"F:\code\chromium_git\chromium\src\chrome\build\pgo_profiles\chrome-win64-5481-1675874756-509946de85f2a6f58f14f39a5e26a0ae82afaec0.profdata"doesn'texist,pleasemakesure"checkout_pgo_profiles......
  • stable-diffusion-webui怎么样增加自己训练的LoRA模型?
    不怕笑话,我曾经为了找这个功能,居然搞了半天时间,结果还没有搞定。后来再不断地研究各种教程,就是没有发现这个功能,无意间发现有一个人贴了一张图片,他只是介绍放到这个目录,他没有告诉我这个目录怎么样来的,因为我在同样的位置上没有这个目录。这样我训练出来的LoRA模型居然测试......
  • playwright+Pytest+UI 自动化分成设计框架
    Auth:认证登录token机制BasePage:公共方法Common:ConfigLogsPageLocatorsPagesTestCasesTestDatas新建BasePage.py文件点击查看代码fromplaywright.sync_apiimportexpect,PagefromConfig.configimportConfigimportos,timeclassBasePage:def__init......
  • 利用matlab的guide制作一个凯撒密码加解密演示界面
    第一步:在命令行窗口输入guide,回车选择新建gui如图所示,两个粉的是可编辑文本,一个按钮,三个写着字和一个白色的框是静态文本先把我们需要的这些东西都拉出来,数量记得到位,布局自己调粉色什么怎么调就自己探索一下,一般拉出来是白色双击其中一个静态文本,会弹出来一个对话框,......
  • webpack打包的时候如何指定 tsconfig.build.json
    在使用Webpack打包TypeScript项目时,如果你想要指定一个不同于默认的tsconfig.json的配置文件,你可以通过TypeScript的编译器选项tsconfig来实现。以下是一个基本的配置示例,你需要在webpack配置文件中的TypeScriptloader中添加这个选项:constpath=require('path');module.expo......
  • ubuntu2204 部署 stable-diffusion-webui
    显卡:(一个实例仅能用一张卡)顶配:rtx6000ada48g,a10040g,a100 80g,a100 96g,a80080g,h100,h200高端:rtx409024g,rtx4090D24g,rtxa600048g,rtxa500024g,rtx5000ada32g魔改:rtx2080ti22g,rtx308020g性价比:rtx4060ti16g,rtx206012g,rtx306012g,rtx309024g,rtxtitan24g其......