• 技术文章 >web前端 >前端问答

    bootstrap4的栅格分成几类

    青灯夜游青灯夜游2022-01-10 10:31:05原创55

    bootstrap4的栅格分成5类:1、“.col”,针对所有设备;2、“.col-sm”,针对平板设备;3、“.col-md”,针对桌面显示器;4、“.col-lg”,针对大桌面显示器;5、“.col-xl”,针对超大桌面显示器。

    本教程操作环境:Windows7系统、bootsrap4版、DELL G3电脑

    Bootstrap 提供了一套响应式、移动设备优先的流式网格(栅格)系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多 12 列。

    我们也可以根据自己的需要,定义列数:

    1.png

    Bootstrap 4 的栅格系统是响应式的,列会根据屏幕大小自动重新排列。

    Bootstrap 4 网格系统有以下 5 个类:

    下表总结了 Bootstrap 网格系统如何在不同设备上工作的:


    超小设备
    <576px
    平板
    ≥576px
    桌面显示器
    ≥768px
    大桌面显示器
    ≥992px
    超大桌面显示器
    ≥1200px
    容器最大宽度None (auto)540px720px960px1140px
    类前缀.col-.col-sm-.col-md-.col-lg-.col-xl-
    列数量和12
    间隙宽度30px (一个列的每边分别 15px)
    可嵌套Yes
    列排序Yes

    更多关于bootstrap的相关知识,可访问:bootstrap基础教程!!

    以上就是bootstrap4的栅格分成几类的详细内容,更多请关注php中文网其它相关文章!

    声明:本文原创发布php中文网,转载请注明出处,感谢您的尊重!如有疑问,请联系admin@php.cn处理
    专题推荐:bootstrap4 栅格
    上一篇:angular与react的区别是什么 下一篇:bootstrap中有几个文本类
    php中文网线上培训班

    相关文章推荐

    • 什么是bootstrap,它有什么优点• bootstrap是一种语言吗• bootstrap样式按钮有哪些• bootstrap中图片样式有哪些• bootstrap有哪些特点• bootstrap 怎么设置背景

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网