本文概述

• iOS主题按钮
• iOS主题按钮示例
• 原生主题按钮
• 原生主题按钮示例

Framework7提供了许多现成的按钮。你只需要在链接中添加适当的类或提交/按钮输入即可使用这些按钮。
iOS主题按钮常用按钮
可以通过对任何链接或按钮输入使用按钮类来实现：

< p> < a href="http://www.srcmini.com/#" class="button"> Usual Button 1< /a> < /p> < p> < a href="http://www.srcmini.com/#" class="button"> Usual Button 2< /a> < /p> < p> < a href="http://www.srcmini.com/#" class="button"> Usual Button 3< /a> < /p>

注意：默认情况下, Framework7中的每个按钮均为“ display：block”, 并将采用其父宽度的100％。活跃状态
只需向按钮添加其他活动类即可使你的按钮活动。

< a href="http://www.srcmini.com/#" class="button active"> Active Button< /a>

圆形按钮
button-round类用于添加圆形按钮。

< p> < a href="http://www.srcmini.com/#" class="button button-round"> Round Button 1< /a> < /p> < p> < a href="http://www.srcmini.com/#" class="button button-round"> Round Button 2< /a> < /p> < p> < a href="http://www.srcmini.com/#" class="button button-round active"> Round Button Active< /a> < /p>

大按钮
你可以通过在输入按钮中添加button-big class来使用big按钮。

< a href="http://www.srcmini.com/#" class="button button-big"> Big Button < /a> < a href="http://www.srcmini.com/#" class="button button-big button-round"> Big Round Button < /a> < a href="http://www.srcmini.com/#" class="button button-big button-round active"> Big Round Active Button < /a>

按钮行/分段控件
如果要获取分段的按钮行, 则必须使用buttons-row类包装按钮。每个按钮的宽度相等。

< p class="buttons-row"> < a href="http://www.srcmini.com/#" class="button"> Button 1< /a> < a href="http://www.srcmini.com/#" class="button"> Button 2< /a> < a href="http://www.srcmini.com/#" class="button"> Button 3< /a> < /p> < p class="buttons-row"> < a href="http://www.srcmini.com/#" class="button active"> Button 1< /a> < a href="http://www.srcmini.com/#" class="button"> Button 2< /a> < a href="http://www.srcmini.com/#" class="button"> Button 3< /a> < /p> < p class="buttons-row"> < a href="http://www.srcmini.com/#" class="button button-round"> Button 1< /a> < a href="http://www.srcmini.com/#" class="button button-round"> Button 2< /a> < /p> < p class="buttons-row"> < a href="http://www.srcmini.com/#" class="button button-round"> Button 1< /a> < a href="http://www.srcmini.com/#" class="button button-round active"> Button 2< /a> < /p>

填充按钮
填充按钮几乎与活动按钮相似, 但旨在用作单个按钮, 这对单击/轻击显示出不同的效果：

< a href="http://www.srcmini.com/#" class="button button-fill"> Fill Button < /a> < a href="http://www.srcmini.com/#" class="button button-round button-fill"> Round Fill Button< /a> < a href="http://www.srcmini.com/#" class="button button-big button-fill"> Big Fill Button < /a>

颜色按钮
你可以使用10个默认颜色主题来为按钮着色。

< p class="buttons-row theme-pink"> < a href="http://www.srcmini.com/#" class="button active"> Button 1< /a> < a href="http://www.srcmini.com/#" class="button"> Button 2< /a> < a href="http://www.srcmini.com/#" class="button"> Button 3< /a> < /p> < p class="buttons-row theme-orange"> < a href="http://www.srcmini.com/#" class="button"> Button 1< /a> < a href="http://www.srcmini.com/#" class="button active"> Button 2< /a> < a href="http://www.srcmini.com/#" class="button"> Button 3< /a> < /p> < p> < a href="http://www.srcmini.com/#" class="button button-fill color-green"> Green< /a> < /p> < p> < a href="http://www.srcmini.com/#" class="button button-fill color-red button-round"> Round Red< /a> < /p> < p> < a href="http://www.srcmini.com/#" class="button button-big button-fill color-gray"> Big Gray< /a> < /p> < p> < a href="http://www.srcmini.com/#" class="button button-fill button-big color-yellow"> Big Yellow< /a> < /p>

