zoukankan      html  css  js  c++  java
  • bootstrap

    1、.span4已经不适用,改成col-XX-xX

    容器:container,全屏布局:container-fluid(流式?),row-fluid无效了(?).col-md-offset-x

    See how aspects of the Bootstrap grid system work across multiple devices with a handy table.

     Extra small devicesPhones (<768px)Small devices Tablets (≥768px)Medium devicesDesktops (≥992px)Large devices Desktops (≥1200px)
    Grid behavior Horizontal at all times Collapsed to start, horizontal above breakpoints
    Container width None (auto) 750px 970px 1170px
    Class prefix .col-xs- .col-sm- .col-md- .col-lg-
    # of columns 12
    Column width Auto ~62px ~81px ~97px
    Gutter width 30px (15px on each side of a column)
    Nestable Yes
    Offsets Yes
    Column ordering Yes

    2、row margin 负值(转,来自某网站,记录一下)

    在 Bootstrap 的网格系统当中,每一个使用 col-**-* 类的列元素都应该包裹在 row 类的元素当中。为了使页面美观每个col-**-* 的类都设置了左、右15个像素的补白 padding,这样会导致一个结果,第一个和最后一个元素会离开容器15个像素的距离。为此,Bootstrap在 row 类当中分别定义了左、右方向15个像素的 margin 负值来抵消第一列和最后一列产生的左右补白。

    bootstrap-grid-system

    .col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, 
    .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, 
    .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, 
    .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, 
    .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, 
    .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, 
    .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, 
    .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, 
    .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, 
    .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, 
    .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, 
    .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
      position: relative;
      min-height: 1px;
      padding-right: 15px;
      padding-left: 15px;
    }
    
    .row {
      margin-right: -15px;
      margin-left: -15px;
    }


  • 相关阅读:
    简单 android popupwindow 实现
    Android json 数据解析
    java 重载父类报错 Remove '@override' annotation解决办法
    Android数据的四种存储方式
    Java将Unix时间戳转换成指定格式日期
    Android中MenuInflater实例
    技术转载:Jni学习四:如何编写jni方法
    android NDk环境编译总结
    Android JNI学习之javah命令的正确使用(找了好半天才找到的,汉,网上好多说法都没用)
    android项目中如何加载已有so库 <转>
  • 原文地址:https://www.cnblogs.com/haitangxun/p/4394182.html
Copyright © 2011-2022 走看看