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. 使用CCNode作为容器容易踩的坑

    Cocos2dx中CCNode经常作为一个父容器,里面装一些UI控件,最后组成一个复杂的自定义的UI控件,但是在使用别人的自定义控件和自己写自定义问题的时候会踩一些坑. 首先拿到一个自定义的UI控件一 ...

  2. Oracle 创建表空间借鉴 保留，占版权留言告知

    /*分为四步 */ /*第1步:创建临时表空间 */ create temporarytablespace user_temp tempfile 'D:\oracle\oradata\Oracle9i ...

  3. Rhythmk 一步一步学 JAVA (13) Spring-2 之Ben懒加载以及生命周期，单例

    1.定义Demo类: package com.rhythmk.spring; public class User { public void Init () { System.out.println( ...

  4. 黑暗之光 Day2

    1. 鼠标点击UI检测 UICamera.isOverUI 2. 鼠标指针管理 public class CussorManager : MonoBehaviour { public static C ...

  5. javascript变量，作用域和内存问题

    1:ECMAScript所有函数的参数都是按值传递的 function setName(obj){ obj.name="finn"; obj=new Object(); obj.n ...

  6. sql中问号是干什么的？？

    第一次在后台 程序中遇到sql语句中的问号: /** * * 方法描述 : 通过账号id更新该账号状态 * @param state 状态 * @param id 账号id */ @Modifying ...

  7. 【BZOJ4566】找相同字符【后缀自动机】

    题意 给定两个字符串,求两个字符串相同子串的方案数. 分析 那么将字符串s1建SAM,然后对于s2的每个前缀,都在SAM中找出来,并且计数就行. 我一开始的做法是,建一个u和len,顺着s2跑SAM, ...

  8. 怎样取得selected的option选项的value值

    现在有一id=test的下拉框,怎么拿到选中的那个值呢?   分别使用javascript原生的方法和jquery方法   <select id="test"  name=& ...

  9. mysql5.6新建的user为啥会看到没有授权过的db？

    数据库版本Server version: 5.6.22-log MySQL Community Server (GPL) root用户登录后,新建db,叫test2mysql> create d ...

  10. static_cast, dynamic_cast, reinterpret_cast, const_cast区别比较

    隐式转换(implicit conversion) ; int b; b=a; short是两字节,int是四字节,由short型转成int型是宽化转换(bit位数增多),编译器没有warning,如 ...