欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

AmazeUI底部導(dǎo)航欄與分享按鈕的示例代碼

  發(fā)布時間：2020-08-18 14:41:02   作者：yongh701   我要評論
這篇文章主要介紹了AmazeUI底部導(dǎo)航欄與分享按鈕的實(shí)現(xiàn)方法，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下

手機(jī)端頁面的底部導(dǎo)航欄，仿照安卓、IOS等Apps應(yīng)用底部導(dǎo)航欄的設(shè)計(jì)。許許多多的移動端頁面前端框架都有這個組件。AmazeUI也不例外。還提供了分享到站外的分享按鈕，組件，完全不用自己寫。直接提供國內(nèi)主流網(wǎng)站的分享，沒有那些傳說中的facebook之流，完全不用自己改，其效果如下：

其代碼如下：

<!--使用HTML5開發(fā)-->
<!doctype html>
<html class="no-js">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <!--自動適應(yīng)移動屏幕-->
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
        <!--優(yōu)先使用webkit內(nèi)核渲染-->
        <meta name="renderer" content="webkit">
        <!--不要被百度轉(zhuǎn)碼-->
        <meta http-equiv="Cache-Control" content="no-siteapp"/>
        <!--以下才是引入amazeui資源-->
        <link rel="stylesheet" href="assets/css/amazeui.min.css">
        <link rel="stylesheet" href="assets/css/app.css">
        <!--引入js的時候要注意，必須先引入jQuery，再引入amazeui，因?yàn)檫@個框架是基于jQuery開發(fā)的-->
        <script src="assets/js/jquery.min.js"></script>
        <script src="assets/js/amazeui.min.js"></script>
        <title>footer</title>
    </head>
<body>
 
<div class="am-navbar am-navbar-default" data-am-widget="navbar">
    <ul class="am-navbar-nav">
        <li>
            <a href="#">
                <span class="am-icon-home"></span>
                <span class="am-navbar-label">首頁</span>
            </a>
        </li>
        <li>
            <a href="#">
                <span class="am-icon-user-md"></span>
                <span class="am-navbar-label">個人</span>
            </a>
        </li>
        <li>
            <a href="#">
                <span class="am-icon-star"></span>
                <span class="am-navbar-label">收藏</span>
            </a>
        </li>
        <li data-am-navbar-share>
            <a>
                <span class="am-icon-share-square-o"></span>
                <span class="am-navbar-label">分享</span>
            </a>
        </li>
    </ul>
</div>
 
</body>
</html>

總結(jié)

到此這篇關(guān)于AmazeUI底部導(dǎo)航欄與分享按鈕的示例代碼的文章就介紹到這了,更多相關(guān)AmazeUI導(dǎo)航欄與分享按鈕內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！

相關(guān)文章

最新評論