Bootstrap 网格系统

news2024/10/7 10:13:12

文章目录

  • Bootstrap 网格系统
    • 什么是网格（Grid）？
    • 什么是 Bootstrap 网格系统（Grid System）？
      • 移动设备优先策略
        • 内容
        • 布局
        • 渐进增强
    • Bootstrap 网格系统（Grid System）的工作原理
    • 媒体查询
    • 网格选项
      • 基本的网格结构
        • 实例：堆叠的水平
        • 实例：中型和大型设备
        • 实例：手机、平板电脑、台式电脑
    • 响应式的列重置
    • 偏移列
    • 嵌套列
    • 列排序

在这里插入图片描述

Bootstrap 网格系统

本章节我们将讲解 Bootstrap 的网格系统（Grid System）。

Bootstrap 提供了一套响应式、移动设备优先的流式网格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。

什么是网格（Grid）？

摘自维基百科：
在平面设计中，网格是一种由一系列用于组织内容的相交的直线（垂直的、水平的）组成的结构（通常是二维的）。它广泛应用于打印设计中的设计布局和内容结构。在网页设计中，它是一种用于快速创建一致的布局和有效地使用 HTML 和 CSS 的方法。

简单地说，网页设计中的网格用于组织内容，让网站易于浏览，并降低用户端的负载。

什么是 Bootstrap 网格系统（Grid System）？

Bootstrap 官方文档中有关网格系统的描述：
Bootstrap 包含了一个响应式的、移动设备优先的、不固定的网格系统，可以随着设备或视口大小的增加而适当地扩展到 12 列。它包含了用于简单的布局选项的预定义类，也包含了用于生成更多语义布局的功能强大的混合类。

让我们来理解一下上面的语句。Bootstrap 3 是移动设备优先的，在这个意义上，Bootstrap 代码从小屏幕设备（比如移动设备、平板电脑）开始，然后扩展到大屏幕设备（比如笔记本电脑、台式电脑）上的组件和网格。

移动设备优先策略

内容

决定什么是最重要的。

布局

优先设计更小的宽度。

基础的 CSS 是移动设备优先，媒体查询是针对于平板电脑、台式电脑。

渐进增强

随着屏幕大小的增加而添加元素。

响应式网格系统随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。

在这里插入图片描述

Bootstrap 网格系统（Grid System）的工作原理

网格系统通过一系列包含内容的行和列来创建页面布局。下面列出了 Bootstrap 网格系统是如何工作的：

  • 行必须放置在 .container class 内，以便获得适当的对齐（alignment）和内边距（padding）。
  • 使用行来创建列的水平组。
  • 内容应该放置在列内，且唯有列可以是行的直接子元素。
  • 预定义的网格类，比如 .row 和 .col-xs-4，可用于快速创建网格布局。LESS 混合类可用于更多语义布局。
  • 列通过内边距（padding）来创建列内容之间的间隙。该内边距是通过 .rows 上的外边距（margin）取负，表示第一列和最后一列的行偏移。
  • 网格系统是通过指定您想要横跨的十二个可用的列来创建的。例如，要创建三个相等的列，则使用三个 .col-xs-4。

媒体查询

媒体查询是非常别致的"有条件的 CSS 规则"。它只适用于一些基于某些规定条件的 CSS。如果满足那些条件，则应用相应的样式。

Bootstrap 中的媒体查询允许您基于视口大小移动、显示并隐藏内容。下面的媒体查询在 LESS 文件中使用，用来创建 Bootstrap 网格系统中的关键的分界点阈值。

/* 超小设备（手机，小于 768px） */
/* Bootstrap 中默认情况下没有媒体查询 */
 
/* 小型设备（平板电脑，768px 起） */
@media (min-width: @screen-sm-min) { ... }
 
/* 中型设备（台式电脑，992px 起） */
@media (min-width: @screen-md-min) { ... }
 
/* 大型设备（大台式电脑，1200px 起） */
@media (min-width: @screen-lg-min) { ... }

我们有时候也会在媒体查询代码中包含 max-width，从而将 CSS 的影响限制在更小范围的屏幕大小之内。

@media (max-width: @screen-xs-max) { ... }
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... }
@media (min-width: @screen-lg-min) { ... }

媒体查询有两个部分，先是一个设备规范，然后是一个大小规则。在上面的案例中，设置了下列的规则：

让我们来看下面这行代码：

@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }

对于所有带有 min-width: @screen-sm-min 的设备，如果屏幕的宽度小于 @screen-sm-max，则会进行一些处理。

网格选项

下表总结了 Bootstrap 网格系统如何跨多个设备工作：

-超小设备手机（<768px）小型设备平板电脑（≥768px）中型设备台式电脑（≥992px）大型设备台式电脑（≥1200px）
网格行为一直是水平的以折叠开始，断点以上是水平的以折叠开始，断点以上是水平的以折叠开始，断点以上是水平的
最大容器宽度None (auto)750px970px1170px
Class 前缀.col-xs-.col-sm-.col-md-.col-lg-
列数量和12121212
最大列宽Auto60px78px95px
间隙宽度30px（一个列的每边分别 15px）30px（一个列的每边分别 15px）30px（一个列的每边分别 15px）30px（一个列的每边分别 15px）
可嵌套YesYesYesYes
偏移量YesYesYesYes
列排序YesYesYesYes

基本的网格结构

下面是 Bootstrap 网格的基本结构：

<div class="container">
   <div class="row">
      <div class="col-*-*"></div>
      <div class="col-*-*"></div>     
   </div>
   <div class="row">...</div>
</div>
<div class="container">....

让我们来看几个简单的网格实例：

实例：堆叠的水平

  • 实例代码
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Bootstrap 实例 - 堆叠的水平</title>
		<link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">
        <script src="/scripts/jquery.min.js"></script>
        <script src="/bootstrap/js/bootstrap.min.js"></script>
	</head>
	<body>
		<div class="container">
			<h1>Hello, world!</h1>
			<div class="row">
				<div class="col-md-6" style="background-color: #dedef8; box-shadow: 
         inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
					<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
						eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
						enim ad minim veniam, quis nostrud exercitation ullamco laboris
						nisi ut aliquip ex ea commodo consequat.
					</p>
					<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem
						accusantium doloremque laudantium, totam rem aperiam, eaque ipsa
						quae ab illo inventore veritatis et quasi architecto beatae vitae
						dicta sunt explicabo.
					</p>
				</div>
				<div class="col-md-6" style="background-color: #dedef8;box-shadow: 
         inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
					<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem
						accusantium doloremque laudantium.
					</p>
					<p> Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet,
						consectetur, adipisci velit, sed quia non numquam eius modi
						tempora incidunt ut labore et dolore magnam aliquam quaerat
						voluptatem.
					</p>
				</div>
			</div>
	</body>
</html>
  • 运行效果
    在这里插入图片描述

实例：中型和大型设备

在 实例：堆叠的水平 中，我们已经看过了基本的网格系统。在这里，我们使用 2 个 div，并在视口宽度的中间对它们进行 50%/50% 分割：

<div class="col-md-6">....</div>
<div class="col-md-6">....</div>

但是，在大型设备上，您最后设计成 33%/66%。所以我们要做的是准备好在断点处更改列的宽度：

<div class="col-md-6 col-lg-4">....</div>
<div class="col-md-6 col-lg-8">....</div>

现在 Bootstrap 在中型设备中，会查找带有 md 的类，并使用它们。在大型设备中，会查找带有 lg 的类，并使用它们。在本实例中，我们的 2 个 div 将从 50%/50% 分割转变为 33%/66%。请查看下面的实例进行验证。（在这里，为每个列分别定义了样式，您可以避免这么做。）

  • 实例代码
<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 中型和大型设备</title>
   <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">
   <script src="/scripts/jquery.min.js"></script>
   <script src="/bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
 
<div class="container">
   <h1>Hello, world!</h1>
 
   <div class="row">
 
      <div class="col-md-6 col-lg-4"  style="background-color: #dedef8;
         box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
            enim ad minim veniam, quis nostrud exercitation ullamco laboris
            nisi ut aliquip ex ea commodo consequat.
         </p>
 
         <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem
            accusantium doloremque laudantium, totam rem aperiam, eaque ipsa
            quae ab illo inventore veritatis et quasi architecto beatae vitae
            dicta sunt explicabo.
         </p>
      </div>
 
      <div class="col-md-6 col-lg-8" style="background-color: #dedef8;
         box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem
            accusantium doloremque laudantium.
         </p>
 
         <p> Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet,
            consectetur, adipisci velit, sed quia non numquam eius modi
            tempora incidunt ut labore et dolore magnam aliquam quaerat
            voluptatem.
         </p>
   </div>
