Semantic UI 笔记

在此记录一些常用的代码:

  1. 页面居中的表单(登陆表单,注册表单之类的)
<div class="ui one column stackable center aligned page grid">
   <div class="column twelve wide">
    <!-- 表单放在此处 -->
   </div>
</div>
  1. 侧边栏sidebar激活时会将pusher区域移出屏幕区域260px。如果要像官网那样,固定侧边栏且pusher区域不超出屏幕,则可以动态设置pusher区域宽度为原始宽度减去260px
<div class="ui sidebar visible inverted vertical menu">
  <a class="item">选项一</a>
  <div class="item">
    <div class="header">选项二</div>
    <div class="menu">
      <a class="item">选项二点一</a>
    </div>
  </div>
</div>
<div class="pusher" style="width:calc(100% - 260px)">
</div>
  1. 响应式未生效
    head中需要指定viewport参数。
    <meta name="viewport" content="width="device-width,initial-scale=1.0,maximum-scale=1.0">
添加新评论