版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领
文档简介
《web应用技术》拓展篇
Web开发框架物联网Web应用技术Web前端框架就是为了节约开发成本和时间，一般开发一个项目都会用到前端框架，常用的前端的框架有Bootstrap、Flex、ExtJS、Easyui、MiniUI、jQueryUI、DWZ、GWT、YUI、Sencha、Dojo、ZK、OperaMasks-UI、JavaFX等。篇章引入章节任务2022年3月1日黄冈教育谷《Web应用技术》物联网Web应用技术项目五
Web开发框架任务一
安防报警系统界面编写回顾HTMLDOM基本操作DOM事件DON节点操作3.如何设置响应式图像?1如何使用框架创建网页？2.如何使用框架实现移动设备优先?4.如何布局排版?任务引入任务描述:安防报警系统界面设计与程序编写任务教学目标：了解常用前端Web框架了解Bootstrap开发框架、组件。掌握Bootstrap环境安装、CDN设置。掌握Bootstrap框架样式的基本使用。。任务概要教学内容Web开发框架Bootstrap的简介和环境安装BootstrapCSS使用安防报警系统界面程序设计一二三四Web开发框架知识点一Web应用框架有助于减轻网页开发时共通性活动的工作负荷，例如许多框架提供数据库访问接口、标准样板以及会话管理等，可提升代码的可再用性。Web开发框架（一）Web开发框架Web前端框架就是为了节约开发成本和时间，一般开发一个项目都会用到前端框架，常用的前端的框架有Bootstrap、Flex、ExtJS、Easyui、MiniUI、jQueryUI、DWZ、GWT、YUI、Sencha、Dojo、ZK、OperaMasks-UI、JavaFX等。Web开发框架（二）Web前端开发框架（二）Web前端开发框架Bootstrap的简介和环境安装知识点二Bootstrap是一个用于快速开发Web应用程序和网站的前端框架。Bootstrap是基于HTML、CSS、JAVASCRIPT的。Bootstrap（一）Bootstrap移动设备优先。浏览器支持：所有的主流浏览器都支持Bootstrap。容易上手：只要具备HTML和CSS的基础知识，就可以开始学习Bootstrap。响应式设计：Bootstrap的响应式CSS能够自适应于台式机、平板电脑和手机。
为开发人员创建接口提供了一个简洁统一的解决方案。包含了功能强大的内置组件，易于定制。提供了基于Web的定制。是开源的。（二）Bootstrap包的内容Bootstrap包的内容：基本结构：带有网格系统、链接样式、背景的基本结构。CSS：全局的CSS设置、定义基本的HTML元素样式、可扩展的class，以及一个先进的网格系统。组件：包含了十几个可重用的组件，用于创建图像、下拉菜单、导航、警告框、弹出框等等。JavaScript插件：包含了十几个自定义的jQuery插件。定制：可以定制Bootstrap的组件、LESS变量和jQuery插件来得到自定义的版本。（三）Bootstrap环境安装Bootstrap安装是非常容易的，可以通过以下两种方式来安装Bootstrap5：使用Bootstrap5CDN；从官网下载Bootstrap5（三）Bootstrap环境安装可以从
/
上下载Bootstrap的最新版本。下载使用Bootstrap的预编译版本。1.从官网下载Bootstrap5（三）Bootstrap环境安装预编译版本文件结构。1.从官网下载Bootstrap5（三）Bootstrap环境安装使用Bootstrap的基本HTML模板<!DOCTYPEhtml><html><head><title>Bootstrap模板</title><metaname="viewport"content="width=device-width,initial-scale=1.0"><!--引入Bootstrap-->
<linkhref="/bootstrap/3.3.7/css/bootstrap.min.css"rel="stylesheet"><!--HTML5Shiv和Respond.js用于让IE8支持HTML5元素和媒体查询--><!--注意：如果通过file://引入Respond.js文件，则该文件无法起效果--><!--[ifltIE9]><scriptsrc="/libs/html5shiv/3.7.0/html5shiv.js"></script><scriptsrc="/libs/respond.js/1.3.0/respond.min.js"></script><![endif]--></head>
1.从官网下载Bootstrap5（三）Bootstrap环境安装使用Bootstrap的基本HTML模板<body><h1>Hello,world!</h1><!--jQuery(Bootstrap的JavaScript插件需要引入jQuery)-->
<scriptsrc="/jquery.js"></script><!--包括所有已编译的插件-->
<scriptsrc="js/bootstrap.min.js"></script></body></html>
Bootstrap的模板：使用一个常规的HTML文件包含jquery.js、bootstrap.min.js和bootstrap.min.css文件。1.从官网下载Bootstrap5（三）Bootstrap环境安装国内推荐使用StaticfileCDN上的库<!--新Bootstrap
核心CSS文件
--><linkhref="/twitter-bootstrap/3.3.7/css/bootstrap.min.css"rel="stylesheet"><!--
jQuery文件。务必在bootstrap.min.js之前引入--><scriptsrc="/jquery/2.1.1/jquery.min.js"></script><!--最新的Bootstrap
核心JavaScript文件--><scriptsrc="/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>还可以使用以下的CDN服务：国内推荐使用:/国际推荐使用：/。2.Bootstrap5CDNBootstrapCSS使用知识点三（一）添加HTML5文档（Doctype）Bootstrap使用了一些HTML5元素和CSS属性。需要使用HTML5文档类型（Doctype）。<!DOCTYPEhtml><html></html>（二）移动设备优先为了让Bootstrap开发的网站对移动设备友好，确保适当的绘制和触屏缩放，需要在网页的head之中添加viewportmeta标签；<metaname="viewport"content="width=device-width,initial-scale=1.0"><metaname="viewport"content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
width=device-width表示宽度是设备屏幕的宽度。
initial-scale=1表示初始的缩放比例。user-scalable=no禁用缩放（zooming）功能maximum-scale=1.0与user-scalable=no一起使用，这样禁用缩放功能后，用户只能滚动屏幕。（二）移动设备优先为了让Bootstrap开发的网站对移动设备友好，确保适当的绘制和触屏缩放，需要在网页的head之中添加viewportmeta标签；<metaname="viewport"content="width=device-width,initial-scale=1.0"><metaname="viewport"content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
width=device-width表示宽度是设备屏幕的宽度。
initial-scale=1表示初始的缩放比例。user-scalable=no禁用缩放（zooming）功能maximum-scale=1.0与user-scalable=no一起使用，这样禁用缩放功能后，用户只能滚动屏幕。（三）响应式图像图像有各种各样的尺寸，需要根据屏幕的大小自动适应。可以通过在<img>标签中添加.img-fluid类来设置响应式图片。.img-fluid类设置了max-width:100%;、height:auto；<imgclass="img-fluid"src="img_chania.jpg"alt="Chania">（四）图片类.rounded类可以让图片显示圆角效果；.rounded-circle类可以设置椭圆形图片；.img-thumbnail类用于设置图片缩略图(图片有边框)；.float-start类来设置图片左对齐；.float-end类设置图片右对齐；.mx-auto(margin:auto)和.d-block(display:block)类来设置图片居中对齐<imgclass="img-fluid"src="img_chania.jpg"alt="Chania"><imgclass="img-fluid"src="img_chania.jpg"alt="Chania"><imgclass="img-fluid"src="img_chania.jpg"alt="Chania"><imgsrc="paris.jpg"class="float-start"><imgsrc="cinqueterre.jpg"class="float-end"><imgsrc="paris.jpg"class="mx-autod-block">（五）容器Bootstrap5需要一个容器元素来包裹网站的内容，可使用以下两个容器类：.container类用于固定宽度并支持响应式布局的容器。.container-fluid类用于100%宽度，占据全部视口（viewport）的容器。。（五）容器<divclass="container">...</div>1.固定宽度：.container
类用于创建固定宽度的响应式页面。宽度(max-width)会根据屏幕宽度同比例放大或缩小。（五）容器<divclass="container-fluid">...</div>2.100%宽度：.container-fluid类用于创建一个全屏幕尺寸的容器，容器始终跨越整个屏幕宽度（width始终为100%）。（五）容器<divclass="container-sm">.container-sm</div><divclass="container-md">.container-md</div><divclass="container-lg">.container-lg</div><divclass="container-xl">.container-xl</div><divclass="container-xxl">.container-xxl</div>3.响应式容器：.container-sm、.container-md、.container-lg、.container-xl类来创建响应式容器。容器的max-width属性值会根据屏幕的大小来改变。（六）网格系统针对不同的设备，Bootstrap5网格系统分为以下6个类：.col-针对所有设备。.col-sm-平板-屏幕宽度等于或大于576px。.col-md-桌面显示器-屏幕宽度等于或大于768px。.col-lg-大桌面显示器-屏幕宽度等于或大于992px。.col-xl-特大桌面显示器-屏幕宽度等于或大于1200px。.col-xxl-超大桌面显示器-屏幕宽度等于或大于1400px。。（六）网格系统在不同设备上设置列宽度。<!--控制列的宽度及在不同的设备上如何显示--><divclass="row">
<divclass="col-*-*"></div></div><divclass="row"><divclass="col-*-*"></div><divclass="col-*-*"></div>
<divclass="col-*-*"></div></div>
创建一行(<divclass="row">)添加需要的列(.col-*-*类中设置)第一个星号(*)表示响应的设备：sm、md、lg或xl；第二个星号(*)表示一个数字，同一行的数字相加为12。（六）网格系统Bootstrap自动处理布局。<!--Bootstrap自动处理布局--><divclass="row"><divclass="col"></div><divclass="col"></div><divclass="col"></div></div>
不在每个col上添加数字，让bootstrap自动处理布局；同一行的每个列宽度相等：两个"col"，每个就为50%的宽度；三个"col"每个就为33.33%的宽度；四个"col"每个就为25%的宽度。（七）Bootstrap浏览器/设备支持Bootstrap支持最新版本的浏览器和平台。ChromeFirefoxIEOperaSafariAndroidYESYES不适用不适用不适用iOSYES不适用不适用不适用YESMacOSXYESYES不适用YESYESWindowsYESYESYES*YES不适用安防报警系统界面程序设计知识点四（一）Bootstrap环境创建1.下载Bootstrap从
/
上下载Bootstrap的最新版本。下载CompiledCSSandJS预编译的版本（一）Bootstrap环境创建2.创建img文件夹在bootstrap-5.1.3-dist文件目录下，创建img文件夹。（一）Bootstrap环境创建<!DOCTYPEhtml><html><head> <title>Bootstrap模板</title> <metaname="viewport"content="width=device-width,initial-scale=1.0"> <linkrel="stylesheet"href="/twitter-bootstrap/3.3.7/css/bootstrap.min.css"> <scriptsrc="/jquery/2.1.1/jquery.min.js"></script> <scriptsrc="/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> <!--[ifltIE9]> <scriptsrc="/libs/html5shiv/3.7.0/html5shiv.js"></script> <scriptsrc="/libs/respond.js/1.3.0/respond.min.js"></script> <![endif]--></head><body> <h1>Hello,world!</h1> <scriptsrc="/jquery.js"></script> <scriptsrc="js/bootstrap.min.js"></script></body></html>3.创建HTML模板在bootstrap-5.1.3-dist文件目录下，创建HTML模板.html文件；在HTML模板.html文件中添加代码，代码如下（二）创建安防报警系统界面新建“安防报警系统界面”项目，并新建“安防报警系统界面.html”。复制模板代码，粘贴代码到“安防报警系统界面”文件中。（三）添加安防报警系统界面页面内容<!DOCTYPEhtml><html><head> <metacharset="UTF-8">
<title>安防报警</title><linkrel="stylesheet"href="/twitter-bootstrap/3.3.7/css/bootstrap.min.css"> <scriptsrc="/jquery/2.1.1/jquery.min.js"></script> <scriptsrc="/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script></head>在head部分将文档标题修改为“安防报警系统”；1.修改head中标题（三）添加安防报警系统界面页面内容<divclass="container"><h1>安防报警</h1><divclass="row"> <divclass="col-md-4col-md-push-8">
。。。
</div><divclass="col-md-8col-md-pull-4"> <h3>报警记录</h3> <tableclass="tabletable-striped"> <thead>
。。。
</thead> <tbody>
。。。 </tbody></table></div></div></div> 去掉body中原有内容，在body中添加container：在container中添加内容：添加一级标题“安防报警”；添加Bootstrap网格行（创建页面布局）创建网格列，列宽为4个网格，并右移8个网格创建网格列，列宽为8个网格，并左移4个网格2.添加body中安防报警系统界面页面内容（三）添加安防报警系统界面页面内容3.运行效果（三）添加安防报警系统界面页面内容3.运行效果如何使用框架实现移动设备优先?如何设置响应式图像?思考问题本任务学习了Bootstrap的基础知识。包括如下内容：1.Bootstrap环境安装；2.BootstrapCSS使用；任务小结1.
个人介绍HTML页面.
页面标题:xxx自我介绍
页面内容：
使用Bootstrap框架创建；
实现移动设备优先；
插入响应式个人风采图片作业谢谢！THANKS!黄冈教育谷2022年3月1日《Web应用技术》物联网Web应用技术项目五
Web开发框架任务二
温湿度调节界面编写回顾Web开发框架Bootstrap环境安装BootstrapCSS使用3.如何滚动监听?1.如何使用导航样式栏？2.如何设置表格样式和表格斑马线?4.如何设置图片样式?任务引入任务描述:温湿度调节界面设计与程序编写任务教学目标：掌握Bootstrap布局使用掌握Bootstrap插件的基本使用。任务概要教学内容Bootstrap的布局Bootstrap插件温湿度调节界面程序设计一二三Bootstrap的布局知识点一下拉菜单是可切换的，是以列表格式显示链接的上下文菜单。这可以通过与下拉菜单（Dropdown）JavaScript插件的互动来实现。下拉菜单（一）Bootstrap下拉菜单（一）Bootstrap下拉菜单.dropdown类用来指定一个下拉菜单。使用下拉菜单，在class.dropdown内加上下拉菜单即可。1.Bootstrap下拉菜单（Dropdowns）<divclass="dropdown">
。。。</div>（一）Bootstrap下拉菜单使用按钮或链接打开下拉菜单。按钮或链接需要添加.dropdown-toggle和data-toggle="dropdown"属性。1.Bootstrap下拉菜单（Dropdowns）<divclass="dropdown">
<buttontype="button"class="btnbtn-primarydropdown-toggle"data-bs-toggle="dropdown"> 下拉菜单按钮 </button>。。。</div>设置下拉菜单三角图标：添加.dropdown-toggle属性效果；没有添加.dropdown-toggle属性效果。设置下拉菜单下拉功能：添加此属性则有下拉功能；未添加此属性则没有下拉功能。（一）Bootstrap下拉菜单<div>元素上添加.dropdown-menu类来设置实际下拉菜单在下拉菜单的选项中添加.dropdown-item类。1.Bootstrap下拉菜单（Dropdowns）<divclass="dropdown">
<buttontype="button"class="btnbtn-primarydropdown-toggle"data-bs-toggle="dropdown"> 下拉菜单按钮 </button>
<divclass="dropdown-menu">
<aclass="dropdown-item"href="#">链接1</a>
<aclass="dropdown-item"href="#">链接2</a>
<aclass="dropdown-item"href="#">链接3</a>
</div></div>设置下拉菜单设置下拉菜单选项（一）Bootstrap下拉菜单1.Bootstrap下拉菜单（Dropdowns）<divclass="dropdown">
<buttontype="button"class="btnbtn-primarydropdown-toggle"data-bs-toggle="dropdown">
下拉菜单按钮
</button>
<divclass="dropdown-menu">
<aclass="dropdown-item"href="#">链接1</a>
<aclass="dropdown-item"href="#">链接2</a>
<aclass="dropdown-item"href="#">链接3</a>
</div></div>（一）Bootstrap下拉菜单.dropdown-divider
类用于在下拉菜单中创建一个水平的分割线。2.Bootstrap下拉菜单分割线<li><hrclass="dropdown-divider"></hr></li>
（一）Bootstrap下拉菜单.dropdown-header类用于在下拉菜单中添加标题。3.Bootstrap下拉菜单中的标题<ulclass="dropdown-menu"><li><h5class="dropdown-header">标题1</h5></li><li><aclass="dropdown-item"href="#">链接1</a></li><li><aclass="dropdown-item"href="#">链接2</a></li><li><aclass="dropdown-item"href="#">链接3</a></li><li><h5class="dropdown-header">标题2</h5></li><li><aclass="dropdown-item"href="#">链接4</a></li></ul>（一）Bootstrap下拉菜单.active类会让下拉菜单的选项高亮显示(添加蓝色背景)。.disabled类，禁用下拉菜单的选项。4.Bootstrap下拉菜单中的可用项与禁用项<aclass="dropdown-item"href="#">常规项</a><aclass="dropdown-itemactive"href="#">激活项</a><aclass="dropdown-itemdisabled"href="#">禁用项</a>（一）Bootstrap下拉菜单下拉菜单弹出方向：.dropdown类后添加.dropend是右边弹出菜单；
.dropdown类后添加.dropstart是左边弹出菜单；.dropdown类后添加.dropdown-menu-end是下拉菜单右下方弹出。5.Bootstrap下拉菜单中弹出方向<!--右边弹出显示--><divclass="dropdowndropend">...</div>（一）Bootstrap下拉菜单下拉菜单弹出方向：5.Bootstrap下拉菜单中弹出方向<!--左边弹出显示--><divclass="dropdowndropstart">...</div><!--右下方下拉菜单按钮--><divclass="dropdowndropdown-menu-end">...</div>（一）Bootstrap下拉菜单上拉菜单向上弹出，可以在div元素上添加"dropup"类。6.Bootstrap向上弹出的上拉菜单<!--向上菜单--><divclass="dropup">...</div>（一）Bootstrap下拉菜单.dropdown-item-text类可以设置下拉菜单中的文本项。7.Bootstrap下拉菜单设置文本<ulclass="dropdown-menu"><li><aclass="dropdown-item"href="#">链接1</a></li>
。。。<li><aclass="dropdown-item-text"href="#">文本链接</a></li><li><spanclass="dropdown-item-text">仅仅是文本</span></li></ul>导航栏一般放在页面的顶部。使用
.navbar
类来创建一个标准的导航栏；后面添加.navbar-expand-xxl、.navbar-expand-xl、.navbar-expand-lg、.navbar-expand-md
或
.navbar-expand-sm
类来创建响应式的导航栏(大屏幕水平铺开，小屏幕垂直堆叠)。导航栏（二）Bootstrap导航栏（二）Bootstrap导航栏.navbar
类来创建一个标准的导航栏。添加.navbar-expand-sm，创建响应式的导航栏(大屏幕水平铺开，小屏幕垂直堆叠)。1.创建Bootstrap导航栏<!--小屏幕上水平导航栏会切换为垂直的--><navclass="navbar
navbar-expand-smbg-light">
。。。</nav>大屏幕上导航栏效果小屏幕上导航栏效果（二）Bootstrap导航栏导航栏上的选项区可以使用
<ul>
元素并添加
class="navbar-nav"
类。1.创建Bootstrap导航栏<!--小屏幕上水平导航栏会切换为垂直的--><navclass="navbar
navbar-expand-smbg-light">
<ulclass="navbar-nav">
。。。
</ul></nav>（二）Bootstrap导航栏选项区中的选项可以在
<li>
元素上添加
.nav-item
类；<a>
元素上使用
.nav-link
类，添加选项链接。1.创建Bootstrap导航栏<!--小屏幕上水平导航栏会切换为垂直的--><navclass="navbar
navbar-expand-smbg-light">
<ulclass="navbar-nav"> <liclass="nav-item"> <aclass="nav-link"href="#">Link1</a> </li>
。。。
</ul></nav>（二）Bootstrap导航栏创建垂直导航栏：使用.navbar
类来创导航栏，后面不添加.navbar-expand-xxl、xl/lg/md/sm
类；居中对齐的导航栏：通过添加.justify-content-center类来创建居中对齐的导航栏；不同颜色导航栏：使用.bg-primary、.bg-success、.bg-info、.bg-warning、.bg-danger、.bg-secondary、.bg-dark和.bg-light；。1.创建Bootstrap导航栏<!--垂直导航栏--><navclass="navbar
justify-content-center
bg-light">
。。。</nav>（二）Bootstrap导航栏.navbar-brand类用于高亮显示品牌/Logo。2.Bootstrap导航栏品牌/Logo显示<navclass="navbarnavbar-expand-smbg-darknavbar-dark"><aclass="navbar-brand"href="#">Logo</a>...</nav>
（二）Bootstrap导航栏使用.navbar-brand类来设置图片自适应导航栏。2.Bootstrap导航栏品牌/Logo显示<navclass="navbarnavbar-expand-smbg-darknavbar-dark">
<aclass="navbar-brand"href="#">
<imgsrc="bird.jpg"alt="Logo"style="width:40px;">
</a>
...</nav>
（二）Bootstrap导航栏折叠导航栏：小屏幕上折叠导航栏，通过点击来显示导航选项。在按钮上添加class="navbar-toggler"、data-bs-toggle="collapse"与data-target="#thetarget"类。2.Bootstrap折叠导航栏<navclass="navbarnavbar-expand-mdbg-darknavbar-dark">
<aclass="navbar-brand"href="#">Navbar</a>
<buttonclass="navbar-toggler"type="button"data-bs-toggle="collapse"data-bs-target="#collapsibleNavbar"> <spanclass="navbar-toggler-icon"></span> </button>
...</nav>
折叠导航栏按钮按钮上显示三条横线（二）Bootstrap导航栏在设置了class="collapsenavbar-collapse"类的div上包裹导航内容（链接），div元素上的id匹配按钮data-target的上指定的id。2.Bootstrap折叠导航栏<navclass="navbarnavbar-expand-mdbg-darknavbar-dark">
<aclass="navbar-brand"href="#">Navbar</a>
<buttonclass="navbar-toggler"type="button"data-bs-toggle="collapse"data-bs-target="#collapsibleNavbar"> <spanclass="navbar-toggler-icon"></span> </button>
<divclass="collapsenavbar-collapse"id="collapsibleNavbar">
<ulclass="navbar-nav">
<liclass="nav-item"><aclass="nav-link"href="#">Link</a></li>
...
</ul>
</div></nav>
设置导航内容（二）Bootstrap导航栏导航栏可以固定在头部或者底部。使用.fixed-top类来实现导航栏的固定。.fixed-bottom类用于设置导航栏固定在底部：3.Bootstrap固定导航栏<navclass="navbarnavbar-expand-smbg-darknavbar-darkfixed-top">
...</nav><navclass="navbarnavbar-expand-smbg-darknavbar-darkfixed-bottom">
...</nav>Bootstrap5通过.table类来设置基础表格的样式。表格（三）Bootstrap表格<tableclass="table">
<thead>
<tr>
。。。
</tr>
</thead>
<tbody>
<tr>
。。。
</tr>
</tbody></table>（三）Bootstrap表格通过添加.table-striped类，在<tbody>内的行上添加条纹。1.Bootstrap条纹表格<tableclass="tabletable-striped">
<thead>
。。。
</thead>
<tbody>
。。。
</tbody></table>（三）Bootstrap表格.table-bordered类可以为表格添加边框。2.Bootstrap带边框表格<tableclass="tabletable-bordered">
。。。</table>（三）Bootstrap表格.table-hover类可以为表格的每一行添加鼠标悬停效果（灰色背景）。3.鼠标悬停状态表格<tableclass="tabletable-hover">
。。。</table>（三）Bootstrap表格.table-dark类可以为表格添加黑色背景。4.Bootstrap黑色背景表格<tableclass="tabletable-dark">
。。。</table>（三）Bootstrap表格Bootstrap表格颜色类5.Bootstrap表格行或单元格颜色设置类名描述.table-primary蓝色:指定这是一个重要的操作.table-success绿色:指定这是一个允许执行的操作.table-danger红色:指定这是可以危险的操作.table-info浅蓝色:表示内容已变更.table-warning橘色:表示需要注意的操作.table-active灰色:用于鼠标悬停效果.table-secondary灰色:表示内容不怎么重要.table-light浅灰色，可以是表格行的背景.table-dark深灰色，可以是表格行的背景（三）Bootstrap表格设置表格行的颜色。5.Bootstrap表格行或单元格颜色设置<tableclass="table">。。。<trclass="table-primary"><td>Primary</td><td>Joe</td><td>joe@</td></tr>。。。</table>（三）Bootstrap表格设置表头的颜色。5.Bootstrap表格行或单元格颜色设置<tableclass="table">。。。<theadclass="table-dark"><tr><th>Firstname</th><th>Lastname</th><th>Email</th></tr></thead>。。。</table>（三）Bootstrap表格.table-responsive类用于创建响应式表格：在屏幕宽度小于992px时会创建水平滚动条，如果可视区域宽度大于992px则显示不同效果（没有滚动条）。6.Bootstrap响应式表格<divclass="table-responsive"><tableclass="table">。。。</table></div>（四）Bootstrap输入框组Bootstrap输入框组扩展自表单控件。使用输入框组，可以很容易地向基于文本的输入框添加作为前缀和后缀的文本或按钮。向
.form-control
添加前缀或后缀元素的步骤如下：把前缀或后缀元素放在一个带有class
.input-group
的<div>中；在相同的<div>内，在class为
.input-group-addon
的<span>内放置额外的内容；<formclass="bs-examplebs-example-form"role="form"><divclass="input-group"><spanclass="input-group-addon">@</span><inputtype="text"class="form-control"placeholder="twitterhandle">
</div></form>（四）Bootstrap输入框组把该<span>放置在<input>元素的前面或者后面。<formclass="bs-examplebs-example-form"role="form"><divclass="input-group"><spanclass="input-group-addon">@</span><inputtype="text"class="form-control"placeholder="twitterhandle">
</div>
<br><divclass="input-group"><inputtype="text"class="form-control"><spanclass="input-group-addon">.00</span></div><br><divclass="input-group"><spanclass="input-group-addon">$</span><inputtype="text"class="form-control"><spanclass="input-group-addon">.00</span></div></form>span在前面span在后面（五）Bootstrap滚动监听向需要监听的元素（通常是body）添加data-bs-spy="scroll"。然后添加data-bs-target属性，属性值为导航栏的id或class(.navbar)。以此设置可滚动区域。可选项data-bs-offset属性用于计算滚动位置，距离顶部的偏移像素。默认为10px。1.导航栏滚动监听<!--可滚动区域--><bodydata-bs-spy="scroll"data-bs-target=".navbar"
data-bs-offset="50"><!--导航栏-<a>元素用于跳到指定滚动区域--><navclass="navbarnavbar-expand-smbg-darknavbar-darkfixed-top">...</nav>（五）Bootstrap滚动监听可滚动项元素上的id（<divid="section1">）必须匹配导航栏上的链接选项（<ahref="#section1">)。1.导航栏滚动监听<bodydata-bs-spy="scroll"data-bs-target=".navbar"data-bs-offset="50"><navclass="navbarnavbar-expand-smbg-darknavbar-darkfixed-top">...<ulclass="navbar-nav"><li><ahref="#section1">Section1</a></li>...</nav><divid="section1"><h1>Section1</h1><p>Trytoscrollthispageandlookatthenavigationbarwhilescrolling!</p>
</div>...</body>（五）Bootstrap滚动监听向需要监听的元素添加data-bs-spy="scroll"。然后添加data-bs-target属性，属性值为列表组的的id或class(.navbar)。以此设置可滚动区域。可选项data-bs-offset属性用于计算滚动位置，距离顶部的偏移像素。默认为10px。2.列表组滚动监听<divid="list-example"class="list-group"><aclass="list-group-itemlist-group-item-action"href="#list-item-1">Item1</a>...</div><divdata-bs-spy="scroll"data-bs-target="#list-example"data-bs-offset="0"class="scrollspy-example"tabindex="0">（五）Bootstrap滚动监听可滚动项元素上的id（<h4id="list-item-1">）必须匹配列表中的链接选项（href="#list-item-1")。2.列表组滚动监听<divid="list-example"class="list-group"><aclass="list-group-itemlist-group-item-action"href="#list-item-1">Item1</a>...</div><divdata-bs-spy="scroll"data-bs-target="#list-example"data-bs-offset="0"class="scrollspy-example"tabindex="0"><h4id="list-item-1">Item1</h4><p>...</p>...</div>（五）Bootstrap标签标签可用于计数、提示或页面上其他的标记显示。使用class.label来显示标签。<h1>ExampleHeading<spanclass="labellabel-default">Label</span></h1><h2>ExampleHeading<spanclass="labellabel-default">Label</span></h2><h3>ExampleHeading<spanclass="labellabel-default">Label</span></h3><h4>ExampleHeading<spanclass="labellabel-default">Label</span></h4>Bootstrap插件知识点二Bootstrap自带12种jQuery插件。利用Bootstrap数据API（BootstrapDataAPI），大部分的插件可以在不编写任何代码的情况下被触发。Bootstrap插件Bootstrap
插件站点引用Bootstrap插件的方式有两种：
单独引用：使用Bootstrap的个别的*.js文件。一些插件和CSS组件依赖于其他插件。单独引用插件，必须了解这些插件之间的依赖关系。编译（同时）引用：使用bootstrap.js或压缩版的bootstrap.min.js。不要尝试同时引用这两个文件，bootstrap.js和bootstrap.min.js都包含了所有的插件。（一）Bootstrap插件
Data属性通过data属性API就能使用所有的Bootstrap插件，无需写一行JavaScript代码。滚动监听（Scrollspy）插件的data属性插件使用如下所示：1.Data属性插件使用<!--可滚动区域--><bodydata-bs-spy="scroll"data-bs-target=".navbar"
data-bs-offset="50"><!--导航栏-<a>元素用于跳到指定滚动区域--><navclass="navbarnavbar-expand-smbg-darknavbar-darkfixed-top">...</nav>（一）Bootstrap插件
Data属性在某些情况下可能需要将此功能关闭。关闭data属性API的方法，即解除以
data-api
为命名空间并绑定在文档上的事件。2.Data属性插件功能关闭方法$(document).off('.data-api')如需关闭一个特定的插件，只需要在data-api命名空间前加上该插件的名称作为命名空间即可。$(document).off('.alert.data-api')（二）插件JavaScrip方式的API为所有Bootstrap插件提供了纯JavaScript方式的API。所有公开的API都是支持单独或链式调用方式，并且返回其所操作的元素集合。所有的方法都可以使用对象作为参数。$('body').scrollspy({target:'.navbar-example'})
//滚动监听$("#myModal").modal()
//初始化为默认行为
$("#myModal").modal({keyboard:false})
//初始化为不支持键盘$("#myModal").modal('show')
//初始化并立即调用show（三）命名空间冲突避免方法Bootstrap插件有可能需要与其他UI框架一起使用,可能会发生命名空间冲突。如发生了这种情况，可以通过调用插件的.noConflict方法恢复其原始值。//返回$.fn.button之前所赋的值varbootstrapButton=$.fn.button.noConflict()//为$().bootstrapBtn赋予Bootstrap功能$.fn.bootstrapBtn=bootstrapButton（四）Bootstrap事件Bootstrap为大多数插件的独特行为提供了自定义事件。一般来说，这些事件有两种形式:动词不定式：事件开始时被触发。例如ex:show。动词不定式事件提供了preventDefault功能。在事件开始前可以停止操作的执行。过去分词形式：在动作执行完毕之后被触发。例如ex:shown。$('#myModal').on('show.bs.modal',function(e){//阻止模态框的显示if(!data)returne.preventDefault()})温湿度调节界面程序设计知识点三（一）创建温湿度调节界面新建“温湿度调节界面”项目，并新建“温湿度调节界面.html”。复制模板代码，粘贴代码到“安防报警系统界面”文件中。（二）添加温湿度调节界面页面内容<!DOCTYPEhtml><html><head> <metacharset="UTF-8">
<title>温湿度调节</title><linkrel="stylesheet"href="/twitter-bootstrap/3.3.7/css/bootstrap.min.css"> <scriptsrc="/jquery/2.1.1/jquery.min.js"></script> <scriptsrc="/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script></head>在head部分将文档标题修改为“温湿度调节”；1.修改head中标题（二）添加温湿度调节界面页面内容添加选项卡导航栏样式设置代码；添加导航栏选项样式设置代码；添加首选项特殊样式；添加链接样式；添加首选项链接特殊样式；添加末选项链接特殊样式；添加激活链接或鼠标滑过链接样式锁定导航栏位置1.head中设置导航栏样式（二）添加温湿度调节界面页面内容<script>$(document).ready(function(){$("#myNav").affix({offset:{top:125}});});</script>实现鼠标滚过页面加载完成后，设置导航栏偏移125；3.JavaScript手动添加鼠标滚过后附加导航（二）添加温湿度调节界面页面内容<divclass="col-xs-3"id="myScrollspy"> <ulclass="navnav-tabsnav-stacked"id="myNav">
。。。
</ul></div><divclass="col-xs-9"> <h2id="section-1">温度</h2> <divclass="fakeimg">
。。。
</div> <h4>温度采集</h4> <tableclass="tabletable-striped"> <caption></caption> <thead>
。。。 </thead> <tbody>
。。。 </tbody> </table> </div>去掉body中原内容，创建滚动监听；在body中添加container，并添加Jumbotron；在container中添加内容：添加Bootstrap网格行创建网格列，列宽为3个网格添加导航栏创建网格列，列宽为9个网格添加二级标题“温度”添加测试图片添加四级标题“温度采集”添加表格，设置斑马线条纹4.添加body中温湿度调节界面页面内容（二）添加温湿度调节界面页面内容5.运行效果（二）添加温湿度调节界面页面内容5.运行效果如何使用导航样式栏?如何设置表格样式和表格斑马线?思考问题本任务学习了Bootstrap的基础知识。包括如下内容：1.Bootstrap布局需要的下拉菜单、导航栏、表格、输入框等；2.Bootstrap
的插件的使用；任务小结1.
个人介绍HTML页面.
页面标题:xxx自我介绍
页面内容：
在已完成的Bootstrap框架完成的个人介绍项目中，加入导航栏、下拉菜单、表格等内容；
在导航栏中使用滚动监听。作业谢谢！THANKS!黄冈教育谷2022年3月1日《Web应用技术》物联网Web应用技术项目五
Web开发框架任务三
家居光强调节界面编写回顾Bootstrap布局需要的下拉菜单、导航栏、表格、输入框等；Bootstrap的插件的使用2.如何获取按钮点击事件并切换显示图标?1.如何获取屏幕分表率？任务引入任务描述:家居光强调节界面设计与程序编写任务教学目标：掌握jQuery的安装使用掌握jQuery的语法掌握jQuery选择器的使用掌握jQuery的事件调用掌握jQuery操作HTML的方法。任务概要教学内容jQuery
简介与安装jQuery
语法jQuery选择器jQuery事件一二三四家居光强调节界面设计五jQuery简介与安装知识点一jQuery是一个轻量级的“写的少，做的多”的JavaScript库jQuery（一）什么是jQuery？jQuery库包含以下功能：lHTML元素选取lHTML元素操作lCSS操作lHTML事件函数lJavaScript特效和动画lHTMLDOM遍历和修改lAJAXlUtilities提示：
除此之外，Jquery还提供了大量的插件。网络上有大量开源的JS框架,jQuery是目前最流行的JS框架；jQuery提供了大量的扩展；Google、Microsoft、IBM、Netflix等公司都在使用jQuery。（二）jQuery安装通过多种方法可在网页中添加jQuery，可用方法如下：从
下载jQuery库从CDN中载入jQuery,如从Google中加载jQuery。（二）jQuery安装有两个版本的jQuery可供下载：Productionversion-用于实际的网站中，已被精简和压缩。Developmentversion-用于测试和开发（未压缩，是可读的代码）。1.下载jQuery<head><scriptsrc="jquery-1.10.2.min.js"></script></head>下载地址：
中下载。jQuery库是一个JavaScript文件，可以使用HTML的<script>标签引用。（二）jQuery安装StaticfileCDN、百度、又拍云、新浪、谷歌和微软的服务器都存有jQuery。国内用户的站点，建议使用百度、又拍云、新浪等国内CDN地址；国外用户的站点可以使用谷歌和微软。如需从StaticfileCDN、又拍云、新浪、谷歌或微软引用jQuery，请使用以下代码。2.从CDN中载入jQuery（二）jQuery安装StaticfileCDN：2.从CDN中载入jQuery<head>
<scriptsrc="/jquery/1.10.2/jquery.min.js"></script></head>（二）jQuery安装百度CDN：2.从CDN中载入jQuery<head><scriptsrc="/libs/jquery/2.1.4/jquery.min.js"></script></head>（二）jQuery安装又拍云CDN：2.从CDN中载入jQuery<head><scriptsrc="/libs/jquery/jquery-2.0.2.min.js"></script></head>（二）jQuery安装新浪CDN：2.从CDN中载入jQuery<head><scriptsrc="/js/jquery/2.0.2/jquery-2.0.2.min.js"></script></head>（二）jQuery安装GoogleCDN：2.从CDN中载入jQuery<head><script
src="/ajax/libs/jquery/1.10.2/
jquery.min.js"></script></head>（二）jQuery安装MicrosoftCDN：2.从CDN中载入jQuery<head><scriptsrc="/ajax/jquery/jquery-1.9.0.min.js"></script></head>（二）jQuery安装如果网站包含许多页面，希望jQuery函数易于维护，可把jQuery函数放到独立的.js文件中。当使用jQuery时，会将函数直接添加到<head>部分中。但是放到一个单独的文件中，通过src属性来引用文件，更为方便。3.独立文件中使用jQuery函数<head><scriptsrc="/libs/jquery/1.10.2/
jquery.min.js"></script><scriptsrc="my_jquery_functions.js"></script></head>jQuery语法知识点二（一）基础语法：使用美元符号（$）定义jQuery选择符（selector）“查询”和“查找”HTML元素jQuery的action()执行对元素的操作：
基础语法
$(selector).action()jQuery语法是通过选取HTML元素，并对选取的元素执行某些操作。$(this).hide()-隐藏当前元素$("p").hide()-隐藏所有<p>元素$("p.test").hide()-隐藏所有class="test"的<p>元素$("#test").hide()-隐藏id="
温馨提示
- 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
- 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
- 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
- 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
- 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
- 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
- 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。
最新文档
- 新生儿科血液透析管路铂沉积应急救援预案演练脚本
- 石油化工安全知识考测试题及答案
- a2驾驶证模拟考试题-驾驶员理论考试试卷与试题及答案
- 2026全国特种设备作业人员(Q2)起重司机(限流动式)真题(含答案)
- 双重预防体系试题(危化品)含答案
- 城镇综合管廊入廊管线施工方案及技术措施
- 儿科停电应急演练脚本演练方案
- 质量教育培训体系建立措施
- 语文一年级下册《端午粽》
- 2026江苏南京大学YJ20260134天文与空间科学学院博士后招聘1人参考题库附参考答案详解（精练）
- DL∕T 5344-2018 电力光纤通信工程验收规范
- 医生兼职劳务合同范本
- 2024年佛山市南海区五年级数学第二学期期末学业水平测试模拟试题含解析
- SL+303-2017水利水电工程施工组织设计规范
- JBT 12550-2015 气动减压阀标准规范
- 珍爱生命预防溺水主题班会课件
- 2023CAXA PLM协同管理图文档用户手册
- 高中信息技术-会考-知识点梳理
- 2023版设备管理体系标准
- 临床血液学和血液学检验-血象和骨髓象检验课件
- (7.4)-2.3.1珍珠的鉴别中药养颜秘籍
评论
0/150
提交评论