</div>
 
</body>
</html>
  • 运行效果
    在这里插入图片描述

实例：手机、平板电脑、台式电脑

我们已经看过 中型和大型设备 。现在，让我们一起看另一个实例，我们将让它同样适用于小型手机。我们要把平板电脑的列分割为 25%/75%，我们将添加如下选项：

<div class="col-sm-3 col-md-6 col-lg-4">....</div>
<div class="col-sm-9 col-md-6 col-lg-8">....</div>

现在，给我们提供了 3 种不同的列布局，分别适用于三种设备。在手机上，它将是左边 25% 右边 75% 的布局。在平板电脑上，它将是 50%/50% 的布局。在大型视口的设备上，它将是 33%/66% 的布局。请查看下面的实例进行验证。（在这里，为每个列分别定义了样式，您可以避免这么做。）

  • 实例代码
<!DOCTYPE html>
<html>
	<head>
		<title>Bootstrap 实例 - 手机、平板电脑、台式电脑</title>
        <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">
        <script src="/scripts/jquery.min.js"></script>
        <script src="/bootstrap/js/bootstrap.min.js"></script>
	</head>
	<body>
		<div class="container">
			<h1>Hello, world!</h1>
			<div class="row">
				<div class="col-sm-3 col-md-6 col-lg-8" style="background-color: #dedef8; 
         box-shadow: inset 1px -1px 1px #444, 
         inset -1px 1px 1px #444;">
					<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
						eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
						enim ad minim veniam, quis nostrud exercitation ullamco laboris
						nisi ut aliquip ex ea commodo consequat.
					</p>
					<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem
						accusantium doloremque laudantium, totam rem aperiam, eaque ipsa
						quae ab illo inventore veritatis et quasi architecto beatae vitae
						dicta sunt explicabo.
					</p>
				</div>
				<div class="col-sm-9 col-md-6 col-lg-4" style="background-color: #dedef8;
         box-shadow: inset 1px -1px 1px #444, 
         inset -1px 1px 1px #444;">
					<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem
						accusantium doloremque laudantium.
					</p>
					<p> Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet,
						consectetur, adipisci velit, sed quia non numquam eius modi
						tempora incidunt ut labore et dolore magnam aliquam quaerat
						voluptatem.
					</p>
				</div>
			</div>
		</div>
	</body>
</html>
  • 运行效果
    在这里插入图片描述

响应式的列重置

以下实例包含了4个网格，但是我们在小设备浏览时无法确定网格显示的位置。

为了解决这个问题，可以使用 .clearfix class和 响应式实用工具来解决，如下面实例所示：

实例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Bootstrap 实例 - 响应式的列重置</title>
        <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">
        <script src="/scripts/jquery.min.js"></script>
        <script src="/bootstrap/js/bootstrap.min.js"></script>
	</head>
	<body>
		<div class="container">
			<div class="row">
				<div class="col-xs-6 col-sm-3" style="background-color: #dedef8;
         box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
					<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
				</div>
				<div class="col-xs-6 col-sm-3" style="background-color: #dedef8;box-shadow: 
         inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
					<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
						eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
						enim ad minim veniam, quis nostrud exercitation ullamco laboris
						nisi ut aliquip ex ea commodo consequat.
					</p>
					<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
						eiusmod tempor incididunt ut.
					</p>
				</div>
				<div class="clearfix visible-xs"></div>
				<div class="col-xs-6 col-sm-3" style="background-color: #dedef8;
         box-shadow:inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
					<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco
						laboris nisi ut aliquip ex ea commodo consequat.
					</p>
				</div>
				<div class="col-xs-6 col-sm-3" style="background-color: #dedef8;box-shadow: 
         inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
					<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
						eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
						enim ad minim
					</p>
				</div>
			</div>
		</div>
	</body>
</html>

运行效果：
在这里插入图片描述

浏览器上调整窗口大小查看变化，或在您手机上查看效果。

偏移列

偏移是一个用于更专业的布局的有用功能。它们可用来给列腾出更多的空间。例如，.col-xs-* 类不支持偏移，但是它们可以简单地通过使用一个空的单元格来实现该效果。

为了在大屏幕显示器上使用偏移，请使用 .col-md-offset-* 类。这些类会把一个列的左外边距（margin）增加 * 列，其中 *范围是从 1 到 11。

在下面的实例中，我们有 <div class="col-md-6">..</div>，我们将使用 .col-md-offset-3 class 来居中这个 div。

实例

<div class="container">
    <h1>Hello, world!</h1>
    <div class="row" >
        <div class="col-xs-6 col-md-offset-3"
        style="background-color: #dedef8;box-shadow:
        inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing
            elit.
            </p>
        </div>
    </div>
</div>

运行效果：
在这里插入图片描述

嵌套列

为了在内容中嵌套默认的网格，请添加一个新的 .row，并在一个已有的 .col-md-* 列内添加一组 .col-md-* 列。被嵌套的行应包含一组列，这组列个数不能超过12（其实，没有要求你必须占满12列）。

在下面的实例中，布局有两个列，第二列被分为两行四个盒子。

实例

<div class="container">
    <h1>Hello, world!</h1>
    <div class="row">
        <div class="col-md-3" style="background-color: #dedef8;box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
            <h4>第一列</h4>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit.
            </p>
        </div>
        <div class="col-md-9" style="background-color: #dedef8;box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
            <h4>第二列 - 分为四个盒子</h4>
            <div class="row">
                <div class="col-md-6" style="background-color: #B18904; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
                    <p>
                        Consectetur art party Tonx culpa semiotics. Pinterest
        assumenda minim organic quis.
                    </p>
                </div>
                <div class="col-md-6" style="background-color: #B18904; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
                    <p>
                         sed do eiusmod tempor incididunt ut labore et dolore magna
        aliqua. Ut enim ad minim veniam, quis nostrud exercitation
        ullamco laboris nisi ut aliquip ex ea commodo consequat.
                    </p>
                </div>
            </div>
            <div class="row">
                <div class="col-md-6" style="background-color: #B18904; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
                    <p>
                        quis nostrud exercitation ullamco laboris nisi ut
        aliquip ex ea commodo consequat.
                    </p>
                </div>
                <div class="col-md-6" style="background-color: #B18904; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
                    <p>
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit,
        sed do eiusmod tempor incididunt ut labore et dolore magna
        aliqua. Ut enim ad minim.
                    </p>
                </div>
            </div>
        </div>
    </div>
</div>

运行效果：
在这里插入图片描述

列排序

Bootstrap 网格系统另一个完美的特性，就是您可以很容易地以一种顺序编写列，然后以另一种顺序显示列。

您可以很轻易地改变带有 .col-md-push-* 和 .col-md-pull-* 类的内置网格列的顺序，其中 * 范围是从 1 到 11。

在下面的实例中，我们有两列布局，左列很窄，作为侧边栏。我们将使用 .col-md-push-* 和 .col-md-pull-* 类来互换这两列的顺序。

实例

<div class="container">
    <h1>Hello, world!</h1>
    <div class="row">
        <p>
            排序前
        </p>
        <div class="col-md-4" style="background-color: #dedef8; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         我在左边
        </div>
        <div class="col-md-8" style="background-color: #dedef8; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         我在右边
        </div>
    </div>
    <br>
    <div class="row">
        <p>
            排序后
        </p>
        <div class="col-md-4 col-md-push-8" style="background-color: #dedef8; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         我在左边
        </div>
        <div class="col-md-8 col-md-pull-4" style="background-color: #dedef8; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         我在右边
        </div>
    </div>
</div>

结果如下所示：
在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/694707.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

自学黑客（网络安全），一般人我劝你还是算了吧（自学网络安全学习路线--第十一章 网络安全技术下）【建议收藏】

自学黑客（网络安全），一般人我劝你还是算了吧（自学网络安全学习路线--第十一章 网络安全技术下）【建议收藏】

文章目录 一、自学网络安全学习的误区和陷阱二、学习网络安全的一些前期准备三、自学网络安全学习路线一、入侵检测系统1、入侵检测系统模型2、入侵检测系统分类3、入侵检测系统部署 二、VPN1、VPN工作原理2、VPN的优点3、VPN的分类4、VPN的工作原理5、VPN的主要技术 一、自学网…
阅读更多...
使用OpenXML库替换docx文档（Word文档）中的特定字段

使用OpenXML库替换docx文档（Word文档）中的特定字段

在批量生成Word文档的应用中&#xff0c;最常见的需求莫过于替换掉文档中的特定字段以生成新的文档。利用OpenXML库可轻松实现这一需求。 不完善版本 首先放出最简单然而有bug的版本&#xff1a; using DocumentFormat.OpenXml.Packaging; using DocumentFormat.OpenXml.Wor…
阅读更多...
第6讲：使用ajax技术实现模拟百度搜索功能（xml数据）

第6讲：使用ajax技术实现模拟百度搜索功能（xml数据）

使用ajax技术实现模拟百度搜索功能&#xff0c;本案例使用原生态xmlhttprequest对象&#xff0c;GET方法通讯&#xff0c;后台使用map保存搜索数据&#xff0c;查询到对应数据后&#xff0c;返回xml格式数据&#xff0c;前端使用responseXML属性返回xml格式数据&#xff0c;结合…
阅读更多...
6.安卓移动端开发

6.安卓移动端开发

开发概览 Android官网 提供了开发环境&#xff0c;也就是android平台&#xff0c;即android SDK&#xff0c;即android版本 SDK版本和API版本的关系&#xff08;安卓的版本是个位数和小数形式增长&#xff0c;API版本是以个位数正则&#xff0c;所以API版本号和android版本号不…
阅读更多...
图像梯度——Sobel、Scharr、Laplacian

图像梯度——Sobel、Scharr、Laplacian

图像梯度-Sobel算子 dst cv2.Sobel(src, ddepth, dx, dy, ksize) src: 图像数组变量ddepth: 图像的深度&#xff0c;一般填-1&#xff0c;表示与原始图像深度一致&#xff1b; cv2.CV_64F表示每一个像素点值为64位浮点数&#xff0c;是OpenCV定义的数据类型dx和dy分别表示水平…
阅读更多...
车端服务器架构「升级」

车端服务器架构「升级」

过去几年&#xff0c;随着整车电子架构从分布式向集中式升级&#xff0c;域控制器&#xff08;通常分为五大域&#xff1a;动力域、底盘域、座舱域、智驾域、车身域&#xff09;带动供应链进入增值周期&#xff0c;背后隐藏的则是供应商的洗牌。 以座舱为例&#xff0c;从传统的…
阅读更多...
远程桌面发生身份验证错误，要求的函数不受支持

远程桌面发生身份验证错误，要求的函数不受支持

windows10专业版&#xff1a; 解决方法&#xff1a; 使用微软官方建议修改本地组策略&#xff1a; winr弹出运行窗口&#xff0c;输入gpedit.msc,打开本地组策略 计算机配置>管理模板>系统>凭据分配>加密Oracle修正 选择启用并选择易受攻击。 windows10家庭版&a…
阅读更多...
Bug - 为什么不能打开Tmocat官网

Bug - 为什么不能打开Tmocat官网

今天在敲代码的时候碰到一个bug&#xff0c;登录不上Tmocat官网&#xff0c;后来查了查是不能使用代理模式进行连接网站&#xff1a; 解决方法&#xff0c;换成手机WIFE热点&#xff1a; 登录成功&#xff1a; 小开心^_^
阅读更多...
445端口是啥？445端口怎么关闭？

445端口是啥？445端口怎么关闭？

445端口是Windows系统中的SMB协议&#xff0c;用于文件共享和网络打印功能。然而&#xff0c;这个端口也是黑客攻击的重要入口之一。那么&#xff0c;如何关闭445端口&#xff0c;保护自己的计算机安全呢&#xff1f; 关闭445端口的方法 1.在“控制面板”中打开“管理员工具”…
阅读更多...
用华为云低代码Astro Zero10分钟搭建 “图书馆数据可视化大屏” 应用

用华为云低代码Astro Zero10分钟搭建 “图书馆数据可视化大屏” 应用

作者&#xff1a;福州司马懿 原文链接&#xff1a;使用Astro Zero带你从零开始&#xff0c;10分钟搭建一套 “图书馆数据可视化大屏” 应用【华为云Astro低代码体验季】-云社区-华为云 产品介绍 点击下方链接进入工具页&#xff1a;https://auth.huaweicloud.com/authui/logi…
阅读更多...
移远通信定位定向GNSS模组LC02H正式发布，提供可靠的航向、姿态、位置等信息

移远通信定位定向GNSS模组LC02H正式发布，提供可靠的航向、姿态、位置等信息

6月26日&#xff0c;全球领先的物联网整体解决方案供应商移远通信宣布&#xff0c;正式推出其自主研发的双天线定位定向GNSS模组LC02H&#xff0c;进一步丰富其GNSS产品线。 LC02H具有高性能、高稳定性、低功耗的特点&#xff0c;可为基站通信天线、工程机械姿态控制、舰船定位…
阅读更多...
【方法】想把PDF文档转换成PPT，如何操作？