列表阻止按钮
你可以将按钮与列表视图一起使用。

< div class="content-block-title"> List block buttons< /div> < div class="list-block"> < ul> < li> < a href="http://www.srcmini.com/#" class="item-link list-button"> List Button 1< /a> < /li> < li> < a href="http://www.srcmini.com/#" class="item-link list-button"> List Button 2< /a> < /li> < li> < a href="http://www.srcmini.com/#" class="item-link list-button"> List Button 3< /a> < /li> < /ul> < /div> < div class="content-block-title"> Inset list block buttons< /div> < div class="list-block inset"> < ul> < li> < a href="http://www.srcmini.com/#" class="item-link list-button"> List Button 1< /a> < /li> < li> < a href="http://www.srcmini.com/#" class="item-link list-button"> List Button 2< /a> < /li> < li> < a href="http://www.srcmini.com/#" class="item-link list-button"> List Button 3< /a> < /li> < /ul> < /div>

使用网格
你可以根据需要将按钮放置在网格中的任何位置。

< div class="row"> < div class="col-50"> < a href="http://www.srcmini.com/#" class="button button-big button-red"> Cancel< /a> < /div> < div class="col-50"> < a href="http://www.srcmini.com/#" class="button button-big button-green"> Submit< /a> < /div> < /div>

iOS主题按钮示例让我们以一个示例来演示iOS主题按钮：

< !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> iOS Theme Buttons< /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 = "http://www.srcmini.com/custom.css" /> < /head> < 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"> Buttons< /div> < div class = "right"> < /div> < /div> < /div> < div class = "page-content"> < div class = "content-block-title"> Usual Buttons< /div> < div class = "content-block"> < p> < a href = "http://www.srcmini.com/#" class = "button"> Usual Button< /a> < /p> < /div> < div class = "content-block-title"> Active Button< /div> < div class = "content-block"> < p> < a href = "http://www.srcmini.com/#" class = "button active"> Active Button< /a> < /p> < /div> < div class = "content-block-title"> Round Buttons< /div> < div class = "content-block"> < p> < a href = "http://www.srcmini.com/#" class = "button button-round"> Round Button< /a> < /p> < p> < a href = "http://www.srcmini.com/#" class = "button button-round active"> Round Button With Active< /a> < /p> < /div> < div class = "content-block-title"> Big Buttons< /div> < div class = "content-block"> < p> < a href = "http://www.srcmini.com/#" class = "button button-big"> Big Button < /a> < /p> < p> < a href = "http://www.srcmini.com/#" class = "button button-big button-round"> Rounded Big Button < /a> < /p> < p> < a href = "http://www.srcmini.com/#" class = "button button-big button-round active"> Rounded Big Button and Active< /a> < /p> < /div> < div class = "content-block-title"> Buttons Row / Segmented Controller< /div> < div class = "content-block"> < p class = "buttons-row"> < a href = "http://www.srcmini.com/#" class = "button"> Button 1< /a> < a href = "http://www.srcmini.com/#" class = "button"> Button 2< /a> < a href = "http://www.srcmini.com/#" class = "button"> Button 3< /a> < /p> < p class = "buttons-row"> < a href = "http://www.srcmini.com/#" class = "button button-round"> Button 1< /a> < a href = "http://www.srcmini.com/#" class = "button button-round"> Button 2< /a> < /p> < /div> < div class = "content-block-title"> Fill buttons < /div> < div class = "content-block"> < p> < a href = "http://www.srcmini.com/#" class = "button button-fill"> Fill Button< /a> < /p> < p> < a href = "http://www.srcmini.com/#" class = "button button-big button-fill"> Big Fill Button < /a> < /p> < /div> < div class = "content-block-title"> Color buttons< /div> < div class = "content-block"> < p class = "buttons-row theme-blue"> < a href = "http://www.srcmini.com/#" class = "button active"> Button 1< /a> < a href = "http://www.srcmini.com/#" class = "button"> Button 2< /a> < a href = "http://www.srcmini.com/#" class = "button"> Button 3< /a> < /p> < p class = "buttons-row theme-yellow"> < a href = "http://www.srcmini.com/#" class = "button"> Button 1< /a> < a href = "http://www.srcmini.com/#" class = "button active"> Button 2< /a> < a href = "http://www.srcmini.com/#" class = "button"> Button 3< /a> < /p> < p> < a href = "http://www.srcmini.com/#" class = "button button-fill color-green"> Green< /a> < /p> < p> < a href = "http://www.srcmini.com/#" class = "button button-big button-fill color-pink"> Big Pink< /a> < /p> < p> < a href = "http://www.srcmini.com/#" class = "button button-fill button-big color-gray"> Big Gray Button< /a> < /p> < /div> < div class = "content-block-title"> List block buttons< /div> < div class = "list-block"> < ul> < li> < a href = "http://www.srcmini.com/#" class = "item-link list-button"> List Button 1< /a> < /li> < li> < a href = "http://www.srcmini.com/#" class = "item-link list-button"> List Button 2< /a> < /li> < li> < a href = "http://www.srcmini.com/#" class = "item-link list-button"> List Button 3< /a> < /li> < li> < a href = "http://www.srcmini.com/#" class = "item-link list-button"> List Button 4< /a> < /li> < /ul> < /div> < div class = "content-block-title"> Inset list block buttons< /div> < div class = "list-block inset"> < ul> < li> < a href = "http://www.srcmini.com/#" class = "item-link list-button"> List Button 1< /a> < /li> < li> < a href = "http://www.srcmini.com/#" class = "item-link list-button"> List Button 2< /a> < /li> < li> < a href = "http://www.srcmini.com/#" class = "item-link list-button"> List Button 3< /a> < /li> < li> < a href = "http://www.srcmini.com/#" class = "item-link list-button"> List Button 4< /a> < /li> < /ul> < /div> < div class = "content-block-title"> Using Grid< /div> < div class = "content-block"> < div class = "row"> < div class = "col-50"> < a href = "http://www.srcmini.com/#" class = "button button-big button-fill color-blue"> Submit< /a> < /div> < div class = "col-50"> < a href = "http://www.srcmini.com/#" class = "button button-big button-fill color-red"> Cancel< /a> < /div> < /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>

立即测试
原生主题按钮Material主题用于通过使用适当的类来提供许多在你的应用程序中使用的按钮。
以下是素材主题按钮的列表：
常用/扁平按钮
如果要使用平面按钮, 请对输入按钮使用按钮类。

< p> < a href="http://www.srcmini.com/#" class="button"> Button< /a> < /p> < p> < a href="http://www.srcmini.com/#" class="button"> Button< /a> < /p>

按钮行
要使用按钮行, 你必须使用按钮行类将按钮包装在一起。

< p class="buttons-row"> < a href="http://www.srcmini.com/#" class="button"> Button< /a> < a href="http://www.srcmini.com/#" class="button"> Button< /a> < /p>

凸起的按钮
使用“ button-raised”类获取凸起样式的按钮。

< p class="buttons-row"> < a href="http://www.srcmini.com/#" class="button button-raised"> Button< /a> < a href="http://www.srcmini.com/#" class="button button-raised"> Button< /a> < a href="http://www.srcmini.com/#" class="button button-raised"> Button< /a> < /p>

凸起的填充按钮
对输入按钮使用按钮填充类。

< p class="buttons-row"> < a href="http://www.srcmini.com/#" class="button button-fill button-raised"> Button< /a> < a href="http://www.srcmini.com/#" class="button button-fill button-raised"> Button< /a> < a href="http://www.srcmini.com/#" class="button button-fill button-raised"> Button< /a> < /p>

颜色按钮
你可以使用20个默认的“原生”颜色主题为按钮着色。

< p class="buttons-row"> < a href="http://www.srcmini.com/#" class="button color-red"> Red< /a> < a href="http://www.srcmini.com/#" class="button color-green"> Green< /a> < a href="http://www.srcmini.com/#" class="button color-blue"> Blue< /a> < /p> < p class="buttons-row"> < a href="http://www.srcmini.com/#" class="button color-orange"> Orange< /a> < a href="http://www.srcmini.com/#" class="button color-pink"> Pink< /a> < a href="http://www.srcmini.com/#" class="button color-purple"> Purple< /a> < /p> < p class="buttons-row"> < a href="http://www.srcmini.com/#" class="button color-cyan"> Cyan< /a> < a href="http://www.srcmini.com/#" class="button color-teal"> Teal< /a> < a href="http://www.srcmini.com/#" class="button color-indigo"> Indigo< /a> < /p>

