MDUI CSS框架 -网格布局

meowrain

发布于 2021-04-22 16:11:20

3.1K0

文章被收录于专栏：MeowRain的博客MeowRain的博客

布局容器

MDUI 需要为页面内容和网格布局系统包裹一个 .mdui-container 容器。我们提供了两个此作用的类。

.mdui-container 类占据 92% - 96% 的屏幕宽度，且最大宽度 1280px。

<body>
  <div class="mdui-container">
    ...
  </div>
</body>

.mdui-container-fluid 类将始终占据 100% 的屏幕宽度。

<body>
  <div class="mdui-container-fluid">
    ...
  </div>
</body>

基础网格

.mdui-row 必须包含在 .mdui-container 或 .mdui-container-fluid 中，以便为其赋予合适的排列（aligment）和内补（padding）。

在 .mdui-row 中包含若干个 .mdui-col-xs-[1-12] 类，其中 .mdui-col-xs-[1-12] 中的数字表示该元素占据多少列。

如果一行中包含的列大于 12，则多余的列将另起一行排列。

这句话什么意思呢，就是一整个屏幕，其宽度可以放得下12列的东西，比如说，我用 <div class="mdui-col-xs-6"></div>两次，就可以得到双栏，同理，用col-xs-4三次，就可以得到三栏，以此类推。

响应式网格

    .mdui-col-xs-[1-12] 所有屏幕设备上都会生效，如手机、电脑等。
    .mdui-col-sm-[1-12] 在小屏幕及以上的设备上生效，如平板电脑。
    .mdui-col-md-[1-12] 在中等屏幕及以上的设备上生效，如笔记本电脑。
    .mdui-col-lg-[1-12] 在大屏幕及以上的设备上生效，如台式电脑。
    .mdui-col-xl-[1-12] 在特大屏幕设备上生效，如电视。

混用这些类，可以达到响应式的效果。

响应式断点如下：

举个官方的例子说明： PS:官方的文档写的很棒，我觉得我都没有可以增添的东西，等自己用熟悉了再看看能不能增添点儿用法吧

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>网格布局 - 响应式网格</title>
  <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/mdui@1.0.1/dist/css/mdui.min.css"/>
</head>
<body>

<div class="mdui-container">
  <!-- 在超小屏幕设备上，第一列 100% 宽度，第二列 50% 宽度。在小屏幕及以上设备上，第一列为 66.6% 宽度，第二列为 33.3% 宽度。 -->
  <div class="mdui-row">
    <div class="mdui-col-xs-12 mdui-col-sm-6">.mdui-col-xs-12<br/>.mdui-col-sm-8</div>
    <div class="mdui-col-xs-6 mdui-col-sm-6">.mdui-col-xs-6<br/>.mdui-col-sm-4</div>
  </div>

  <!-- 在超小屏幕设备上每列都是 50% 宽度，在小屏幕及以上设备上每列 33.3% 宽度。 -->
  <div class="mdui-row">
    <div class="mdui-col-xs-6 mdui-col-sm-4">.mdui-col-xs-6<br/>.mdui-col-sm-4</div>
    <div class="mdui-col-xs-6 mdui-col-sm-4">.mdui-col-xs-6<br/>.mdui-col-sm-4</div>
    <div class="mdui-col-xs-6 mdui-col-sm-4">.mdui-col-xs-6<br/>.mdui-col-sm-4</div>
  </div>

  <!-- 在所有设备上，每列都是 50% 宽度。 -->
  <div class="mdui-row">
    <div class="mdui-col-xs-6">.mdui-col-xs-6</div>
    <div class="mdui-col-xs-6">.mdui-col-xs-6</div>
  </div>
</div>

<script src="//cdn.jsdelivr.net/npm/mdui@1.0.1/dist/js/mdui.min.js"></script>
</body>
</html>

列间距

默认在列之间会有 16px 的间距，只需在 .mdui-row 上添加类 .mdui-row-gapless 即可消除列间距。

示范：不消除列间距：

消除列间距：

可以很明显地看到，文字列与列之间的文字变得紧凑了。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="/mdui/mdui-v1.0.1/css/mdui.min.css">
    <script src="/mdui/mdui-v1.0.1/js/mdui.min.js"></script>
