Framework7 卡片

17 Mar 2025 | 6 分钟阅读

Framework7 卡片用于包含单个主题的组织信息，例如照片、链接和文本。

卡片主要与列表视图一起使用，用于包含和组织您的信息。

Framework7 卡片有两种类型

卡片 HTML 布局： 基本卡片 HTML 布局使用卡片类来排列其项目。
带卡片的列表视图： 您可以通过向 <div class="list-block"> 添加 cards-list 类来使用卡片作为列表视图元素。

卡片 HTML 布局

一个基本的卡片 HTML 布局

<div class="card">
    <div class="card-header">Header</div>
    <div class="card-content">
        <div class="card-content-inner">Card content</div>
    </div>
    <div class="card-footer">Footer</div>
</div>

其中

<div class="card">: 卡片容器

<div class="card-header">: 卡片标题。主要用于显示卡片标题。可选。
<div class="card-footer">: 卡片页脚用于一些附加信息或自定义操作/链接。可选。
<div class="card-content">: 卡片内容的主要容器。必需。

<div class="card-content-inner">: 附加的内部包装器。用于向 card-content 添加额外的填充。可选。

卡片 HTML 布局包含几个类

索引	Class	描述
1)	卡片	它是卡片容器。
2)	卡片标题	它是可选的卡片标题，用于显示卡片标题。
3)	卡片页脚	它是可选的，用于指定附加信息或自定义链接。
4)	卡片内容	它是卡片内容的主要容器，是必需的。
5)	卡片内容内部	它是可选的附加内部包装器，用于向内容添加额外的填充。

注意：card-header 和 card-footer 都有 flexbox 布局，其中项目具有垂直居中对齐。如果您希望将项目排列到标题/页脚的顶部或底部，您可以使用 valign 属性。

卡片 HTML 布局示例

