[嵌入式] bootstarp项目报告

摘????要

广州万孚生物是专业致力于体外快速诊断(POCT)产品的研发、生产和销售一体化的高科技上市企业，公司现有产品70多种，涵盖传染病类检测、妊娠类检测、毒品类检测、心血管疾病检测、肿瘤检测、血糖检测、炎症检测、自身免疫检测等多个列，其中传染病检测系列、奸娠检测系列、毒品检测系列、心血管疾病检测产品具有较强的竞争力，占有较大的市场份额。目前万孚生物基实现了万孚产品全球化战略，产品销往全球一百多个国家和地，公司行业地位不断提升，是国内市场上获得广涉认同的的体外诊断产品产厂商，是最具国际影响力的国内生物医药诊断产品生产厂商之一。

完善的产品体系

万孚生物先后荣获国家火炬计划重点高新技术企业、国家生物工程高技术产业化示范基地、国家知识产权优势企业、世界卫生组织 PQ认证企业、世界海关组织AEO高级认证企业，是国内首批通过美国FDA现场审核的体外诊断试剂企业之一，并建有 POCT领域唯一的国家级工程实验室。

经过多年发展，万孚生物构建了免疫胶体金技术平台、免疫荧光技术平台、电化学技术平台、于式生化技术平台、化学发光技术平台、分子诊断技术平台、病理诊断技术平台，以及仪器技术平台和生物原材料平台，并依托上述九大技术平台形成了心脑血管疾病、炎症、肿瘤、传染病、毒检(药物滥用)、优生优育等检验领域的丰富产品线，广泛应用于临床检验、危急重症、基层医疗、疫情监控、灾难救援、现场执法及家庭个人健康管理等领域。

其中万孚生物的免疫胶体金明星产品--流感系列产品，有着辉煌的历史:全国唯一获得H7亚型禽流感病毒(2013)抗原检测注册证的产品、全国唯一一家流感检测全系列产品:H7、FluAFluB、FluA&B;这两年万孚生物推出分子诊断技术平台，布局流感疾病、感染性疾病、肿瘤伴随诊断等领域。

近三十载的练，凭借雄厚的自主创新能力和管理能力，万平生物获得包括NMPA认证、CE认证FDA认证、MDALL认证、MDSAP认证以及WHOPQ认证等在内的全球权威认证。

关键词：html，css，javascrippt，bootstarp，万孚生物网站。

目????录

1.2.4 JavaScript及运行模式

前言

万孚生物是专注健康产品和服务，真诚呵护生命和健康。

广州万孚生物技术股份有限公司(以下简称万孚生物)(股票代码300482)成立于1992年，注册资金约3.43亿元，是一家具有政府基金背景，致力于体外诊断快速检测产品研发、生产和销售一体化的国家高新技术企业国内POCT的龙头企业之一。公司的诊断产品销往全球140多个国家和地区，广泛运用于基层医疗、危急重症、临床检验、疫情监控、血站、灾难救援、现场执法及家庭个人健康管理等领域

其中万孚生物的免疫胶体金明星产品--流感系列产品，有着辉煌的历史:全国唯一获得H7亚型禽流感病毒(2013)抗原检测注册证的产品、全国唯一一家流感检测全系列产品:H7、FluA、FluB、FluA8B;这两年万孚生物推出分子诊断技术平台，布局流盛疾病、盛染性疾病、肿癯伴随诊断等领域。

公司以“服务万众，万众信孚”为核心理念，以“一点·二线三喜四一”为核心价值体系。其中“一点”为“实践第一的观点”。“二线”为“对内，坚持群众路线;对外，坚持统一战线”。“三喜”为“客户喜欢、员工喜欢、合作伙伴喜欢”。“四一”为“我们激情奋斗，感动每一位顾客;我们尊重包容，成长每一位员工;我们敢赢敢享，成就每一位伙伴;我们追求卓越，守护每一份健康”。

