登录  /  注册

什么是bootstrap栅格化

WBOY
发布: 2022-06-21 17:26:16
原创
1353人浏览过

在bootstrap中,栅格化指的是将浏览器的一行分为12列,根据开发的页面需要再去分配相应元素所占据的列宽;也即根据设备的尺寸进行分段,每段宽度固定,通过百分比和媒体查询实现响应式布局。

什么是bootstrap栅格化

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

什么是bootstrap栅格化

在bootstrap中,栅格化的原理就是根据设备的尺寸进行分段,每段宽度固定,通过百分比和媒体查询实现响应式布局;这样就可以让同一套页面可以适应不同分辨率的设备。

栅格化布局基本原理:栅格化把页面在水平方向等分为一定数目(假设为n)的基本宽度列

然后开发人员可根据需要给页面里的相应元素设置它应占据m个列宽。(m

我的理解:栅格化就是把浏览器的一行分为12列,自己去分配列。

栅格系统概述

栅格系统(Grid Systems),即网格系统,它是一种清晰、工整的设计风格,用固定的格子进行网页布局。栅格系统最早应用于印刷媒体上,一个印刷版面上划分了若干个格子,非常方便排版。

后来,栅格系统被应用于网页布局中,使用响应式栅格系统进行页面布局时,可以让网页根据不同的显示终端展示不同页面结构。例如,在小屏幕设备上有某些模块将按照不同的方式排列或者被隐藏。

Bootstrap栅格系统的基本使用方式。

1、Bootstrap栅格系统为不同屏幕宽度定义了不同的类,直接为元素添加类名即可。

2、行必须包含在布局容器中,以便为其赋予合适的排列和内补。

3、通过行可以在水平方向创建一组列并且只有列可以作为行的直接子元素。

4、行使用样式.row,列使用样式.col-*-*,内容应当放置于列内,列大于12时,将会另起一行排列。

学生信息表格案例

案例实现思路:
1、首先需要在布局容器中创建一个类名为row的p元素作为行;
2、然后在行的容器内部创建列。布局容器中的行和列就构成了栅格系统。
3、栅格系统中的行和列类似于表格中的行和列。

1、编写HTML代码

    <p>
        </p><p>
            </p><p>姓名</p>
            <p>年龄</p>
            <p>性别</p>
        
        <p>
            </p><p>张三</p>
            <p>25</p>
            <p>男</p>
        
    
登录后复制

2、编写CSS样式

    .row {
        background-color: #eee;
        font-size: 30px;
    }
    .col-md-4 {
        border: 1px solid #fff;
        text-align: center;
    }
登录后复制

当浏览器显示宽度大于992px时,效果如下:
在这里插入图片描述
当浏览器宽度大于768px时,效果如下:
在这里插入图片描述
当浏览器宽度小于768px时,效果如下:
在这里插入图片描述

相关推荐:bootstrap教程

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

智能AI问答
PHP中文网智能助手能迅速回答你的编程问题,提供实时的代码和解决方案,帮助你解决各种难题。不仅如此,它还能提供编程资源和学习指导,帮助你快速提升编程技能。无论你是初学者还是专业人士,AI智能助手都能成为你的可靠助手,助力你在编程领域取得更大的成就。
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号