<!DOCTYPE html>
<html class="with-statusbar-overlay">
   <head>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1, 
         maximum-scale = 1, minimum-scale = 1, user-scalable = no, minimal-ui" />
      <meta name = "apple-mobile-web-app-capable" content = "yes" />
      <meta name = "apple-mobile-web-app-status-bar-style" content = "black" />
      <title>Card HTML Layout</title>
      <link rel = "stylesheet" 
         href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.min.css" />
      <link rel = "stylesheet" 
         href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.colors.min.css" />
      <link rel = "stylesheet" 
      href = "custom.css" />
   </head>

   <body>
      <style>
         .demo-card-header-pic .card-header {
            height:40vw;
            background-size:cover;
            background-position:center;
         }
         
         .facebook-card .card-header {
            display:block;padding:10px;
         }
         
         .facebook-card .facebook-avatar {
            float:left;
         }
         
         .facebook-card .facebook-name {
            margin-left:44px;
            font-size:14px;
            font-weight:500;
         }
         
         .facebook-card .facebook-date {
            margin-left:44px;
            font-size:13px;
            color:#8e8e93;
         }
         
         .facebook-card .card-footer {
            background:#fafafa;
         }
         
         .facebook-card .card-footer a {
            color:#81848b;
            font-weight:500;
         }
         
         .facebook-card .card-content img {
            display:block;
         }
         
         .facebook-card .card-content-inner {
            padding:15px 10px;
         }
      </style>
      
      <div class = "views">
         <div class = "view view-main">
            <div class = "pages">
               <div data-page = "home" class = "page navbar-fixed">
               
                  <div class = "navbar">
                     <div class = "navbar-inner">
                        <div class = "left"> </div>
                        <div class = "center">Card HTML Layout</div>
                        <div class = "right"> </div>
                     </div>
                  </div>

                  <div class = "page-content">
                     <div class = "content-block-title">Simple Cards</div>
                     
                     <div class = "card">
                        <div class = "card-content">
                           <div class = "card-content-inner">Lorem ipsum dolor sit amet, 
                              consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et 
                              dolore magna aliqua.</div>
                        </div>
                     </div>
                     
                     <div class = "card">
                        <div class = "card-header">Card header</div>
                        <div class = "card-content">
                           <div class = "card-content-inner">Lorem ipsum dolor sit amet, 
                              consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et 
                              dolore magna aliqua.</div>
                        </div>
                        <div class = "card-footer">Card Footer</div>
                     </div>
                     
                     <div class = "card">
                        <div class = "card-content">
                           <div class = "card-content-inner">Another card. Lorem ipsum dolor sit 
                              amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore 
                              et dolore magna aliqua. </div>
                        </div>
                     </div>
                     
                     <div class = "content-block-title">Styled Cards</div>
                     
                     <div class = "card demo-card-header-pic">
                        <div style = "background-image:url(/framework7/images/nature.jpg)" 
						valign = "bottom" class = "card-header color-white no-border">Beautiful Mountains</div>
                        
                        <div class = "card-content">
                           <div class = "card-content-inner">
                              <p class = "color-gray">Posted on May 20, 2015</p>
                              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, 
							  sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                           </div>
                        </div>
                        
                        <div class = "card-footer"><a href = "#" 
						class = "link">Like</a><a href = "#" class = "link">Comment</a></div>
                     </div>
                     
                     <div class = "card facebook-card">
                        <div class = "card-header">
                           <div class = "facebook-avatar"><img src = "/framework7/images/cat.jpg" 
						   width = "34" height = "34"></div>
                           <div class = "facebook-name">John Doe</div>
                           <div class = "facebook-date">Monday at 2:15 PM</div>
                        </div>
                        
                        <div class = "card-content">
                           <div class = "card-content-inner">
                              <p>What a nice view!!</p>
                              <img src = "/framework7/images/blue_hills1.jpg" width = "100%">
                              <p class = "color-gray">Likes: 112    Comments: 43</p>
                           </div>
                        </div>
                        
                        <div class = "card-footer"><a href = "#" 
						class = "link">Like</a><a href = "#" class = "link">Comment</a>
						<a href = "#" class = "link">Share</a></div>
                     </div>
                     
                     <div class = "content-block-title">Cards with List View</div>
                     
                     <div class = "card">
                        <div class = "card-content">
                           <div class = "list-block">
                              <ul>
                                 <li>
                                    <a href = "#" class = "item-link item-content">
                                       <div class = "item-media"><i
									   class = "icon icon-form-name"></i></div>
                                       <div class = "item-inner">
                                          <div class = "item-title">Link 1</div>
                                       </div>
                                    </a>
                                 </li>
                                 
                                 <li>
                                    <a href = "#" class = "item-link item-content">
                                       <div class = "item-media"><i class = "icon icon-form-name"></i></div>
                                       <div class = "item-inner">
                                          <div class = "item-title">Link 2</div>
                                       </div>
                                    </a>
                                 </li>
                                 
                                 <li>
                                    <a href = "#" class = "item-link item-content">
                                       <div class = "item-media"><i class = "icon icon-form-name"></i></div>
                                       <div class = "item-inner">
                                          <div class = "item-title">Link 3</div>
                                       </div>
                                    </a>
                                 </li>
                                 
                                 <li>
                                    <a href = "#" class = "item-link item-content">
                                       <div class = "item-media"><i class = "icon icon-form-name"></i></div>
                                       <div class = "item-inner">
                                          <div class = "item-title">Link 4</div>
                                       </div>
                                    </a>
                                 </li>
                                 
                                 <li>
                                    <a href = "#" class = "item-link item-content">
                                       <div class = "item-media"><i class = "icon icon-form-name"></i></div>
                                       <div class = "item-inner">
                                          <div class = "item-title">Link 5</div>
                                       </div>
                                    </a>
                                 </li>
                              </ul>
                           </div>
                        </div>
                     </div>
                     
                     <div class = "card">
                        <div class = "card-header">Tutorials:</div>
                        <div class = "card-content">
                           <div class = "list-block media-list">
                              <ul>
                                 <li class = "item-content">
                                    <div class = "item-media"><img src = "/framework7/images/pic.jpg" 
									width = "44"></div>
                                    <div class = "item-inner">
                                       <div class = "item-title-row">
                                          <div class = "item-title">Java</div>
                                       </div>
                                       <div class = "item-subtitle">Sonoo Jaiswal</div>
                                    </div>
                                 </li>
                                 
                                 <li class = "item-content">
                                    <div class = "item-media"><img src = "/framework7/images/pic3.jpg" 
									width = "44"></div>
                                    <div class = "item-inner">
                                       <div class = "item-title-row">
                                          <div class = "item-title">Oracle</div>
                                       </div>
                                       <div class = "item-subtitle">Ajeet Kumar</div>
                                    </div>
                                 </li>
                                 
                                 <li class = "item-content">
                                    <div class = "item-media"><img src = "/framework7/images/pic2.jpg" 
									width = "44"></div>
                                    <div class = "item-inner">
                                       <div class = "item-title-row">
                                          <div class = "item-title">Go</div>
                                       </div>
                                       <div class = "item-subtitle">Nippun Kumar</div>
                                    </div>
                                 </li>
                              </ul>
                           </div>
                        </div>
                        
                        <div class = "card-footer"> <span>May 1, 2016</span><span>45 
						comments</span></div>
                     </div>
                     
                  </div>
               </div>
            </div>
         </div>
      </div>
      
      <script type = "text/javascript" 
         src = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/js/framework7.min.js"></script>
         
      <script>var myApp = new Framework7();</script>
   </body>
