底部导航栏固定在页面底部，可以拥有 3 - 5 个选项。它通常只在手机上使用。每个页面只能拥有一个底部导航栏。
只需编写 HTML 即可生效。
<div class="mdui-bottom-nav">
<a href="javascript:;" class="mdui-ripple mdui-bottom-nav-active">
<i class="mdui-icon material-icons">history</i>
<label>Recents</label>
</a>
<a href="javascript:;" class="mdui-ripple">
<i class="mdui-icon material-icons">favorite</i>
<label>Favorites</label>
</a>
<a href="javascript:;" class="mdui-ripple">
<i class="mdui-icon material-icons">location_on</i>
<label>Nearby</label>
</a>
</div><div class="mdui-bottom-nav">
<a href="javascript:;" class="mdui-ripple mdui-bottom-nav-active">
<i class="mdui-icon material-icons">history</i>
</a>
<a href="javascript:;" class="mdui-ripple">
<i class="mdui-icon material-icons">favorite</i>
</a>
<a href="javascript:;" class="mdui-ripple">
<i class="mdui-icon material-icons">location_on</i>
</a>
</div><div class="mdui-bottom-nav">
<a href="javascript:;" class="mdui-ripple mdui-bottom-nav-active">Recents</a>
<a href="javascript:;" class="mdui-ripple">Favorites</a>
<a href="javascript:;" class="mdui-ripple">Nearby</a>
</div>在 <div class="mdui-bottom-nav"></div> 元素上添加类 .mdui-bottom-nav-text-auto 即可实现该效果。
一般在拥有 4 - 5 个导航项时，使用这种方式。默认只显示图标，在激活导航项后显示文本。
<div class="mdui-bottom-nav mdui-bottom-nav-text-auto">
<a href="javascript:;" class="mdui-ripple mdui-bottom-nav-active">
<i class="mdui-icon material-icons">live_tv</i>
<label>Movies</label>
</a>
<a href="javascript:;" class="mdui-ripple">
<i class="mdui-icon material-icons">music_note</i>
<label>Music</label>
</a>
<a href="javascript:;" class="mdui-ripple">
<i class="mdui-icon material-icons">book</i>
<label>Books</label>
</a>
<a href="javascript:;" class="mdui-ripple">
<i class="mdui-icon material-icons">library_books</i>
<label>Newsstand</label>
</a>
</div><div class="mdui-bottom-nav mdui-bottom-nav-text-auto mdui-color-brown">
<a href="javascript:void(0);" class="mdui-ripple mdui-ripple-white mdui-bottom-nav-active">
<i class="mdui-icon material-icons">live_tv</i>
<label>Movies</label>
</a>
<a href="javascript:void(0);" class="mdui-ripple mdui-ripple-white">
<i class="mdui-icon material-icons">music_note</i>
<label>Music</label>
</a>
<a href="javascript:void(0);" class="mdui-ripple mdui-ripple-white">
<i class="mdui-icon material-icons">book</i>
<label>Books</label>
</a>
<a href="javascript:void(0);" class="mdui-ripple mdui-ripple-white">
<i class="mdui-icon material-icons">library_books</i>
<label>Newsstand</label>
</a>
</div>在 body 元素上添加类 .mdui-bottom-nav-fixed 即可将底部导航栏固定在页面底部，不随滚动条滚动。
这个类需要添加在 body 元素上，而不是 .mdui-bottom-nav 元素上，因为它除了固定应用栏外，还会为 body 添加 padding-bottom，使底部导航栏不会覆盖页面内容。
添加类 .mdui-bottom-nav-scroll-hide 即可在页面向下滚动时隐藏底部导航栏，向上滚动时显示底部导航栏。
注意：
mdui.mutation() 进行初始化。<body class="mdui-bottom-nav-fixed">
<div class="mdui-bottom-nav mdui-bottom-nav-scroll-hide">
......
</div>
</body>