3.1 定义容器

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

实例：定义容器

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

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

<!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>

效果图：

3.2 小结

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

3、Semantic-UI之定义容器的更多相关文章

  1. 160908、前端开发框架Semantic UI

    简介 网页开发中,CSS控制网页样式.作为测试开发工程师,我个人不太擅长手写CSS.样式微调.兼容浏览器等工作,所以我选择使用成熟的前端框架,可以快速开发出样式美观的网站,也解决了大部分浏览器兼容问题 ...

  2. semantic UI first web

    官方文档:https://semantic-ui.com/introduction/getting-started.html semantic  UI: SemanticUI是一款语义化设计的前端开源 ...

  3. semantic ui框架学习笔记一

    面包屑导航 面包屑导航经常用于多个栏目下的内容管理,是web页面里比较常用的组合.例如: <div class="ui breadcrumb"> <a class ...

  4. Semantic UI – 完全语义化的前端界面开发框架

    Semantic UI 是一个 UI 库,使前端开发更简单,更容易学习.Semantic UI 介绍了许多界面元素.在大多数情况下,只有你需要的元素建立一个自定义的构建可能是最好的. UI 组件分为四 ...

  5. Semantic UI 中文参考手册

    一个拥有友好词汇表的前端框架,完全语义化的前端界面开发框架,为一组开发人员之间共享UI元素配备了规格.使用的词汇(类和ID)相比其它替代品更加简洁,从而降低了学习曲线.有许多HTML元素,UI元素和场 ...

  6. 修改 Semantic UI 的默认字体

    Semantic UI 默认使用的是谷歌提供的字体,并且是直接使用了谷歌的官方链接.由于大家都知道的原因,谷歌网站在国内访问速度很差,甚至根本无法访问,还有就是可能会在离线环境下使用 Semantic ...

  7. 目前几款基于html5的前端框架：如Bootstrap、Foundation、Semantic UI 、Amaze UI

    Bootstrap是由Twitter在2011年8月推出的开源WEB前端框架,集合CSS 和HTML,使用了最新的浏览器技术,为快速WEB开发提供了一套前端工具包,包括布局.网格.表格.按钮.表单.导 ...

  8. Semantic UI基础使用教程

    自己今后要使用Semantic UI进行项目开发了,一步步的记录下来,供大家参考,也让自己去简单的学习一下,有空了就会更新一点东西,大家有什么问题可以相互交流一下,文采不是很好,希望大家要多多见谅,这 ...

  9. Semantic UI中的验证控件的事件的使用

    1.Semantic UI中的验证控件,功能挺不错的,中文官网的文档写的都比较详细了,我再这里就不再进行重复了,主要是想说一下它的事件的使用方法,这个可能有部分朋友刚开始接触的时候不太了解 注意看这几 ...

随机推荐

  1. eclipse项目推送git

    引用:http://blog.csdn.net/zongzhankui/article/details/48653731

  2. TestNG Hello World入门示例

    https://www.yiibai.com/testng/hello-world-example.html https://www.yiibai.com/testng/ 作为一个经典的入门例子,这里 ...

  3. tornado异步编程

    说明 以下的例子都有2个url,一个是耗时的请求,一个是可以立刻返回的请求,,我们希望的是访问立刻返回结果的请求不会被其他耗时请求影响 非异步处理 现在我们请求sleep然后同时请求justnow,发 ...

  4. linux下jdk/maven/tomcat

    debian安装的openjdk只包括jre,没有tools.jar,dt.jar,所以要安装openjdk完全版. sudo apt--jdk 若操作系统中安装多个版本的java,可以采用如下命令来 ...

  5. Color, Material, Lighting

    [Color, Material, Lighting] The material and lighting parameters are used to control the built-in ve ...

  6. python 文件的读取&更新

    [python 文件的读取&更新] 任务抽象: 读取一个文件, 更新内容后, 重新写入文件. 实际应用: 磁盘上的一个配置文件, 读入内存后为一个dict, 对dict更新后重新写入磁盘. d ...

  7. centos6 安装 docker

    一.升级内核(带aufs模块) 1.yum安装带aufs模块的3.10内核(或到这里下载kernel手动安装:http://down.51cto.com/data/1903250) cd /etc/y ...

  8. Spark 性能相关参数配置详解－Storage篇

    随着Spark的逐渐成熟完善, 越来越多的可配置参数被添加到Spark中来, 本文试图通过阐述这其中部分参数的工作原理和配置思路, 和大家一起探讨一下如何根据实际场合对Spark进行配置优化. 由于篇 ...

  9. hadoop组件启动和关闭命令

    一.启动相关组件之前 一般安装完hadoop之后需要格式化一遍hdfs: hdfs namenode -format 然后再进行其他组件的启动,hadoop相关组件都是用位于...hadoop/sbi ...

  10. 开启Windows8里面的Hyper-V虚拟机功能

    首先了解下什么是Hyper-V?也就是虚拟化技术,允许终端用户在同一台机器上运行多个操作系统,支持32位和64位系统,可以直接在Windows 8上创建自己的虚拟机.开启Hyper-V虚拟机需要更多的 ...