一文学会 BootStrap

news2024/11/29 4:46:11

在这里插入图片描述

文章目录

  • 认识BootStrap
    • 历史
    • 优缺点
    • 使用注意
    • 安装
      • CDN
      • 源码引入
      • 包管理器
  • 媒体查询
  • 屏幕尺寸的分割点（Breakpoints）
  • 响应式容器
  • 网格系统
    • 基本使用
    • 底层实现
      • .container
      • .row
      • .col、.col-份数
    • 网格嵌套
    • 自动布局列 Auto-layout
    • 响应式类 Responsive Class
  • 响应式工具类-Display
  • 实用工具类（Utility classes）
  • 可访问性-辅助类
  • Bootstrap组件

认识BootStrap

Bootstrap 读音 /ˈbu:tstræp/ ，是一个非常受欢迎的前端框架，官方网站将其描述为。最流行的 HTML、CSS 和 JS 框架，用于在 Web 上开发响应式、移动优先的项目。

历史

  • 在2011年8月19日将其作为开源项目发布。项目由Mark Otto、Jacob Thornton和核心开发小组维护。
  • 在2012年1月31日发布Bootstrap 2，增加了十二列网格系统和响应式组件，并对许多组件进行了修改。
  • 在2013年8月19日发布Bootstrap 3，开始将移动设备优先作为方针，并且开始使用扁平化设计，支持IE8-9。
  • 在2018年1月7日发布Bootstrap 4，增加了Flexbox Grid、Cards、Spacing Utilities等。
  • 在2021年5月5日发布Bootstrap 5，增强Grid System、增强Form elements、Not Support for IE、Bootstrap Icons等

优缺点

优点

  • 提供便捷的响应式系统和实用的工具类，以及统一的样式和组件。
  • 文件结构简单

缺点

  • 不适合需要高度定制样式的项目，因为Bootstrap具有统一的视觉风格，高度定制类的项目需要大量的自定义和样式覆盖。
  • 框架文件比较大(61KB JS + 159KB CSS)

使用注意

  1. Bootstrap 要求文档类型（doctype）是 HTML5。<!doctype html>
  2. Bootstrap 采用的是移动设备优先（mobile first） 的开发策略，为了网页能够适配移动端的设备，需在 标签中添加viewport（视口）
  • 在移动端会把 layout viewport 的宽度设置为设备的宽，并且不允许用户进行页面的缩放。
  • shrink-to-fit 是为了兼容 Safari 9 以后版本，禁止页面的伸缩
 <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no,maximum-scale=1.0,minimum-scale=1.0,shrink-
to-fit=no">
  1. Bootstrap 会将全局的 box-sizing 从 content-box 调整为 border-box。
  • 如果需要覆盖这个设置：
.selector-for-some-widget {
	box-sizing: content-box;
}

安装

注意：Bootstrap 5 以前的版本是依赖 jQuery 的，所以需要引入 jQuery。

三种安装方式：

  1. cdn
  2. 源码手动引入
  3. 包管理器

CDN

Bootstrap框架的CDN地址

  • https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css
  • https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js
  • https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js

源码引入

Bootstrap框架的下载

  • Bootstrap下载地址：

下载 Bootstrap

  • jQuery下载地址：

Download jQuery | jQuery

bootstrap 软件包中提供了多个 css 文件版本和 js 版本：
三个 css 版本：

  1. 全量版：bootstrap.css
  2. 只提供网格布局和部分flex工具类版：bootstrap-grid.css
  3. 只初始化样式版，就和 normalize.css 一样：bootstrap-reboot.css

两个 js 版本：

  1. 全量版：bootstrap.js
  2. 不支持 Popper 版：bootstrap.bundle.js
  • image.png这种气泡弹窗就是 Popper。

对于这些版本，我们可以按需求引入。

包管理器

npm 或 yarn 都行。
Webpack

媒体查询

bootstrap 内部的响应式是通过媒体查询。
媒体查询一般是设置最小宽度，当满足最小宽度，则样式生效。

@media (min-width: 576px) {
	// 当屏幕大于 576px 的时候的样式
}

屏幕尺寸的分割点（Breakpoints）

