2、Semantic-UI之网格布局

最新推荐文章于 2022-07-22 21:25:25 发布

转载最新推荐文章于 2022-07-22 21:25:25 发布 · 381 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/jie-fang/p/10279499.html

文章标签：

#ui #javascript #ViewUI

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>

效果图：