11.前端笔记-Bootstrap前端框架

news2024/9/28 7:28:46

1.Bootstrap简介

框架：

就是一台架构，有较为完整的网页功能解决方案，而且控制权在框架本身，有预制样式库、组件和插件。使用者要按照框架规定的规范进行开发

参考：

中文官网：http://www.bootcss.com
官网：http://getbootstrap.com
推荐使用：http://www.bootstrap.css88.com

优点：

标准化的html+css编码规范
提供了一套简洁、直观、强悍的组件
有自己的生态圈，不断的更新迭代
开发更简单，提高开发的效率

2.Bootstrap使用

创建文件夹结构
在这里插入图片描述

创建html骨架结构
引入相关样式文件
书写内容：
可以使用bootstrap预定义样式
可以修改bootstrap原先样式

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <!-- 要求当前网页使用IE浏览器最高版本内核进行渲染 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=0">
    <!-- 1、解决ie9以下浏览器对html5新增标签的不识别，并导致CSS不起作用的问题 -->
    <!-- 2、解决ie9以下浏览器对css3 Media Query的不识别 -->
    <!--[if lt IE 9]>
      <script src="https://cdn.jsdelivr.cn/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
      <script src="https://cdn.jsdelivr.cn/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->
    <!-- 引入bootstrap样式 -->
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
    <title>Document</title>
    <style>
        .left{
            background-color: pink;
        }
    </style>
</head>

<body>
    <div class="btn-group" role="group" aria-label="...">
        <button type="button" class="btn btn-default left">Left</button>
        <button type="button" class="btn btn-default">Middle</button>
        <button type="button" class="btn btn-default">Right</button>
    </div>
</body>

</html>

在这里插入图片描述

3.布局容器

Bootstrap需要为页面内容和栅格系统包裹一个.container容器，Bootstrap预先定义好了这个类，叫.container，它提供了两个作此用处的类

3.1 .container类

  • 响应式布局的容器，固定宽度
  • 大屏（>=1200px），宽度定为1170px
  • 中屏（>=992px），宽度定为970px
  • 小屏（>=768px），宽度定为750px
  • 超小屏（100%）
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <!-- 要求当前网页使用IE浏览器最高版本内核进行渲染 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=0">
    <!-- 1、解决ie9以下浏览器对html5新增标签的不识别，并导致CSS不起作用的问题 -->
    <!-- 2、解决ie9以下浏览器对css3 Media Query的不识别 -->
    <!--[if lt IE 9]>
      <script src="https://cdn.jsdelivr.cn/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
      <script src="https://cdn.jsdelivr.cn/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->
    <!-- 引入bootstrap样式 -->
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
    <title>Document</title>
    <style>
        .left{
            background-color: pink;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="btn-group" role="group" aria-label="...">
            <button type="button" class="btn btn-default left">Left</button>
            <button type="button" class="btn btn-default">Middle</button>
            <button type="button" class="btn btn-default">Right</button>
        </div>
    </div>
    
</body>

</html>

在这里插入图片描述

container-fluid类

  • 流式布局容器百分百宽度
  • 占据全部视口viewport的容器
  • 适合单独做移动端开发

4.Boorstrap栅格系统

grid systems,将页面布局划分为等宽的列，然后通过列数的 定义来模块化页面布局
Bootstrap提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口viewport尺寸的增加，系统会自动分为最多12列

4.1栅格系统使用

栅格系统用于通过一系列的行row和列colum的组合来创建页面布局，内容可以放入这些创建好的布局中
在这里插入图片描述

4.1.1 大屏幕下

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <!-- 要求当前网页使用IE浏览器最高版本内核进行渲染 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=0">
    <!-- 1、解决ie9以下浏览器对html5新增标签的不识别，并导致CSS不起作用的问题 -->
    <!-- 2、解决ie9以下浏览器对css3 Media Query的不识别 -->
    <!--[if lt IE 9]>
      <script src="https://cdn.jsdelivr.cn/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
      <script src="https://cdn.jsdelivr.cn/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->
    <!-- 引入bootstrap样式 -->
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
    <title>Document</title>
    <style>
        [class^="col"]{
            border: 1px solid green;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="row">
            <div class="col-lg-6">1</div>
            <div class="col-lg-2">1</div>
            <div class="col-lg-2">1</div>
            <div class="col-lg-2">1</div>
        </div>
    </div>

    
</body>

</html>

共12份，按照不同子盒子所设置的数字进行划分，所有数字相加等于12时，孩子会占满整个container的宽度
在这里插入图片描述
如果孩子数字相加小于12或大于12

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <!-- 要求当前网页使用IE浏览器最高版本内核进行渲染 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=0">
    <!-- 1、解决ie9以下浏览器对html5新增标签的不识别，并导致CSS不起作用的问题 -->
    <!-- 2、解决ie9以下浏览器对css3 Media Query的不识别 -->
    <!--[if lt IE 9]>
      <script src="https://cdn.jsdelivr.cn/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
      <script src="https://cdn.jsdelivr.cn/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->
    <!-- 引入bootstrap样式 -->
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
    <title>Document</title>
    <style>
        [class^="col"]{
            border: 1px solid green;
        }
    </style>
</head>

<body>
    <div class="container">
        <!-- 孩子份数相加等于12，就占满整个container宽度 -->
        <div class="row">
            <div class="col-lg-6">1</div>
            <div class="col-lg-2">1</div>
            <div class="col-lg-2">1</div>
            <div class="col-lg-2">1</div>
        </div>
        <br>
        <!-- 孩子份数相加小于12，不会占满整个container宽度，会有空白 -->
        <div class="row">
            <div class="col-lg-6">1</div>
            <div class="col-lg-2">1</div>
            <div class="col-lg-2">1</div>
            <div class="col-lg-1">1</div>
        </div>
        <br>
        <!-- 孩子份数相加大于12，多余的一列换行展示 -->
        <div class="row">
            <div class="col-lg-6">1</div>
            <div class="col-lg-2">1</div>
            <div class="col-lg-2">1</div>
            <div class="col-lg-3">1</div>
        </div>
    </div>

    
</body>

</html>

在这里插入图片描述

4.1.2 不同屏幕下调节内容布局

宽屏 中等屏幕下 小屏 超小屏
可以给盒子设置多个类名，不同类名表示不同屏幕下盒子占有的份数

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <!-- 要求当前网页使用IE浏览器最高版本内核进行渲染 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=0">
    <!-- 1、解决ie9以下浏览器对html5新增标签的不识别，并导致CSS不起作用的问题 -->
    <!-- 2、解决ie9以下浏览器对css3 Media Query的不识别 -->
    <!--[if lt IE 9]>
      <script src="https://cdn.jsdelivr.cn/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
      <script src="https://cdn.jsdelivr.cn/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->
    <!-- 引入bootstrap样式 -->
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
    <title>Document</title>
    <style>
        [class^="col"]{
            border: 1px solid green;
        }
    </style>
</head>

<body>
    <div class="container">
        <!-- 孩子份数相加等于12，就占满整个container宽度 -->
        <div class="row">
            <div class="col-lg-6 col-md-4 col-sm-6 col-xs-12">1</div>
            <div class="col-lg-2 col-md-4 col-sm-6 col-xs-12">1</div>
            <div class="col-lg-2 col-md-4 col-sm-6 col-xs-12">1</div>
            <div class="col-lg-2 col-md-4 col-sm-6 col-xs-12">1</div>
        </div>
    </div>
</body>
</html>

小屏一个盒子占6份：共12份
在这里插入图片描述
超小屏一个盒子占12份，占满屏幕
在这里插入图片描述

4.1.3 bootstrap列嵌套

一个盒子里嵌套其他子盒子

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <!-- 要求当前网页使用IE浏览器最高版本内核进行渲染 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=0">
    <!-- 1、解决ie9以下浏览器对html5新增标签的不识别，并导致CSS不起作用的问题 -->
    <!-- 2、解决ie9以下浏览器对css3 Media Query的不识别 -->
    <!--[if lt IE 9]>
      <script src="https://cdn.jsdelivr.cn/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
      <script src="https://cdn.jsdelivr.cn/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->
    <!-- 引入bootstrap样式 -->
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
    <title>Document</title>
    <style>
        [class^="col"]{
            border: 1px solid green;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="row">
            <div class="col-md-4">
                <!-- 列嵌套时最好加一个行row,这样可以取消父元素的padding值，而且高度会和父级一样高 -->
                <div class="row">
                    <div class="col-md-6">a</div>
                    <div class="col-md-6">b</div>
                </div>
                
            </div>
            <div class="col-md-4">2</div>
            <div class="col-md-4">3</div>
        </div>
    </div>

    
</body>

</html>

在这里插入图片描述
如果不加一个row,就会有padding，嵌套时不是从盒子边开始划分的

<body>
    <div class="container">
        <div class="row">
            <div class="col-md-4">
                <!-- 列嵌套时如果不加row，就会有padding值把子盒子挤到中间 -->
                
                    <div class="col-md-6">a</div>
                    <div class="col-md-6">b</div>
            
                
            </div>
            <div class="col-md-4">2</div>
            <div class="col-md-4">3</div>
        </div>
    </div>

    
</body>

在这里插入图片描述

4.1.4bootstrap列偏移

使用.col-md-offset-* 这个类，可以将列向右偏移，这些类实际是通过使用 *选择器为当前元素增加左侧的边距margin

<!DOCTYPE html>
<html lang="en">
<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">
    <!-- 1、解决ie9以下浏览器对html5新增标签的不识别，并导致CSS不起作用的问题 -->
    <!-- 2、解决ie9以下浏览器对css3 Media Query的不识别 -->
    <!--[if lt IE 9]>
      <script src="https://cdn.jsdelivr.cn/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
      <script src="https://cdn.jsdelivr.cn/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->
    <!-- 引入bootstrap样式 -->
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
    <title>Document</title>
    <style>
        .row div {
            background-color: pink;
            height: 50px;
        }
    </style>
</head>
<body>
    <div class="container">
        <!-- 两个盒子两边对齐 -->
        <div class="row">
            <div class="col-md-3">左侧</div>
            <!-- 偏移的份数=12-两个盒子占的总份数 -->
            <div class="col-md-3 col-md-offset-6">右侧</div>
        </div>
        <!-- 盒子在中间水平居中对齐 -->
        <div class="row">
            <!-- 只有一个盒子，偏移份数=(12-8)/2 -->
            <div class="col-md-8 col-md-offset-2">中间盒子</div>
        </div>
    </div>
</body>
</html>

在这里插入图片描述

4.1.5 bootstrap列排序

使用.col-md-push-* 和.md-pull-* 类可以改变列的顺序
将左侧和右侧的盒子互换位置

<!DOCTYPE html>
<html lang="en">
<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,user-scalable=0">
    <!-- 1、解决ie9以下浏览器对html5新增标签的不识别，并导致CSS不起作用的问题 -->
    <!-- 2、解决ie9以下浏览器对css3 Media Query的不识别 -->
    <!--[if lt IE 9]>
      <script src="https://cdn.jsdelivr.cn/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
      <script src="https://cdn.jsdelivr.cn/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->
    <!-- 引入bootstrap样式 -->
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
    <title>Document</title>
    <style>
        .row div{
            height: 50px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-md-4 col-md-push-8">左侧</div>
            <div class="col-md-8 col-md-pull-4">右侧</div>
        </div>
    </div>
</body>
</html>

互换之前：
在这里插入图片描述
互换之后：
在这里插入图片描述

4.1.6 响应式工具

隐藏内容

为了加快对移动设备友好的页面开发工作，利用媒体查询功能，并使用这些工具类可以方便的针对不同设备展示或隐藏页面内容
场景：在大屏可见，切换小屏后隐藏不可见
在这里插入图片描述
练习：在大屏可以看见绿色魔术区，小屏和中屏隐藏不可见

<!DOCTYPE html>
<html lang="en">
<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,user-scalable=0">
    <!-- 1、解决ie9以下浏览器对html5新增标签的不识别，并导致CSS不起作用的问题 -->
    <!-- 2、解决ie9以下浏览器对css3 Media Query的不识别 -->
    <!--[if lt IE 9]>
      <script src="https://cdn.jsdelivr.cn/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
      <script src="https://cdn.jsdelivr.cn/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->
    <!-- 引入bootstrap样式 -->
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
    <title>Document</title>
    <style>
        .row div{
            background-color: pink;
            height: 100px;
        }
        .row div:nth-child(3){
            background-color: chartreuse;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-xs-3">1</div>
            <div class="col-xs-3">2</div>
            <div class="col-xs-3 hidden-md hidden-xs">魔术区</div>
            <div class="col-xs-3">4</div>
        </div>
    </div>
</body>
</html>

大屏展示效果：
在这里插入图片描述

小屏展示效果：
在这里插入图片描述

显示内容

与隐藏相反，visible-xs visible-sm visible-md visible-lg是显示某个页面内容
练习：
当是大屏时，第一个盒子里展示“我会显示”这几个字，小屏、中屏不展示

<!DOCTYPE html>
<html lang="en">
<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,user-scalable=0">
    <!-- 1、解决ie9以下浏览器对html5新增标签的不识别，并导致CSS不起作用的问题 -->
    <!-- 2、解决ie9以下浏览器对css3 Media Query的不识别 -->
    <!--[if lt IE 9]>
      <script src="https://cdn.jsdelivr.cn/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
      <script src="https://cdn.jsdelivr.cn/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->
    <!-- 引入bootstrap样式 -->
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
    <title>Document</title>
    <style>
        .row div{
            background-color: pink;
            height: 100px;
        }
        .row div:nth-child(3){
            background-color: chartreuse;
        }
        span{
            font-size: 50px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-xs-3">1
                <span class="visible-lg">我会显示</span>
            </div>
            <div class="col-xs-3">2</div>
            <div class="col-xs-3 hidden-md hidden-xs">魔术区</div>
            <div class="col-xs-3">4</div>
        </div>
    </div>
</body>
</html>

大屏：
在这里插入图片描述
中屏：
在这里插入图片描述

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

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

相关文章

Spring中实用的11个扩展点

Spring中实用的11个扩展点

我们一说到spring，可能第一个想到的是 IOC（控制反转） 和 AOP（面向切面编程）。 没错，它们是spring的基石，得益于它们的优秀设计，使得spring能够从众多优秀框架中脱颖而出。 除此之外，我们在使用spring的过程中，有没有发现它的扩展能力非常强。由于这个优势的存在，让…
阅读更多...
【Vue2+Element ui通用后台】面包屑和tag功能

【Vue2+Element ui通用后台】面包屑和tag功能

文章目录面包屑tag面包屑 Element ui 面包屑&#xff1a;显示当前页面的路径&#xff0c;快速返回之前的任意页面&#xff0c;完成效果如下&#xff1a; 我们之前把头部的代码封装到了 CommonHeader.vue 中&#xff0c;面包屑部分直接写死了一个首页&#xff0c;我们可以把官…
阅读更多...
C++：STL：常用算法（下）：拷贝，算术，集合算法

C++：STL：常用算法（下）：拷贝，算术，集合算法

一&#xff1a;常用拷贝和替换算法 学习目标&#xff1a;掌握常用的拷贝和替换算法 算法简介&#xff1a; copy // 容器内指定范围的元素拷贝到另一容器中 replace // 将容器内指定范围的旧元素修改为新元素 replace_if // 容器内指定范围满足条件的元素替换为新元素…
阅读更多...
2023-01-04 Echarts学习笔记(三) Echarts的实际应用场景:在网页中插入Echarts的折线图,饼图和柱状图

2023-01-04 Echarts学习笔记(三) Echarts的实际应用场景:在网页中插入Echarts的折线图,饼图和柱状图

文章目录零.准备和说明1.最终页面效果2.资源地址一.网页布局1.网页结构分析2.其他准备3.完整代码index.htmlcss/index.scss4.效果5.知识点(待补充)contentzoomz-index&::afterkeyframe二.插入Echarts图表零.准备和说明 1.最终页面效果 主要分为两个部分,一是先进行常规页面…
阅读更多...
BeautifulSoup深入学习

BeautifulSoup深入学习

BeautifulSoup深入学习 简介 BeautifulSoup是python的一个库&#xff0c;其提供一些简单的、python式的函数用来处理导航、搜索、修改分析树等功能。它是一个工具箱&#xff0c;通过解析文档为用户提供需要抓取的数据&#xff0c;因为简单&#xff0c;所以不需要多少代码就可…
阅读更多...
使用Hog特征进行字母和数字的分类

使用Hog特征进行字母和数字的分类

目的&#xff1a;使用字母数字的二值图像&#xff0c;进行识别&#xff1a; 整体思路&#xff1a; 1&#xff09;对图像进行预处理&#xff1b; 对收集的单个字符进行二值化&#xff0c;进行数据均衡&#xff0c;并且将所有的字符图片直接resize为20*20&#xff08;有过进行…
阅读更多...
Docker镜像如何上传阿里云

Docker镜像如何上传阿里云

目录 1.前期准备 2.push(推)镜像 3.pull(拉)镜像 1.前期准备 1.注册阿里云账户 阿里云官方网站链接&#xff1a;https://dev.aliyun.com 2.登陆账户 3.配置Docker加速器 注&#xff1a;搜索“容器镜像服务” 4.创建镜像仓库的命名空间 例如&#xff1a;xnx 5.创建镜像仓库(创…
阅读更多...
77、【字符串】leetcode ——151. 反转字符串中的单词（C++版本）

77、【字符串】leetcode ——151. 反转字符串中的单词（C++版本）

题目描述 原题链接&#xff1a;151. 反转字符串中的单词 解题思路 先预处理头部空格和中间多余空格&#xff1b;再将整体进行逆转。例如&#xff1a;the sky is blue —> eulb si yks eht&#xff1b;最后&#xff0c;分别对每个单词进行逆转&#xff0c;即可完成反转字符…
阅读更多...
生产制造业订单管理软件如何做好订单变更管理？

生产制造业订单管理软件如何做好订单变更管理？

生产制造企业&#xff0c;由于客户需求具有多样性和不确定性&#xff0c;客户订单的内容便会存在出现各种变更的可能&#xff0c;如数量、交期、更改具体参数等&#xff0c;提出变更订单&#xff0c;是很常见的现象。生产制造企业常见的订单变更需求1、PMC已经下完制令后&#…
阅读更多...
户外运动耳机怎么选、五款最适合户外运动的耳机分享

户外运动耳机怎么选、五款最适合户外运动的耳机分享

对于运动爱好者来说&#xff0c;很多人都比较喜欢边听音乐边运动&#xff0c;音乐能够让运动起来更有激情&#xff0c;提升运动锻炼效果。那么到底什么耳机更适合户外运动呢&#xff1f;目前运动耳机在市面上有很多&#xff0c;但不是每一款都适合户外运动&#xff0c;自己找的…
阅读更多...
7.Express模块基础用法

7.Express模块基础用法

Express是做web服务器的&#xff0c;是一个第三方的包&#xff0c;官网 Express - 基于 Node.js 平台的 web 应用开发框架 - Express 中文文档 | Express 中文网 Express的部分用法与http模块类似 在我看来Express是一个轻量级的框架&#xff0c;如果用于做一些较复杂的业务会…
阅读更多...
亚马逊、阿里国际、Shopee、Temu等跨境电商平台测评自养号经验分享

亚马逊、阿里国际、Shopee、Temu等跨境电商平台测评自养号经验分享

对于亚马逊、temu、阿里国际等平台商家来说&#xff0c;流量非常重要。商家需要想办法提高流量。卖家店铺没有流量怎么办&#xff1f; 获取流量的第一点:自然搜索 自然搜索流量的来源实际上是通过站点的优化来提高排名的效果。站点优化有很多维度&#xff0c;如选择合适的关键…
阅读更多...
嵌入式工程师招聘要求有哪些?

嵌入式工程师招聘要求有哪些?

现在有非常多的朋友会问嵌入式软件工程师在实际的招聘中都是什么样的标准与要求呢&#xff0c;对于这个问题空口无凭&#xff0c;我今天从招聘网站上找了一些典型的招聘案例。 一、嵌入式软件工程师 职位描述&#xff1a; 1、对需求进行分析评审&#xff0c;并输出开发计划&a…
阅读更多...
基于Vue和SpringBoot的进销存管理系统的设计和实现

基于Vue和SpringBoot的进销存管理系统的设计和实现

作者主页&#xff1a;Designer 小郑 作者简介&#xff1a;Java全栈软件工程师一枚&#xff0c;来自浙江宁波&#xff0c;负责开发管理公司OA项目&#xff0c;专注软件前后端开发&#xff08;Vue、SpringBoot和微信小程序&#xff09;、系统定制、远程技术指导。CSDN学院、蓝桥云…
阅读更多...
【阶段二】Python数据分析Pandas工具使用08篇：探索性数据分析：数据的描述：数据的分散趋势与数据的分布形态

【阶段二】Python数据分析Pandas工具使用08篇：探索性数据分析：数据的描述：数据的分散趋势与数据的分布形态

本篇的思维导图： 数据的分散趋势 数据的分散趋势是用来刻画数值型变量偏离中心的程度，最为常用的分散趋势指标有标准差、极差、四分位差等。通过这些指标可以反映样本之间的差异大小，如果指标值越大，说明样本之间差异越明显，反之差异越小。 方差与标准差 …
阅读更多...
阿里云产品专家陶炳哲：Java应用最佳实验

阿里云产品专家陶炳哲：Java应用最佳实验

2022 年 9 月 28 日&#xff0c;阿里云用户组&#xff08;AUG&#xff09;第 11 期活动在深圳举办。活动现场&#xff0c;阿里云产品专家陶炳哲向参会企业分享了《Java 应用最佳实验》。本文根据演讲内容整理而成。 大家好&#xff0c;我是陶炳哲&#xff0c;是阿里云产品专家。…
阅读更多...
React（coderwhy）- 02(函数组件)

React（coderwhy）- 02(函数组件)

React的组件化开发 组件化是一种分而治之的思想&#xff1a; 如果我们将一个页面中所有的处理逻辑全部放在一起&#xff0c;处理起来就会变得非常复杂&#xff0c;而且不利于后续的管理以及扩展。 但如果&#xff0c;我们讲一个页面拆分成一个个小的功能块&#xff0c;每个功能…
阅读更多...
191：vue+openlayers 选择feature，固定按钮删除selected feature

191：vue+openlayers 选择feature，固定按钮删除selected feature

第191个 点击查看专栏目录 本示例的目的是介绍如何在vue+openlayer中使用select来选择feature元素，通过按键来删除selected的feature。 直接复制下面的 vue+openlayers源代码，操作2分钟即可运行实现效果 文章目录 示例效果配置方式示例源代码（共95行）相关API参考专栏目标…
阅读更多...
【回答问题】ChatGPT上线了！给我推荐20个比较流行的ROS(Robot Operating System)算法模型

【回答问题】ChatGPT上线了！给我推荐20个比较流行的ROS(Robot Operating System)算法模型

给我推荐20个比较流行的ros算法模型 很好&#xff0c;下面是20个比较流行的ROS(Robot Operating System)算法模型&#xff1a; 便携式机器人操作系统(PR2) 全向轮操作系统(TurtleBot) 机器人操作系统(ROS)用于机器人操作 基于空间相对导航的机器人操作系统(SLAM) 自适应机器人…
阅读更多...
全网惟一面向软件测试人员的Python基础教程-在Python中如何对列表进行增删改排序？

全网惟一面向软件测试人员的Python基础教程-在Python中如何对列表进行增删改排序？

全网惟一面向软件测试人员的Python基础教程 起点&#xff1a;《python软件测试实战宝典》介绍 第一章 为什么软件测试人员要学习Python 第二章 学Python之前要搞懂的道理 第三章 你知道Python代码是怎样运行的吗&#xff1f; 第四章 Python数据类型中有那些故事呢&#xff1f;…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023