</head>
<body class="mdui-theme-primary-deep-purple mdui-theme-layout-dark">
<div class="mdui-container">
  <div class="mdui-row-gapless">
    <div class="mdui-typo-display-1">
      <p class="mdui-text-center">猫狗鼠鱼的导航页</p>
      <p class="mdui-typo-subheading mdui-text-center mdui-text-color-red-200">Powered by MDUI</p>
      <p class="mdui-typo-body-2 mdui-text-center mdui-text-color-blue-300">三栏分布式布局</p>
    </div>
    <div class="mdui-col-xs-4 mdui-typo-title">
      
    .mdui-col-xs-[1-12] 所有屏幕设备上都会生效，如手机、电脑等。
    .mdui-col-sm-[1-12] 在小屏幕及以上的设备上生效，如平板电脑。
    .mdui-col-md-[1-12] 在中等屏幕及以上的设备上生效，如笔记本电脑。
    .mdui-col-lg-[1-12] 在大屏幕及以上的设备上生效，如台式电脑。
    .mdui-col-xl-[1-12] 在特大屏幕设备上生效，如电视。

    </div>
    <div class="mdui-col-xs-4 mdui-typo-title">
      
      .mdui-col-xs-[1-12] 所有屏幕设备上都会生效，如手机、电脑等。
      .mdui-col-sm-[1-12] 在小屏幕及以上的设备上生效，如平板电脑。
      .mdui-col-md-[1-12] 在中等屏幕及以上的设备上生效，如笔记本电脑。
      .mdui-col-lg-[1-12] 在大屏幕及以上的设备上生效，如台式电脑。
      .mdui-col-xl-[1-12] 在特大屏幕设备上生效，如电视。
  
      </div>
      <div class="mdui-col-xs-4 mdui-typo-title">
      
        .mdui-col-xs-[1-12] 所有屏幕设备上都会生效，如手机、电脑等。
        .mdui-col-sm-[1-12] 在小屏幕及以上的设备上生效，如平板电脑。
        .mdui-col-md-[1-12] 在中等屏幕及以上的设备上生效，如笔记本电脑。
        .mdui-col-lg-[1-12] 在大屏幕及以上的设备上生效，如台式电脑。
        .mdui-col-xl-[1-12] 在特大屏幕设备上生效，如电视。
    
        </div>
</div>
</div>
</body>
</html>

列偏移

使用 .mdui-col-offset-xs-[1-12] .mdui-col-offset-sm-[1-12] 、 .mdui-col-offset-md-[1-12] 、 .mdui-col-offset-lg-[1-12] 和 .mdui-col-offset-xl-[1-12] 可以将列向右偏移，类名中的数字表示向右偏移多少列。

不偏移：

偏移：2列

官方示范：

举个合适的例子，我们想让右边的方块向左移动两列，以沾满12列

这样就可以了！

嵌套列

通过在已有的列中再添加新的 .mdui-row 和 .mdui-col-[*] 元素实现列的嵌套。被嵌套的行所包含的列不能超过 12 个。

使用示范：

    <div class="mdui-row">
        <p class="mdui-typo-display-1 mdui-text-center">示例1</p>
        <div class="mdui-col-xs-6">
            <p class="mdui-typo-display-1 mdui-text-center">示例1</p>
            文件数据都储存在"块"中，那么很显然，我们还必须找到一个地方储存文件的元信息，比如文件的创建者、文件的创建日期、文件的大小等等。这种储存文件元信息的区域就叫做inode，中文译名为"索引节点"。
        </div>
        <div class="mdui-col-xs-6">
            <p class="mdui-typo-display-1 mdui-text-center">示例1</p>
            <div class="mdui-row">
            <div class="mdui-col-xs-6">文件数据都储存在"块"中，那么很显然，我们还必须找到一个地方储存文件的元信息，比如文件的创建者、文件的创建日期、文件的大小等等。这种储存文件元信息的区域就叫做inode，中文译名为"索引节点"。</div>
            <div class="mdui-col-xs-6">文件数据都储存在"块"中，那么很显然，我们还必须找到一个地方储存文件的元信息，比如文件的创建者、文件的创建日期、文件的大小等等。这种储存文件元信息的区域就叫做inode，中文译名为"索引节点"。</div>
        </div>
        </div>
    </div>

效果如图

官方示范和代码：

等分列

在 .mdui-row-xs-[1-12] 中包含若干个含 .mdui-col 类的元素，这些元素会被等分。例如：.mdui-row-xs-5 中的每一个 .mdui-col 元素均占据 20% 的宽度。

使用示范：

<div class="mdui-container">
    <div class="mdui-row-xs-4" style="border: 1px red solid;">
      <div class="mdui-col" style="border: 1px red solid;">4</div>
      <div class="mdui-col" style="border: 1px red solid;">4</div>
      <div class="mdui-col" style="border: 1px red solid;">4</div>
      <div class="mdui-col" style="border: 1px red solid;">4</div>
    </div>
  </div>

混用 .mdui-row-xs-[1-12] 、.mdui-row-sm-[1-12] 、.mdui-row-md-[1-12]、 .mdui-row-lg-[1-12]、 .mdui-row-xl-[1-12] 可以实现响应式布局。

CSS类名列表

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2021年04月16日，如有侵权请联系 cloudcommunity@tencent.com 删除

node.js

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

node.js

登录后参与评论

0 条评论

热度