Bootstrap中如何使用Card卡片组件

本篇内容介绍了“Bootstrap中如何使用Card卡片组件”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！

让客户满意是我们工作的目标，不断超越客户的期望值来自于我们对这个行业的热爱。我们立志把好的技术通过有效、简单的方式提供给客户，将通过不懈努力成为客户在信息化领域值得信任、有价值的长期合作伙伴，公司提供的服务项目有：域名注册、网站空间、营销软件、网站建设、坪山网站维护、网站推广。

1 bootstrap 卡片介绍

Bootstrap的卡提供了一个灵活的、可扩展的内容容器，其中包含多种变体和选项。卡片被设计成尽可能的少用一些标记和样式，它们可以更方便的对齐，并与其它的Bootstrap元件良好混合。预设中它并没有margin，所以可以依需求加入spacing通用类别。

以下是一个具有混合内容和固定宽度的基本卡片示例。卡片如果没有固定的宽度，那么它们将自然填充其父元素的全部宽度。这可以透过我们的各种缩放选项轻松调整。下面是一个简单的例子。


            
            
            卡片标题
            卡片的内容可以使用文本、列表、表格、表单、图片等各种html元素
            这是一个按钮

Bootstrap中如何使用Card卡片组件

2 卡片的结构

2.1 完整的卡片结构示例

一般情况下，我们无须完整的卡片结构就可以很好的使用一个卡片组件，如上例所示，一个完整的卡片包括页眉、页脚、图片（此处指的是页眉下面的图片，与卡片同宽度）、主体、列表群组五部分，其中主体可包含标题和文本。下面是一个内容俱全的示例，事实上，一般情况下我们根据需要使用卡片的一两个元素就够用了，下面示例仅是演示，后面我们会逐一讲解各个部分功能。

 
        
           卡片页眉

Bootstrap中如何使用Card卡片组件

1 bootstrap 卡片介绍

2 卡片的结构

2.1 完整的卡片结构示例

2.1 卡片的页眉和页脚

2.1.1 简单卡片

2.1.2 使用引用用于名人名言

2.1.3 页眉页脚一起使用

2.2 图像的使用

2.2.1 图像在顶部或在底部

软发布 Win11

飞利浦推出4K显示器

2.2.2 图像作为卡片背景

微软发布 Win11

2.2.3 图像在左侧

2.3 卡片的主体

2.3.1 标题和副标题

2.3.2 文本内容和链接

2.4 列表群組

2.5 混合样式

3 卡片的排版及宽度

3.1 使用网格

微软发布 Win11

飞利浦推出4K显示器

3.2 使用通用类

微软发布 Win11

飞利浦推出4K显示器

3.3 使用自定义CSS

微软发布 Win11

飞利浦推出4K显示器

3.4 卡片中的文本对齐

微软发布 Win11

4 带选项卡的卡片

热点新闻

国内新闻

5 卡片样式

5.1 背景和颜色

5.2 边框和颜色

5.2 Mixin通用类

其他资讯