4 数据可视化大屏 - 布局： BootStrap 之网格Grid

已于 2022-04-30 09:50:08 修改
阅读量2.6k 收藏 4
点赞数 2
分类专栏： 【可视化大屏教程】 文章标签： 数据可视化 大屏 设计 boostrap css
于 2022-03-20 13:36:07 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lildkdkdkjf/article/details/123610039
版权

目录

一、最简单的例子

二、网格grid特性

三、自动布局列

1、列自动等宽度 col

2、设置某一列宽度，其余列自动等宽度

3、可变宽度内容 col-{ breakpoint }-auto

四、响应类Responsive classes

1、所有断点 breakpoint col-x(1-12)

 2、向水平方向堆叠 Stacked to horizontal

 3、Row columns 行列

 五、嵌套布局 Nesting

可视化大屏设计 - 总目录 

导读：大屏案例参考

YYDatav的数据可视化大屏《精彩案例汇总》（Python&Echarts源码）_YYDataV的博客-CSDN博客

网格grid 使用一系列 容器container、行row 和 列column 来布局和对齐内容。

一、最简单的例子

这个例子使用 类grid 创建3个 等宽列column，平均分布在父容器container 中。 

    <div class="container" style="border: 5px red solid; ">
        <div class="row" style="border: 5px blue solid; ">
            <div class="col" style="border: 5px green solid;">
                Column1
            </div>
            <div class="col" style="border: 5px green solid;">
                Column2
            </div>
            <div class="col" style="border: 5px green solid;">
                Column3
            </div>
        </div>
    </div>

二、网格grid特性

  1. 网格grid 支持六个响应性breakpoint断点。None(X-Small)，sm(Small)， md(Medium)，lg(Large)，xl(Extra large)，xxl(Extra extra large)。
  2. container容器 水平居中的填充内容。
  3. row行是column列的包装器。每个列都有水平填充 gutter槽 ，用于控制它们之间的空间。
  4. column列可以灵活组合。每行row共有12个列，这些列可以任意数量组合。
  5. Gutters槽可以跨所有 breakpoint断点使用。

三、自动布局列

1、列自动等宽度 col

<div class="container" style="border: 5px red solid; ">
        <div class="row" style="border: 5px blue solid; ">
            <div class="col" style="border: 5px green solid;">
                Column1
            </div>
            <div class="col" style="border: 5px green solid;">
                Column2
            </div>
        </div>
</div>

 

    <div class="container" style="border: 5px red solid; ">
        <div class="row" style="border: 5px blue solid; ">
            <div class="col" style="border: 5px green solid;">
                Column1
            </div>
            <div class="col" style="border: 5px green solid;">
                Column2
            </div>
            <div class="col" style="border: 5px green solid;">
                Column3
            </div>
            <div class="col" style="border: 5px green solid;">
                Column4
            </div>
        </div>
    </div>

2、设置某一列宽度，其余列自动等宽度

将第2列设置为col-6，其余1，3，4等宽分配。

    <div class="container" style="border: 5px red solid; ">
        <div class="row" style="border: 5px blue solid; ">
            <div class="col" style="border: 5px green solid;">
                Column1
            </div>
            <div class="col-6" style="border: 5px green solid;">
                Column2（6）
            </div>
            <div class="col" style="border: 5px green solid;">
                Column3
            </div>
            <div class="col" style="border: 5px green solid;">
                Column4
            </div>
        </div>
    </div>

3、可变宽度内容 col-{ breakpoint }-auto

使用 col-{ breakpoint }-auto 类根据内容宽度来设置列宽度。

可以看到 col-md-auto 类的列宽是根据内容Variable width的内容宽度自适应的，col类 的列宽是根据 container容器的剩余宽度自适应的。

<div class="container" style="border: 5px red solid">
        <div class="row justify-content-md-center" style="border: 5px blue solid">
            <div class="col col-lg-2" style="border: 5px green solid">
                1 of 3
            </div>
            <div class="col-md-auto" style="border: 5px green solid">
                Variable width
            </div>
            <div class="col col-lg-2" style="border: 5px green solid">
                3 of 3
            </div>
        </div>
        <div class="row" style="border: 5px blue solid">
            <div class="col" style="border: 5px green solid">
                1 of 3
            </div>
            <div class="col-md-auto" style="border: 5px green solid">
                Variable width
            </div>
            <div class="col col-lg-2" style="border: 5px green solid">
                3 of 3
            </div>
        </div>
    </div>

四、响应类Responsive classes

Bootstrap 的网格包括6个预定义类，用于构建复杂的响应式布局。在您认为合适的超小、小、中、大、超大或超超大设备上自定义列的大小。