颜色填充按钮
【Framework7按钮】你可以通过应用按钮填充和颜色类别来使用颜色填充按钮。

< p class="buttons-row"> < a href="http://www.srcmini.com/#" class="button button-fill color-red"> Red< /a> < a href="http://www.srcmini.com/#" class="button button-fill color-green"> Green< /a> < a href="http://www.srcmini.com/#" class="button button-fill color-blue"> Blue< /a> < /p> < p class="buttons-row"> < a href="http://www.srcmini.com/#" class="button button-fill color-orange"> Orange< /a> < a href="http://www.srcmini.com/#" class="button button-fill color-pink"> Pink< /a> < a href="http://www.srcmini.com/#" class="button button-fill color-purple"> Purple< /a> < /p> < p class="buttons-row"> < a href="http://www.srcmini.com/#" class="button button-fill color-cyan"> Cyan< /a> < a href="http://www.srcmini.com/#" class="button button-fill color-teal"> Teal< /a> < a href="http://www.srcmini.com/#" class="button button-fill color-indigo"> Indigo< /a> < /p>

彩色填充按钮
你可以通过应用按钮凸起, 按钮填充和颜色类别来使用颜色凸起的填充按钮。

< p class="buttons-row"> < a href="http://www.srcmini.com/#" class="button button-raised button-fill color-red"> Red< /a> < a href="http://www.srcmini.com/#" class="button button-raised button-fill color-green"> Green< /a> < a href="http://www.srcmini.com/#" class="button button-raised button-fill color-blue"> Blue< /a> < /p> < p class="buttons-row"> < a href="http://www.srcmini.com/#" class="button button-raised button-fill color-orange"> Orange< /a> < a href="http://www.srcmini.com/#" class="button button-raised button-fill color-pink"> Pink< /a> < a href="http://www.srcmini.com/#" class="button button-raised button-fill color-purple"> Purple< /a> < /p> < p class="buttons-row"> < a href="http://www.srcmini.com/#" class="button button-raised button-fill color-cyan"> Cyan< /a> < a href="http://www.srcmini.com/#" class="button button-raised button-fill color-teal"> Teal< /a> < a href="http://www.srcmini.com/#" class="button button-raised button-fill color-indigo"> Indigo< /a> < /p>

彩色波纹按钮
如果要添加不同颜色的波纹, 只需在按钮上添加ripple- [color]类。

< p class="buttons-row"> < a href="http://www.srcmini.com/#" class="button ripple-blue"> Button< /a> < a href="http://www.srcmini.com/#" class="button color-green ripple-pink"> Button< /a> < a href="http://www.srcmini.com/#" class="button color-teal ripple-amber"> Button< /a> < /p> < p class="buttons-row"> < a href="http://www.srcmini.com/#" class="button button-raised button-fill color-orange ripple-green"> Button< /a> < a href="http://www.srcmini.com/#" class="button button-raised button-fill color-pink ripple-blue"> Button< /a> < a href="http://www.srcmini.com/#" class="button button-raised button-fill color-purple ripple-yellow"> Button< /a> < /p>

大按钮
要使按钮变大, 请将button-big class添加到button。

< p class="buttons-row"> < a href="http://www.srcmini.com/#" class="button button-big color-green"> Button< /a> < a href="http://www.srcmini.com/#" class="button button-big color-red"> Button< /a> < /p> < p class="buttons-row"> < a href="http://www.srcmini.com/#" class="button button-big button-fill button-raised color-pink"> Button< /a> < a href="http://www.srcmini.com/#" class="button button-big button-fill button-raised color-teal"> Button< /a> < /p>

列表阻止按钮
你也可以将按钮与列表视图一起使用。

< div class="card"> < div class="list-block"> < ul> < li> < a href="http://www.srcmini.com/#" class="list-button item-link"> List Button 1< /a> < /li> < li> < a href="http://www.srcmini.com/#" class="list-button item-link"> List Button 2< /a> < /li> < li> < a href="http://www.srcmini.com/#" class="list-button item-link"> List Button 2< /a> < /li> < /ul> < /div> < /div>

原生主题按钮示例让我们以一个示例来演示Material主题按钮：

