工具栏
优质
小牛编辑
131浏览
2023-12-01
底部导航,有图标和文字,响应鼠标事件和当前页面导航
<nav class="bar bar-tab"> <a class="tab-item external active" href="#"> <span class="icon icon-home"></span> <span class="tab-label">文案</span> </a> <a class="tab-item external" href="#"> <span class="icon icon-me"></span> <span class="tab-label">文案</span> <span class="badge">2</span> </a> <a class="tab-item external" href="#"> <span class="icon icon-star"></span> <span class="tab-label">文案</span> </a> <a class="tab-item external" href="#"> <span class="icon icon-cart"></span> <span class="tab-label">文案</span> </a> <a class="tab-item external" href="#"> <span class="icon icon-settings"></span> <span class="tab-label">文案</span> </a> </nav>
无图标,只有文案(文字)
<nav class="bar bar-tab"> <a class="tab-item external active" href="#">文案</a> <a class="tab-item external" href="#">文案</a> <a class="tab-item external" href="#">文案</a> </nav>
二级标题栏
<nav class="bar bar-nav bar-standard"> <h1 class="title">多级标题栏和工具栏</h1> </nav> <!-- Block button in standard bar fixed below top bar --> <div class="bar bar-header-secondary"> <button class="button button-block">Block level button</button> </div> <!-- Block button in standard bar fixed above the footer --> <div class="bar bar-footer-secondary"> <button class="button button-block">Block level button</button> </div> <!-- Icons in standard bar fixed to the bottom of the screen --> <div class="bar bar-footer"> <a class="icon icon-edit pull-left"></a> <a class="icon icon-settings pull-right"></a> </div>