1、所有断点 breakpoint col-x(1-12)

<div class="container" style="border: 5px red solid">
        <div class="row justify-content-md-center" style="border: 5px blue solid">
            <div class="col" style="border: 5px green solid">
                1
            </div>
            <div class="col" style="border: 5px green solid">
                2
            </div>
            <div class="col" style="border: 5px green solid">
                3
            </div>
        </div>
        <div class="row" style="border: 5px blue solid">
            <div class="col-8" style="border: 5px green solid">
                1
            </div>
            <div class="col-4" style="border: 5px green solid">
                2
            </div>
        </div>
    </div>

 2、向水平方向堆叠 Stacked to horizontal

<div class="container" style="border: 5px red solid">
        <div class="row" style="border: 5px blue solid">
            <div class="col-sm" style="border: 5px green solid">
                1
            </div>
            <div class="col-sm" style="border: 5px green solid">
                2
            </div>
            <div class="col-sm" style="border: 5px green solid">
                3
            </div>
        </div>
        <div class="row" style="border: 5px blue solid">
            <div class="col-sm-8" style="border: 5px green solid">
                1
            </div>
            <div class="col-sm-4" style="border: 5px green solid">
                2
            </div>
        </div>
    </div>

 3、Row columns 行列

使用 row-cols-2 指定每行row包含的列数column。

<div class="container" style="border: 5px red solid">
        <div class="row row-cols-2" style="border: 5px blue solid">
            <div class="col" style="border: 5px green solid">
                1
            </div>
            <div class="col" style="border: 5px green solid">
                2
            </div>
            <div class="col" style="border: 5px green solid">
                3
            </div>
            <div class="col" style="border: 5px green solid">
                4
            </div>
        </div>
    </div>

 五、嵌套布局 Nesting

 要使用默认网格grid嵌套内容，请在column列中添加一个新的row，然后在这个新的row中继续添加column即可。

<div class="container" style="border: 5px red solid">
        <div class="row row-cols-2" style="border: 5px blue solid">
            <div class="col" style="border: 5px green solid">
                1 层
            </div>
            <div class="col" style="border: 5px green solid">
                <div class="row">
                    <div class="col-8" style="border: 5px purple solid">
                        2 层
                    </div>
                    <div class="col-4" style="border: 5px purple solid">
                        2 层
                    </div>
                </div>
            </div>
            <div class="col" style="border: 5px green solid">
                3
            </div>
            <div class="col" style="border: 5px green solid">
                4
            </div>
        </div>
    </div>

可视化大屏设计 - 总目录 

可视化大屏设计 - 总目录_YYDataV的博客-CSDN博客1 一文详细阐述UI设计颜色搭配，受益匪浅~_YYDataV的博客-CSDN博客_ui配色心理学家认为，人的第一感觉就是视觉，而对视觉影响最大的则是色彩。一图概括色彩意向：色系色彩意向红色系热情、张扬、高调、艳丽、侵略、暴力、血腥、警告，禁止橙色系明亮、华丽、健康、温暖、辉煌、欢乐、兴奋、热烈、温馨黄色系温暖、亲切、光明、疾病、懦弱、智慧、轻快绿色系希望、生机、成长、环保、.https://blog.csdn.net/lildkdkdkjf/article/details/1203893492 数据可视化大https://blog.csdn.net/lildkdkdkjf/article/details/123546553?spm=1001.2014.3001.5501

