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. 好记性不如烂笔头-Mysql查找如何判断字段是否包含某个字符串

    好记性不如烂笔头-Mysql查找如何判断字段是否包含某个字符串 利用mysql 字符串函数 find_in_set(); SELECT * FROM users WHERE find_in_set(' ...

  2. Windbg基本命令应用总结

    .cordll -ve -u -l //reload core dlls ------加载下载系统文件符号的URL---------- .sympath SRV*C:\Symbols*http://m ...

  3. MacOS下JDK6源码配置

    参考:http://www.mkyong.com/mac/how-to-download-jdk-source-code-for-mac-os-x/ 系统默认的JDK是没有源码的,据说这是因为此JDK ...

  4. halcon连续采集图像

    dev_close_window()dev_update_window('off')create_bar_code_model ([], [], BarCodeHandle)dev_open_wind ...

  5. Variant

    class RTL_DELPHIRETURN Variant: public TVarData Variant转换为字符串 System::Variants::VarToStr VariantArra ...

  6. WPF Grid 用 C# 代码后台设置

    WPF Grid 用 C# 代码后台设置 运行环境:Window7 64bit,.NetFramework4.61,C# 6.0: 编者:乌龙哈里 2017-02-21 参考: System.Wind ...

  7. iOS学习之UINavigationController详解与使用(二)页面切换和segmentedController

    iOS学习之UINavigationController详解与使用(一)添加UIBarButtonItem是上篇,我们接着讲UINavigationController的重要作用,页面的管理和切换. ...

  8. ADB Not Responding - Android Studio

    问题描述: 最近安装了Android Studio v1.0,运行的时候老是这个错误 解决方案: 网上有人说是已经有adb的进程在运行,可是打开任务管理器,找不到对应的adb 进程. 无奈之下,想到a ...

  9. java 蓝桥杯算法提高 出现次数最多的整数

    思路:其实这道题不是太难,但是这个题太坑了,提交了好多次都不是100,后来才知道,一定一定要在输入数组数据之前先判断一下输进去的n的范围,一定一定要注意,否则就是跟我下面的图片一样的效果了,泪奔~ 问 ...

  10. Color, Material, Lighting

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