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. django之使用jquery完成ajax

    使用Ajax 使用视图通过上下文向模板中传递数据,需要先加载完成模板的静态页面,再执行模型代码,生成最张的html,返回给浏览器,这个过程将页面与数据集成到了一起,扩展性差 改进方案:通过ajax的方 ...

  2. Android 4 学习（19）：Services

    参考<Professional Android 4 Development> Services Service是invisible的,因此其优先级不高于visible的Activity,之 ...

  3. 转载：详解在visual studio中使用git版本系统(图文)

    很多人已经在使用git(或正在转移到git上),在github.com上,也看到不少国内同学的开源项目,非常不错.但相关教程似乎不多,所以趁着我自己的开源项目源码托管(https://github.c ...

  4. delphi IOS BLE 代理

    代理方法 centralManagerDidUpdateState: peripheralManagerDidUpdateState:代理方法. centralManager:willRestoreS ...

  5. DataSnap 连接池 DSServer1Disconnect

    DataSnap Server DSServer1Disconnect 这个函数什么时候执行? void __fastcall TServerContainer1::DSServer1Disconne ...

  6. C++Primer笔记-----day05

    =======================================================================day05======================== ...

  7. think in avalon

    1.不要设计,也不要通过DOM操作去改变你的页面 你用jQuery去设计一个页面,并让它动起来.这是因为jQuery就是让一切简单的事情变复杂的罪魁祸首. 但是用avalon,你必须从零开始去构思你的 ...

  8. java基于feemarker 生成word文档（超级简单）

    问题由来: 开发个新需求,需要按规定导出word文档,文档截图如下 因为之前没做过这个,一脸懵B啊,导出excel和txt倒是经常接触到,对于这个word这种格式不严谨的文件怎么处理呢? 技术选型:可 ...

  9. 高性能Web服务器Nginx的配置与部署研究（4）Nginx常用命令

    1. 启动 Nginx poechant@ubuntu:sudo ./sbin/nginx 2. 停止 Nginx poechant@ubuntu:sudo ./sbin/nginx -s stop ...

  10. H5／

    1.value: 2.selected="selected": 设置selected="selected"属性,则该选项就被默认选中. 下拉列表也可以进行多选操 ...