是否有等同于 Bootstrap 的 .container class 的语义 UI?
Is there a Semantic UI equivalent to Bootstrap's .container class?
用过Twitter Bootstrap for some time and always wanting more in the way of admin UI features, I've decided to give Semantic UI试试看。语义文档比 Bootstrap 的简洁得多,但每个单独的工具都相当容易实现。但是,我已经开始创建一个基本的 UI 来尝试语义 UI 并且我在弄清楚一些基本的东西时遇到了麻烦,比如用什么来代替 Bootstrap的.container
等
semantic-ui 的工作方式与预期的网格系统不同,而 class ui page grid
与 bootstrap 的方法类似。您也可以看到此示例模板 http://ehkoo.github.io/semantic-ui-examples/jumbotron,您可以在模板中更改 classes 以进行测试。当应用 class ui grid
时,它采用全角,使用 ui page grid
它适用于 padding-right
和 padding-left
的 992px 宽度。你可以找到 media queries for screen min-width 992px :
@media only screen and (min-width: 992px) {
.ui.page.grid {
padding: 0 8%;
}
}
此外,还有一个问题你可以关注。 Link: https://github.com/Semantic-Org/Semantic-UI/issues/175
并且您可以按照文档页面进行操作:http://semantic-ui.com/collections/grid.html
不知道对你有没有帮助。
语义UI作者在这里。我将在下一个次要版本中添加一个通用容器 class。
是的,您可以执行以下操作:
<div class='ui centered grid'>
<div class='fifteen wide column'>
<!-- Below you can write your code -->
<div class='ui menu'>
<a class='active item'>Editorials</a>
<a class='item'>Reviews</a>
<a class='item'>Upcoming Events</a>
</div>
<!-- your code ends here -->
</div>
</div>
用过Twitter Bootstrap for some time and always wanting more in the way of admin UI features, I've decided to give Semantic UI试试看。语义文档比 Bootstrap 的简洁得多,但每个单独的工具都相当容易实现。但是,我已经开始创建一个基本的 UI 来尝试语义 UI 并且我在弄清楚一些基本的东西时遇到了麻烦,比如用什么来代替 Bootstrap的.container
等
semantic-ui 的工作方式与预期的网格系统不同,而 class ui page grid
与 bootstrap 的方法类似。您也可以看到此示例模板 http://ehkoo.github.io/semantic-ui-examples/jumbotron,您可以在模板中更改 classes 以进行测试。当应用 class ui grid
时,它采用全角,使用 ui page grid
它适用于 padding-right
和 padding-left
的 992px 宽度。你可以找到 media queries for screen min-width 992px :
@media only screen and (min-width: 992px) {
.ui.page.grid {
padding: 0 8%;
}
}
此外,还有一个问题你可以关注。 Link: https://github.com/Semantic-Org/Semantic-UI/issues/175
并且您可以按照文档页面进行操作:http://semantic-ui.com/collections/grid.html
不知道对你有没有帮助。
语义UI作者在这里。我将在下一个次要版本中添加一个通用容器 class。
是的,您可以执行以下操作:
<div class='ui centered grid'>
<div class='fifteen wide column'>
<!-- Below you can write your code -->
<div class='ui menu'>
<a class='active item'>Editorials</a>
<a class='item'>Reviews</a>
<a class='item'>Upcoming Events</a>
</div>
<!-- your code ends here -->
</div>
</div>