开发者文档
不同的功能
简单的导航条
只有链接
带表单
带下拉菜单
综合
- <h4>简单的导航条</h4>
- <div class="sui-navbar">
- <div class="navbar-inner"><a href="#" class="sui-brand">SUI</a>
- <ul class="sui-nav">
- <li class="active"><a href="#">首页</a></li>
- <li><a href="#">组件</a></li>
- <li><a href="#">关于</a></li>
- </ul>
- </div>
- </div>
- <h4>只有链接</h4>
- <div class="sui-navbar">
- <div class="navbar-inner">
- <ul class="sui-nav">
- <li class="active"><a href="#">首页</a></li>
- <li><a href="#">组件</a></li>
- <li><a href="#">关于</a></li>
- </ul>
- </div>
- </div>
- <h4>带表单</h4>
- <div class="sui-navbar">
- <div class="navbar-inner">
- <ul class="sui-nav">
- <li class="active"><a href="#">首页</a></li>
- <li><a href="#">组件</a></li>
- <li><a href="#">关于</a></li>
- </ul>
- <form class="sui-form sui-form pull-right">
- <input type="text" placeholder="宝贝/店铺名称...">
- <button class="sui-btn">搜索</button>
- </form>
- </div>
- </div>
- <h4>带下拉菜单</h4>
- <div class="sui-navbar">
- <div class="navbar-inner">
- <ul class="sui-nav">
- <li class="active"><a href="#">首页</a></li>
- <li><a href="#">组件</a></li>
- <li class="sui-dropdown"><a href="javascript:void(0);" data-toggle="dropdown" class="dropdown-toggle">其他 <i class="caret"></i></a>
- <ul role="menu" class="sui-dropdown-menu">
- <li role="presentation"><a role="menuitem" tabindex="-1" href="#">关于</a></li>
- <li role="presentation"><a role="menuitem" tabindex="-1" href="#">项目组成员</a></li>
- <li role="presentation"><a role="menuitem" tabindex="-1" href="#">版权</a></li>
- </ul>
- </li>
- </ul>
- </div>
- </div>
- <h4>综合</h4>
- <div class="sui-navbar">
- <div class="navbar-inner"><a href="#" class="sui-brand">SUI</a>
- <ul class="sui-nav">
- <li class="active"><a href="#">首页</a></li>
- <li><a href="#">组件</a></li>
- <li class="sui-dropdown"><a href="javascript:void(0);" data-toggle="dropdown" class="dropdown-toggle">其他 <i class="caret"></i></a>
- <ul role="menu" class="sui-dropdown-menu">
- <li role="presentation"><a role="menuitem" tabindex="-1" href="#">关于</a></li>
- <li role="presentation"><a role="menuitem" tabindex="-1" href="#">项目组成员</a></li>
- <li role="presentation"><a role="menuitem" tabindex="-1" href="#">版权</a></li>
- </ul>
- </li>
- </ul>
- <form class="sui-form sui-form pull-left">
- <input type="text" placeholder="宝贝/店铺名称...">
- <button class="sui-btn">搜索</button>
- </form>
- <ul class="sui-nav pull-right">
- <li><a href="#">个人中心</a></li>
- <li><a href="#">帮助</a></li>
- </ul>
- </div>
- </div>
- 复制代码代码已复制
深色主题
- <div class="sui-navbar navbar-inverse">
- <div class="navbar-inner"><a href="#" class="sui-brand">SUI</a>
- <ul class="sui-nav">
- <li class="active"><a href="#">首页</a></li>
- <li><a href="#">组件</a></li>
- <li class="sui-dropdown"><a href="javascript:void(0);" data-toggle="dropdown" class="dropdown-toggle">其他 <i class="caret"></i></a>
- <ul role="menu" class="sui-dropdown-menu">
- <li role="presentation"><a role="menuitem" tabindex="-1" href="#">关于</a></li>
- <li role="presentation"><a role="menuitem" tabindex="-1" href="#">项目组成员</a></li>
- <li role="presentation"><a role="menuitem" tabindex="-1" href="#">版权</a></li>
- </ul>
- </li>
- </ul>
- <form class="sui-form sui-form pull-right">
- <input type="text" placeholder="宝贝/店铺名称...">
- <button class="sui-btn">搜索</button>
- </form>
- </div>
- </div>
- 复制代码代码已复制
固定在顶部/底部
- <div class="sui-navbar navbar-fixed-top">
- <div class="navbar-inner"><a href="#" class="sui-brand">SUI</a>
- <ul class="sui-nav">
- <li class="active"><a href="#">首页</a></li>
- <li><a href="#">组件</a></li>
- <li class="sui-dropdown"><a href="javascript:void(0);" data-toggle="dropdown" class="dropdown-toggle">其他 <i class="caret"></i></a>
- <ul role="menu" class="sui-dropdown-menu">
- <li role="presentation"><a role="menuitem" tabindex="-1" href="#">关于</a></li>
- <li role="presentation"><a role="menuitem" tabindex="-1" href="#">版权申明</a></li>
- </ul>
- </li>
- </ul>
- <form class="sui-form sui-form pull-right">
- <input type="text" placeholder="宝贝/店铺名称...">
- <button class="sui-btn">搜索</button>
- </form>
- </div>
- </div>
- <div class="sui-navbar navbar-fixed-bottom">
- <div class="navbar-inner"><a href="#" class="sui-brand">SUI</a>
- <ul class="sui-nav">
- <li class="active"><a href="#">首页</a></li>
- <li><a href="#">组件</a></li>
- <li class="sui-dropdown"><a href="javascript:void(0);" data-toggle="dropdown" class="dropdown-toggle">其他 <i class="caret"></i></a>
- <ul role="menu" class="sui-dropdown-menu">
- <li role="presentation"><a role="menuitem" tabindex="-1" href="#">关于</a></li>
- <li role="presentation"><a role="menuitem" tabindex="-1" href="#">版权申明</a></li>
- </ul>
- </li>
- </ul>
- <form class="sui-form sui-form pull-right">
- <input type="text" placeholder="宝贝/店铺名称...">
- <button class="sui-btn">搜索</button>
- </form>
- </div>
- </div>
- 复制代码代码已复制
响应式布局
添加一个 <div class='container'></div>
就可以实现自适应的宽度。
- <div class="sui-navbar navbar-inverse">
- <div class="navbar-inner">
- <div class="sui-container"><a href="#" class="sui-brand">SUI</a>
- <ul class="sui-nav">
- <li class="active"><a href="#">首页</a></li>
- <li><a href="#">组件</a></li>
- <li class="sui-dropdown"><a href="javascript:void(0);" data-toggle="dropdown" class="dropdown-toggle">其他 <i class="caret"></i></a>
- <ul role="menu" class="sui-dropdown-menu">
- <li role="presentation"><a role="menuitem" tabindex="-1" href="#">关于</a></li>
- <li role="presentation"><a role="menuitem" tabindex="-1" href="#">项目组成员</a></li>
- <li role="presentation"><a role="menuitem" tabindex="-1" href="#">版权</a></li>
- </ul>
- </li>
- </ul>
- </div>
- </div>
- </div>
- 复制代码代码已复制