开发手册 欢迎您！
软件开发者资料库

Framework7 - Content Block

Framework7内容块 - 从概述，环境，布局，导航栏，工具栏，搜索栏，状态栏，侧面板，内容块，布局网格，叠加层，预加载器，进度条，列表视图，手风琴，卡片，芯片，按钮开始学习Framework7 ，动作按钮，窗体，选项卡，Swiper滑块，照片浏览器，自动完成，选择器，日历，刷新，无限滚动，消息，消息栏，通知，延迟加载，颜色主题，细线，模板概述，自动编译，Template7页面，活动状态，点击保持事件，触摸波纹。

描述

内容块可用于添加不同格式的额外内容.

示例

以下示例演示了在Framework7中使用内容块 : 号;

                           Content Block                                                                                                                                              
                        Content Block
                                                                                                                         

This is out side of content block!!!

                                                                  

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium                         doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis                         et quasi architecto beatae vitae dicta sunt explicabo.

                                                                                       This is another text block wrapped with "content-block-inner"                                                               Content Block Title                                                                  

Praesent nec imperdiet diam. Maecenas vel lectus porttitor, consectetur                         magna nec, viverra sem. Aliquam sed risus dolor. Morbi tincidunt ut libero id sodales.                         Integer blandit varius nisi quis consectetur.

                                                               This is another long content block title                                                                                             

Sed ut perspiciatis unde omnis iste natus error sit voluptatem                            accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo                            inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.

                                                                                       Content Block Inset                                                                                             

Donec et nulla auctor massa pharetra adipiscing ut sit amet sem.                            Suspendisse molestie velit vitae mattis tincidunt. Ut sit amet quam mollis,                            vulputate turpis vel, sagittis felis. 

                                                                                       Content Block Tablet Inset                                                                                             

Donec et nulla auctor massa pharetra adipiscing ut sit amet sem.                           Suspendisse molestie velit vitae mattis tincidunt. Ut sit amet quam mollis,                            vulputate turpis vel, sagittis felis. 

                                                                                                                                                            

输出

让我们执行以下步骤，看看上面给出的代码如何工作 : 去;

  • 将上面给出的HTML代码保存为服务器根文件夹中的 content_block.html 文件.

  • 将此HTML文件打开为http://localhost/content_block.html，输出显示如下.

  • 代码为文本内容添加了额外的格式和所需的间距.