Question

在大多数CSS框架中，网格类已明确定义，例如Bootstrap has

xs (for phones)
sm (for tablets)
md (for desktops)
lg (for larger desktops)

通过语义UI阅读它似乎没有网格类，有人知道它们是什么吗？

Answer 1

语义ui确实有网格类，它们被解释为here。

但是，您所指的是由media queries控制的尺寸。

媒体查询是根据设备规范有选择地应用某些规则的方法。

如果我们看一下bootstrap代码，我们会看到如下内容：

  @media (max-width: 767px) {
    .visible-xs {
      display: block !important;
    }
    table.visible-xs {
      display: table !important;
    }
    tr.visible-xs {
      display: table-row !important;
    }
    th.visible-xs,
    td.visible-xs {
      display: table-cell !important;
    }
  }
  @media (max-width: 767px) {
    .visible-xs-block {
      display: block !important;
    }
  }
  @media (max-width: 767px) {
    .visible-xs-inline {
      display: inline !important;
    }
  }
  @media (max-width: 767px) {
    .visible-xs-inline-block {
      display: inline-block !important;
    }
  }

这些媒体查询可选择显示组件，现在虽然语义ui没有给出这个明确的定义，但它确实对它的组件有这种关注，例如here语义UI在{上应用规则{3}}你可以将它们用于同一目的：

容器旨在根据显示的屏幕大小响应性地调整其最大宽度。

Answer 2

具有语义ui的网格系统与具有css Bootstrap的网格系统不同。

您可以在此处了解有关语义UI的更多信息：https://semantic-ui.com/collections/grid.html

以下是在React应用程序中使用的语义UI网格的示例：

const App = () => {
  return (
    <div className=“ui container grid”>
    <div className=“ui row”>
       <div className=“column eight wide”>
         <SongList />
        </div>
    </div>
    </div>
  );
};

我现在有三个嵌套的div，其中className为ui container grid，ui row和column eight wide。

语义UI网格类

2 个答案: