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

    什么是bootstrap自适应

    长期闲置长期闲置2022-06-21 17:12:53原创154

    在bootstrap中,自适应指的是根据屏幕大小把设备分为超小屏幕、中屏幕、中等屏幕、大屏幕四种,网页会根据设备屏幕不同,将网页分为12列,将浏览器以行列形式去划分实现自适应;自适应不管屏幕有多大,都尽量不换行,只是横向缩放。

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

    什么是bootstrap自适应

    bootstrap自适应:

    Bootstrap根据屏幕大小把设备分为超小屏幕,小屏幕,中等屏幕,大屏幕四种并把屏幕分为12列

    对应屏幕宽度为:

    在chrome浏览器,elements窗口中会发现当屏幕宽度小于768时,

    只有com-xs-12生效。

    自适应:网页适应不同设备 ,用bootstrap框架

    原理:是媒体(设备/浏览器)查询 @media only screen 查询设备的宽度

    bootstrap是自适应的;自适应指的是不管屏幕有多大,都尽量不换行,只是横向缩放,而bootstrap是通过栅栏系统实现自适应的;栅格系统通过定义容器的大小,将其分为12等份,将浏览器以行列形式去划分实现自适应。

    示例如下:

    @media only screen and (min-width:0px) and (max-width:480px){
    body{
    background-color:red;
    }
    }
    @media only screen and (min-width:481px) and (max-width:720px){
    body{
    background-color:green;
    }
    }
    @media only screen and (min-width:721px){
    body{
    background-color:blue;
    }
    }

    相关推荐:bootstrap教程

    以上就是什么是bootstrap自适应的详细内容,更多请关注php中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    专题推荐:bootstrap
    上一篇:bootstrap是国内开发的吗 下一篇:什么是bootstrap响应式
    20期PHP线上班

    相关文章推荐

    • 【活动】充值PHP中文网VIP即送云服务器• bootstrap的表格样式有哪些• aria在bootstrap里是啥意思• bootstrap怎么设置固定定位• bootstrap怎么让div隐藏• bootstrap中有栅格布局吗
    1/1

    PHP中文网