语义UI - 用于布局的ui网格最佳方法(行/列与段)
我是Semantic UI的新手,我正在尝试使用下面的布局设计一个网页.看文档,我决定使用ui page grid.我还决定在网格外定义顶部固定菜单.
我的第一种方法是这样的:
<body>
<div class="ui page grid">
<div class="three column row">
<div class="column"> Horizontal section, column 1</div>
<div class="column"> Horizontal section, column 2</div>
<div class="column"> Horizontal section, column 3</div>
</div>
<div class="two column row">
<div class="column">
<div class="row"> Left column, row 1</div>
<div class="row"> Left column, row 2</div>
<div class="row"> Left column, row 3</div>
</div>
<div class="column">
<div class="row"> Right column, row 1</div>
<div class="row"> Right column, row 2</div>
</div>
</div>
</div>
</body>
我的问题是:
这是实现类似于图像的布局的正确方法吗？我应该segments用来划分内容而不是行或列吗？
先感谢您 !
gar*_*ryF 20
语义UI想要segments表示文本/文章的一部分.他们留下了一个小记:
段用于创建相关内容的分组.水平线段最有效地与网格一起使用,以允许跨网格行对齐的文本组.
从本质上讲,它们意味着这grid是您标记的基础.这grid是专为布局页面而设计的.
您可以segments在网格中使用以对类似内容进行分组.(如果你的文档看起来更,你可以看到,打算在那里有stacked,piled,loading班segments).
例如,我想将左下方的三个单元格作为某种新闻源.然后我会在那里使用片段:
<body>
<div class="ui page grid">
<div class="three column row">
<div class="column"> Horizontal section, column 1</div>
<div class="column"> Horizontal section, column 2</div>
<div class="column"> Horizontal section, column 3</div>
</div>
<div class="two column row">
<div class="column">
<div class="ui segment">
<div class="ui vertical segment">
<p>Left column, row 1</p>
</div>
<div class="ui vertical segment">
<p>Left column, row 2</p>
</div>
<div class="ui vertical segment">
<p>Left column, row 3</p>
</div>
</div>
</div>
<div class="column">
<div class="row"> Right column, row 1</div>
<div class="row"> Right column, row 2</div>
</div>
</div>
</div>
</body>