新版本1.4.2发布了。第一次升级到 1.4.x 版本请注意在1.4.0版本的重大变动,具体请阅读更新日志

开发者文档

不同的功能

  1. <h4>简单的导航条</h4>
  2. <div class="sui-navbar">
  3. <div class="navbar-inner"><a href="#" class="sui-brand">SUI</a>
  4. <ul class="sui-nav">
  5. <li class="active"><a href="#">首页</a></li>
  6. <li><a href="#">组件</a></li>
  7. <li><a href="#">关于</a></li>
  8. </ul>
  9. </div>
  10. </div>
  11. <h4>只有链接</h4>
  12. <div class="sui-navbar">
  13. <div class="navbar-inner">
  14. <ul class="sui-nav">
  15. <li class="active"><a href="#">首页</a></li>
  16. <li><a href="#">组件</a></li>
  17. <li><a href="#">关于</a></li>
  18. </ul>
  19. </div>
  20. </div>
  21. <h4>带表单</h4>
  22. <div class="sui-navbar">
  23. <div class="navbar-inner">
  24. <ul class="sui-nav">
  25. <li class="active"><a href="#">首页</a></li>
  26. <li><a href="#">组件</a></li>
  27. <li><a href="#">关于</a></li>
  28. </ul>
  29. <form class="sui-form sui-form pull-right">
  30. <input type="text" placeholder="宝贝/店铺名称...">
  31. <button class="sui-btn">搜索</button>
  32. </form>
  33. </div>
  34. </div>
  35. <h4>带下拉菜单</h4>
  36. <div class="sui-navbar">
  37. <div class="navbar-inner">
  38. <ul class="sui-nav">
  39. <li class="active"><a href="#">首页</a></li>
  40. <li><a href="#">组件</a></li>
  41. <li class="sui-dropdown"><a href="javascript:void(0);" data-toggle="dropdown" class="dropdown-toggle">其他 <i class="caret"></i></a>
  42. <ul role="menu" class="sui-dropdown-menu">
  43. <li role="presentation"><a role="menuitem" tabindex="-1" href="#">关于</a></li>
  44. <li role="presentation"><a role="menuitem" tabindex="-1" href="#">项目组成员</a></li>
  45. <li role="presentation"><a role="menuitem" tabindex="-1" href="#">版权</a></li>
  46. </ul>
  47. </li>
  48. </ul>
  49. </div>
  50. </div>
  51. <h4>综合</h4>
  52. <div class="sui-navbar">
  53. <div class="navbar-inner"><a href="#" class="sui-brand">SUI</a>
  54. <ul class="sui-nav">
  55. <li class="active"><a href="#">首页</a></li>
  56. <li><a href="#">组件</a></li>
  57. <li class="sui-dropdown"><a href="javascript:void(0);" data-toggle="dropdown" class="dropdown-toggle">其他 <i class="caret"></i></a>
  58. <ul role="menu" class="sui-dropdown-menu">
  59. <li role="presentation"><a role="menuitem" tabindex="-1" href="#">关于</a></li>
  60. <li role="presentation"><a role="menuitem" tabindex="-1" href="#">项目组成员</a></li>
  61. <li role="presentation"><a role="menuitem" tabindex="-1" href="#">版权</a></li>
  62. </ul>
  63. </li>
  64. </ul>
  65. <form class="sui-form sui-form pull-left">
  66. <input type="text" placeholder="宝贝/店铺名称...">
  67. <button class="sui-btn">搜索</button>
  68. </form>
  69. <ul class="sui-nav pull-right">
  70. <li><a href="#">个人中心</a></li>
  71. <li><a href="#">帮助</a></li>
  72. </ul>
  73. </div>
  74. </div>