作为国内POCT的领军企业，万孚生物的核心理念之一是“不让生命等候”。简单的一句话，诠释的不仅仅是万孚生物为公众健康提共技术、产品所坚守的初心，更体现了企业普世的大爱情怀。正是因为这种共情力，万孚生物也一直把”提供专业的快速诊断与慢病管理的产品服务，追求友好、便捷的用户体验，提升生命健康品质，实现员工、顾客和合作伙伴的共同梦想”作为企业发展的方向，不断追求卓越，守护每份健康，“服务万众、万众信孚”深入每个万孚人的心中，激励向前。

开发工具及相关技术

1.1开发工具

Visual Studio Code（简称“VS Code”）是Microsoft在2015年4月30日Build开发者大会上正式宣布一个运行于 Mac OS X、Windows和 Linux 之上的，针对于编写现代Web和云应用的跨平台源代码编辑器，可在桌面上运行，并且可用于Windows，macOS和Linux。它具有对JavaScript，TypeScript和Node.js的内置支持，并具有丰富的其他语言（例如C++，C＃，Java，Python，PHP，Go）和运行时（例如.NET和Unity）扩展的生态系统。

1.2 开发语言

1.2.1 Bootstrap框架

Bootstrap是一组用于网站和网络应用程序开发的开源前端（所谓“前端”，指的是展现给最终用户的界面。与之对应的“后端”是在服务器上面运行的代码）框架，包括HTML、CSS及JavaScript的框架，提供字体排印、窗体、按钮、导航及其他各种组件及Javascript扩展，旨在使动态网页和Web应用的开发更加容易。

Bootstrap与最新版的Google Chrome、Firefox、Internet Explorer、Opera和Safari浏览器兼容，尽管有些浏览器并不是支持所有操作系统。

从2.0版本开始，Bootstrap支持响应式网页设计(RWD)。页面布局可以根据显示网页的设备（桌面、平板电脑、手机）来进行动态调整。

从3.0版本开始，Bootstrap将移动设备优先作为设计方针，更加强调了响应式设计。

4.0 alpha版本添加Sass和Flexbox的支持。

Bootstrap是开源软件，可以从GitHub上面找到。开发者被鼓励参与项目，并且对项目做出自己的贡献。

Bootstrap采用模块化设计，并且用LESS样式表语言来实现各种组件和工具。一个名为bootstrap.less的文件包括了这些组件和工具，开发者可以修改这个文件，自行决定项目需要哪些组件。

通过一个基本配置文件可以进行有限的定制，此外也可以进行更加深入的定制。

LESS语言支持变量、函数、运算符、组合选择器和一个叫做Mixin（混入）的功能。

从Bootstrap 2.0开始，Bootstrap文档包括一个叫做“自定义”的特别选项，开发者可以根据自己的实际需要来选择包含的组件和效果，然后生成和下载已经编译好的包。

网格系统和响应式设计以1170像素宽为基准。此外开发者也可以自定义基准。这两种情况下，Bootstrap都能提供四种变体：手机竖屏、手机横屏和平板电脑、PC低分辨率、高分辨率，每个变体都会自动调整网格宽度。

1.2.2 ?HTML概述

HTML 是用来描述网页的一种语言。HTML 指的是超文本标记语言 (Hyper Text Markup Language) ，它是一种标记语言 (markup language) 。标记语言是一套标记标签 (markup tag) ，HTML 使用标记标签来描述网页。

(1)超文本:

标记语言的真正威力在于其收集能力，它可以将收集来的文档组合成一个完整的信息库，并且可以将文档库与世界上的其他文档集合链接起来。这样的话，读者不仅可以完全控制文档在屏幕上的显示，还可以通过超链接来控制浏览信息的顺序。这就是 HTML 和 XHTML 中的 “HT” - 超文本（hypertext），就是它将整个 Web 网络连接起来。

(2)超链接:

超链接（hyper text），或者按照标准叫法称为锚（anchor），是使用 <a> 标签标记的，可以用两种方式表示。

(3)HTML 标签:

HTML 标记标签通常被称为 HTML 标签 (HTML tag)。HTML 标签是由尖括号包围的关键词，比如 <html> ；HTML 标签通常是成对出现的；比如 <b> 和 </b> ，标签对中的第一个标签是开始标签，第二个标签是结束标签；开始和结束标签也被称为开放标签和闭合标签。

(4)HTML 文档:

HTML 文档包含 HTML 标签和纯文本，HTML 文档也被称为网页。Web 浏览器的作用是读取 HTML 文档，并以网页的形式显示出它们。浏览器不会显示 HTML 标签，而是使用标签来解释页面的内容。

(6)HTML 的特点：

HTML 是一种松散的语言，它对大小写并不敏感，虽然要求双标签成对的出现，但是不成对出现一般也不会报错；单标签不闭合也不会报错；属性中使用单引号，双引号，或不适用任何引号赋值也不会报错。

但是为了更为规范，我们一般会严格执行这样的规则：

双标签成对出现

单标签必须闭合

标签名，属性名使用小写

代码层次结构分明，要有缩进、换行、空行。

1.2.3??CSS概论

CSS 指层叠样式表 (Cascading Style Sheets)，通常单独存放在.css文件中，W3C（万维网联盟）推出的CSS标准旨在使HTML文档结构和样式分离。目前所有的主流浏览器均支持层叠样式表

1.2.4 JavaScript及运行模式

(1) 运行环境

JavaScript是伴随着浏览器的诞生而诞生，所以JavaScript的执行最多还是在浏览器环境之内。但是JavaScript作为服务端脚本的概念在诞生之初就有，1995年网景公司就提出了服务端JavaScript的概念，并研发了 Netscape Enterprise Server；1996年微软发布的JScript也可以运行在服务端。随着技术的发展各种JavaScript引擎出现，2009年5月Node.js的发布将JavaScript作为服务端脚本推向了一个高潮。

JavaScript的运行不像C语言等其他编译型语言编译后直接在操作系统上运行，因为它是脚本语言，运行时必须要借助引擎（解释器）来运行，所以它可以在封装了引擎的环境下运行。封装了JavaScript引擎的环境可以分为两类，一类是浏览器环境；一类是非浏览器环境，比如Node.js、MongoDB。我没有采用wikipedia中clent-side和server-side的直接翻译，因为JavaScript既可以编写服务端脚本也可以编写shell脚本，甚至图形界面应用程序。

把运行环境分为浏览器环境和非浏览器环境是因为他们提供了截然不同的操作模块。浏览器环境下JavaScript由三部分组成，分别是ECMAScript、DOM和BOM，BOM和DOM是针对浏览器环境所扩展的操作方法。非浏览器环境，比如Node.js，也是以ECMAScript为基础，扩展出了I/O操作、文件操作、数据库操作等等；在MongoDB中则是可以作为shell脚本操作数据库；在Eclipse e4中可以编写扩展。

(2)运行机制

了解了JavaScript的运行环境，我们来看看运行机制。这里我们不再谈微软的JScript，一方面写本文时我没有找到详尽的介绍JScript的资料，另一方面JScript的应用现在不常见。

JavaScript是个什么样子，取决于它初始应用于哪里，它是作为浏览器的脚本出现，主要用途是解决网页中的用户交互。页面中的用户交互行为会让页面中的DOM元素产生变化，比如用户输入信息后的反馈提示等等。JavaScript在浏览器环境中操作DOM，为避免复杂的同步问题，决定了它采用单线程。如果同时有多个线程，有的在DOM节点上添加内容，有的修改了整个节点，甚至有的删除了整个节点，这个时候很难判断到底采用哪个线程的结果。

JavaScript最大的特点就是单线程，在浏览器环境中中是，在非浏览器环境中同样也是。单线程也就意味着JavaScript在同一时间只能进行一项任务，如果有多项任务的话，需要对任务进行排队，完成一个才能继续下一个。

