boostrap在不同设备上运行时，页面布局变化规则

最新推荐文章于 2024-01-10 16:31:47 发布

xianweizuo

最新推荐文章于 2024-01-10 16:31:47 发布

阅读量221

点赞数

分类专栏： html随笔记录文章标签： Boostrap页面布局 Bootstrap在不同设备上布局变化

本文链接：https://blog.csdn.net/xianweizuo/article/details/101695757

版权

html随笔记录专栏收录该内容

7 篇文章 1 订阅

订阅专栏

我们做网站的时候，一般都是在自己电脑上开发，所以开发出的网站效果是根据自己的机器来的，那么，我们做一个网站不可能仅仅是自己使用，当设备变化时，特别是当用户使用手机浏览网页时，如何保持良好的视觉效果呢，这就引入了boostrap。

Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT
的。

BootStrap页面布局是基于网格布局的（这里跳过网格布局，不清楚的同学可以去菜鸟教程https://www.runoob.com/bootstrap/bootstrap-intro.html学习），我们在boostrap中可以指定col-*-*来指定元素所占用的空间，但是，当设备变化时，页面布局的变化遵循什么样的原则呢？
遵循的原则如下：
当在元素中指定某一设备类型的布局时，元素在该种设备显示时，严格按照指定布局显示，如果没有指定某一个设备类型的布局时，则按照以下顺序显示元素：
1.显示行
2.显示行中的列
3.如果某行中存在嵌套行，转第1步
4.如果某列中存在嵌套行，转第1步
看如下代码：

<body>
    <div class="container">
        <div class="row" style="box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
            <div class="col-lg-3 col-md-6 col-sm-6 col-xs-6" style="box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
                <div class="row text-center" style="box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
                    1 列 1 行
                </div>
                <div class="row text-center" style="box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
                    1 列 2 行
                </div>
                <div class="row text-center" style="box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
                    1 列 3 行
                </div>
            </div>
            <div class="col-lg-9 col-md-6 col-sm-6 col-xs-6" style="box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
                <div class="row text-center" style="box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
                    2 列 1 行
                </div>
                <div class="row" style="box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
                    <div class="col-lg-3 " style="box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
                        2 列 2 行 1 列
                    </div>
                    <div class="col-lg-4" style="box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
                        2 列 2 行 2 列
                    </div>
                    <div class="col-lg-5" style="box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
                        2 列 2 行 2 列
                    </div>
                </div>
            </div>
            
        </div>
    </div>
</body>

在不同设备上运行效果图
超大设备：

中型设备：

小型设备（智能手机）：
模拟IphoneX显示
本文仅供参考，也是防止自己以后忘记~，如果不能为您提供帮助，请另寻贵资，谢谢。
参考：菜鸟教程

xianweizuo

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
boostrap在不同设备上运行时，页面布局变化规则

我们做网站的时候，一般都是在自己电脑上开发，所以开发出的网站效果是根据自己的机器来的，那么，我们做一个网站不可能仅仅是自己使用，当设备变化时，特别是当用户使用手机浏览网页时，如何保持良好的视觉效果呢，这就引入了boostrap。Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT的。BootStrap...
复制链接

扫一扫