Bootstrap的一大核心就是响应式，即开发一套系统便可以适配不同尺寸的屏幕。它底层原理是使用媒体查询来为我们的布局和页面创建合理的断点(Breakpoints)，然后根据这些合理的断点来给不同尺寸屏幕应用不同的CSS样式。

bootstrap 设置了 5 个屏幕断点。分别对应着：手机，手机横屏，平板，小屏笔记本13、14寸，一般尺寸的电脑。

image.png

响应式容器

Containers容器是 Bootstrap 中最基本的布局元素，并且该布局支持响应式。在使用默认网格系统时是必需的。
Containers容器用于包含、填充，有时也会作为内容居中使用。容器也是可以嵌套，但大多数布局不需要嵌套容器

响应式容器的特点就是它设置了最大宽度，并且让内容水平居中。容器它是个包裹样式，起包裹作用。

bootstrap 响应式容器有三个：

  • .container: 它在每个断点处会设置不同的max-width。
  • .container-{breakpoint}，默认是width: 100%，直到指定断点才会修改为响应的值。
  • .container-fluid：在所有断点处都是 width: 100%。

断点媒体查询的宽度和最大宽度的具体数值：
image.png
举个例子：
当前屏幕宽度为 580px，580 大于 576 那么媒体查询 sm 生效，但此时设置最大宽度为 540px，所以.container应用的标签会水平居中，且两边留有 20px 的空白。

总结一下：
前两个容器样式会在断点的媒体查询生效后，在其中设置最大宽度 max-width。在不生效的时候，最大宽度就是 100%。.container会在所有断点处设置最大宽度，而.container-lg则只会在 lg 断点生效后设置最大宽度。
而.container-fluid中，所有的断点处都是最大宽度都是 100%。

容器源码：

width: 100% 或 某个断点的宽; - 布局的宽
padding-right: 15px; - 让包含的内容不会靠在布局右边缘
padding-left: 15px; - 让包含的内容不会靠在布局左边缘
margin-right: auto; - 布局居中
margin-left: auto; - 布局居中

为了美观，不让容器包裹的元素紧贴着容器两边，所以设置了左右内边距 15px。

网格系统

网格系统一行分为 12 格。3.0 版本底层实现是浮动，4.0 版本是 flex。

2.0 版本之前是分成16格，为什么换成 12 格呢？
因为 12 的因数比 16 多，所以一行中能有更多的列组合。比如一行要 3 列，16 就分不了。

网格系统是使用container、row和col类来布局，并且布局是支持响应的。
image.png

基本使用

那么我们应该如何使用网格系统？

  1. 编写一个container或container-fluid容器；
  2. 在container容器中编写row容器
  3. 在row容器中编写列col容器。
<div class="container">
	<div class="row">
		<div class="col">第一列</div>
		<div class="col">第二列</div>
		<div class="col">第三列</div>
	</div>
</div>

底层实现

.container

见上文。

.row

row没的说，肯定是 flex 容器。 display: flex; flex-wrap: wrap;
但是 row 中还有负的外边距。margin: 0 -15px;
因为 container 中有内边距，row 同样作为一个包裹元素，就需要紧贴着 container 两边，所以要抵消 container 的内边距。
并且如果 row 没有负值来抵消的话，那么网格系统进行嵌套，嵌套越多，左右两边就会有多个多余的padding。

.col、.col-份数

col 和 col-4 是不同的：（不指定份数和指定份数）

  • col 实际实现是**flex-grow: 1;****表示列可以伸缩，**当有新的列加入的时候，其他列会一起缩小宽度让新的列加入，也就是所有 col 列都将处于同一行。
  • col-4 实际实现是**flex: 0 0 33.3333% = flex-grow: 0; flex-shrink: 0; flex-basis: 33.3333%****，它表示列不能拉伸和缩放，按百分比固定占据主轴的位置。**所以当有新的列加入时，新的列会换行到下一行。
<div class="container">
	<!-- display: flex	flex-wrap:wrap	-->
	<div class="row">
		<!-- flex item: flex-grow: 1 -->
		<div class="col item">1</div>
		<div class="col item">2</div>
		<div class="col item">3</div>
	</div>

