zoukankan      html  css  js  c++  java
  • BSP:Bootstrap基本布局(container, row, col-xs-4)

    class:

    container, container-fluid, row,

    col-xs-1, col-sm-1,col-md-1, col-lg-1

    col-md-offset-1

    col-md-push-1

    col-md-pull-1

    12列格网布局:最多分为12列,随着屏幕设备或视口尺寸变化

    格网布局由行(row)列(column)构成。

    用户将内容填充到格网布局的格子里面。

    使用方法

    添加meta

    <meta name="viewport" content="width=device-width, initial-scale=1, maximun-scale=1, user-scalable=no" />

    initial-scale:初始缩放比例

    maximun-scale:最大缩放比例。

    user-scalable:禁止用户缩放

    使用容器包裹栅格系统:container,container-fluid

    container:有最大宽度

    container-fluid:无最大宽度

    container最大宽度列表

    对多种屏幕设置显示方式:

    <style>
    .a {
    height: 100px;
    background-color: #eee;
    border:1px solid #ccc;
    }
    </style>
    
    <div class="container">
    
      <div class="row">
    
        <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 a">4</div>
    
        <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 a">4</div>
        <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 a">4</div>
        <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 a">4</div>
        <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 a">4</div>
        <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 a">4</div>
        <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 a">4</div>
        <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 a">4</div>
        <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 a">4</div>
        <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 a">4</div>
        <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 a">4</div>
        <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 a">4</div>
    
      </div>
    
    </div>

    注:row中col可以换行,但col中嵌套的col不能换行

    给列之间加空隙

    <div class="container">

      <div class="row">

        <div class="col-md-8 a">8</div>

        <div class="col-md-3 col-md-offset-1 a">3</div>

      </div>

    </div>

    注:折叠后col-md-offset-1失效

    将列向后退或向前拉:col-md-push-3,col-md-pull-9

    <div class="container">

      <div class="row">

        <div class="col-md-9 col-md-push-3 a">9</div>

        <div class="col-md-3 col-md-pull-9 a">3</div>

      </div>

    </div>

    栅格系统特点:

    • “行”(row)必需包含在.container或.container-fluid中
    • "行"(row)的直接子元素必需是“列”(column)
    • "行"(row)的负值margin抵消了.container的padding.使得“列”(column)的两端距离container边界是15px.
    • 如果column大于12,多余的column所在元素整体的另起一行排列。
    寻找爱
  • 相关阅读:
    【转】Eclipse中查看jar包中的源码
    maven No compiler is provided in this environment. Perhaps you are running on a JRE rather than a JDK?
    Android问题-DelphiXE8新建AVD出现“no system images installed for this target”
    Android教程-DelphiXE Android自适应屏幕办法
    教程-在F9后提示内存错误,点击了乎略,之后怎么取消乎略?
    PC问题-该虚拟机似乎正在使用中
    PC问题-(仅供备用)取消磁盘的自动扫描
    Delphi实例-IdTCPServer和IdTCPClient的使用(支持文件发送)
    Android教程-DelphiXE Android的所有权限按照分类总结说明
    C++问题-UniqueAppObject.cpp(147): error C3861: “GUXClientInit”: 找不到标识符
  • 原文地址:https://www.cnblogs.com/carolina/p/5461741.html
Copyright © 2011-2022 走看看