Bootstrap中如何使用Card卡片组件

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

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

1 bootstrap 卡片介绍

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

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


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

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