1.栅格系统

​ Bootstrap是基于移动优先的原则开发的，使用了一系列的媒体查询（media queries）方法，为我们的布局和界面创建自适应的的分界点。这些分界点主要是基于视口宽度的最小值，并且当窗口视图改变的时候允许元素缩放。

(分界点大小：576px、768px、992px、1200px)

Bootstrap包含了一个强大的移动优先的网格系统，它是基于一个12列的布局、有5种响应尺寸(对应不同的屏幕)。Bootstrap4是完全基于flexbox流式布局构建的，完全支持响应式标准。

2.响应式的class选择器

​ Bootstrap的栅格系统包括五种宽带预定义，用于构建复杂的响应布局，你可以根据需要定义在特小.col、小.col-sm-*、中.col-md-*、大.col-lg-*、特大.col-xl-*五种屏幕(设备)下的样式。

​ 每个标签都是定义了在当前断点之下的排列样式，一旦小于这个断点那么样式就不起作用了，变成了各独自占一行。

类似于sm,md,lg,xl等都是断点，只有当屏幕尺寸大于断点的对应的大小，这样的的class样式才会生效。比如：

<!DOCTYPE html>

<html lang="zh-CN">

<head>

    <meta charset="UTF-8">

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

    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <title>Document</title>

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"

          integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

    <style>

        #box_row div {

            line-height: 100px;

            text-align: center

        }

    </style>

</head>

<body>

<div class="container">

    <div id="box_row" class="row" style="height: 100px">

        <div class="col-xl-4" style="background: #27ff86">

            222

        </div>

        <div class="col-xl-4 " style="background: #8879ff">

            222

        </div>

        <div class="col-xl-4" style="background: #ffc535">

            other

        </div>

    </div>

</div>

</body>

</html>

这里设置了边框，这里其实设置的在超大屏幕下的样式，即当前屏幕的尺寸宽度大于1140px时这个样式才生效，如下：

但是当屏幕的尺寸变小之后，比如缩小到1140px之后，就会自动成为每列一行、水平堆砌。