</div>
<!-- 网格系统(启用了12列,超出12列就会换行) 可以制定列的框-->
<div class="container">
	<div class="row">
		<!-- 
		flex item:  
		flex-basis: xx%
		max-width: xx%
		flex-grow: 0,
		flex-shrink: 0
		-->
		<div class="col-4 item">1</div>
		<div class="col-4 item">2</div>
		<div class="col-4 item">3</div>
		<div class="col-6 item">4</div>
	</div>
</div>

另外，col 包裹实际内容的，为了美观，所以给 col 设置内边距 15px，防止实际内容紧贴着容器 container。

网格嵌套

网格支持嵌套，当网格系统中的某一列嵌套一个网格系统的时候，嵌套的网络系统可以省略 container 容器。
因为网格系统中的col是可以充当一个container-fluid容器来使用（col的属性和container-fluid的属性基本一样）

不省略 container 就会多出一个列宽。

比如实现一行8列的布局，12的因数没有8，所以如果要使用网格系统实现，我们就需要嵌套。当然也能直接使用 flex，不用网格。

<div class="container">
	<!-- flex:列宽自动拉伸 -->
	<div class="row">
		<div class="col item">1</div>
		<div class="col item">2</div>
		<div class="col item">3</div>
		<div class="col item">4</div>
		<div class="col item">5</div>
		<div class="col item">6</div>
		<div class="col item">7</div>
		<div class="col item">8</div>
	</div>
</div>

<div class="container">
	<div class="row">
		<div class="col-6 item">
			<!-- 嵌套网格系统( 嵌套的时候是可以省略container ) -->
			<div class="row">
				<div class="col-3 item">1</div>
				<div class="col-3 item">2</div>
				<div class="col-3 item">3</div>
				<div class="col-3 item">4</div>
			</div>
		</div>
		<div class="col-6 item">
			<!-- ( 嵌套的时候是可以省略container ) -->
			<div class="row">
				<div class="col-3 item">1</div>
				<div class="col-3 item">2</div>
				<div class="col-3 item">3</div>
				<div class="col-3 item">4</div>
			</div>
		</div>
	</div>
</div>

自动布局列 Auto-layout

自动布局列有三种方式，之前已经讲了两种，还有一种 col-auto。

总结自动布局列col（auto layout）：

  • col : 等宽列（Equal-width），自动伸缩
    • 底层是 flex-grow: 1, max-width: 100%。该类网格系统仅用flexbox布局。
  • col-auto : 列的宽为auto(Variable width content),
    • 底层是 flex: 0 0 auto; width: auto
    • flex-basis为 auto，宽度就由 width 决定，width 也为 auto，也就是由内容决定宽度。
  • col-{num}: 指定某个列的宽（支持12列网格）。每行固定列数。
    • 底层是 flex: 0 0 x%，max-width: x%

响应式类 Responsive Class

自动布局列也能和断点搭配使用，在不同断点下，进行不同的列布局，比如大屏列多一点，小屏列少一点。而不是固定死不同屏幕宽度的列数一样，导致小屏的时候列堆在一起看不清。

5个断点(Breakpoints)：
none(xs) : <576px 、sm : >=576px、 md : >=768px、 lg : >=992、 xl : >=1200px

响应式列布局的类：

  1. 实现：flex-grow: 1，max-width: 100%
  • col-sm : 默认 width:100%，当屏幕>=576px该类启用（flexbox布局）
  • col-md: 默认 width:100%，当屏幕>=768px该类启用（flexbox布局）
  • col-lg : 默认 width:100%，当屏幕>=992px该类启用（flexbox布局）
  • col-xl : 默认 width:100%，当屏幕>=1200px该类启用（flexbox布局）
  1. 实现：flex: 0 0 x%
  • col-sm-{num} : 默认 width:100%，当屏幕>=576px该类启用 (支持12列网格)
  • col-md-{num} : 默认 width:100%，当屏幕>=768px该类启用 (支持12列网格)
  • col-lg-{num} : 默认 width:100%，当屏幕>=992px该类启用 (支持12列网格)
  • col-xl-{num} : 默认 width:100%，当屏幕>=1200px该类启用 (支持12列网格)

在xl屏幕显示6列，在lg屏幕显示4列，在md屏幕显示3列，在sm屏幕显示2列，特小屏(none)显示1列

