• 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

  • 相关阅读:
    进程和线程的一个简单形象的解释
    java流的性能优化1-文件复制
    JAVA修饰符类型(public,protected,private,friendly)
    Codeforces Round #252 (Div. 2) 441B. Valera and Fruits
    游戏开场镜头拉近(Unity3D开发之四)
    P1282 多米诺骨牌
    P1280 尼克的任务
    求最小生成树(暴力法,prim,prim的堆优化,kruskal)
    暴力求最短路
    用MyEclipse将java文件转换成UML类图
  • 原文地址:https://www.cnblogs.com/ooo0/p/7998580.html
Copyright © 2020-2023  润新知