• 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个列
     

  • 相关阅读:
    MES必懂知识,市场需求下的生产管理系统
    alginate-Ferrocene|海藻酸钠-二茂铁|二茂铁修饰改性海藻酸钠|海藻酸钠-peg-二茂铁
    SpringBoot 整合 websocket(一)
    Dubbo源码(七) - 集群
    apk反编译和重新打包流程
    文盘Rust -- tonic-Rust grpc初体验
    [自研开源] MyData 数据集成之数据过滤 v0.7.2
    福建三明大型工程机械3D扫描测量工程零件开模加工逆向抄数-CASAIM中科广电
    hutool的HttpRequest.post的使用-包括上传文档等多个传参【总结版本】
    大数据Flink(九十五):DML:Window TopN
  • 原文地址:https://blog.csdn.net/zhang8593/article/details/126939435