当前位置： 首页 > news >正文

01_Bootstrap基础组件01

news 2025/7/7 13:50:24

1 什么是 Bootstrap？

Bootstrap，来自 Twitter，是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JavaScript 的，它简洁灵活，使 Web 开发更加快捷。它对 HTML、CSS 和 JavaScript 进行了封装，使它们使用起来更方便。我们只需要使用它已经设定好的类，或规则，即可快速应用它提供的功能。

Bootstrap 使用了一些 HTML5 元素和 CSS3 属性（如媒体查询）。为了让这些正常工作，需要使用 HTML5 文档类型。如果在 Bootstrap 创建的网页开头不使用 HTML5 的文档类型（Doctype），可能会面临一些浏览器显示不一致的问题。

2 怎么使用 Bootstrap

2.1 进入官网

http://www.bootcss.com/ 点击bootstrap3中文文档，点击下载bootstrap3。

2.2 下载 Bootstrap

点击 用于生产环境的Bootstrap 下面的 下载Bootstrap 按钮。

下载完后它有三个文件夹 css,fonts,js

2.3 引入 BootStrap

<!-- Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="./plugins/bootstrap-3.4.1-dist/css/bootstrap.min.css" /><!-- jquery.min.js 和 bootstrap.min.js 要放在body的最底部 -->
<!-- 为了确保页面加载正常，以及加载速度 -->
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Bootstrap 核心 JavaScript 文件 -->
<script src="./plugins/bootstrap-3.4.1-dist/js/bootstrap.min.js"></script>

2.4 文档类型声明

<!Doctype html>

Bootstrap 用到了 HTML5，所以使用 Bootstrap 时需要包含html5 版本的DOCTYPE。

2.5 meta 标签设置

Bootstrap 是移动设备优先的。针对移动设备的样式融合进了框架的每个角落，而不是增加一个额外的文件。

因为现在越来越多的用户使用移动设备，为了让 Bootstrap 开发的网站对移动设备友好，确保适当的绘制和触屏缩放，需要在网页的 head 之中添加 viewport meta 标签。

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

Bootstrap 不支持 IE 古老的兼容模式。为了让 IE 浏览器运行最新的渲染模式下，建议将此标签加入到 head 部分

<meta http-equiv="X-UA-Compatible" content="IE=edge">

2.6 Bootstrap 模板

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><!-- Bootstrap 核心 CSS 文件 --><link rel="stylesheet" href="../../resource/plugins/bootstrap-3.4.1-dist/css/bootstrap.min.css"><!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 --><!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 --><!--[if lt IE 9]><script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script><script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script><![endif]-->
</head><body><div class="container"><h1>你好，世界！</h1></div><!-- jQuery (Bootstrap 的 JavaScript 插件需要引入 jQuery) --><script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.min.js"></script><!-- Bootstrap 核心 JavaScript 文件 --><script src="../../resource/plugins/bootstrap-3.4.1-dist/js/bootstrap.min.js"></script>
</body></html>

2.7 Bootstrap 版本区别

Bootstrap3 和 Bootstrap4 区别

不同点Bootstrap3Bootstrap4
编写语言Less 语言编写Sass 语言编写
栅格类型4 种栅格类5 种栅格类
单位尺寸使用 px 为单位使用 rem 和 em 为单位（除部分 margin 和 padding 使用px）
移动方式使用 push 和 pull 向左右移动偏移列通过 offset- 类设置
布局方式使用 float 的布局方式选择弹性盒模型（flexbox）

注：Bootstrap3 的 4 种栅格：

  • 特小（col-xs-） 适配手机(<768px)
  • 小（col-sm-） 适配平板(≥768px)
  • 中（col-md-） 适配电脑(≥992px)
  • 大（col-lg-） 适配宽屏电脑(≥1200px)

Bootstrap4 的 5 种栅格：

  • 特小（col-）(<576px)
  • 小（col-sm-）(≥576px)
  • 中（col-md-）(≥768px)
  • 大（col-lg-） (≥992px)
  • 特大（col-xl-）（≥1200px）

Bootstrap4 特点

  • 新增网格层适配了移动端
  • 全面引入 ES6 新特性（重写所有 JavaScript 插件）
  • css 文件减少了至少 40%
  • 所有文档都用 Markdown 编辑器重写
  • 放弃对 IE8 的支持

3 布局容器

Bootstrap 中用于布局的有 .container 与 .container-fluid。

  • .container 类用于固定宽度并支持响应式布局的容器。
  • .container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器。

注意：由于 padding 等属性的原因，这两种容器类不能互相嵌套。

<div class="container">我是固定宽度内容
</div><div class="container-fluid">我是全屏显示内容
</div>

4 栅格系统

栅格系统，也可称之为“网格系统”，运用固定的格子设计版面布局，其风格工整简洁。在网页当中，是指以规则的网格阵列来指导和规范网页中的版面布局以及信息分布。网页栅格系统是从平面栅格系统中发展而来。

对于网页设计来说，栅格系统的使用，不仅可以让网页的信息呈现更加美观易读，更具可用性。而且，对于前端开发来说，网页将更加的灵活与规范。

4.1 简介

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

4.2 用法

1、行 .row 必须包含在容器 .container （固定宽度）或 .container-fluid （100% 宽度）中，以便其赋予合适的对齐方式和内间距（padding）

<div class="container"><div class="row"></div>
</div>

2、在行 .row 中可以添加列 .column，但列数之和不能超过平分的总列数 12，如果 .row 中包含的 .column 大于 12，多余的 .column 所在的元素将被作为一个整体另起一行排列

<div class="container"><div class="row"><div class="col-md-4"></div><div class="col-md-8"></div></div>
</div>

3、具体内容应当放在列容器 .column 之内，而且只有列 .column 才可以作为行容器 .row 的直接子元素

4、通过设置内间距（padding）从而创建列与列之间的间距，然后通过为第一列和最后一叠设置负值的外距（margin）来抵消内距（padding）的影响

4.3 原理

在栅格系统中，使用以下媒体查询（@media）来创建关键的分界点阈值。

/* 超小屏幕（手机，小于 768px） */
/* 没有任何媒体查询相关的代码，因为这在 Bootstrap 中是默认的（还记得 Bootstrap 是移动设备优先的吗？） *//* 小屏幕（平板，大于等于 768px） */
@media (min-width: 768px) { ... }/* 中等屏幕（桌面显示器，大于等于 992px） */
@media (min-width: 992px) { ... }/* 大屏幕（大桌面显示器，大于等于 1200px） */
@media (min-width: 1200px) { ... }

4.4 栅格参数

星号的取值是数值（比如1、2），一行的总列数都是 12

超小屏幕 手机 (<768px)小屏幕 平板 (≥768px)中等屏幕 桌面显示器 (≥992px)大屏幕 大桌面显示器 (≥1200px)
栅格系统行为总是水平排列开始是堆叠在一起的，当大于这些阈值时将变为水平排列开始是堆叠在一起的，当大于这些阈值时将变为水平排列开始是堆叠在一起的，当大于这些阈值时将变为水平排列
.container 最大宽度None （自动）750px970px1170px
类前缀.col-xs-*.col-sm-*.col-md-*.col-lg-*
列（column）数12121212
最大列（column）宽自动~62px~81px~97px
槽（gutter）宽30px （每列左右均有 15px）30px （每列左右均有 15px）30px （每列左右均有 15px）30px （每列左右均有 15px）
可嵌套是是是是
偏移（Offsets）是是是是
列排序是是是是

4.5 基础用法

使用单一的一组 .col-md-* 栅格类，就可以创建一个基本的栅格系统。所有 .column 必须放在 .row 内。

p {padding: 50px;font-size: 32px;font-weight: 700;text-align: center;background: #f2f2f2;
}

<div class="container"><div class="row"><div class="col-md-4"><p>Box 1</p></div><div class="col-md-4"><p>Box 2</p></div><div class="col-md-4"><p>Box 3</p></div></div>
</div>

4.6 响应式

想要实现在手机屏幕显示2等分，平板显示4等分，电脑显示6等分，也就是实现响应式的网站

<div class="row"><div class="col-xs-6 col-sm-3 col-md-2">col-xs-6 col-sm-3 col-md-2</div><div class="col-xs-6 col-sm-3 col-md-2">col-xs-6 col-sm-3 col-md-2</div><div class="col-xs-6 col-sm-3 col-md-2">col-xs-6 col-sm-3 col-md-2</div><div class="col-xs-6 col-sm-3 col-md-2">col-xs-6 col-sm-3 col-md-2</div><div class="col-xs-6 col-sm-3 col-md-2">col-xs-6 col-sm-3 col-md-2</div><div class="col-xs-6 col-sm-3 col-md-2">col-xs-6 col-sm-3 col-md-2</div>
</div>

Bootstrap 在超小屏幕中，会查找带有 col-xs-* 的类，在小屏幕设备中，会查找带有 col-sm-* 的类，在中等屏幕设备中，会查找带有 col-md-* 的类，并使用它们。

在某些阈值时，某些列可能会出现比别的列高的情况。为了克服这一问题，建议联合使用 .clearfix

visible-*-block （星号代表屏幕的大小）在某个阈值下显示，可以为 xs、sm、md、lg

<div class="row"><div class="col-xs-6 col-sm-3 col-md-2">col-xs-6 col-sm-3 col-md-2 col-xs-6 col-sm-3 col-md-2</div><div class="col-xs-6 col-sm-3 col-md-2">col-xs-6 col-sm-3 col-md-2</div><div class="clearfix visible-xs-block"></div><div class="col-xs-6 col-sm-3 col-md-2">col-xs-6 col-sm-3 col-md-2</div><div class="clearfix visible-sm-block"></div><div class="col-xs-6 col-sm-3 col-md-2">col-xs-6 col-sm-3 col-md-2</div><div class="col-xs-6 col-sm-3 col-md-2">col-xs-6 col-sm-3 col-md-2</div><div class="col-xs-6 col-sm-3 col-md-2">col-xs-6 col-sm-3 col-md-2</div>
</div>

4.7 列偏移

有时候，我们不希望相邻的两个列紧靠在一起，但又不想用margin或者其他技术手段，这是可以用列偏移（offset）来实现。

使用列偏移只需在列元素上添加类名 .col-md-offset-* （星号代表要偏移的列组合数），具有这个类名的列就会偏移，如：在列元素上添加 .col-md-offset-4，表示该列向右偏移4个列的宽度

<div class="container"><div class="row"><div class="col-md-4">1111</div><div class="col-md-4 col-md-offset-2">111</div><div class="col-md-2">333</div></div><div class="row"><div class="col-md-4 col-md-offset-4">列偏移</div><div class="col-md-2">col-md-2</div><div class="col-md-2">col-md-2</div></div>
</div>

利用十二分之一的margin-left，有多少个offset，就有多少个margin-left

.col-md-offset-12 {margin-left: 100%;
}
.col-md-offset-11 {margin-left: 91.66666667%;
}
.col-md-offset-10 {margin-left: 83.33333333%;
}
.col-md-offset-9 {margin-left: 75%;
}
.col-md-offset-8 {margin-left: 66.66666667%;
}
.col-md-offset-7 {margin-left: 58.33333333%;
}
.col-md-offset-6 {margin-left: 50%;
}
.col-md-offset-5 {margin-left: 41.66666667%;
}
.col-md-offset-4 {margin-left: 33.33333333%;
}
.col-md-offset-3 {margin-left: 25%;
}
.col-md-offset-2 {margin-left: 16.66666667%;
}
.col-md-offset-1 {margin-left: 8.33333333%;
}
.col-md-offset-0 {margin-left: 0;
}

要注意的是，使用col-md-offset-* 对列进行右偏移时，要保证列与偏移列的总数不超过12，不然会导致列断行显示。

4.8 列排序

列排序就是改变列的方向，并且设置浮动的距离。在 Bootstrap 网格系统中是通过添加类名。col-md-push-* 和 col-md-pull-*

<div class="container"><div class="row"><div class="col-md-4">col-md-4</div><div class="col-md-8">col-md-8</div></div>
</div>

col-md-4 居左，col-md-8 居右，如果要互换位置，就需要将 col-md-4 向右移动8个列的距离，也就是添加类名 .col-md-push-8 同时需要将 col-md-8 向左移动 4 个列的距离，也就是添加类名 .col-md-pull-4 Bootstrap 仅通过设置 left 和 right 来实现定位效果。

<div class="container"><div class="row"><div class="col-md-4 col-md-push-8">col-md-4</div><div class="col-md-8 col-md-pull-4">col-md-8</div></div>
</div>

.col-md-pull-12 {right: 100%;
}
.col-md-pull-11 {right: 91.66666667%;
}
.col-md-pull-10 {right: 83.33333333%;
}
.col-md-pull-9 {right: 75%;
}
.col-md-pull-8 {right: 66.66666667%;
}
.col-md-pull-7 {right: 58.33333333%;
}
.col-md-pull-6 {right: 50%;
}
.col-md-pull-5 {right: 41.66666667%;
}
.col-md-pull-4 {right: 33.33333333%;
}
.col-md-pull-3 {right: 25%;
}
.col-md-pull-2 {right: 16.66666667%;
}
.col-md-pull-1 {right: 8.33333333%;
}
.col-md-pull-0 {right: 0;
}.col-md-push-12 {left: 100%;
}
.col-md-push-11 {left: 91.66666667%;
}
.col-md-push-10 {left: 83.33333333%;
}
.col-md-push-9 {left: 75%;
}
.col-md-push-8 {left: 66.66666667%;
}
.col-md-push-7 {left: 58.33333333%;
}
.col-md-push-6 {left: 50%;
}
.col-md-push-5 {left: 41.66666667%;
}
.col-md-push-4 {left: 33.33333333%;
}
.col-md-push-3 {left: 25%;
}
.col-md-push-2 {left: 16.66666667%;
}
.col-md-push-1 {left: 8.33333333%;
}
.col-md-push-0 {left: 0;
}

4.9 列嵌套

列嵌套可以在一个列中添加一个或数个行（row）容器，然后在这个行容器中插入列，在列容器中的行容器（row），宽度为100%时，就是当前外部列的宽度，被嵌套的行（row）所包含的列（column）的个数不能超过12。

<div class="container"><div class="row"><div class="col-md-8">我是 col-md-8，我里面嵌套了一个行<div class="row"><div class="col-md-6">col-md-6</div><div class="col-md-6">col-md-6</div></div></div><div class="col-md-4">col-md-4</div></div>
</div>

4.10 删除间距

如果想要每一列之前的间距为 0，可以通过 .row-no-gutters 这一属性删除当前行内所有列的间距值

<div class="row row-no-gutters"><div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div><div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<div class="row row-no-gutters"><div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div><div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div><div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<div class="row row-no-gutters"><div class="col-xs-6">.col-xs-6</div><div class="col-xs-6">.col-xs-6</div>
</div>

相关文章：

01_Bootstrap基础组件01

1 什么是 Bootstrap&#xff1f; Bootstrap&#xff0c;来自 Twitter&#xff0c;是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JavaScript 的&#xff0c;它简洁灵活&#xff0c;使 Web 开发更加快捷。它对 HTML、CSS 和 JavaScript 进行了封装&#xff0c;使它们…...

编程日记 2023/9/23 17:30:41

Java：OGNL对象图导航语言基本使用示例

OGNL是Object Graphic Navigation Language(对象图导航语言) 文档 https://commons.apache.org/proper/commons-ognl/language-guide.htmlhttps://github.com/orphan-oss/ognlhttps://ognl.orphan.software/developer-guide 引入依赖 <!-- https://mvnrepository.com/ar…...

编程日记 2023/9/23 17:29:40

中科院预警名单

2023年预警名单 (fenqubiao.com) 如果论文投稿到中国科学院预警期刊,可能会面临以下情况: 1. 预警期刊一般审稿周期长,容易出现迟迟不见回音的情况。 2. 这类期刊的学术质量参差不齐,接受论文的学术标准可能不严格。 3. 预警期刊发表论文的学术影响力比较有限,不容易为作者…...

编程日记 2023/9/23 17:27:37

Qt QCustomPlot介绍

介绍 主要介绍qcustomplot及其用法 最新版本：QCustomPlot Patch Release 2.1.1//November 6, 2022 下载：https://www.qcustomplot.com/index.php/download 官网：https://www.qcustomplot.com/index.php 简单使用 mainwindow.h /**************************************…...

编程日记 2023/9/23 17:25:35

什么是CORS（跨源资源共享）？如何解决前端中的CORS问题？

聚沙成塔每天进步一点点 ⭐ 专栏简介⭐ CORS&#xff08;跨源资源共享&#xff09;⭐ 解决前端中的CORS问题的方法⭐ 写在最后 ⭐ 专栏简介 前端入门之旅&#xff1a;探索Web开发的奇妙世界 欢迎来到前端入门之旅&#xff01;感兴趣的可以订阅本专栏哦&#xff01;这个专栏是为…...

编程日记 2023/9/23 17:20:31

C 初级学习笔记（基础）

目录 1.预处理器指令 预定义宏 预处理器运算符 &#xff08;\&#xff09; 参数化的宏 头文件 .h 引用头文件操作 2.函数&#xff08;标识符&关键字&运算符&#xff09;存储类 函数参数 a. 标识符&关键字 b. 运算符&#xff08;算术、关系、逻辑、位、赋…...

编程日记 2023/9/23 17:19:29

Nodejs 相关知识

Nodejs是一个js运行环境&#xff0c;可以让js开发后端程序&#xff0c;实现几乎其他后端语言实现的所有功能&#xff0c;能够让js与其他后端语言平起平坐。 nodejs是基于v8引擎&#xff0c;v8是Google发布的开源js引擎&#xff0c;本身就是用于chrome浏览器的js解释部分&#…...

编程日记 2023/9/23 17:17:27

【vue+elementUI】输入框样式、选择器样式、树形选择器和下拉框样式修改

输入框样式、选择器样式和下拉框样式修改 1、输入框和选择器的样式修改&#xff1a;2、下拉弹框样式A. 选择器的下拉弹框样式修改B. 时间选择器的下拉弹框样式修改C. vue-treeselect树形下拉框样式 1、输入框和选择器的样式修改&#xff1a; 写在style中不能加scoped&#xff0…...

编程日记 2023/9/23 17:14:24

JavaScript - canvas - 放大镜

效果 示例 项目结构&#xff1a; 源码&#xff1a; <!DOCTYPE html> <html><head><meta charset"utf-8" /><title>放大镜</title><style type"text/css">div {width: 200px;height: 200px;display: inline-bl…...

编程日记 2023/9/23 17:10:17

PY32F003F18之输入捕获

输入捕获是定时器的功能之一&#xff0c;配合外部引脚&#xff0c;捕获脉宽时间或采集周期。 CPU中的定时器最基本的功能就是计数功能&#xff0c;其次是输入捕获(IC)&#xff0c;再次就是比较输出(OC)&#xff0c;还有就是使用引脚对外部时钟进行计数&#xff0c;触发信号捕捉…...

编程日记 2023/9/23 17:09:17

科目三基础四项（一）

​ 第一天&#xff0c;基础操作&#xff0c;仪表&#xff0c;方向&#xff0c;挡位 按照模块来 1、方向盘两手在两侧 ​ 编辑 转向时的角度&#xff0c;只用&#xff1a;向左540&#xff0c;向右180 向左打和向右打的角度要抵消&#xff0c;回正 掉头向左打满再回 注意…...

编程日记 2023/9/23 17:08:16

C语言入门Day_24 函数与指针

目录 前言&#xff1a; 1.指针和数组 2.函数和指针 3.易错点 4.思维导图 前言&#xff1a; 我们知道数组是用来存储多个数据的&#xff0c;以及我们可以用指针来指向一个变量。那么我们可以用指针来指向一个数组中的数据么&#xff1f; 指针除了可以像指向一个变量一样指…...

编程日记 2023/9/23 17:07:15

9月21日，每日信息差

今天是2023年9月21日&#xff0c;以下是为您准备的14条信息差 第一、谷歌高管已经广泛讨论了在2027年之前将博通作为人工智能芯片供应商的可能性 第二、清华系团队宣布研发出千亿参数“制药版ChatGPT”&#xff0c;覆盖药物立项、临床前研究、临床试验的各阶段&#xff0c;作…...

编程日记 2023/9/23 17:06:14

【FAQ】安防监控系统/视频云存储/监控平台EasyCVR服务器解释器出现变更该如何修改？

安防视频监控/视频集中存储/云存储/磁盘阵列EasyCVR平台可拓展性强、视频能力灵活、部署轻快&#xff0c;可支持的主流标准协议有国标GB28181、RTSP/Onvif、RTMP等&#xff0c;以及支持厂家私有协议与SDK接入&#xff0c;包括海康Ehome、海大宇等设备的SDK等。平台既具备传统安…...

编程日记 2023/9/23 17:05:13

Python手写人脸识别

Python手写人脸识别 引言 人脸识别是一种通过计算机视觉和模式识别技术来识别和验证人脸的技术。Python是一种广泛使用的编程语言，它提供了许多强大的库和工具来实现人脸识别。 在Python中，可以使用多种方法来实现人脸识别，包括基于特征提取的方法、基于深度学习的方法等…...

编程日记 2023/9/23 17:03:09

我的Qt作品（19）使用Qt写一个轻量级的视觉框架---第2章，仿海康VM实现思维导图拖拽方式的算法流程图

上次写的第1章介绍了主界面的设计。 https://blog.csdn.net/libaineu2004/article/details/130277151 本次是第2章&#xff0c;主要介绍流程图的运行。 目前市面上视觉框架很多&#xff0c;主要有列表图方式和流程图方式。海康VM的流程图方式比较受用户的喜爱和欢迎&#xf…...

编程日记 2023/9/23 17:02:08

仿写Timi记账

项目仿照Timi记账&#xff0c;本 APP 仅用作学习&#xff0c;如有侵权联系删除&#xff0c;项目地址&#xff1a;Timi记账 TIMI记账项目 简单功能对于tableview向上延伸部分采用了insertSubview形式&#xff1a;添加特殊字体添加.ttf文件获取plist文件数据 计算器功能说明简单逻…...

编程日记 2023/9/23 17:01:06

Java语言实现 比较两个Date日期的先后

在 Java 中&#xff0c;可以使用 Date 类的 compareTo() 方法或 before()、after() 方法来比较两个 Date 类型的日期的先后顺序。 使用 compareTo() 方法&#xff1a; Date date1 ...; // 第一个日期 Date date2 ...; // 第二个日期int result date1.compareTo(date2); if (…...

编程日记 2023/9/23 16:56:59

el-table 指定层级展开

先来看看页面默认全部展开时页面的显示效果&#xff1a;所有节点被展开&#xff0c;一眼望去杂乱无章&#xff01; 那么如何实现只展开指定的节点呢&#xff1f;最终效果如下&#xff1a;一眼看去很舒爽。 干货上代码&#xff1a; <el-table border v-if"refreshTabl…...

编程日记 2023/9/23 16:55:58

3288S Android11 适配红外遥控功能（超详细）

目录 一、rk3288平台红外遥控介绍二、原理图分析三、配置设备树并使能红外遥控功能四、打开红外打印功能&#xff0c;查看红外遥控的用户码和键值五、将查看到的红外遥控用户码和键值添加到设备树和.kl文件六、Android红外遥控.kl文件映射知识和使用添加新的.kl文件七、补充&am…...

编程日记 2023/9/23 16:53:54

利用最小二乘法找圆心和半径

#include <iostream> #include <vector> #include <cmath> #include <Eigen/Dense> // 需安装Eigen库用于矩阵运算 // 定义点结构 struct Point { double x, y; Point(double x_, double y_) : x(x_), y(y_) {} }; // 最小二乘法求圆心和半径 …...

编程新知 2025/7/6 7:24:02

C++初阶-list的底层

目录 1.std::list实现的所有代码 2.list的简单介绍 2.1实现list的类 2.2_list_iterator的实现 2.2.1_list_iterator实现的原因和好处 2.2.2_list_iterator实现 2.3_list_node的实现 2.3.1. 避免递归的模板依赖 2.3.2. 内存布局一致性 2.3.3. 类型安全的替代方案 2.3.…...

编程新知 2025/7/6 20:01:50

【HarmonyOS 5.0】DevEco Testing：鸿蒙应用质量保障的终极武器

——全方位测试解决方案与代码实战 一、工具定位与核心能力 DevEco Testing是HarmonyOS官方推出的​​一体化测试平台​​&#xff0c;覆盖应用全生命周期测试需求&#xff0c;主要提供五大核心能力&#xff1a; ​​测试类型​​​​检测目标​​​​关键指标​​功能体验基…...

编程新知 2025/7/6 21:56:31

VTK如何让部分单位不可见

最近遇到一个需求&#xff0c;需要让一个vtkDataSet中的部分单元不可见&#xff0c;查阅了一些资料大概有以下几种方式 1.通过颜色映射表来进行&#xff0c;是最正规的做法 vtkNew<vtkLookupTable> lut; //值为0不显示&#xff0c;主要是最后一个参数&#xff0c;透明度…...

编程新知 2025/7/6 3:09:48

python报错No module named ‘tensorflow.keras‘

是由于不同版本的tensorflow下的keras所在的路径不同&#xff0c;结合所安装的tensorflow的目录结构修改from语句即可。 原语句&#xff1a; from tensorflow.keras.layers import Conv1D, MaxPooling1D, LSTM, Dense 修改后&#xff1a; from tensorflow.python.keras.lay…...

编程新知 2025/6/21 22:37:01

mac 安装homebrew (nvm 及git)

mac 安装nvm 及git 万恶之源 mac 安装这些东西离不开Xcode。及homebrew 一、先说安装git步骤 通用&#xff1a; 方法一&#xff1a;使用 Homebrew 安装 Git&#xff08;推荐&#xff09; 步骤如下&#xff1a;打开终端&#xff08;Terminal.app&#xff09; 1.安装 Homebrew…...

编程新知 2025/7/6 13:32:37

Linux nano命令的基本使用

参考资料 GNU nanoを使いこなすnano基础 目录 一. 简介二. 文件打开2.1 普通方式打开文件2.2 只读方式打开文件 三. 文件查看3.1 打开文件时&#xff0c;显示行号3.2 翻页查看 四. 文件编辑4.1 Ctrl K 复制 和 Ctrl U 粘贴4.2 Alt/Esc U 撤回 五. 文件保存与退出5.1 Ctrl …...

编程新知 2025/7/5 18:20:18

宇树科技，改名了！

提到国内具身智能和机器人领域的代表企业&#xff0c;那宇树科技&#xff08;Unitree&#xff09;必须名列其榜。 最近&#xff0c;宇树科技的一项新变动消息在业界引发了不少关注和讨论&#xff0c;即&#xff1a; 宇树向其合作伙伴发布了一封公司名称变更函称&#xff0c;因…...

编程新知 2025/7/4 13:19:27

【若依】框架项目部署笔记

参考【SpringBoot】【Vue】项目部署_no main manifest attribute, in springboot-0.0.1-sn-CSDN博客 多一个redis安装 准备工作&#xff1a; 压缩包下载&#xff1a;http://download.redis.io/releases 1. 上传压缩包&#xff0c;并进入压缩包所在目录&#xff0c;解压到目标…...

编程新知 2025/7/6 0:01:44

【深尚想】TPS54618CQRTERQ1汽车级同步降压转换器电源芯片全面解析

1. 元器件定义与技术特点 TPS54618CQRTERQ1 是德州仪器&#xff08;TI&#xff09;推出的一款 汽车级同步降压转换器&#xff08;DC-DC开关稳压器&#xff09;&#xff0c;属于高性能电源管理芯片。核心特性包括&#xff1a; 输入电压范围&#xff1a;2.95V–6V&#xff0c;输…...

编程新知 2025/7/6 19:08:56