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. python collections module's defaultdict

    Collections is a high-performance container datatypes. defaultdict objects class collections.default ...

  2. 转：Numpy教程

    因为用到theano写函数的时候饱受数据结构困扰 于是上网找了一篇numpy教程(theano的数据类型是基于numpy的) 原文排版更好,阅读体验更佳: http://phddreamer.blog ...

  3. Tkinter Spinbox

    Python - Tkinter Spinbox: Spinbox小部件是一个标准的Tkinter的Entry小窗口部件的变体,它可以用来选择从一个固定的值.   Spinbox小部件是一个标准的Tk ...

  4. Flask之模板之特殊变量和方法

    3.6 Flask中的特殊变量和方法: 在Flask中,有一些特殊的变量和方法是可以在模板文件中直接访问的. config 对象: config 对象就是Flask的config对象,也就是 app. ...

  5. Nuxt.js开启SSR渲染快速入门

    第一节:nuxt.js相关概述 nuxt.js简单的说是Vue.js的通用框架,最常用的就是用来作SSR(服务器端渲染).Vue.js是开发SPA(单页应用)的,Nuxt.js这个框架,用Vue开发多 ...

  6. Python实践练习目录

    缘由 做中学才是最好的方法,通过这些项目来加强自己的Python掌握程度. 原则 成体系地学,不搞"题海战术" 通所有不如精一物,精一物方可通所有 走心学,忌浮躁 项目列表 字符串 ...

  7. C命令行参数

    总是忘了,在这里说明下. argc是命令行参数的实际个数,从1开始. 第一个是可执行文件的名称 argv[]的元素是字符串 每个元素是个命令行参数. #include<stdio.h> i ...

  8. Oracle的Spool导出数据

    出自:http://wallimn.iteye.com/blog/472182 实践 只能在一个终端上的一个窗口中进行操作 第一步:连接oracle数据库     sqlplus qkp/mm_eft ...

  9. 详解Vue2.0生命周期

    网上已经有很多关于vue生命周期的文章,我的这篇文章的由来,其实是我对官网上描述的一句话的思考与理解:“el被新创建的vm.$el替换”,所以文章更多的内容可能是在对vue生命周期中“created ...

  10. (转) Linux下Setuid命令！

    在Linux系统中每个普通用户都可以更改自己的密码,这是合理的设置. 问题是:用户的信息保存在文件/etc/passwd中,用户的密码保存在文件/etc/shadow中,也就是说用户更改自己密码时是修 ...