语义 UI 网格类

Question

在大多数 CSS 框架中，网格 class 是明确定义的，例如 Bootstrap 有

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

阅读语义 UI 它似乎不需要网格 class，有人知道它们是什么吗？

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 semantic UI Apply the rules on the containers 你可以将它们用于相同目的：

Containers are designed to responsively adjust their maximum width based on the size of the screen they are appearing.

Answer 2

语义ui的网格系统与cssBootstrap的网格系统不同。

您可以在此处了解有关语义 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 网格 类

Semantic UI Grid Classes

html

css

semantic-ui

语义 UI 网格类