不同的浏览器、不同的引擎、不同的执行环境，执行JavaScript的细节会有差异，但是不变的是单线程和队列。

(3)运行过程

在浏览器环境中，JavaScript引擎按<script>标签代码块从上到下的顺序加载并立即解释执行。

我们在这里不探究引擎的详尽解释执行细节，比如词法分析、语法分析以及语法树的构造等等，只说它解释执行过程中非常重要的两个时期预编译期（预解析期）和执行期。理解这两个阶段十分有助于理解JavaScript中的一些“奇特”的现象。

在预编译期JavaScript会对var和function的声明在其所在作用域内进行提升，提升的位置相当于所在作用域开始位置。预编译期需要注意下面几个问题：

1.预编译首先是全局预编译，函数体在未调用时不进行预编译

2.只有var和function声明会提升

3.注意是在所在作用域内提升，不会扩展到其他作用域

4.预编译后顺序执行

系统需求分析

2.1 万孚生物网站简介

广州万孚生物技术股份有限公司(以下简称“万孚生物”)(股票代码300482)成立于1992年，注册资金约3.43 元，是一家具有政府基金背景，致力干体外诊断快速检测产品研发、生产和销售一体化的国家高新技术企业，国内POCT的龙头企业之一。公司的诊断产品销往全球140多个国家和地区，广泛运用于基层医疗、危急重症、临床检验、疫情监控、血站、灾难救援、现场执法及家庭个人便康管理等领域。

2.2 网页功能分析

?受访页面：网站受访页面分析。访客对网站各个页面的访问情况。通过分析了解访客最关心或最不关心网站中的哪些内容，从而有针对性地优化网站页面以及推广提词方案。

?受访域名：访客对您的网站的各个域名的访问情况；系统自动将具有相关规则的URL聚合在一起，对这一类页面的情况进行分析。通过受访域名，我们可以看出那个域名是网名关注，那个域名访客数少，从而优化该网站，提高营销额。

?入口页面：即为访客访问网站的第一个入口，即每次访问的第一个受访页面，作为访问会话的入口页面（也称着陆页面）的次数。助你了解网站访客对网站第一印象来源于哪些页面（入口页），此数越高越说明该页面是你的重要窗口，应该重点优化。

?页面点击图：页面点击图的作用就是能够以图像的方式了解让我们直观的了解到自己的网站页面之中最受关注的地方在哪里。这样我们就可以进行一些用户行为的分析来帮助我们的将更有价值的信息或者是我们想要展示的信息展示给网站的用户。

?页面上下游：即访客通过哪些页面进入指定页面，又从指定页面到达哪些页面，从而帮助您有效地改善页面结构，提高网站质量。针对指定页面的上下游分析。您可以及时了解经过指定页面的访客行为，页面上下游报告提供了指定页面的上下游访问数据，最终，根据获取的这些信息，您可以有根据地改善指定页面与其他页面之间的层次关系，从而让访客在您网站上获得更好的使用体验。

?总之，通过网站的分析，我们能够更好的提高网站的利用效率，提高转化率，从而达到营销目地。

2.3 网站总体设计与制作

2.3.1 网站的PC端制作

制作阶段：

(1)选择制享资

制作网页的工具很多,例如DreamweverFrontPageHomeSiteHotDog等，根据自己的实际情况选择一个最拿手、最熟悉的网页制作工具就行。关于网页制作工具

在下具体介绍。另外要制作出满意的网页还需要使用一些制作网页的辅佐工具,例如Frame设计工具、Java制作工具等。

(2)制作网页

在完成了设计后只要选择一种自己熟悉的网页制作工具就可以制作网页了。实际上制作网页就是将收集和加工后的素材添加到事先规划设计好的网页中去或

者说制作网页就是将文字、图片、动画、声音、视频、程序等素材按照设计的要求合成起来。

检测阶段：

制作完网页阶段之后应该对网页做全面的检测包括检查网页内容的科学性、

