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

    bootstrap3优先支持哪种设备

    青灯夜游青灯夜游2021-11-11 13:49:28原创216

    bootstrap3优先支持“移动”设备。bootstrap3是移动优先的设计思想,设计的所有的样式默认都会应用到移动设备上,接着利用媒体查询,一步一步的增加对于其它尺寸设备的设计。

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

    Bootstrap 3 是一套移动优先的前端框架。移动优先就是,设计的所有的样式默认都会应用到移动设备上,然后在设计里,利用媒体查询,一步一步的增加对于其它尺寸设备的设计。

    在之前的 Bootstrap 版本中(直到 2.x),您需要手动引用另一个 CSS,才能让整个项目友好的支持移动设备。

    现在不一样了,Bootstrap 3 默认的 CSS 本身就对移动设备友好支持。

    Bootstrap 3 的设计目标是移动设备优先,然后才是桌面设备。这实际上是一个非常及时的转变,因为现在越来越多的用户使用移动设备。

    为了让 Bootstrap 开发的网站对移动设备友好,确保适当的绘制和触屏缩放,需要在网页的 head 之中添加 viewport meta 标签,如下所示:

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    在移动设备浏览器上,通过为 viewport meta 标签添加 user-scalable=no 可以禁用其缩放(zooming)功能。

    通常情况下,maximum-scale=1.0user-scalable=no 一起使用。这样禁用缩放功能后,用户只能滚动屏幕,就能让您的网站看上去更像原生应用的感觉。

    注意,这种方式我们并不推荐所有网站使用,还是要看您自己的情况而定!

    <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, 
    user-scalable=no">

    推荐学习:《bootstrap使用教程

    以上就是bootstrap3优先支持哪种设备的详细内容,更多请关注php中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    上一篇:Bootstrap是哪个公司开发的 下一篇:bootstrap用什么表格插件
    千万级数据并发解决方案

    相关文章推荐

    • bootstrap是技术还是框架?• js与bootstrap的区别是什么• bootstrap v4 v3的区别是什么• 一般开发用什么bootstrap ui工具• bootstrap modal是什么意思• bootstrap支持几种列表样式
    1/1

    PHP中文网