<div class="container">
  <div class="row">
    <div class="col-xl-2 col-lg-3 col-md-4 col-sm-6 col-xs-12">1</div>
    <div class="col-xl-2 col-lg-3 col-md-4 col-sm-6 col-xs-12">2</div>
    <div class="col-xl-2 col-lg-3 col-md-4 col-sm-6 col-xs-12">3</div>
    <div class="col-xl-2 col-lg-3 col-md-4 col-sm-6 col-xs-12">4</div>
    <div class="col-xl-2 col-lg-3 col-md-4 col-sm-6 col-xs-12">5</div>
    <div class="col-xl-2 col-lg-3 col-md-4 col-sm-6 col-xs-12">6</div>
  </div>
</div>

响应式工具类-Display

当我们在开发响应式页面时，可能会有这样的需求：某个功能在PC端可见，但是在移动端不可见。
Bootstrap提供的响应式工具类（display），给元素添加 display 类可按断点显示和隐藏元素。

隐藏元素：.d-[断点-]-none
显示元素：.d-[断点-]-block

类不添加断点，就是一直隐藏元素或显示元素。

举个栗子：

  1. 某个元素只在lg(>=992px) 和 xl 屏显示；
  • 注意别忘了，元素默认都是显示的。所以要先全部隐藏，再选择显示。.d-none .d-lg-block
  1. 某个元素只在lg(>=992px) 和 xl 屏隐藏；
  • .d-lg-none
  1. 某个元素只在 md(>=768px) 屏隐藏；
  • 这是在一个中间区间隐藏：.d-md-none .d-lg-block

实用工具类（Utility classes）

快速浮动（Float）

  • float-left
  • float-right

文本（Text）

  • text-left、text-right、text-center
  • text-{sm、md、lg、xl}-left

边框

  • borde border-top border-left …
  • border border-primary border-success

截断文本

  • text-truncate

image.png

可访问性-辅助类

屏幕阅读器的适配（专门针对残障人士设备的适配）

  • .sr-only .sr-only 类可以对屏幕阅读器以外的设备隐藏内容，即对屏幕阅读辅助器可见。
  • .sr-only-focusable .sr-only 和 .sr-only-focusable 联合使用的话可以在元素有焦点的时候再次显示出来（例如，使用键盘导航的用户）。对于需遵循可访问性的网站来说是很有必要的。

增强可访问性的辅助类（针对残障人使用的设备的适配，同时增强语义化）

  • role=”xxx” : 定义用户界面元素的类型，作用增强Web可访问性，使残障人士可以更好的使用Web内容。
  • aria-*=”xxx”: 增强可访问性，当与role=“xxx”结合使用时，当元素的状态和属性发生变化时会触发辅助技术发出通知，并将信息传达给用户。

Bootstrap组件

参考文档的例子进行组装就行。
注意：组件需要使用到js，所以别忘了引入 bootstrap 的 js 库。

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

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

相关文章

前端根据目录生成模块化路由routes

前端根据目录生成模块化路由routes

根据约定大于配置的逻辑&#xff0c;如果目录结构约定俗成&#xff0c;前端是可以根据目录结构动态生成路由所需要的 route 结构的&#xff0c;这个过程是要在编译时 进行&#xff0c;生成需要的代码&#xff0c;保证运行时的代码正确即可 主流的打包工具都有对应的方法读取文…
阅读更多...
Qt（二）弹窗类 颜色对话框 字体对话框 资源文件

Qt（二）弹窗类 颜色对话框 字体对话框 资源文件

文章目录 一、QDebug类和QMessagebox类&#xff08;一&#xff09;QDebug类&#xff1a;打印调试类&#xff08;二&#xff09;QMessagebox类&#xff1a;弹窗类2. 修改组件图标&#xff08;1&#xff09;通过ui界面&#xff08;2&#xff09;通过QIcon的方式&#xff08;3&…
阅读更多...
SpringBoot新手快速入门系列教程五：基于JPA的一个Mysql简单读写例子

SpringBoot新手快速入门系列教程五：基于JPA的一个Mysql简单读写例子

