本文主要介绍了AmazeUI 面板的实现示例，分享给大家，具体如下：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 | <title>面板</title><div class="am-panel am-panel-default"> <div class="am-panel-bd">这是一个基本的面板组件。</div></div><div class="am-panel am-panel-default"> <div class="am-panel-hd">面板标题</div> <div class="am-panel-bd"> 面板内容 </div></div><section class="am-panel am-panel-default"><header class="am-panel-hd"><h3 class="am-panel-title">面板标题</h3> </header><div class="am-panel-bd"> 面板内容 </div></section><div class="am-panel am-panel-primary"> ...</div><div class="am-panel am-panel-secondary"> ...</div><div class="am-panel am-panel-success"> ...</div><div class="am-panel am-panel-warning"> ...</div><div class="am-panel am-panel-danger"> ...</div><section class="am-panel am-panel-default"><main class="am-panel-bd"> 面板内容 </main><footer class="am-panel-footer">面板页脚</footer></section><div class="am-panel am-panel-default"> <div class="am-panel-hd"> <h3 class="am-panel-title">面板标题</h3> </div> <div class="am-panel-bd"> <p>这里是面板其他内容。</p> </div> ... <table class="am-table"></table><div class="am-panel-footer">...</div></div><div class="am-panel am-panel-default"> <div class="am-panel-hd"> <h3 class="am-panel-title">面板标题</h3> </div> <div class="am-panel-bd"> 这里是面板其他内容。 </div> <ul class="am-list am-list-static"><li>...</li> </ul><div class="am-panel-footer">...</div></div><!--[if (gte IE 9)|!(IE)]>>--><!--<!--[if lte IE 8 ]>--> |
效果图：
到此这篇关于AmazeUI 面板的实现示例的文章就介绍到这了,更多相关AmazeUI 面板内容请搜索IT俱乐部以前的文章或继续浏览下面的相关文章，希望大家以后多多支持IT俱乐部！
