• bootstrap(栅格)


    col-md-offset-*、col-md-push-*、col-md-pull-*

    offset 补偿(课本上或相关教程上一般都把这个叫做“偏移”),其实就是在左侧补列(1~11列)

    push 推

    pull 拉

    偏移、推、拉,都有一个参照物,即相对的位置,那就是左侧, 相对于左侧偏移、推、拉 

    写法比如:

    col-md-offset-3(在左侧补充3列)
    col-md-push-8(从左侧往右侧推8列)
    col-md-pull-2(往左侧拉2列)

    从效果上看offset和push效果一样,其实采取的方法是不同的,offset是直接在左侧补列达到偏移的效果,push是通过位置移动达到移动的效果

    关键字解释

    1、col-column:列;

    2、xs-maxsmall:超小; sm-small:小;  md-medium:中等;  lg-large:大;

    3、-*表示占列,即占自动每行row分12列栅格系统比;

    4、.col-xs-*超小屏幕 手机 (<768px),超小屏幕时使用;

         .col-sm-*小屏幕 平板 (≥768px),小屏幕时使用;

         .col-md-*中等屏幕 桌面显示器 (≥992px)(栅格参数),中等屏幕时使用;

         .col-lg-*大屏幕 大桌面显示器 (≥1200px),大屏幕时使用。

    5、不管在哪种屏幕上,栅格系统都会自动的每行row分12列 col-xs-*和col-sm-* 和col-md-*后面跟的参数表示在当前的屏幕中 每个div所占列数。例如 <div class="col-xs-6 col-md-3"> 这个div在屏幕中占的位置是: .col-xs-6 在超小屏幕中占6列 也就是屏幕的一半(12/6列=2个div) ,.col-md-3 在中单屏幕中占3列也就是1/4(12/3列=4个div)。

    6、反推,如果我们要在小屏幕上并排显示3个div(12/3个=每个占4 列 ),则col-xs-4;在大屏幕上显示6个div(12/6个=每个占2列 ) ,则 col-md-2;这样我们就可以控制我们自己想要的什么排版了。

  • 相关阅读:
    Codeforces Round #535 (Div. 3)
    2019 CCPC-Wannafly Winter Camp Day4(Div2, onsite)
    Codeforces Round #534 (Div. 2)
    2019 CCPC-Wannafly Winter Camp Day3(Div2, onsite)
    2019 CCPC-Wannafly Winter Camp Day2(Div2, onsite)
    2019 CCPC-Wannafly Winter Camp Day1 (Div2, onsite)
    codeforces1097D Makoto and a Blackboard 数学+期望dp
    【NOIP2016】换教室
    ICPC2019徐州站游记
    【Codeforces】Orz Panda Cup
  • 原文地址:https://www.cnblogs.com/sunshine171/p/9444510.html
Copyright © 2020-2023  润新知