• Bootstrap中的栅格系统


    栅格系统:
    xl为超大屏,屏幕宽度>=1200px,容器的宽度固定为1140px,一行可以设置12列,屏幕尺寸<1200的时候,一行只能设置1列
    lg为为大屏,屏幕宽度>=992px,容器的宽度固定为960px,一行可以设置12列,屏幕尺寸<992的时候,一行只能设置1列
    md为中等屏,屏幕宽度>=768px,容器的宽度固定为720px,一行可以设置12列,屏幕尺寸<768的时候,一行只能设置1列
    sm为小屏,屏幕宽度>=576px,容器的宽度固定为540px,一行可以设置12列,屏幕尺寸<576的时候,一行只能设置1列
    col为超小屏,屏幕宽度<576px,容器的宽度为auto,一行永远可以设置12列

    设置等宽列,平分宽度,通过.col的class去设置
    设置多行等宽列,在希望断开的地方添加一个.w-100的class,能够让后面的列换行
    设置根据内容调整列的宽度,使用.col-{breakpoint}-auto
    设置所有尺寸下,都占同样的列数,使用.col-*

    混合排列或者组合模式
    1.超大屏幕下一行显示6个div,一个div应该占2列
    2.大屏幕下一行显示4个div,一个div应该占3列
    3.中等屏幕下一行显示3个div,一个div应该占4列
    4.小屏幕下一行显示2个div,一个div应该占6列
    5.超小屏幕下一行显示1个div,一个div应该占12列

    对齐
    垂直对齐:
    1.行的对齐方式
    align-itens-start 顶对齐
    align-items-center 中间对齐
    align-items-end 底对齐
    2.列的单独对齐方式
    align-self-start 顶对齐
    align-self-center 中间对齐
    align-self-end 底对齐
    水平对齐
    1.justify-content-start 左对齐
    2.justify-content-center 居中对齐
    3.justify-content-end 右对齐
    4.justify-content-around 分散居中对齐(每个元素两侧的间距是相等的)
    5.justify-content-between 左右两端对齐(元素之间的间距是自动平分的)

    列排序:使用.order-{breakpoint}-* (1-12)
    order-first代表排序在第一位,order-last代表排在最后一位
    3.x的版本使用的是.col-{breakpoint}-push-* .col-{breakpoint}-pull-*l来排序

    列偏移:使用offset-{breakpoint}-*

    间距:使用margin工具可以让列之间产生间距
    mr-{breakpoint}-auto 使右侧的列远离到最右边
    ml-{breakpoint}-auto 使左侧的列远离到最左边

    嵌套:每一个列里面可以再继续执行,那嵌套里面的元素就会以父级的宽度为基准,再分12个列
     

  • 相关阅读:
    Vue.js核心技术解析与uni-app跨平台实战开发学习笔记 第1章 Vue.js基础入门 1.6 事件修饰符
    人工神经网络及其应用,人工神经网络的实现
    数据的距离度量 一、欧式距离,曼哈顿距离,闵氏距离,切比雪夫距离,兰氏距离,马氏距离
    如何为项目匹配资源技能和要求?
    初识vue.route
    【绩效季】遇到一个好领导有多重要,从被打差绩效到收获成长
    ArcGIS实现矢量区域内所有要素的统计计算
    Go语言逃逸分析全纪录
    JNI 使用案例详解(一)
    IDEA 使用自定义MAVEN(maven安装及IDEA配置)
  • 原文地址:https://blog.csdn.net/zhang8593/article/details/126939435