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

  • 相关阅读:
    【NLP】LSTM 唐诗生成器 pytorch 版
    现代企业架构框架-技术架构
    java毕业设计阿博图书馆管理系统mybatis+源码+调试部署+系统+数据库+lw
    神经痛分类图片大全,神经病理性疼痛分类
    若依框架图片上传、富文本框编辑器功能
    剑指Offer || 047.二叉树剪枝
    ElasticSearch讲解(开源的、高拓展的分布式全文检索引擎)
    计算机网络408考研 2020
    单层神经网络
    golang入门
  • 原文地址:https://blog.csdn.net/zhang8593/article/details/126939435