版面编排的合理性、超链接的正确性以及对网页的内容作适当的增减等。一个有错误内容的网页时浏览者所不能容忍的一个编排布局混乱的网页不会引起浏览者多大的兴趣一个有超链接错误的网页则会给浏览者带来很多麻烦。

2.3.2 网站的响应式布局

所谓响应式，就是一个网站能够兼容多个终端，可以为不同终端的用户提供更加舒适的界面和更好的用户体验。我们都知道，如果在PC端中将浏览器的窗口大小进行改变，一般的网站就不能完全显示，在浏览器中则是产生滚动条，在PC端中可以使用鼠标，操作起来很方便。但是，在移动设备中，由于屏幕较小，所以操作起来就没那么方便了。所以，这就需要制作响应式网站了，相同的内容可根据用户使用的设备以不同的形式展示给用户，让用户得到优质的浏览体验。

网站的响应式布局，即利用Bootstrap前端开发框架，结合CSS、JavaScript、及jQuery等，解决了面对不同分辨率设备的显示问题。

设计代码

3.1导入方式

Css文件导入：

Css文件中botstrap.min.css必须在导入所有css文件之前，其他css文件位置可以交换。

Js文件导入：

Js文件中jquery-3.5.1.min.js必须在导入所有js文件之前，其他js文件位置可以交换。

3.2 布局代码

Css样式初始化：

*{padding: 0px;margin: 0px;font-family: 微软雅黑;}

html,body{width: 100%;height: 100%;}

ul,li,ol{list-style: none;}

