设为首页收藏本站
天天打卡

 找回密码
 立即注册
搜索
查看: 104|回复: 19

AmazeUI底部导航栏与分享按钮的示例代码

[复制链接]

2

主题

30

回帖

104

积分

注册会员

积分
104
发表于 2024-4-20 10:29:54 | 显示全部楼层 |阅读模式
手机端页面的底部导航栏,仿照安卓、IOS等Apps应用底部导航栏的设计。许许多多的移动端页面前端框架都有这个组件。AmazeUI也不例外。还提供了分享到站外的分享按钮,组件,完全不用自己写。直接提供国内主流网站的分享,没有那些传说中的facebook之流,完全不用自己改,其效果如下:

其代码如下:
  1. <!--使用HTML5开发-->
  2. <!doctype html>
  3. <html class="no-js">
  4. <html>
  5.     <head>
  6.         <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  7.         <meta http-equiv="X-UA-Compatible" content="IE=edge">
  8.         <!--自动适应移动屏幕-->
  9.         <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  10.         <!--优先使用webkit内核渲染-->
  11.         <meta name="renderer" content="webkit">
  12.         <!--不要被百度转码-->
  13.         <meta http-equiv="Cache-Control" content="no-siteapp"/>
  14.         <!--以下才是引入amazeui资源-->
  15.         <link rel="stylesheet" href="assets/css/amazeui.min.css">
  16.         <link rel="stylesheet" href="assets/css/app.css">
  17.         <!--引入js的时候要注意,必须先引入jQuery,再引入amazeui,因为这个框架是基于jQuery开发的-->
  18.         <script src="assets/js/jquery.min.js"></script>
  19.         <script src="assets/js/amazeui.min.js"></script>
  20.         <title>footer</title>
  21.     </head>
  22. <body>

  23. <div class="am-navbar am-navbar-default" data-am-widget="navbar">
  24.     <ul class="am-navbar-nav">
  25.         <li>
  26.             <a href="#">
  27.                 <span class="am-icon-home"></span>
  28.                 <span class="am-navbar-label">首页</span>
  29.             </a>
  30.         </li>
  31.         <li>
  32.             <a href="#">
  33.                 <span class="am-icon-user-md"></span>
  34.                 <span class="am-navbar-label">个人</span>
  35.             </a>
  36.         </li>
  37.         <li>
  38.             <a href="#">
  39.                 <span class="am-icon-star"></span>
  40.                 <span class="am-navbar-label">收藏</span>
  41.             </a>
  42.         </li>
  43.         <li data-am-navbar-share>
  44.             <a>
  45.                 <span class="am-icon-share-square-o"></span>
  46.                 <span class="am-navbar-label">分享</span>
  47.             </a>
  48.         </li>
  49.     </ul>
  50. </div>

  51. </body>
  52. </html>
复制代码
总结
到此这篇关于AmazeUI底部导航栏与分享按钮的示例代码的文章就介绍到这了,更多相关AmazeUI导航栏与分享按钮内容请搜索脚本之家以前的文章或继续浏览下面的相关文章,希望大家以后多多支持脚本之家!

免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有账号?立即注册

×

5

主题

57

回帖

226

积分

中级会员

积分
226
发表于 2024-4-21 13:57:30 | 显示全部楼层
我们一起努力,共同解决问题吧。

0

主题

41

回帖

83

积分

注册会员

积分
83
发表于 2024-4-26 04:51:33 | 显示全部楼层
666666666666

3

主题

49

回帖

164

积分

注册会员

积分
164
发表于 2024-4-26 10:41:27 | 显示全部楼层
嘎嘎嘎嘎嘎嘎嘎

0

主题

37

回帖

76

积分

等待验证会员

积分
76

热心会员付费会员

发表于 2024-4-27 18:37:28 | 显示全部楼层
6666666666

4

主题

59

回帖

207

积分

中级会员

积分
207
发表于 2024-5-18 18:23:31 | 显示全部楼层
顶一个,观点非常中肯!
  • 打卡等级:无名新人
  • 打卡总天数:1
  • 打卡月天数:0
  • 打卡总奖励:30
  • 最近打卡:2024-04-20 07:41:19

2

主题

47

回帖

186

积分

等待验证会员

积分
186
发表于 2024-5-22 05:00:36 | 显示全部楼层
顶一个,观点非常中肯!

0

主题

31

回帖

63

积分

注册会员

积分
63
发表于 2024-6-5 02:22:32 | 显示全部楼层
让我们一起努力

1

主题

42

回帖

108

积分

注册会员

积分
108
发表于 2024-7-20 22:54:41 | 显示全部楼层
我们一起努力,共同解决问题吧。

3

主题

52

回帖

170

积分

注册会员

积分
170
发表于 2024-8-2 18:56:26 | 显示全部楼层
好用好用
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

手机版|小黑屋|爱云论坛 - d.taiji888.cn - 技术学习 免费资源分享 ( 蜀ICP备2022010826号 )|天天打卡

GMT+8, 2024-11-15 05:17 , Processed in 0.087249 second(s), 28 queries .

Powered by i云网络 Licensed

© 2023-2028 正版授权

快速回复 返回顶部 返回列表