2.1 网格布局

  在semantic-ui中提供了16个网格，使用class="column"，当然也可以通过数字来表示当前网格大小。

  在Semantic-UI中定义的网格一共16个，可以设置不同大小的网格，同时也可以使用数字来指定单个网格的大小。

示例：定义16个网格

  • 16个网格
<!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 grid">

        <div class="column" style="background-color: red">1</div>

        <div class="column" style="background-color: green">2</div>

        <div class="column" style="background-color: red">3</div>

        <div class="column" style="background-color: green">4</div>

        <div class="column" style="background-color: red">5</div>

        <div class="column" style="background-color: green">6</div>

        <div class="column" style="background-color: red">7</div>

        <div class="column" style="background-color: green">8</div>

        <div class="column" style="background-color: red">9</div>

        <div class="column" style="background-color: green">10</div>

        <div class="column" style="background-color: red">11</div>

        <div class="column" style="background-color: green">12</div>

        <div class="column" style="background-color: red">13</div>

        <div class="column" style="background-color: green">14</div>

        <div class="column" style="background-color: red">15</div>

        <div class="column" style="background-color: green">16</div>

    </div>

</body>

</html>

效果图：

  • 4-8-4网格
<!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 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>

</body>

</html>

效果图：

示例：网格的内嵌

  在Semantic-UI中，网格内嵌的时候内嵌在某一个网格中的栅格总共也是16个格子，并不是上一级栅格的个数。也就是是说如果在一个8格的山各种内嵌栅格，那么这个8格的栅格也会被分成16个栅格，内嵌的栅格如果不满16格，那么内嵌的栅格只覆盖一部分，其他部分还是上一级栅格。

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

        <div class="four wide column" style="background-color: #00b5ad">4格</div>

        <div class="eight wide column" style="background-color: #2bbbff">

            <div class="ui grid">

                <div class="eight wide column" style="background-color: #5a30b5">8格</div>

                <div class="eight wide column" style="background-color: #9f3a38">8格</div>

            </div>

        </div>

        <div class="four wide column" style="background-color: #5a30b5">4格</div>

    </div>

</body>

</html>

效果图：

2、Semantic-UI之网格布局的更多相关文章

  1. 【Android】15.0 UI开发（六）——列表控件RecyclerView的网格布局排列实现

    1.0 列表控件RecyclerView的网格布局排列实现,关键词GridLayoutManager. LinearLayoutManager 实现顺序布局 GridLayoutManager 实现网 ...

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

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

  3. 【精心挑选】15款最好的 jQuery 网格布局插件（Grid Plugins）

    如今,大多数网站设计要靠网格系统和布局,这能够提供给设计人员一个方便的途径来组织网页上的内容.网格的设计最常见于报纸和杂志的版面,由文字和图像构成的列组成. 这篇文章给大家分享精心挑选的15款最佳的 ...

  4. 第1组UI组件：布局管理器

    1 布局管理的来源 为了让UI在不同的手机屏幕上都能运行良好----不同手机屏幕的分辨率/尺寸并不完全相同,如果让程序手动控制每个组件的大小.位置,会给编程带来巨大的麻烦.为了解决这个问题.andro ...

  5. jQuery 网格布局插件

    如今,大多数网站设计要靠网格系统和布局,这能够提供给设计人员一个方便的途径来组织网页上的内容.网格的设计最常见于报纸和杂志的版面,由文字和图像构成的列组成. 这篇文章给大家分享精心挑选的15款最佳的 ...

  6. 在SOUI中使用网格布局

    在实现网格布局前,SOUI支持两种布局形式:相对布局,和线性布局,其中线性布局是2017年2月份才支持的布局. 这两年工作都在Android这里,Android里有号称5大布局(RelativeLay ...

  7. Android开发学习之路--UI之基本布局

    上一篇文章中主要介绍了ui的控件,这里就学习下布局吧.android的基本布局在layout下主要如图: 从上图可以看出有FrameLayout(单帧布局),LinearLayout(线性布局),Ta ...

  8. 【详细】Android入门到放弃篇-YES OR NO-》各种UI组件，布局管理器，单元Activity

    问:达叔,你放弃了吗? 答:不,放弃是不可能的,丢了Android,你会心疼吗?如果别人把你丢掉,你是痛苦呢?还是痛苦呢?~ 引导语 有人说,爱上一个人是痛苦的,有人说,喜欢一个人是幸福的. 人与人之 ...

  9. 15款最好的 jQuery 网格布局插件

    如今,大多数网站设计要靠网格系统和布局,这能够提供给设计人员一个方便的途径来组织网页上的内容.网格的设计最常见于报纸和杂志的版面,由文字和图像构成的列组成. 这篇文章给大家分享精心挑选的15款最佳的 ...

随机推荐

  1. 关于Spring的Quartz的xml配置的例子

    <span style="font-size:16px"></span><h3><span style="font-family ...

  2. js中的web加密

    js中的web加密 window.crypto.subtle只会在安全模式下有用,也就是https环境下 创建摘要(硬解) var i = new TextEncoder('utf-8').encod ...

  3. Disconf实践指南：改造篇

    上一篇文章Disconf实践指南:使用篇介绍了如何在项目中应用disconf,虽然实现了分布式配置的实时刷新,但是我们希望能够去除所有的配置文件,把配置都交给disconf管理,本地只需要实现配置监听 ...

  4. python开发_python中的range()函数

    python中的range()函数的功能hen强大,所以我觉得很有必要和大家分享一下 就好像其API中所描述的: If you do need to iterate over a sequence o ...

  5. [Z] 关于Python Tornado的一些资料

    一个简单的样例: http://osedu.net/article/python/2014-03-18/501.html ioloop的官方doc: http://www.tornadoweb.org ...

  6. python学习——练习题（6）

    """ 题目:斐波那契数列. 程序分析:斐波那契数列(Fibonacci sequence),又称黄金分割数列,指的是这样一个数列:0.1.1.2.3.5.8.13.21 ...

  7. HTML 空白

    HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF- ...

  8. firebug,chrome调试工具的使用

    ​http://ued.taobao.org/blog/?p=5534 chrome调试 http://www.cnblogs.com/QLeelulu/archive/2011/08/28/2156 ...

  9. 团队合作的Ground Rules

    在每个Sprint中,我们会为Sprint的确定DOD(Definition of Done,完成的定义).在团队成员合作的过程中,我们也需要定义合作规则,这就是Ground rules,就像小学生守 ...

  10. 反射与dynamic

    反射 var a = Assembly.GetExecutingAssembly(); Type type = a.GetType("CLRTest.ReflectClass"); ...