深色主题

  1. <div class="sui-navbar navbar-inverse">
  2. <div class="navbar-inner"><a href="#" class="sui-brand">SUI</a>
  3. <ul class="sui-nav">
  4. <li class="active"><a href="#">首页</a></li>
  5. <li><a href="#">组件</a></li>
  6. <li class="sui-dropdown"><a href="javascript:void(0);" data-toggle="dropdown" class="dropdown-toggle">其他 <i class="caret"></i></a>
  7. <ul role="menu" class="sui-dropdown-menu">
  8. <li role="presentation"><a role="menuitem" tabindex="-1" href="#">关于</a></li>
  9. <li role="presentation"><a role="menuitem" tabindex="-1" href="#">项目组成员</a></li>
  10. <li role="presentation"><a role="menuitem" tabindex="-1" href="#">版权</a></li>
  11. </ul>
  12. </li>
  13. </ul>
  14. <form class="sui-form sui-form pull-right">
  15. <input type="text" placeholder="宝贝/店铺名称...">
  16. <button class="sui-btn">搜索</button>
  17. </form>
  18. </div>
  19. </div>

固定在顶部/底部

  1. <div class="sui-navbar navbar-fixed-top">
  2. <div class="navbar-inner"><a href="#" class="sui-brand">SUI</a>
  3. <ul class="sui-nav">
  4. <li class="active"><a href="#">首页</a></li>
  5. <li><a href="#">组件</a></li>
  6. <li class="sui-dropdown"><a href="javascript:void(0);" data-toggle="dropdown" class="dropdown-toggle">其他 <i class="caret"></i></a>
  7. <ul role="menu" class="sui-dropdown-menu">
  8. <li role="presentation"><a role="menuitem" tabindex="-1" href="#">关于</a></li>
  9. <li role="presentation"><a role="menuitem" tabindex="-1" href="#">版权申明</a></li>
  10. </ul>
  11. </li>
  12. </ul>
  13. <form class="sui-form sui-form pull-right">
  14. <input type="text" placeholder="宝贝/店铺名称...">
  15. <button class="sui-btn">搜索</button>
  16. </form>
  17. </div>
  18. </div>
  19. <div class="sui-navbar navbar-fixed-bottom">
  20. <div class="navbar-inner"><a href="#" class="sui-brand">SUI</a>
  21. <ul class="sui-nav">
  22. <li class="active"><a href="#">首页</a></li>
  23. <li><a href="#">组件</a></li>
  24. <li class="sui-dropdown"><a href="javascript:void(0);" data-toggle="dropdown" class="dropdown-toggle">其他 <i class="caret"></i></a>
  25. <ul role="menu" class="sui-dropdown-menu">
  26. <li role="presentation"><a role="menuitem" tabindex="-1" href="#">关于</a></li>
  27. <li role="presentation"><a role="menuitem" tabindex="-1" href="#">版权申明</a></li>
  28. </ul>
  29. </li>
  30. </ul>
  31. <form class="sui-form sui-form pull-right">
  32. <input type="text" placeholder="宝贝/店铺名称...">
  33. <button class="sui-btn">搜索</button>
  34. </form>
  35. </div>
  36. </div>

响应式布局

添加一个 <div class='container'></div> 就可以实现自适应的宽度。

  1. <div class="sui-navbar navbar-inverse">
  2. <div class="navbar-inner">
  3. <div class="sui-container"><a href="#" class="sui-brand">SUI</a>
  4. <ul class="sui-nav">
  5. <li class="active"><a href="#">首页</a></li>
  6. <li><a href="#">组件</a></li>
  7. <li class="sui-dropdown"><a href="javascript:void(0);" data-toggle="dropdown" class="dropdown-toggle">其他 <i class="caret"></i></a>
  8. <ul role="menu" class="sui-dropdown-menu">
  9. <li role="presentation"><a role="menuitem" tabindex="-1" href="#">关于</a></li>
  10. <li role="presentation"><a role="menuitem" tabindex="-1" href="#">项目组成员</a></li>
  11. <li role="presentation"><a role="menuitem" tabindex="-1" href="#">版权</a></li>
  12. </ul>
  13. </li>
  14. </ul>
  15. </div>
  16. </div>
  17. </div>