zoukankan      html  css  js  c++  java
  • Bulma 源码解析之 .container 类

    Bulma 的 .container 类是这样实现的。

    .container
      position: relative
      // 不设置桌面以下设备的 container
      +desktop
        margin: 0 auto
         $desktop - 40px
        // 修饰类
        // .container.is-fluid 不固定长度、左右两边保留 20px 的外边距,在桌面+设备上有效
        &.is-fluid
          margin: 0 20px
          max- none
           auto
      +widescreen
         $widescreen - 40px
      +fullhd
     $fullhd - 40px
    
    1. 桌面设备中,.container 的宽度固定为“$desktop - 40px”,也就是 960px,然后居中显示。
    2. 宽屏设备中,.container 的宽度固定为“$widescreen - 40px”,也就是 1152px,然后居中显示。
    3. 大屏设备中,.container 的宽度固定为“$fullhd - 40px”,也就是 1344px,然后居中显示。
    4. 除此之外,在桌面设备中,如果 .container 还额外指定了 .is-fluid 类,那么宽度就不再固定,不过左右两边各有了 20px 的外边距。

    {提示} 关于 $desktop$widescreen$fullhd 的变量定义可以在 这里 看到。

    (完)

  • 相关阅读:
    Node.js 常用工具 util
    jQuery 选择器
    Node.js 创建HTTP服务器
    Node.js GET/POST请求
    JavaScript 用法
    Node.js 事件
    Node.js 函数
    Bootstrap<基础二> 网格系统
    读文章《Flexbox详解》笔记
    好文要读
  • 原文地址:https://www.cnblogs.com/zhangbao/p/6639867.html
Copyright © 2011-2022 走看看