• bootstrap 栅栏系统


    媒体查询

    /* 超小屏幕(手机,小于 768px) */
    /* 没有任何媒体查询相关的代码,因为这在 Bootstrap 中是默认的(还记得 Bootstrap 是移动设备优先的吗?) */
    
    /* 小屏幕(平板,大于等于 768px) */
    @media (min-width: @screen-sm-min) { ... }
    
    /* 中等屏幕(桌面显示器,大于等于 992px) */
    @media (min-width: @screen-md-min) { ... }
    
    /* 大屏幕(大桌面显示器,大于等于 1200px) */
    @media (min-width: @screen-lg-min) { ... }

    我们偶尔也会在媒体查询代码中包含 max-width 从而将 CSS 的影响限制在更小范围的屏幕大小之内。

    @media (max-width: @screen-xs-max) { ... }
    @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }
    @media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... }
    @media (min-width: @screen-lg-min) { ... }

    栅格参数

    通过下表可以详细查看 Bootstrap 的栅格系统是如何在多种屏幕设备上工作的。

     超小屏幕 手机 (<768px)小屏幕 平板 (≥768px)中等屏幕 桌面显示器 (≥992px)大屏幕 大桌面显示器 (≥1200px)
    栅格系统行为 总是水平排列 开始是堆叠在一起的,当大于这些阈值时将变为水平排列C
    .container 最大宽度 None (自动) 750px 970px 1170px
    类前缀 .col-xs- .col-sm- .col-md- .col-lg-
    列(column)数 12
    最大列(column)宽 自动 ~62px ~81px ~97px
    槽(gutter)宽 30px (每列左右均有 15px)
    可嵌套
    偏移(Offsets)
    列排序

    实例:

    缩放浏览器大小查看效果

    <div class="row">
      <div class="col-xs-1 col-sm-4 col-md-1 col-lg-10">4</div>
      <div class="col-xs-1 col-sm-4 col-md-1 col-lg-1">4</div>
      <div class="col-xs-1 col-sm-4 col-md-10 col-lg-1">4</div>
    </div>

    效果:

    参考api:http://v3.bootcss.com/css/#grid

  • 相关阅读:
    rabbitmq channel参数详解
    rabbitmq direct、fanout、topic 三种Exchange java 代码比较
    spark 性能优化
    spark sql 窗口函数over partition by
    Python爬虫从入门到进阶(4)之xpath的使用
    Python爬虫从入门到进阶(3)之requests的使用
    Python爬虫从入门到进阶(2)之urllib库的使用
    Mac环境下Redis的安装
    Mac环境下Vagrant的安装
    Mac环境下Scrapy的安装
  • 原文地址:https://www.cnblogs.com/ooo0/p/7998580.html
Copyright © 2020-2023  润新知