作者信息

长期闲置

长风破浪会有时,直挂云帆济沧海。

最近文章
ajax请求时post和get的区别是什么865
ajax默认是异步请求吗346
cors和ajax的区别是什么620
视频教程分类
推荐视频教程
  • php程序员小白到大牛三个月集训php程序员小白到大牛三个月集训
  • Laravel 9 学习正当时—保姆级教程,想学不会都难!Laravel 9 学习正当时—保姆级教程,想学不会都难!
  • 千万级数据并发解决方案(理论+实战)千万级数据并发解决方案(理论+实战)
  • Laravel基础与实战(模块化)Laravel基础与实战(模块化)
  • 首页 >web前端 >前端问答 > 正文

    什么是bootstrap栅格化

    原创2022-06-21 17:26:16318 关注公众号:每天精选资源文章推送

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

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

    什么是bootstrap栅格化

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

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

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

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

    栅格系统概述

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

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

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

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

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

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

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

    学生信息表格案例

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

    1、编写HTML代码

        <p class="container">
            <p class="row">
                <p class="col-md-4">姓名</p>
                <p class="col-md-4">年龄</p>
                <p class="col-md-4">性别</p>
            </p>
            <p class="row">
                <p class="col-md-4">张三</p>
                <p class="col-md-4">25</p>
                <p class="col-md-4">男</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中文网其它相关文章!

    20期PHP线上班

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。

  • 相关标签:bootstrap
  • 推荐:PHP从基础到实战教程视频

    相关文章

    相关视频


    专题推荐