现在我们来做一个简单的读写Mysql的项目 1&#xff0c;先新建一个项目&#xff0c;我们叫它“HelloJPA”并且添加依赖 2&#xff0c;引入以下依赖&#xff1a; Spring Boot DevTools (可选&#xff0c;但推荐&#xff0c;用于开发时热部署)Lombok&#xff08;可选&#xff0c…
阅读更多...
如何在前端网页实现live2d的动态效果

如何在前端网页实现live2d的动态效果

React如何在前端网页实现live2d的动态效果 业务需求&#xff1a; 因为公司需要做机器人相关的业务&#xff0c;主要是聊天形式的内容&#xff0c;所以需要一个虚拟的卡通形象。而且为了更直观的展示用户和机器人对话的状态&#xff0c;该live2d动画的嘴型需要根据播放的内容来…
阅读更多...
aardio —— 今日减bug

aardio —— 今日减bug

打字就减bug 鼠标双击也减bug 看看有多少bug够你减的 使用方法&#xff1a; 1、将资源附件解压缩&#xff0c;里面的文件夹&#xff0c;放到aardio\plugin\plugins 目录 2、aardio 启动插件 → 插件设置 → 选中“今日减bug” → 保存。 3、重启 aardio&#xff0c;等aa…
阅读更多...
高效率写文案软件有哪些？5款免费文案生成器值得拥有

高效率写文案软件有哪些？5款免费文案生成器值得拥有

在信息洪流奔涌的当下&#xff0c;文案的重要性愈发凸显。对于文案创作者来说&#xff0c;找到能提高效率的软件至关重要&#xff0c;如&#xff1a;市面上有些不错的文案生成器&#xff0c;它们能够为大家自动生成出高质量文案内容&#xff0c;给文案创作者提供了非常大的帮助…
阅读更多...
Python和MATLAB微机电健康推导算法和系统模拟优化设计

Python和MATLAB微机电健康推导算法和系统模拟优化设计

&#x1f3af;要点 &#x1f3af;惯性测量身体活动特征推导健康状态算法 | &#x1f3af;卷积网络算法学习惯性测量数据估计六自由度姿态 | &#x1f3af;全球导航卫星系统模拟&#xff0c;及惯性测量动态测斜仪算法、动态倾斜算法、融合算法 | &#x1f3af;微机电系统加速度…
阅读更多...
vb.netcad二开自学笔记2：认识vs编辑器

vb.netcad二开自学笔记2：认识vs编辑器

认识一下宇宙第一编辑器的界面图标含义还是很重要的&#xff0c;否则都不知道面对的是什么还怎么继续&#xff1f; 一、VS编辑器中常见的图标的含义 变量 长方体&#xff1a;变量 局部变量 两个矩形块&#xff1a;枚举 预定义的枚举 紫色立方体&#xff1a;方法 橙色树状结构…
阅读更多...
vs2022安装qt vs tool

vs2022安装qt vs tool

1 缘由 由于工作的需要&#xff0c;要在vs2022上安装qt插件进行开发。依次安装qt&#xff0c;vs2022&#xff0c;在vs2022的扩展管理中安装qt vs tool。 2 遇到困难 问题来了&#xff0c;在qt vs tool的设置qt version中出现问题&#xff0c;设置msvc_64-bit时出现提示“invali…
阅读更多...
理解GCN

理解GCN

一、从CNN到GNN 1、CNN可被视为一类特殊的GNN&#xff0c;相邻节点大小顺序固定的GNN。 2、利用消息传递进行节点分类的例子&#xff1a; 给定上面的图&#xff0c;和少量已经分类的节点&#xff08;红&绿&#xff09;&#xff0c;对剩余其他节点进行分类&#xff0c;这是…
阅读更多...
C语言 do while 循环语句练习 中

C语言 do while 循环语句练习 中

练习&#xff1a; 4.编写代码&#xff0c;演示多个字符从两端移动&#xff0c;向中间汇聚 // 编写代码&#xff0c;演示多个字符从两端移动&#xff0c;向中间汇聚 //welcome to china!!! //w ! //we !! //wel !!! //.... //welco…
阅读更多...
三、docker配置阿里云镜像仓库并配置docker代理

三、docker配置阿里云镜像仓库并配置docker代理

一、配置阿里云镜像仓库 1. 登录阿里云官网&#xff0c;并登录 https://www.aliyun.com/ 2. 点击产品 - 容器 - 容器与镜像服务ACR - 管理控制台 - 镜像工具 - 镜像加速器 二、配置docker代理 #1. 创建docker相关的systemd文件 mkdir -p /etc/systemd/system/docker.servic…
阅读更多...
均匀采样信号的鲁棒Savistky-Golay滤波(MATLAB）

均匀采样信号的鲁棒Savistky-Golay滤波(MATLAB）

S-G滤波器又称S-G卷积平滑器&#xff0c;它是一种特殊的低通滤波器&#xff0c;用来平滑噪声数据。该滤波器被广泛地运用于信号去噪&#xff0c;采用在时域内基于多项式最小二乘法及窗口移动实现最佳拟合的方法。与通常的滤波器要经过时域&#xff0d;频域&#xff0d;时域变换…
阅读更多...
Linux操作系统的引导过程

Linux操作系统的引导过程

系统初始化进程与文件、systemd概述、单元类型、切换运行级别、查看系统默认默认运行、永久切换、常见的系统服务&#xff08;centos&#xff09;-CSDN博客 centos 7系统升级内核&#xff08;ELRepo仓库&#xff09;、小版本升级、自编译内核-CSDN博客 ss命令详细使用讲解文…
阅读更多...
Zigbee智能家居数据中心：微信小程序实时掌控家居传感器信息

Zigbee智能家居数据中心：微信小程序实时掌控家居传感器信息

摘要&#xff1a; 本文将介绍如何构建一个基于Zigbee和微信小程序的智能家居网关&#xff0c;实现对家居传感器数据的采集、汇总和展示。用户可通过微信小程序实时查看家中温湿度、光照等环境数据&#xff0c;为智能家居系统提供数据支撑。 关键词&#xff1a; Zigbee&#xf…
阅读更多...
Docker简单入门

Docker简单入门

docker简单入门 &#x1f91a;我的博客&#x1f95b;前言 docker安装&#x1f537;常见命令镜像命令容器命令其他命令 docker部署mysql容器docker数据卷&#x1f537;挂载数据卷&#x1f537;本地目录挂载 创建一个自定义Docker镜像&#x1f537;镜像文件&#x1f537;构建镜像…
阅读更多...
逻辑图框架图等结构图类图的高效制作方式不妨进来看看

逻辑图框架图等结构图类图的高效制作方式不妨进来看看

**逻辑图框架图等结构图类图的高效制作方式不妨进来看看** 基于我们每天都在处理大量的数据和信息。为了更清晰地理解和传达这些信息&#xff0c;结构图、逻辑图和框架图等可视化工具变得越来越重要。然而&#xff0c;如何高效地制作这些图表并确保其准确性和易读性呢&#xf…
阅读更多...
UCOS-III 任务同步机制-信号量

UCOS-III 任务同步机制-信号量

1. 信号量类型 1.1 二值信号量&#xff08;Binary Semaphores&#xff09; 二值信号量只有两个状态&#xff1a;可用&#xff08;1&#xff09;和不可用&#xff08;0&#xff09;。它主要用于任务之间的互斥访问或者事件通知。例如&#xff0c;当一个任务完成某个操作后&am…
阅读更多...
浏览器打不开网页、但是电脑有网络，解决办法(win11)

浏览器打不开网页、但是电脑有网络，解决办法(win11)

2023.07.06测试有效 华为电脑拿去免费拆机保养后&#xff0c;发现浏览器连接不上网了&#xff0c;但是&#xff01;微信又能登录得上&#xff0c;也就是说电脑还是有网的。 原文链接 一、问题截图 二、解决方法 1.右键打开“网络和Internet设置” 2.打开“代理” 3.将该选项设…
阅读更多...
匠心传承 筑梦大兴 大兴区餐饮行业职工职业技能竞赛完美收官

匠心传承 筑梦大兴 大兴区餐饮行业职工职业技能竞赛完美收官

隆重举行&#xff0c;北京市商务局二级调研员林英杰&#xff0c;大兴区商务局党组书记、局长王丽娜&#xff0c;区总工会二级调研员侯月海&#xff0c;区商务局副局长、工会主席兰莉及各区县餐饮行业协会相关负责人、获奖单位、参赛职工等160余人参加大会。 此次竞赛通过前期调…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023