< !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> iOS Theme Buttons< /title> < link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.material.min.css" /> < link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.material.colors.min.css" /> < /head> < 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 = "center"> Buttons< /div> < /div> < /div> < div class = "page-content"> < div class = "content-block-title"> Usual/Flat Buttons< /div> < div class = "content-block"> < p> < a href = "http://www.srcmini.com/#" class = "button"> Button< /a> < /p> < /div> < div class = "content-block-title"> Buttons Row< /div> < div class = "content-block"> < p class = "buttons-row"> < a href = "http://www.srcmini.com/#" class = "button"> Button< /a> < a href = "http://www.srcmini.com/#" class = "button"> Button< /a> < /p> < /div> < div class = "content-block-title"> Raised Buttons< /div> < div class = "content-block"> < p class = "buttons-row"> < a href = "http://www.srcmini.com/#" class = "button button-raised"> Button< /a> < a href = "http://www.srcmini.com/#" class = "button button-raised"> Button< /a> < a href = "http://www.srcmini.com/#" class = "button button-raised"> Button< /a> < a href = "http://www.srcmini.com/#" class = "button button-raised"> Button< /a> < /p> < /div> < div class = "content-block-title"> Raised Fill Buttons< /div> < div class = "content-block"> < p class = "buttons-row"> < a href = "http://www.srcmini.com/#" class = "button button-fill button-raised"> Button< /a> < a href = "http://www.srcmini.com/#" class = "button button-fill button-raised"> Button< /a> < a href = "http://www.srcmini.com/#" class = "button button-fill button-raised"> Button< /a> < a href = "http://www.srcmini.com/#" class = "button button-fill button-raised"> Button< /a> < /p> < /div> < div class = "content-block-title"> Color Buttons< /div> < div class = "content-block"> < p class = "buttons-row"> < a href = "http://www.srcmini.com/#" class = "button color-pink"> Pink< /a> < a href = "http://www.srcmini.com/#" class = "button color-indigo"> Indigo< /a> < a href = "http://www.srcmini.com/#" class = "button color-blue"> Blue< /a> < /p> < p class = "buttons-row"> < a href = "http://www.srcmini.com/#" class = "button color-cyan"> Cyan< /a> < a href = "http://www.srcmini.com/#" class = "button color-green"> Green< /a> < a href = "http://www.srcmini.com/#" class = "button color-purple"> Purple< /a> < /p> < p class = "buttons-row"> < a href = "http://www.srcmini.com/#" class = "button color-orange"> Orange< /a> < a href = "http://www.srcmini.com/#" class = "button color-teal"> Teal< /a> < a href = "http://www.srcmini.com/#" class = "button color-red"> Red< /a> < /p> < /div> < div class = "content-block-title"> Color Fill Buttons< /div> < div class = "content-block"> < p class = "buttons-row"> < a href = "http://www.srcmini.com/#" class = "button button-fill color-pink"> Pink< /a> < a href = "http://www.srcmini.com/#" class = "button button-fill color-indigo"> Indigo< /a> < a href = "http://www.srcmini.com/#" class = "button button-fill color-blue"> Blue< /a> < /p> < p class = "buttons-row"> < a href = "http://www.srcmini.com/#" class = "button button-fill color-cyan"> Cyan< /a> < a href = "http://www.srcmini.com/#" class = "button button-fill color-green"> Green< /a> < a href = "http://www.srcmini.com/#" class = "button button-fill color-purple"> Purple< /a> < /p> < p class = "buttons-row"> < a href = "http://www.srcmini.com/#" class = "button button-fill color-orange"> Orange< /a> < a href = "http://www.srcmini.com/#" class = "button button-fill color-teal"> Teal< /a> < a href = "http://www.srcmini.com/#" class = "button button-fill color-red"> Red< /a> < /p> < /div> < div class = "content-block-title"> Color Raised Fill Buttons< /div> < div class = "content-block"> < p class = "buttons-row"> < a href = "http://www.srcmini.com/#" class = "button button-fill button-raised color-pink"> Pink< /a> < a href = "http://www.srcmini.com/#" class = "button button-fill button-raised color-indigo"> Indigo< /a> < a href = "http://www.srcmini.com/#" class = "button button-fill button-raised color-blue"> Blue< /a> < /p> < p class = "buttons-row"> < a href = "http://www.srcmini.com/#" class = "button button-fill button-raised color-cyan"> Cyan< /a> < a href = "http://www.srcmini.com/#" class = "button button-fill button-raised color-green"> Green< /a> < a href = "http://www.srcmini.com/#" class = "button button-fill button-raised color-purple"> Purple< /a> < /p> < p class = "buttons-row"> < a href = "http://www.srcmini.com/#" class = "button button-fill button-raised color-orange"> Orange< /a> < a href = "http://www.srcmini.com/#" class = "button button-fill button-raised color-teal"> Teal< /a> < a href = "http://www.srcmini.com/#" class = "button button-fill button-raised color-red"> Red< /a> < /p> < /div> < div class = "content-block-title"> Color Ripple Buttons< /div> < div class = "content-block"> < p class = "buttons-row"> < a href = "http://www.srcmini.com/#" class = "button ripple-blue"> Button< /a> < a href = "http://www.srcmini.com/#" class = "button color-cyan ripple-green"> Button with green ripple< /a> < a href = "http://www.srcmini.com/#" class = "button color-red ripple-gray"> Button with gray ripple< /a> < /p> < p class = "buttons-row"> < a href = "http://www.srcmini.com/#" class = "button button-raised button-fill color-yellow ripple-green"> Button< /a> < a href = "http://www.srcmini.com/#" class = "button button-raised button-fill color-purple ripple-teal"> Button< /a> < a href = "http://www.srcmini.com/#" class = "button button-raised button-fill color-pink ripple-orange"> Button< /a> < /p> < /div> < div class = "content-block-title"> Big Buttons< /div> < div class = "content-block"> < p class = "buttons-row"> < a href = "http://www.srcmini.com/#" class = "button button-big color-pink"> Button< /a> < a href = "http://www.srcmini.com/#" class = "button button-big color-blue"> Button< /a> < /p> < p class = "buttons-row"> < a href = "http://www.srcmini.com/#" class = "button button-big button-fill button-raised color-green"> Button< /a> < a href = "http://www.srcmini.com/#" class = "button button-big button-fill button-raised color-gray"> Button< /a> < /p> < /div> < div class = "content-block-title"> List Block Buttons< /div> < div class = "card"> < div class = "list-block"> < ul> < li> < a href = "http://www.srcmini.com/#" class = "list-button item-link"> List Button 1< /a> < /li> < li> < a href = "http://www.srcmini.com/#" class = "list-button item-link"> List Button 2< /a> < /li> < li> < a href = "http://www.srcmini.com/#" class = "list-button item-link"> List Button 3< /a> < /li> < li> < a href = "http://www.srcmini.com/#" class = "list-button item-link"> List Button 4< /a> < /li> < /ul> < /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({material: true}); < /script> < /body> < /html>

立即测试

推荐阅读

• 

  美的中央空调采购安装合同,这几点尤其注意
• 

  【CSS3】|保姆级教程 CSS 知识点梳理大全，超详细！！！
• 

  实用的 Python 自动化办公技巧
• 

  自动刹车技术是否被叫停 汽车自动刹车在什么情况下触发
• 

  目前什么行业赚钱,具体如何操作？
• 

  绿厂|OPPO高管畅谈智能终端的发展走向，全力探索的绿厂都做了哪些？
• 

  advanced是什么化妆品
• 

  面对五十岁的富翁富婆和二十岁的靓女帅哥,穷光蛋的你会如何选择？
• 

  友谊伤感文案短句
• 

  c 开发需要学什么，想当c语言程序员 都要学习什么
• 

  ChatGPT如何影响社会生产生活？
• 

  家庭鸡块的做法 家常家鸡块怎么做
• 

  马桶堵了水快溢出来了怎么办
• 

  你最喜欢军事专家戴旭的哪一部著作？
• 

  各大银行visa信用卡对比 visa信用卡哪个银行好
• 

  考古发现我国远古时期有哪些乐器
• 

  《王者荣耀》外服出新英雄,集合了吕布杨戬和关羽的技能！网友：只会抄袭！如何评价？
• 

  八段锦能防身吗
• 

  支付宝怎么免押金租充电宝_支付宝免押金租充电宝方法教程
• 

  王者荣耀段位继承规则s19 王者荣耀段位继承规则表

• Framework7浮动操作按钮
• Framework7 chip布局
• Framework7卡片
• Framework7列表视图
• Framework7进度栏
• Framework7预加载器
• Framework7叠加层
• Framework7网格布局
• Framework7侧面板