bootstrap--网格化布局
1.响应式网格系统随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列
2.规则
- 行必须放置在 .container class 内，以便获得适当的对齐（alignment）和内边距（padding）。
- 使用行来创建列的水平组。
- 内容应该放置在列内，且唯有列可以是行的直接子元素。
- 预定义的网格类，比如 .row 和 .col-xs-4，可用于快速创建网格布局。
3.Bootstrap 中的媒体查询允许您基于视口大小移动、显示并隐藏内容。下面的媒体查询在 LESS 文件中使用，用来创建 Bootstrap 网格系统中的关键的分界点阈值。
注意下面的像素值都是设备独立像素（对应逻辑分辨率），iphone xs max的逻辑分辨率才414*896，目前所有手机都属于xs设备
/* 超小设备（手机，小于 768px） */---xs
/* Bootstrap 中默认情况下没有媒体查询 */ /* 小型设备（平板电脑，768px 起） */--sm
@media (min-width: @screen-sm-min) { ... } /* 中型设备（台式电脑，992px 起） */--md
@media (min-width: @screen-md-min) { ... } /* 大型设备（大台式电脑，1200px 起） */--lg
@media (min-width: @screen-lg-min) { ... }
4.div没在网格布局中时，是独占一行的，网格把屏幕宽度平分为12个网格，可以定义每个列在各种屏幕占用多少个网格，在没有定义的屏幕中还是独占一行（更大的尺寸没有定义时会向下兼容）
下面代码在平板设备（768-992）中侧边占4格，内容占8格，由于没有定义更大尺，768以上尺寸都会是这个布局
小于768的各自独占一行
原理就是通过@media媒体查询获取当前屏幕宽度，然后设置相应div的宽度比例
比如下例中div.col-sm-4在屏幕宽度大于768px时，css中会出现：
@media (min-width: 768px)
.col-sm-4 {
width: 33.33333333%;
}
@media (min-width: 768px)
.col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9 {
float: left;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="bootstrap.min.css">
<title>Document</title>
</head>
<body>
<div class="row">
<div class="col-sm-4">
<h2>侧边标题</h2>
<p>这里是侧边这里是侧边这里是侧边这里是侧边</p>
</div>
<div class="col-sm-8">
<h2>内容标题</h2>
<p>这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容</p>
</div>
</div>
</body>
</html>
5.组合使用网格
以下布局在任何屏幕下，左右都会保持4：8的比例
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="./lib/bootstrap/css/bootstrap.css">
<link rel="stylesheet" href="css/style.css">
<script src="./lib/jquery-3.3.1.min.js"></script>
<script src="./lib/bootstrap/js/bootstrap.min.js"></script> </head> <body>
<div class="row">
<div class="col-xs-4 col-sm-4">
<h2>侧边标题</h2>
<p>这里是侧边这里是侧边这里是侧边这里是侧边</p>
</div>
<div class="col-xs-4 col-sm-8">
<h2>内容标题</h2>
<p>这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容</p>
</div>
</div>
</body> </html>
当然，也可以设置在不同屏幕尺寸下占比不一样,两个div加起来的也可以大于或小于12，比如：
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="./lib/bootstrap/css/bootstrap.css">
<link rel="stylesheet" href="css/style.css">
<script src="./lib/jquery-3.3.1.min.js"></script>
<script src="./lib/bootstrap/js/bootstrap.min.js"></script> </head> <body>
<div class="row">
<div class="col-xs-2 col-md-4">
<h2>侧边标题</h2>
<p>这里是侧边这里是侧边这里是侧边这里是侧边</p>
</div>
<div class="col-xs-12 col-md-8">
<h2>内容标题</h2>
<p>这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容</p>
</div>
</div>
</body> </html>
上面定义了xs和md尺寸比例，中间的sm没有定义，所以sm会向下兼容，保持xs的比例
所以，在md以下都是2：12的比例，由于超出了屏幕最大的12个网格，所以会有两行显示，第一行保持2/12的显示宽度，第二行12/12的显示宽度
浏览器拉大到md的宽度以上，会按4：8比例显示
6.位置推拉
下面代码会在md宽度下，把第一个div向右推3个网格，第二个div位置不动，所以会重叠
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="./lib/bootstrap/css/bootstrap.css">
<link rel="stylesheet" href="css/style.css">
<script src="./lib/jquery-3.3.1.min.js"></script>
<script src="./lib/bootstrap/js/bootstrap.min.js"></script> </head> <body>
<div class="row">
<div class="col-md-4 col-md-push-3">
<h2>侧边标题</h2>
<p>这里是侧边这里是侧边这里是侧边这里是侧边</p>
</div>
<div class="col-md-8">
<h2>内容标题</h2>
<p>这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容</p>
</div>
</div>
</body> </html>
以下代码会把左右div对换：
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="./lib/bootstrap/css/bootstrap.css">
<link rel="stylesheet" href="css/style.css">
<script src="./lib/jquery-3.3.1.min.js"></script>
<script src="./lib/bootstrap/js/bootstrap.min.js"></script> </head> <body>
<div class="row">
<div class="col-md-4 col-md-push-8">
<h2>侧边标题</h2>
<p>这里是侧边这里是侧边这里是侧边这里是侧边</p>
</div>
<div class="col-md-8 col-md-pull-4">
<h2>内容标题</h2>
<p>这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容</p>
</div>
</div>
</body> </html>
原位置+推拉可以推拉到屏幕外去，而不是限制在12个网格内
7.网格嵌套
row里面可以嵌套row
下面代码在md以上屏幕上效果图：
小屏幕：
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="./lib/bootstrap/css/bootstrap.css">
<link rel="stylesheet" href="css/style.css">
<script src="./lib/jquery-3.3.1.min.js"></script>
<script src="./lib/bootstrap/js/bootstrap.min.js"></script> </head> <body>
<div class="row">
<div class="col-md-4">
<h2>侧边标题</h2>
<p>这里是侧边这里是侧边这里是侧边这里是侧边</p>
</div>
<div class="col-md-8">
<h2>内容标题</h2>
<p>这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容</p>
<div class="row">
<div class="col-md-4">
<h2>内容标题1</h2>
<p>这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容</p>
</div>
<div class="col-md-4">
<h2>内容标题2</h2>
<p>这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容</p>
</div>
<div class="col-md-4">
<h2>内容标题3</h2>
<p>这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容</p>
</div>
</div>
</div>
</div>
</body> </html>
再继续添加2个div，并且设置第一个div内容长一些
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="./lib/bootstrap/css/bootstrap.css">
<link rel="stylesheet" href="css/style.css">
<script src="./lib/jquery-3.3.1.min.js"></script>
<script src="./lib/bootstrap/js/bootstrap.min.js"></script> </head> <body>
<div class="row">
<div class="col-md-4">
<h2>侧边标题</h2>
<p>这里是侧边这里是侧边这里是侧边这里是侧边</p>
</div>
<div class="col-md-8">
<h2>内容标题</h2>
<p>这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容</p>
<div class="row">
<div class="col-md-4">
<h2>内容标题1</h2>
<p>这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容</p>
</div>
<div class="col-md-4">
<h2>内容标题2</h2>
<p>这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容</p>
</div>
<div class="col-md-4">
<h2>内容标题3</h2>
<p>这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容</p>
</div>
<div class="col-md-4">
<h2>内容标题4</h2>
<p>这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容</p>
</div>
<div class="col-md-4">
<h2>内容标题5</h2>
<p>这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容</p>
</div>
</div>
</div>
</div>
</body> </html>
效果如下：
可以看到有点乱，这是因为网格设置了float:left的原因，可以在中间加一个clearfix类的div来清除浮动，解决这个问题
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="./lib/bootstrap/css/bootstrap.css">
<link rel="stylesheet" href="css/style.css">
<script src="./lib/jquery-3.3.1.min.js"></script>
<script src="./lib/bootstrap/js/bootstrap.min.js"></script> </head> <body>
<div class="row">
<div class="col-md-4">
<h2>侧边标题</h2>
<p>这里是侧边这里是侧边这里是侧边这里是侧边</p>
</div>
<div class="col-md-8">
<h2>内容标题</h2>
<p>这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容</p>
<div class="row">
<div class="col-md-4">
<h2>内容标题1</h2>
<p>这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容</p>
</div>
<div class="col-md-4">
<h2>内容标题2</h2>
<p>这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容</p>
</div>
<div class="col-md-4">
<h2>内容标题3</h2>
<p>这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容</p>
</div>
<div class="clearfix"></div>
<div class="col-md-4">
<h2>内容标题4</h2>
<p>这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容</p>
</div>
<div class="col-md-4">
<h2>内容标题5</h2>
<p>这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容</p>
</div>
</div>
</div>
</div>
</body> </html>
8.offset偏移
offset跟pull push不同，它会把后面的div一起偏移，不会发生重叠，如果自己或后面的div偏移超过屏幕，会另起一行
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="./lib/bootstrap/css/bootstrap.css">
<link rel="stylesheet" href="css/style.css">
<script src="./lib/jquery-3.3.1.min.js"></script>
<script src="./lib/bootstrap/js/bootstrap.min.js"></script> </head> <body>
<div class="row">
<div class="col-md-4">
<h2>侧边标题</h2>
<p>这里是侧边这里是侧边这里是侧边这里是侧边</p>
</div>
<div class="col-md-8">
<h2>内容标题</h2>
<p>这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容</p>
<div class="row">
<div class="col-md-4">
<h2>内容标题1</h2>
<p>这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容</p>
</div>
<div class="col-md-4">
<h2>内容标题2</h2>
<p>这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容</p>
</div>
<div class="col-md-4">
<h2>内容标题3</h2>
<p>这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容</p>
</div>
<div class="clearfix"></div>
<div class="col-md-4 col-md-offset-4">
<h2>内容标题4</h2>
<p>这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容</p>
</div>
<div class="col-md-4">
<h2>内容标题5</h2>
<p>这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容</p>
</div>
</div>
</div>
</div>
</body> </html>
9.alert-info
让某个div更醒目
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="./lib/bootstrap/css/bootstrap.css">
<link rel="stylesheet" href="css/style.css">
<script src="./lib/jquery-3.3.1.min.js"></script>
<script src="./lib/bootstrap/js/bootstrap.min.js"></script> </head> <body>
<div class="row">
<div class="col-md-4">
<h2>侧边标题</h2>
<p>这里是侧边这里是侧边这里是侧边这里是侧边</p>
</div>
<div class="col-md-8">
<h2>内容标题</h2>
<p>这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容</p>
<div class="row">
<div class="col-md-4">
<h2>内容标题1</h2>
<p>这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容</p>
</div>
<div class="col-md-4">
<h2>内容标题2</h2>
<p>这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容</p>
</div>
<div class="col-md-4">
<h2>内容标题3</h2>
<p>这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容</p>
</div>
<div class="clearfix"></div>
<div class="col-md-4 col-md-offset-4">
<h2>内容标题4</h2>
<p>这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容</p>
</div>
<div class="col-md-4 alert-info">
<h2>内容标题5</h2>
<p>这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容</p>
</div>
</div>
</div>
</div>
</body> </html>
10.动态显示或隐藏
以下侧边栏再小屏幕下回隐藏
同时小屏幕下会在右侧底下显示一段小的说明文字
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="./lib/bootstrap/css/bootstrap.css">
<link rel="stylesheet" href="css/style.css">
<script src="./lib/jquery-3.3.1.min.js"></script>
<script src="./lib/bootstrap/js/bootstrap.min.js"></script> </head> <body>
<div class="row">
<div class="col-md-4 hidden-xs">
<h2>侧边标题</h2>
<p>这里是侧边这里是侧边这里是侧边这里是侧边</p>
</div>
<div class="col-md-8">
<h2>内容标题</h2>
<p>这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容</p>
<div class="visible-xs alert-info">我显示出来了</div>
</div>
</div>
</body> </html>
bootstrap--网格化布局的更多相关文章
- Bootstrap页面布局3 - BS布局以及流动布局
1. <h1 class='page-header'>布局<small> 使用bootstrap网格系统布局网页</small></h1> 得到如图所示 ...
- Bootstrap 可视化布局--拖拽后弹窗进行编辑
Bootstrap 可视化布局--拖拽后弹窗进行编辑 最近后台想一个需求,使用可视化布局-中文 | en中拖拽表格后,弹窗进行编辑,保存下载后在后台生成pdf格式. 奈何各种问题不断,使用 jquer ...
- 使用BootStrap网格布局进行一次演示
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- bootstrap栅格布局-v客学院知识分享
今天主要跟大家讲解下bootstrap的栅格布局,以及使用过程中应该注意的问题 首先我们要使用bootstrp的栅格布局就必须使用HTML正确的基本结构 如下图: 必须给要使用栅格布局的盒子定义cla ...
- 实现 Bootstrap 基本布局
看到了一篇 20 分钟打造 Bootstrap 站点的文章,内容有点老,重新使用 Bootstrap3 实现一下,将涉及的内容也尽可能详细说明. 1. 创建基本的页面 我们先创建一个基本的 HTML ...
- [前端]分享一个Bootstrap可视化布局的网站
如果你像我一样:是个前端渣,能看懂css和html,略懂Bootstarp,懒! 当你每次都想独立完成一个web页面而不知道从哪里下手的时候,那么下面的这个网站,就是你所以需要的! http://ww ...
- BootStrap网格布局
如何使用BootStrap样式 BootStrap与其他的开源库类似,直接引用它的css样式文件就可以使用了. <link rel="stylesheet" href=&qu ...
- Bootstrap页面布局16 - BS导航菜单和其响应式布局以及导航中的下拉菜单
代码: <div class='container-fluid'> <h2 class='page-header'>导航</h2> <!-- .navrbar ...
- Bootstrap页面布局2 - 包含BS文件
如图所示: bootstrap布局基于HTML5,为了使IE8以下也能使用某些HTML5的标签,必须要引入文件:http://html5shiv.googlecode.com/svn/trunk/ht ...
- bootstrap学习笔记<八>（bootstrap核心布局风格——栅格系统）
栅格系统(bootstrap的核心之一,也是bootstrap的主要布局风格) 栅格系统是对原有div布局的升级版.打破了传统div模式只能纵向垂直排列的弊端,大大提高了页面布局的速度和效果,也很好的 ...
随机推荐
- 曹工说Spring Boot源码（12）-- Spring解析xml文件，到底从中得到了什么（context:component-scan完整解析）
写在前面的话 相关背景及资源: 曹工说Spring Boot源码(1)-- Bean Definition到底是什么,附spring思维导图分享 曹工说Spring Boot源码(2)-- Bean ...
- pyhton 线程锁
问题:已经有了全局解释器锁为什么还需要锁? 答:全局解释器锁是在Cpython解释器下,同一时刻,多个线程只能有一个线程被cpu调度 它是在线程和cpu之间加锁,线程和cpu之间有传递时间,即使有GI ...
- 半夜了我来发张图 睡觉 ControllerDescriptor 与 ActionDescriptor 之间 的 关系
- HGE引擎改进——2014/1/27
2014/1/27 更新 hge库: 1.增加回调函数procResizeFunc(),这个函数会在窗口大小改变时调用,不是必要函数 2.修复LOG信息显示为乱码的错误 项目主页:https://co ...
- python应用airtest库的环境搭建
参考https://blog.csdn.net/ywyxb/article/details/64126927 注意:无论是在线还是离线安装,最好在管理员权限下执行命令 1.安装Python36(32位 ...
- 代码中理解CPU结构及工作原理
一.前言 从研究生开始到工作半年,陆续在接触MCU SOC这些以CPU为核心的控制器,但由于专业的原因一直对CPU的内部结构和工作原理一知半解.今天从一篇博客中打破一直以来的盲区.特此声明,本文设计思 ...
- socket 原理
socket 原理 什么是socket 我们知道进程通信的方法有管道.命名管道.信号.消息队列.共享内存.信号量,这些方法都要求通信的两个进程位于同一个主机.但是如果通信双方不在同一个主机又该如何进行 ...
- CAD制图系列之“点”的绘制方法
本章将重点记录点的绘制方法 画直线的原理其实在画两个点,所以,只要会把握点的画法,线就画好啦 点输入模式: 鼠标输入方式: 手动模式: 自动模式: 键盘输入方式: 绝对直角坐标 相对直角坐标 绝对极坐 ...
- 通信协议之Modbus协议（一）
Modbus通信协议: 简介:Modbus协议是应用于电子控制器上的一种通用语言 通过此协议,控制器相互之间,控制器经由网络(例如以太网) 和其他设备之间可以通信,他已经成为一种通用工业标准,有啦它 ...
- ubuntu18.04系统下无外部显示问题解决
记录一下自己作死过程. 由于学习的需要,在windows10下装了ubuntu18.04系统,第一次装这个系统时,也出现了无外部显示,那时候是老师帮忙搞好的,当时没太在意,只是走马关花的看了老师操作了 ...