【方法】想把PDF文档转换成PPT，如何操作？

很多小伙伴在工作中&#xff0c;会使用PDF或者PPT来展示内容。那如果需要把PDF转换成PPT&#xff0c;要如何操作呢&#xff1f; 我们知道&#xff0c;PPT转换成PDF很容易操作&#xff0c;只需通过PPT的【导出】选项&#xff0c;就可以直接转换成PDF&#xff1b;还可以通过“另…
阅读更多...
【UE Cesium】01-在虚幻5中使用Cesium

【UE Cesium】01-在虚幻5中使用Cesium

UE版本&#xff1a;5.1 步骤 1. 首先我们新建一个空白的工程 2. 在虚幻商城中搜索“Cesium for Unreal”&#xff0c;然后点击“安装到引擎” 3. 在虚幻编辑器中搜索插件“cesium”&#xff0c;勾选如下插件&#xff0c;然后重启编辑器 4. 重启后我们新建一个空白关卡 保存关卡…
阅读更多...
DAY31——贪心

DAY31——贪心

1.分发饼干 class Solution {public int findContentChildren(int[] g, int[] s) {Arrays.sort(g);Arrays.sort(s);int start 0;int count 0;for (int i 0; i < s.length && start < g.length; i) {if (s[i] > g[start]) {start;count;}}return count;} } …
阅读更多...
软测实验室质量手册中结构要求部分如何满足

软测实验室质量手册中结构要求部分如何满足

根据cnas官方指定的文件中要求&#xff0c;cnas软件检测机构应是一个能够承担法律责任的实体。 实验室所从事检测和校准工作应符合本准则的要求&#xff0c;并能满足客户、法定管理机构或对其提供承认的组织的需求。管理体系应覆盖实验室固定设施、离开固定设施的场所或相关的临…
阅读更多...
谷歌浏览器（chrome）安装crx插件

谷歌浏览器（chrome）安装crx插件

1、下载crx插件 2、插件扩展名改名为zip 3、解压zip文件 4、打开谷歌浏览器扩展程序 chrome://extensions/ 5、打开开发者模式&#xff0c;加载已解压的扩展程序&#xff0c;安装成功即如图展示
阅读更多...
jsp—MacOS下配置Tomcat和JSTL

jsp—MacOS下配置Tomcat和JSTL

一、配置Tomcat 首先去官网下载Tomcat&#xff0c;最好是8版本 https://tomcat.apache.org/download-80.cgi 然后打开idea 二、配置jstl 首先去官网下载 http://archive.apache.org/dist/jakarta/taglibs/standard/binaries/ 下载之后&#xff0c;在idea的项目工程下&#…
阅读更多...
Linux文件中的特殊换行符

Linux文件中的特殊换行符

Linux文件中的特殊换行符 大数据项目做数据etl工作时&#xff0c;无可避免的会遇到Linux文件中的一些特殊换行符。在做这些特殊符号的处理的时候往往就相当麻烦&#xff0c;这里详细记录一下怎么这些特殊字符&#xff0c;并转换成能识别的普通字符或者是符合项目数据规范的分隔…
阅读更多...
多元回归预测 | Matlab遗传算法(GA)优化极限学习机ELM回归预测,GA-ELM回归预测，多变量输入模型

多元回归预测 | Matlab遗传算法(GA)优化极限学习机ELM回归预测,GA-ELM回归预测，多变量输入模型

文章目录 效果一览文章概述部分源码参考资料效果一览 文章概述 多元回归预测 | Matlab遗传算法(GA)优化极限学习机ELM回归预测,GA-ELM回归预测，多变量输入模型 评价指标包括:MAE、RMSE和R2等，代码质量极高，方便学习和替换数据。要求2018版本及以上。 部分源码 %% 清空环境…
阅读更多...
途乐证券|股票为什么冲高回落？冲高回落怎么办？

途乐证券|股票为什么冲高回落？冲高回落怎么办？

在股票市场上&#xff0c;我们经常会看到个股早上涨得好好的&#xff0c;突然间就出现跳水的走势&#xff0c;那么&#xff0c;股票为什么冲高回落&#xff1f;冲高回落怎么办&#xff1f;下面途乐证券为大家准备了相关内容&#xff0c;以供参考。 股票冲高回落的原因如下&…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023