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所在元素整体的另起一行排列。
    寻找爱
  • 相关阅读:
    跃迁方法论 Continuous practice
    EPI online zoom session 面试算法基础知识直播分享
    台州 OJ 2648 小希的迷宫
    洛谷 P1074 靶形数独
    洛谷 P1433 DP 状态压缩
    台州 OJ FatMouse and Cheese 深搜 记忆化搜索
    台州 OJ 2676 Tree of Tree 树状 DP
    台州 OJ 2537 Charlie's Change 多重背包 二进制优化 路径记录
    台州 OJ 2378 Tug of War
    台州 OJ 2850 Key Task BFS
  • 原文地址:https://www.cnblogs.com/carolina/p/5461741.html
Copyright © 2011-2022 走看看