</html>

立即测试

带卡片的列表视图

您可以通过向 <div class = "list-block"> 添加 cards-list 类来使用卡片作为列表视图元素。

示例

<!DOCTYPE html>
<html class = "with-statusbar-overlay">
   <head>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1, 
         maximum-scale = 1, minimum-scale = 1, user-scalable = no, minimal-ui" />
      <meta name = "apple-mobile-web-app-capable" content = "yes" />
      <meta name = "apple-mobile-web-app-status-bar-style" content = "black" />
      <title>List View With Cards</title>
      <link rel = "stylesheet" 
         href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.min.css" />
      <link rel = "stylesheet" 
         href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.colors.min.css" />
      <link rel = "stylesheet" 
         href = "custom.css" />
   </head>
<body>
      <body>
         <div class = "views">
            <div class = "view view-main">
               <div class = "pages">
                  <div data-page = "home" class = "page navbar-fixed">                  
                     <div class = "navbar">
                        <div class = "navbar-inner">
                           <div class = "left"> </div>
                           <div class = "center">List View With Cards</div>
                           <div class = "right"> </div>
                        </div>
                     </div>                   
                     <div class = "page-content">
                        <div class = "list-block cards-list">
                           <ul>
                              <li class = "card">
                                 <div class = "card-header">Card Header</div>
                                 <div class = "card-content">
                                    <div class = "card-content-inner">Content</div>
                                 </div>
                                 <div class = "card-footer">Card footer</div>
                              </li>                   
                              <li class = "card">
                                 <div class = "card-header">Card Header</div>
                                 <div class = "card-content">
                                    <div class = "card-content-inner">Content</div>
                                 </div>
                                 <div class = "card-footer">Card footer</div>
                              </li>                        
                              <li class = "card">
                                 <div class = "card-header">Card Header</div>
                                 <div class = "card-content">
                                    <div class = "card-content-inner">Content</div>
                                 </div>
                                 <div class = "card-footer">Card footer</div>
                              </li>
                           </ul>
                        </div>
                     </div>                     
                  </div>
               </div>
            </div>
         </div>
         <script type = "text/javascript" 
            src = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/js/framework7.min.js"></script>          
         <script>var myApp = new Framework7();</script>
      </body>
   </body>
</html>

立即测试

下一主题Framework7 芯片

Framework7 卡片

卡片 HTML 布局

注意：card-header 和 card-footer 都有 flexbox 布局，其中项目具有垂直居中对齐。如果您希望将项目排列到标题/页脚的顶部或底部，您可以使用 valign 属性。

卡片 HTML 布局示例

带卡片的列表视图

示例

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

Framework7 教程

Framework7 表单

Framework7 选项卡

F7 Swiper 滑块

F7 图片浏览器

F7 选择器

F7 日历

F7 杂项

面试题

Framework7 卡片

卡片 HTML 布局

注意：card-header 和 card-footer 都有 flexbox 布局，其中项目具有垂直居中对齐。 如果您希望将项目排列到标题/页脚的顶部或底部，您可以使用 valign 属性。

卡片 HTML 布局示例

带卡片的列表视图

示例

相关帖子

F7 布局网格

F7 导航栏

F7 侧边栏

F7 芯片

Framework7 教程

F7 手风琴

F7 内容块

F7 预加载器

F7 工具栏

F7 覆盖层

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器

注意：card-header 和 card-footer 都有 flexbox 布局，其中项目具有垂直居中对齐。如果您希望将项目排列到标题/页脚的顶部或底部，您可以使用 valign 属性。