a{text-decoration: none;color: #333;}

img{border: 0px;}

.W99{width: 99%;margin: 0 auto;}

导航条代码：

? ? <div class="picture">

? ? ? ? <div class="one">

? ? ? ? ? ? <img src="./images/万孚.png" alt="">

? ? ? ? </div>

? ? ? ? <ul class="tow">

? ? ? ? ? ? <li>< a href="#"></ a>关于万孚</li>

? ? ? ? ? ? <li>< a href="#"></ a>产品&服务</li>

? ? ? ? ? ? <li>< a href="#"></ a>解决方案</li>

? ? ? ? ? ? <li>< a href="#"></ a>新闻中心</li>

? ? ? ? ? ? <li>< a href="#"></ a>投资着关系</li>

? ? ? ? ? ? <li>< a href="#"></ a>人才招聘</li>

? ? ? ? ? ? <li>< a href="#"></ a>联系我们</li>

? ? ? ? </ul>

? ? ? ? <div class="thrss">

? ? ? ? ? ? <img src="./images/搜索.png" alt="">

? ? ? ? </div>

</div>

css样式：

.picture{display: flex;margin: 20px auto;}

.one{width: 20%;}

.one img{width: 50%;margin-left: 150px;}

.tow{display: flex;font-size: 23px;}

.tow li{margin-top: 20px;margin-right: 40px;}

.thrss{width: 5%;}

.thrss img{width: 27%;margin-top: 25px;margin-left: 10px;}

轮播图代码：

? ? ? ? <ol class="carousel-indicators">

? ? ? ? ? <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>

? ? ? ? ? <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>

? ? ? ? ? <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>

? ? ? ? </ol>

? ? ? ? <div class="carousel-inner">

? ? ? ? ? <div class="carousel-item active">

? ? ? ? ? ? <img src="./images/1.jpg" class="d-block w-100" alt="...">

? ? ? ? ? </div>

? ? ? ? ? <div class="carousel-item">

? ? ? ? ? ? <img src="./images/2.jpg" class="d-block w-100" alt="...">

? ? ? ? ? </div>

? ? ? ? ? <div class="carousel-item">

? ? ? ? ? ? <img src="./images/3.jpg" class="d-block w-100" alt="...">

? ? ? ? ? </div>

? ? ? ? ? <div class="carousel-item">

? ? ? ? ? ? <img src="./images/4.jpg" class="d-block w-100" alt="...">

? ? ? ? ? </div>

? ? ? ? </div>

? ? ? ? <button class="carousel-control-prev" type="button" data-target="#carouselExampleIndicators" data-slide="prev">

? ? ? ? ? <span class="carousel-control-prev-icon" aria-hidden="true"></span>

? ? ? ? ? <span class="sr-only">Previous</span>

? ? ? ? </button>

? ? ? ? <button class="carousel-control-next" type="button" data-target="#carouselExampleIndicators" data-slide="next">

? ? ? ? ? <span class="carousel-control-next-icon" aria-hidden="true"></span>

? ? ? ? ? <span class="sr-only">Next</span>

? ? ? ? </button>

? ? ? </div>

关于万孚代码：

? ? ? ? <div class="yu">

? ? ? ? ? ? <img src="./images/背景.jpg" alt="">

? ? ? ? </div>

? ? ? ? <div class="zi">

? ? ? ? ? ? <p class="yi">关于万孚</p>

? ? ? ? ? ? <p>ABOUT?WONDFO</p>

? ? ? ? </div>

? ? </div>

? ? <div class="situ">

? ? ? ? <div class="wenhua">

? ? ? ? ? ? <img src="./images/企业文化.jpg" alt="">

? ? ? ? </div>

? ? ? ? <div class="wenhua">

? ? ? ? ? ? <img src="./images/企业资源.jpg" alt="">

? ? ? ? </div>

? ? ? ? <div class="wenhua">

? ? ? ? ? ? <img src="./images/万孚全球.jpg" alt="">

? ? ? ? </div>

? ? ? ? <div class="wenhua">

? ? ? ? ? ? <img src="./images/万孚全国.jpg" alt="">

? ? ? ? </div>

</div>

Css样式：

.guan{width: 99%;}

.yu img{width: 100%;height: 450px;margin-top: 45px;}

.zi{margin-top: -400px;font-size: 40px;color: #fff;margin-left: 750px;}

.yi{margin-bottom: 50px;margin-left: 80px;}

.situ{width: 60%;margin: 0 auto;display: flex;}

.wenhua img{width: 100%;margin-top: 54px;}

.xian{width: 100%;height: 20px;background-color: #008cd7;margin-top: 20px;}

展示效果：

解决方案代码：

? ? ? ? <div class="jei">

? ? ? ? ? ? <p class="jue">解决方案</p>

? ? ? ? ? ? <p>SOLUTION</p>

? ? ? ? </div>

? ? ? ? <div class="gong">

? ? ? ? ? ? <div class="wei">

? ? ? ? ? ? ? ? <img src="./images/公共卫生.png" alt="">

? ? ? ? ? ? </div>

? ? ? ? ? ? <div class="shen">

? ? ? ? ? ? ? ? <img src="./images/医疗机构.png" alt="">

? ? ? ? ? ? </div>

? ? ? ? </div>

? </div>

Css样式：

.jiejue{margin: 0 auto;}

.jei{font-size: 40px;color: #008cd7;/* margin-left: 820px; */margin-top: 70px;text-align: center;}

.jue{font-size: 45px;color: black;margin-bottom: 50px;/* margin-left: 13px; */}

.gong{/* margin-left: 200px; */margin-top: 60px;display: flex;}

.wei{margin-right: 20px;}

新闻中心代码：

? ? ? ? <div class="xin">

? ? ? ? ? ? <p class="zhong">新闻中心</p>

? ? ? ? ? ? <p>MEDIA?CENETR</p>

? ? ? ? </div>

? ? ? ? <div class="xw">

? ? ? ? ? ? <div class="x">

? ? ? ? ? ? ? ? <img src="./images/万孚新闻.png" alt="">

? ? ? ? ? ? </div>

? ? ? ? ? ? <div class="s">

? ? ? ? ? ? ? ? <img src="./images/行业生态.png" alt="">

? ? ? ? ? ? </div>

? ? ? ? </div>

? ? ? ? <div class="wenzi">

? ? ? ? ? ? <ul class="w">

? ? ? ? ? ? ? ? <li>万孚生物蝉联"创业公司价值50强"</li>