3、Semantic-UI之定义容器

1|03.1 定义容器

  在主流的前端框架中都会有容器的概念，但是在Semantic-UI中，如果要定义容器需要通过class="ui container"，定义容器后，浏览器会根据不同的像素值判断当前网格的显示大小。

1|1实例：定义容器

  通过定义容器可以发现，定义完容器的页面两边会有边距。没有定义容器的在浏览器中是百分之百的显示。

  官方文档关于容器显示的说明：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Semantic UI</title>
    <!--使用CDN导入js和css文件-->
    <link href="https://cdn.bootcss.com/semantic-ui/2.3.1/semantic.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/semantic-ui/2.3.1/semantic.js"></script>
    <script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
</head>
<body>
    <div class="ui container">
        <div class="ui grid">
            <div class="four wide column" style="background-color: #00b5ad">4格</div>
            <div class="eight wide column" style="background-color: #2bbbff">8格</div>
            <div class="four wide column" style="background-color: #5a30b5">4格</div>
        </div>
    </div>
</body>
</html>

效果图：

1|23.2 小结

  在使用Semantic-UI框架的时候，可以使用ui container来定义容器，定义完容器的页面会有边距，可以通过ui grid定义网格达到布局的效果。通过这些操作可以很方便的编写页面的布局。


__EOF__

本文作者：StaryJie
本文链接：https://www.cnblogs.com/jie-fang/p/10279505.html
关于博主：评论和私信会在第一时间回复。或者直接私信我。
版权声明：本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！
声援博主：如果您觉得文章对您有帮助，可以点击文章右下角【推荐】一下。您的鼓励是博主的最大动力！
posted @   StaryJie  阅读(871)  评论(0)  编辑  收藏  举报
编辑推荐：
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列：如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
阅读排行：
· 震惊！C++程序真的从main开始吗？99%的程序员都答错了
· 单元测试从入门到精通
· 【硬核科普】Trae如何「偷看」你的代码？零基础破解AI编程运行原理
· 上周热点回顾（3.3-3.9）
· winform 绘制太阳，地球，月球 运作规律
点击右上角即可分享
微信分享提示
AI IDE Trae