比如把浏览器窗口的宽度调小到1140px以下，此时显示的效果如下：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-r5Yt3rtr-1597584075252)(https://i.loli.net/2020/08/15/WQK15GClPzsJXEu.png)]

会自适应的进行布局，这是根据当前屏幕尺寸进行自动的调整的也就是说，当屏幕尺寸小于端点值xl时，此时每列就会自动的占一行，水平堆砌。

3.混合布局

<div class="container">

    <div id="box_row" class="row" style="height: 100px">

        <div class="col-xl-4 col-sm-3" style="background: #27ff86">

            222

        </div>

        <div class="col-xl-4 col-sm-3" style="background: #8879ff">

            222

        </div>

        <div class="col-xl-4 col-sm-3" style="background: #ffc535">

            other

        </div>

    </div>

</div>

这样就设置了两个断点，在超大屏幕下每块占4列，在大屏幕和小屏幕之间是占3列，以下是效果展示图：

  1. 当屏幕尺寸大于1140px时，col-xl-4生效：

  2. 当屏幕尺寸小于1140px，大于576px时：

    可以看到此时的布局调整到了col-sm-3下的自适应样式，即每个块占3列

  3. 混合布局情况下可以对多种设备进行布局调整。

    搬运自我的个人博客boostrap栅格系统自适应的布局

boostrap栅格系统自适应的布局的更多相关文章

  1. Boostrap栅格系统

    Boostrap排版.链接样式设置了基本的全局样式.分别是:为body元素设置 布局容器:Bootstrap需要为页面内容和栅格系统包裹一个:container容器.Bootstrap提供了两个作此用 ...

  2. bootstrap简单使用布局、栅格系统、modal标签页等常用组件入门

    <!DOCTYPE html> <html> <head> <title>bootstrap</title> <!-- 引入boots ...

  3. Bootstrap栅格系统详解,响应式布局

    Bootstrap栅格系统详解 栅格系统介绍 Bootstrap 提供了一套响应式.移动设备优先的流式栅格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列. 栅格系统用于通 ...

  4. 深入理解BootStrap之栅格系统（布局）

    1.栅格系统(布局) Bootstrap内置了一套响应式.移动设备优先的流式栅格系统,随着屏幕设备或视口(viewport)尺寸的增加,系统会自动分为最多12列. 我在这里是把Bootstrap中的栅 ...

  5. bootstrap学习笔记<八>（bootstrap核心布局风格——栅格系统）

    栅格系统(bootstrap的核心之一,也是bootstrap的主要布局风格) 栅格系统是对原有div布局的升级版.打破了传统div模式只能纵向垂直排列的弊端,大大提高了页面布局的速度和效果,也很好的 ...

  6. [bootstrap] 栅格系统和布局

    1.简介 栅格系统(grid systems),也称为“网格系统”,运用固定的格子设计版面布局,风格工整简洁.是从平面栅格系统演变而来. Bootstrap建立在12列栅格系统.布局.组件之上.以规则 ...

  7. Bootstrap栅格系统（布局）

    栅格系统(布局) Bootstrap内置了一套响应式.移动设备优先的流式栅格系统,随着屏幕设备或视口(viewport)尺寸的增加,系统会自动分为最多12列. 我在这里是把Bootstrap中的栅格系 ...

  8. 巧用 BootStrap --- 栅格系统（布局）轻松搞定网页响应式布局！

    摘要:Bootstrap 为我们提供了一套响应式.移动设备优先的流式栅格系统,合理的使用栅格系统将会使得网站页面布局变得更加简单,在设置了媒体查询之后,响应式网站也无需再单独写了.接下来我以Boots ...

  9. Bootstrap4响应式布局之栅格系统

    前面说了Bootstrap4的下载和简单使用,现在我们接着往下学习,Bootstrap4的响应式布局主要依靠栅格系统来实现的.面老K先来讲解一下Bootstrap4的栅格系统,让你能够更快的了解Boo ...

随机推荐

  1. C#LeetCode刷题之#680-验证回文字符串 Ⅱ​​​​​​​（Valid Palindrome II）

    问题 该文章的最新版本已迁移至个人博客[比特飞],单击链接 https://www.byteflying.com/archives/3961 访问. 给定一个非空字符串 s,最多删除一个字符.判断是否 ...

  2. C#LeetCode刷题之#415-字符串相加（Add Strings）

    问题 该文章的最新版本已迁移至个人博客[比特飞],单击链接 https://www.byteflying.com/archives/3873 访问. 给定两个字符串形式的非负整数 num1 和num2 ...

  3. 运用cookie实现记住密码自动登陆：

    苦命的程序员:只有博客才能了解我的路!!! 废话不多说:直接上代码: 1.首先在现在登录的页面上来获取cookie的所有: 2.在验证页面来设置clookie的用户名和密码还有是否是自动登录: 到此就 ...

  4. 【NOI2015】 软件包管理器 - 树链剖分

    noi2015 软件包管理器 Description Linux用户和OSX用户一定对软件包管理器不会陌生.通过软件包管理器,你可以通过一行命令安装某一个软件包,然后软件包管理器会帮助你从软件源下载软 ...

  5. Python定时任务轻量解决方案---Schedule

    写后端的同学们可能都知道,工作中可能需要周期性执行一些任务,俗称定时任务.Linux环境下,可以借助于系统自带的crontab完成定时任务.但是很多时候,开发的同学们可能并没有权限去操作crontab ...

  6. PythonCrashCourse 第七章习题

    编写一个程序,询问用户要租赁什么样的汽车,并打印一条消息,如"Let me see if I can find you a Subaru" car =input("Wha ...

  7. Go 中的内联优化

    文讨论 Go 编译器是如何实现内联的以及这种优化方法如何影响你的 Go 代码. 请注意:本文重点讨论 gc,实际上是 golang.org 的 Go 编译器.讨论到的概念可以广泛用于其他 Go 编译器 ...

  8. （转）@Autowired(required=false)注入注意的问题

    1.前言 在使用spring开发过程中,我们基本上都是使用@Autowired这个注解,用来注入已有的bean.但是有些时候,会注入失败.当我们加上参数(required=false)就能解决.今天整 ...

  9. J20航模遥控器开源项目系列教程（三）开发说明 | 想要自己改造程序，扩充功能，怎么实现？

    我们的开源宗旨:自由 协调 开放 合作 共享 拥抱开源,丰富国内开源生态,开展多人运动,欢迎加入我们哈~ 和一群志同道合的人,做自己所热爱的事! 项目开源地址:https://github.com/C ...

  10. oracle进行一对多关联查询的时候，获取副表（也就是多条记录的那张表）的最新一条记录进行关联，如何获取多条记录最新一条呢？

    例如以下场景: 一条新闻对应多条审核记录,用户想知道这条新闻走到哪一步审核了. 使用:select * from (select b.*,(ROW_NUMBER() OVER (PARTITION B ...