YYDataV数据可视化
关注
  • 2
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
Bootstrap 超大屏幕（Jumbotron）
shengyin714959的博客
08-15 310
本章将讲解 Bootstrap 支持的另一个特性，超大屏幕（Jumbotron）。顾名思义该组件可以增加标题的大小，并为登陆页面内容添加更多的外边距（margin）。
Bootstrap-Grid-Inkscape-Template:Bootstrap网格系统的Inkscape模板
05-07
Inkscape Bootstrap 940px网格模板 Inkscape>（Photoshop | Illustrator）<3 这是我为Inkscape创建的个人Web设计模板。 它基于Bootstrap的网格系统，包含12列，每列相隔78.33333像素。 我创建了宽度为1366px的模板。 为什么？ 因为这是最受欢迎的屏幕尺寸。 数学 1st Guide: (1366 - 940) / 2 = 213 2nd Guide: 213 + 78.33333 = 291.33333 3rd Guide: 291.33333 + 78.33333 = 369.66666 4th Guide: 369.66666 + 78.33333 = 447.99999 5th Guide: 447.99999 + 78.33333 =
bootstrap-grid:Bootstrap网格系统的独立版本
03-11
引导网格 Bootstrap 3网格系统的独立版本。 请参阅文件以获取演示。 如果要使用Bootstrap 4中的网格，则应直接使用Bootstrap。 它在其可下载的软件包和npm软件包中包括其网格系统的，因此请继续使用它而不是此软件包。 为什么？ Bootstrap 3包含最佳的响应式网格系统。 在没有所有其他Bootstrap的情况下，它很有用。 该项目包含具有相关实用程序类的独立版本。 如何使用网格系统？ 请参阅Bootstrap的和文档。 我如何使用这个项目？ 您有几种选择： 从dist文件夹下载grid.css或grid.min.css文件，并将其包含在您的项目中。 安装此包与NPM和包括/需要grid.css或grid.min.css直接从node_modules 。 如果您将Webpack与css-loader一起使用，则只需require("bootstra
屏幕适配布局之grid网格布局
炑焽的博客
04-20 881
是W3C提出的一个二维布局系统。它与其他布局方式有所不同，因为它不仅可以指定容器内部多个项目的位置，还能创建更加复杂和灵活的页面布局。Grid布局可以将容器划分为“行”和“列”，形成单元格，并允许开发者指定项目所在的单元格。
bootstrap-grid-generator:bootstrap3网格设计器的板生成器
05-10
引导网格生成器 适用于设计师的Bootstrap3网格它们板生成器
bootstrap-4-grid：Bootstrap 4网格系统和布局实用程序
01-31
Bootstrap 4网格系统（Flex） Bootstrap v4.4.1网格系统和布局实用程序。 包含什么 为什么？ 这是Bootstrap 4当前不提供的功能： 如果您不需要上述任何一项，那么Bootstrap 4已经包含了带有捆绑包的仅网格版本。 如何使用 Sass和CSS文件已准备好在您的项目中使用。 CSS 非常简单。 只需获取css/grid.min.css或css/grid.css并将其添加到您的项目中即可。 萨斯 您将需要将整个scss文件夹内容包括到您的项目中。 然后，只需将grid.scss导入到项目的sass文件中即可。 NPM npm install bootstrap-4-grid 纱 yarn add bootstrap-4-grid 浏览器支持 我们使用为css文件添加前缀。 默认情况下，支持每个主要浏览器的最后2个版本。 要更改此设置，请遵循以下自定义说明。 注意： Sass文件不包含任何浏览器特定的前缀。 如果将它们包括在项目中，则将需要使用自己的post CSS工具为不同的浏览器添加前缀。 如果您使用的是 ，则默认情况下会包含自动auto
数据可视化大屏展示特效实例（jquery+bootstrap+echarts）
12-27
jquery+bootstrap+echarts数据可视化大屏展示特效实例 项目描述： 数据可视化大屏展示用的越来越多，自己也捣鼓做一个。 运行环境： Chrome 项目技术(必填)： jquery+bootstrap+echarts
Bootstrap组件——超大屏、列表
xun__xing的博客
07-31 980
超大屏、列表一、超大屏1.基础2.全屏二、列表1.基本2.链接和按钮3.Flush紧致贴齐4.背景色5.配合徽章6.自定义内容7.选项卡8.方法与事件 一、超大屏 通过引用.jumbotron方法，实现构建超大的Hreo界面，醒目的在网站上展示关键的营销信息，轻量、灵活。 1.基础 <div class="container"> <div class="row"> <div class="col"> <div class="jumbotron">
第一章 Bootstrap的布局
mlfc0422的博客
11-14 756
在Bootstrap中，容器（Container）是用于包装网页内容的布局元素，它有助于创建响应式网页布局。容器提供了不同的宽度选项，以适应不同的屏幕尺寸和设备。.container.container是Bootstrap中最常用的容器类，用于创建固定宽度的容器。这意味着容器的宽度会根据屏幕尺寸而变化，但它会有一个最大宽度，以确保内容不会过于扩展。该容器类适合于大多数网页布局，尤其是在中等和大屏幕设备上。类用于创建全宽度的容器，容器的宽度会充满整个浏览器窗口的可视区域。
如何配置GridView中显示数据
SunGuangHuiM的博客
06-22 277
首先放入一个GridView控件 点击新建数据源 找到对应的数据库
03-bootstrap-响应式布局-栅格系统
记录java学习日常~
05-25 2664
行（row）”必须包含在 .container （固定宽度）或 .container-fluid （100% 宽度）中，以便为其赋予合适的排列（aligment）和内补（padding）。通过“行（row）”在水平方向创建一组“列（column）”。你的内容应当放置于“列（column）”内，并且，只有“列（column）”可以作为行（row）”的直接子元素。类似 .row 和 .col-xs-4 这种预定义的类，可以用来快速创建栅格布局。
bootstrap4-rtl:Bootstrap 4 RTL主题
05-25
bootstrap4-rtl Bootstrap 4 RTL主题 用法： <!-- Original Bootstrap 4.x --> < link rel =" stylesheet " href =" bootstrap.css " > <!-- Bootstrap RTL Theme --> < link rel =" stylesheet " href =" bootstrap-rtl.css " > 使用安装：npm install @ ghalamborm / bootstrap4-rtl
BootStrap入门教程(一)之可视化布局
01-19
下载地址：http://v3.bootcss.com/getting-started/#download HTML模板： <!DOCTYPE html> <html> <head> <title>Bootstrap 模板</title> <meta name=viewport content=width=device-width, initial-scale=1.0> <!-- 引入 Bootstrap --> <link href=http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css
bootstrap可视化布局
05-26
bootsrap可视化布局
可视化看板方案
08-04
Fanuc；机床看板；有用的界面设计资料；Fanuc 0i/31i/
数据大屏、数据看板，vue、echarts集合目前主流的可视化引擎进行渲染。
10-10
数据大屏可视化主要就是借助图形，利用生动、直观的形式展示出数据信息的具体数值，使得使用者短时间内更加直观的接受到大量信息。大屏可视化还可以把繁琐的数据简单化，重要的信息突出化，快速捕捉到重点信息并作出分析，快速整合信息更好的找到企业的发展点。
3 数据可视化大屏 - 布局： BootStrap 之容器Container
YYDataV的博客
03-17 4093
目录 Bootstrap 有三个类型的容器 实战 .container 演练 .container-fluid 演练 .container-sm .container-md .container-lg 演练 .container-xl.container-xxl 演练 Sass 映射 - 修改预定义的容器类 可视化大屏设计 - 总目录 导读：大屏案例参考YYDatav的数据可视化大屏《精彩案例汇总》（Python&Echarts源码）_YYDataV的博客-CSDN博客 .
推荐开源项目：StarAdmin - 免费响应式Bootstrap 4管理模板
最新发布
gitblog_00025的博客
05-14 221
推荐开源项目：StarAdmin - 免费响应式Bootstrap 4管理模板 项目地址:https://gitcode.com/BootstrapDash/StarAdmin-Free-Bootstrap-Admin-Template 项目介绍 StarAdmin是一款基于Bootstrap 4框架构建的免费响应式后台管理模板。它以其独特的色彩搭配，引人注目的设计以及简洁优雅的风格脱颖而出。模板...
十三、highchart实现看板功能
ssshen14的专栏
09-01 3583
之前对比了ECharts和Highcharts，发现highchart文档更清晰，举的例子也简单明了；而echarts虽然看着很强大，热力图、平行坐标等，官网上列出了一大堆效果图的例子，但是，就是找不到头绪，最后就放弃了Echarts，改用highchart了，ORZ~ 某乎上还有讨论：https://www.zhihu.com/question/21438840 html： <!DOCT
sudo keystone-manage bootstrap --bootstrap-password cqu2022\ --bootstrap-admin-url http://localhost:5000/v3/ \ --bootstrap-internal-url http://localhost:5000/v3/ \ --bootstrap-public-url http://localhost:5000/v3/ \ --bootstrap-region-id RegionOne
06-12
这个命令的作用是在Keystone中创建初始用户、服务和端点，以及设置管理员和服务用户的凭据。在运行此命令之前，您需要确保已经安装了Keystone，并且具有管理员权限。 该命令需要指定以下参数： - `--bootstrap-password`：用于设置管理员用户的密码。 - `--bootstrap-admin-url`：用于设置管理员API终端的URL。 - `--bootstrap-internal-url`：用于设置内部API终端的URL。 - `--bootstrap-public-url`：用于设置公共API终端的URL。 - `--bootstrap-region-id`：用于设置Keystone的区域ID。 下面是运行此命令的示例： ``` sudo keystone-manage bootstrap --bootstrap-password cqu2022 \ --bootstrap-admin-url http://localhost:5000/v3/ \ --bootstrap-internal-url http://localhost:5000/v3/ \ --bootstrap-public-url http://localhost:5000/v3/ \ --bootstrap-region-id RegionOne ``` 请注意，在运行此命令后，您将创建一个具有管理员角色的用户，并设置了管理员和服务用户的凭据。同时，您还将创建服务和端点以供其他OpenStack服务使用。如果您需要创建更多的用户、服务和端点，请参考Keystone的文档以获取更多信息。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

YYDataV数据可视化

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值