目录
一、网页概述
一、前言
二、网页文件
三、网页效果
四、代码展示
1.HTML
2.CSS
3.JS
欢迎来到我的CSDN主页！Web前端网页制作、大学生期末大作业、课程设计、毕业设计、网页模版源码、学习资料等，更多优质博客文章、网页模板点击以下链接查阅：
仙女网页设计-CSDN博客
5000+完整代码，主题涵盖30+种类型:
一、网页概述
大气的响应式人力资源培训管理公司网页实例，应用html+css+js，响应式布局，可以根据不同的设备屏幕大小自动调整页面布局，手机等移动设备自适应界面，提高用户体验；支持包括IE、Firefox、Chrome、Safari等主流浏览器。 本实例适用于公司建站、大学生网页课程作业设计的应用，供大家参考。html+css+js网页设计、大学生网页课程设计、期末大作业、毕业设计、网页模板，DW网页成品源代码等，2000+套Web案例源码，优质文章，关注作者获取更多源码，点赞收藏博文，您的支持是我创作的动力！3Q！
二、网页文件
三、网页效果
以下为网页正文（节选示例）：
四、代码展示
1.HTML
代码如下（节选示例）：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="keywords" content="">
<title>上海沛鸿网络科技有限公司</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/hwslider.css" rel="stylesheet">
<link href="css/fonts.css" rel="stylesheet">
<link href="css/reset.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<header>
<div class="he-top clearfix">
<div class="container">
<p class="left">欢迎来到上海沛鸿网络科技有限公司</p>
<ul class="right pin">
<li><a href="index.html">首页</a></li>
<li><a href="new.html">新闻</a></li>
<li><p>服务热线：021-61984237</p></li>
</ul>
</div>
</div>
<div class="container">
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"><img src="images/logo.png"></a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li><a class="active" href="index.html">首页</a></li>
<li><a href="about.html">关于我们</a></li>
<li><a href="serive.html">公司服务</a></li>
<li><a href="new.html">新闻资讯</a></li>
<li><a href="contact.html">联系我们</a></li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
</div>
</header>
<!--幻灯片-->
<section>
<div id="hwslider" class="hwslider">
<ul>
<li><a href="#"><img src="images/rsb1.jpg" alt=""></a></li>
<li><a href="#"><img src="images/banner3.png" alt=""></a></li>
<li><a href="#"><img src="images/banner2.png" alt=""></a></li>
</ul>
</div>
<div class="introduce">
<div class="container">
<figure class="col-sm-3">
<p>专注<span>8</span>年</p>
</figure>
<figure class="col-sm-3">
<p>辐射<span>300<sup>+</sup></span>城市</p>
</figure>
<figure class="col-sm-3">
<p>服务<span>5000<sup>+</sup></span>企业</p>
</figure>
<figure class="col-sm-3">
<p>服务<span>10000<sup>+</sup></span>员工</p>
</figure>
</div>
</div>
</section>
<!--服务-->
<section class="service">
<div class="container">
<h2>我们的服务</h2>
<ul class="clearfix">
<li class="col-sm-6 col-md-4 clearfix ">
<div class="f1">
<div><img src="images/2-01.png"</div>
<div class="">
<h3>劳务派遣服务</h3>
<p>劳务派遣是指是指由劳务派遣机构与派遣劳工订立劳动合同，并支付报酬的一种用工形式。</p>
</div>
</div>
</li>
<li class="col-sm-6 col-md-4 clearfix">
<div class="f2">
<div><img src="images/2-02.png"</div>
<div class="">
<h3>服务外包</h3>
<p>制造承包即制造项目（流程）承包，与劳务派谴一样均是用工方式的一种。</p>
</div>
</div>
</li>
<li class="col-sm-6 col-md-4 clearfix">
<div class="f3">
<div><img src="images/2-03.png"</div>
<div class="">
<h3>专业人事代理</h3>
<p>一种全方位的人力资源服务产品,根据需要将某一项或几项人力资源管理工作或职能外包出去</p>
</div>
</div>
</li>
<li class="col-sm-6 col-md-4 clearfix">
<div class="f4">
<div><img src="images/2-04.png"</div>
<div class="">
<h3>后勤服务</h3>
<p>为客户创造更大的价值。将有限的资源和精力投入到核心业务上，才能最大化的产生价值。</p>
</div>
</div>
</li>
<li class="col-sm-6 col-md-4 clearfix">
<div class="f5">
<div><img src="images/2-05.png"</div>
<div class="">
<h3>临时性用工</h3>
<p>根据灵活的用人数据库资源，可以提供给客户最短工作7天的员工。</p>
</div>
</div>
</li>
<li class="col-sm-6 col-md-4 clearfix">
<div class="f6">
<div><img src="images/2-06.png"</div>
<div class="">
<h3>招聘外包</h3>
<p>企事业单位将某个岗位的所有人力资源工作完全外包给第三方人力资源服务机构</p>
</div>
</div>
</li>
</ul>
</div>
</section>
<!--关注-->
<section class="focus">
<div class="container clearfix">
<div class="fo-ti">
<h2>我们最引以为豪，是一直以来的“关注”</h2>
<p>we are most proud,it is has been "focus"</p>
</div>
<div class="clearfix">
<figure class="col-sm-6 col-md-3">
<img src="images/g1.png">
<figcaption>汇集众多优秀人才</figcaption>
</figure>
<figure class="col-sm-6 col-md-3">
<img src="images/g2.png">
<figcaption>职位真实快速反馈</figcaption>
</figure>
<figure class="col-sm-6 col-md-3">
<img src="images/g3.png">
<figcaption>企业招聘更快更精准</figcaption>
</figure>
<figure class="col-sm-6 col-md-3">
<img src="images/g4.png">
<figcaption>信息认证安全可信</figcaption>
</figure>
</div>
<div class="customer clearfix">
<div class="cus-left col-md-4">
<h2>better experience<strong>客户至上，秒速响应</strong></h2>
<p>猎头平均每年为客户推荐194937个候选人，参与面试48734人/次以上，更专业更搞效，81.3%以上的企业与我们合作后选择在此续约。</p>
</div>
<div class="cus-right col-md-8">
<ul>
<li class="col-sm-6 bot15">
<div class="col-sm-2"><i class="icon-users"></i></div>
<div class="col-sm-10">
<strong>8440家签约客户</strong>
<p>专注整合本土人才资源，简历库中包含百万份本土中高端人才简历</p>
</div>
</li>
<li class="col-sm-6 bot15">
<div class="col-sm-2"><i class="icon-office"></i></div>
<div class="col-sm-10">
<strong>民营企业</strong>
<p>迅猛发展的民营企业占客户的75%以上，81.3%的他们选择在次合作</p>
</div>
</li>
<li class="col-sm-6">
<div class="col-sm-2"><i class="icon-stats-dots"></i></div>
<div class="col-sm-10">
<strong>初创企业</strong>
<p>全民创业，万众创新，初创公司在猎头的全方位人力资源支持下走的更远</p>
</div>
</li>
<li class="col-sm-6">
<div class="col-sm-2"><i class="icon-address-card-o"></i></div>
<div class="col-sm-10">
<strong>7天招聘季</strong>
<p>360゜寻访，精准推荐，专业测试和背调，可实现平均7-45天人选上岗</p>
</div>
</li>
</ul>
</div>
</div>
</div>
</section>
<!--优势-->
<section class="advantage">
<div class="container">
<div class="ad-ti">
<h2>优势,专业为您</h2>
<p>用更真诚的心，给您带来更优的服务</p>
</div>
<div class="ad-nei clearfix">
<ul>
<li class="col-md-6 clearfix">
<div class="col-sm-3 "><img src="images/st_03.png"></div>
<div class="col-sm-9 ">
<strong>全国性的点对点服务</strong>
<p>全国直营包括分公司和子公司已达到90多家，联盟企业遍及全国所有城市，可以为客户提供点对点的落地服务。</p>
</div>
</li>
<li class="col-md-6 clearfix">
<div class="col-sm-3"><img src="images/st_05.png"></div>
<div class="col-sm-9">
<strong>完善的服务产品</strong>
<p>多年的专业经验，能为客户提供量身定制的一站式外包服务解决方案,包括招聘管理,劳动关系管理,福利管理,项目整理外包 等全方位的服务。</p>
</div>
</li>
<li class="col-md-6 clearfix">
<div class="col-sm-3 "><img src="images/st_09.png"></div>
<div class="col-sm-9 ">
<strong>领先的技术平台</strong>
<p>行业内率先投入巨资打造人力资源信息管理系统，可以按照客户要求，完成个性化的数据交换，实现信息全国范围的即时查询。</p>
</div>
</li>
<li class="col-md-6 clearfix">
<div class=" col-sm-3"><img src="images/st_10.png"></div>
<div class=" col-sm-9">
<strong>专业的服务团队</strong>
<p>拥有高素质、专业的、稳定的优秀服务团队，包括服务部门、福利保障部门、医疗保障部门、法务部门、全国服务部门等众多团队支持。</p>
</div>
</li>
</ul>
</div>
</div>
</section>
......
2.CSS
代码如下（节选示例）：
/*!
* Bootstrap v3.3.0 (http://getbootstrap.com)
* Copyright 2011-2014 Twitter, Inc.
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
*/
/*! normalize.css v3.0.2 | MIT License | git.io/normalize */
html {
font-family: sans-serif;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%
}
body {
margin: 0
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
display: block
}
audio,
canvas,
progress,
video {
display: inline-block;
vertical-align: baseline
}
audio:not([controls]) {
display: none;
height: 0
}
[hidden],
template {
display: none
}
a {
background-color: transparent
}
a:active,
a:hover {
outline: 0
}
abbr[title] {
border-bottom: 1px dotted
}
b,
strong {
font-weight: 700
}
dfn {
font-style: italic
}
h1 {
margin: .67em 0;
font-size: 2em
}
mark {
color: #000;
background: #ff0
}
small {
font-size: 80%
}
sub,
sup {
position: relative;
font-size: 75%;
line-height: 0;
vertical-align: baseline
}
sup {
top: -.5em
}
sub {
bottom: -.25em
}
img {
border: 0
}
svg:not(:root) {
overflow: hidden
}
figure {
margin: 1em 40px
}
hr {
height: 0;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box
}
pre {
overflow: auto
}
code,
kbd,
pre,
samp {
font-family: monospace, monospace;
font-size: 1em
}
button,
input,
optgroup,
select,
textarea {
margin: 0;
font: inherit;
color: inherit
}
button {
overflow: visible
}
button,
select {
text-transform: none
}
button,
html input[type=button],
input[type=reset],
input[type=submit] {
-webkit-appearance: button;
cursor: pointer
}
button[disabled],
html input[disabled] {
cursor: default
}
button::-moz-focus-inner,
input::-moz-focus-inner {
padding: 0;
border: 0
}
input {
line-height: normal
}
input[type=checkbox],
input[type=radio] {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 0
}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
height: auto
}
input[type=search] {
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
-webkit-appearance: textfield
}
input[type=search]::-webkit-search-cancel-button,
input[type=search]::-webkit-search-decoration {
-webkit-appearance: none
}
fieldset {
padding: .35em .625em .75em;
margin: 0 2px;
border: 1px solid silver
}
legend {
padding: 0;
border: 0
}
textarea {
overflow: auto
}
optgroup {
font-weight: 700
}
table {
border-spacing: 0;
border-collapse: collapse
}
td,
th {
padding: 0
}
/*! Source: https://github.com/h5bp/html5-boilerplate/blob/master/src/css/main.css */
@media print {
*,
:before,
:after {
color: #000!important;
text-shadow: none!important;
background: transparent!important;
-webkit-box-shadow: none!important;
box-shadow: none!important
}
a,
a:visited {
text-decoration: underline
}
a[href]:after {
content: " (" attr(href) ")"
}
abbr[title]:after {
content: " (" attr(title) ")"
}
a[href^="#"]:after,
a[href^="javascript:"]:after {
content: ""
}
pre,
blockquote {
border: 1px solid #999;
page-break-inside: avoid
}
thead {
display: table-header-group
}
tr,
img {
page-break-inside: avoid
}
img {
max-width: 100%!important
}
p,
h2,
h3 {
orphans: 3;
widows: 3
}
h2,
h3 {
page-break-after: avoid
}
select {
background: #fff!important
}
.navbar {
display: none
}
.btn>.caret,
.dropup>.btn>.caret {
border-top-color: #000!important
}
.label {
border: 1px solid #000
}
.table {
border-collapse: collapse!important
}
.table td,
.table th {
background-color: #fff!important
}
.table-bordered th,
.table-bordered td {
border: 1px solid #ddd!important
}
}
@font-face {
font-family: 'Glyphicons Halflings';
src: url(../fonts/glyphicons-halflings-regular.eot);
src: url(../fonts/glyphicons-halflings-regular.eot?#iefix) format('embedded-opentype'), url(../fonts/glyphicons-halflings-regular.woff) format('woff'), url(../fonts/glyphicons-halflings-regular.ttf) format('truetype'), url(../fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular) format('svg')
}
.glyphicon {
position: relative;
top: 1px;
display: inline-block;
font-family: 'Glyphicons Halflings';
font-style: normal;
font-weight: 400;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale
}
.glyphicon-asterisk:before {
content: "\2a"
}
.glyphicon-plus:before {
content: "\2b"
}
.glyphicon-euro:before,
.glyphicon-eur:before {
content: "\20ac"
}
.glyphicon-minus:before {
content: "\2212"
}
.glyphicon-cloud:before {
content: "\2601"
}
.glyphicon-envelope:before {
content: "\2709"
}
.glyphicon-pencil:before {
content: "\270f"
}
.glyphicon-glass:before {
content: "\e001"
}
.glyphicon-music:before {
content: "\e002"
}
.glyphicon-search:before {
content: "\e003"
}
.glyphicon-heart:before {
content: "\e005"
}
.glyphicon-star:before {
content: "\e006"
}
.glyphicon-star-empty:before {
content: "\e007"
}
.glyphicon-user:before {
content: "\e008"
}
.glyphicon-film:before {
content: "\e009"
}
.glyphicon-th-large:before {
content: "\e010"
}
.glyphicon-th:before {
content: "\e011"
}
.glyphicon-th-list:before {
content: "\e012"
}
.glyphicon-ok:before {
content: "\e013"
}
.glyphicon-remove:before {
content: "\e014"
}
.glyphicon-zoom-in:before {
content: "\e015"
}
.glyphicon-zoom-out:before {
content: "\e016"
}
.glyphicon-off:before {
content: "\e017"
}
.glyphicon-signal:before {
content: "\e018"
}
.glyphicon-cog:before {
content: "\e019"
}
.glyphicon-trash:before {
content: "\e020"
}
.glyphicon-home:before {
content: "\e021"
}
.glyphicon-file:before {
content: "\e022"
}
.glyphicon-time:before {
content: "\e023"
}
.glyphicon-road:before {
content: "\e024"
}
.glyphicon-download-alt:before {
content: "\e025"
}
.glyphicon-download:before {
content: "\e026"
}
.glyphicon-upload:before {
content: "\e027"
}
.glyphicon-inbox:before {
content: "\e028"
}
.glyphicon-play-circle:before {
content: "\e029"
}
.glyphicon-repeat:before {
content: "\e030"
}
.glyphicon-refresh:before {
content: "\e031"
}
.glyphicon-list-alt:before {
content: "\e032"
}
.glyphicon-lock:before {
content: "\e033"
}
.glyphicon-flag:before {
content: "\e034"
}
.glyphicon-headphones:before {
content: "\e035"
}
.glyphicon-volume-off:before {
content: "\e036"
}
.glyphicon-volume-down:before {
content: "\e037"
}
.glyphicon-volume-up:before {
content: "\e038"
}
.glyphicon-qrcode:before {
content: "\e039"
}
.glyphicon-barcode:before {
content: "\e040"
}
.glyphicon-tag:before {
content: "\e041"
}
.glyphicon-tags:before {
content: "\e042"
}
.glyphicon-book:before {
content: "\e043"
}
.glyphicon-bookmark:before {
content: "\e044"
}
.glyphicon-print:before {
content: "\e045"
}
.glyphicon-camera:before {
content: "\e046"
}
.glyphicon-font:before {
content: "\e047"
}
.glyphicon-bold:before {
content: "\e048"
}
.glyphicon-italic:before {
content: "\e049"
}
.glyphicon-text-height:before {
content: "\e050"
}
.glyphicon-text-width:before {
content: "\e051"
}
.glyphicon-align-left:before {
content: "\e052"
}
.glyphicon-align-center:before {
content: "\e053"
}
.glyphicon-align-right:before {
content: "\e054"
}
.glyphicon-align-justify:before {
content: "\e055"
}
.glyphicon-list:before {
content: "\e056"
}
.glyphicon-indent-left:before {
content: "\e057"
}
.glyphicon-indent-right:before {
content: "\e058"
}
.glyphicon-facetime-video:before {
content: "\e059"
}
.glyphicon-picture:before {
content: "\e060"
}
.glyphicon-map-marker:before {
content: "\e062"
}
.glyphicon-adjust:before {
content: "\e063"
}
.glyphicon-tint:before {
content: "\e064"
}
.glyphicon-edit:before {
content: "\e065"
}
.glyphicon-share:before {
content: "\e066"
}
.glyphicon-check:before {
content: "\e067"
}
.glyphicon-move:before {
content: "\e068"
}
.glyphicon-step-backward:before {
content: "\e069"
}
.glyphicon-fast-backward:before {
content: "\e070"
}
.glyphicon-backward:before {
content: "\e071"
}
.glyphicon-play:before {
content: "\e072"
}
.glyphicon-pause:before {
content: "\e073"
}
......
3.JS
代码如下（节选示例）：
/*!
* Bootstrap v3.3.0 (http://getbootstrap.com)
* Copyright 2011-2014 Twitter, Inc.
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
*/
if("undefined"==typeof jQuery)throw new Error("Bootstrap's JavaScript requires jQuery");+function(a){var b=a.fn.jquery.split(" ")[0].split(".");if(b[0]<2&&b[1]<9||1==b[0]&&9==b[1]&&b[2]<1)throw new Error("Bootstrap's JavaScript requires jQuery version 1.9.1 or higher")}(jQuery),+function(a){"use strict";function b(){var a=document.createElement("bootstrap"),b={WebkitTransition:"webkitTransitionEnd",MozTransition:"transitionend",OTransition:"oTransitionEnd otransitionend",transition:"transitionend"};for(var c in b)if(void 0!==a.style[c])return{end:b[c]};return!1}a.fn.emulateTransitionEnd=function(b){var c=!1,d=this;a(this).one("bsTransitionEnd",function(){c=!0});var e=function(){c||a(d).trigger(a.support.transition.end)};return setTimeout(e,b),this},a(function(){a.support.transition=b(),a.support.transition&&(a.event.special.bsTransitionEnd={bindType:a.support.transition.end,delegateType:a.support.transition.end,handle:function(b){return a(b.target).is(this)?b.handleObj.handler.apply(this,arguments):void 0}})})}(jQuery),+function(a){"use strict";function b(b){return this.each(function(){var c=a(this),e=c.data("bs.alert");e||c.data("bs.alert",e=new d(this)),"string"==typeof b&&e[b].call(c)})}var c='[data-dismiss="alert"]',d=function(b){a(b).on("click",c,this.close)};d.VERSION="3.3.0",d.TRANSITION_DURATION=150,d.prototype.close=function(b){function c(){g.detach().trigger("closed.bs.alert").remove()}var e=a(this),f=e.attr("data-target");f||(f=e.attr("href"),f=f&&f.replace(/.*(?=#[^\s]*$)/,""));var g=a(f);b&&b.preventDefault(),g.length||(g=e.closest(".alert")),g.trigger(b=a.Event("close.bs.alert")),b.isDefaultPrevented()||(g.removeClass("in"),a.support.transition&&g.hasClass("fade")?g.one("bsTransitionEnd",c).emulateTransitionEnd(d.TRANSITION_DURATION):c())};var e=a.fn.alert;a.fn.alert=b,a.fn.alert.Constructor=d,a.fn.alert.noConflict=function(){return a.fn.alert=e,this},a(document).on("click.bs.alert.data-api",c,d.prototype.close)}(jQuery),+function(a){"use strict";function b(b){return this.each(function(){var d=a(this),e=d.data("bs.button"),f="object"==typeof b&&b;e||d.data("bs.button",e=new c(this,f)),"toggle"==b?e.toggle():b&&e.setState(b)})}var c=function(b,d){this.$element=a(b),this.options=a.extend({},c.DEFAULTS,d),this.isLoading=!1};c.VERSION="3.3.0",c.DEFAULTS={loadingText:"loading..."},c.prototype.setState=function(b){var c="disabled",d=this.$element,e=d.is("input")?"val":"html",f=d.data();b+="Text",null==f.resetText&&d.data("resetText",d[e]()),setTimeout(a.proxy(function(){d[e](null==f[b]?this.options[b]:f[b]),"loadingText"==b?(this.isLoading=!0,d.addClass(c).attr(c,c)):this.isLoading&&(this.isLoading=!1,d.removeClass(c).removeAttr(c))},this),0)},c.prototype.toggle=function(){var a=!0,b=this.$element.closest('[data-toggle="buttons"]');if(b.length){var c=this.$element.find("input");"radio"==c.prop("type")&&(c.prop("checked")&&this.$element.hasClass("active")?a=!1:b.find(".active").removeClass("active")),a&&c.prop("checked",!this.$element.hasClass("active")).trigger("change")}else this.$element.attr("aria-pressed",!this.$element.hasClass("active"));a&&this.$element.toggleClass("active")};var d=a.fn.button;a.fn.button=b,a.fn.button.Constructor=c,a.fn.button.noConflict=function(){return a.fn.button=d,this},a(document).on("click.bs.button.data-api",'[data-toggle^="button"]',function(c){var d=a(c.target);d.hasClass("btn")||(d=d.closest(".btn")),b.call(d,"toggle"),c.preventDefault()}).on("focus.bs.button.data-api blur.bs.button.data-api",'[data-toggle^="button"]',function(b){a(b.target).closest(".btn").toggleClass("focus","focus"==b.type)})}(jQuery),+function(a){"use strict";function b(b){return this.each(function(){var d=a(this),e=d.data("bs.carousel"),f=a.extend({},c.DEFAULTS,d.data(),"object"==typeof b&&b),g="string"==typeof b?b:f.slide;e||d.data("bs.carousel",e=new c(this,f)),"number"==typeof b?e.to(b):g?e[g]():f.interval&&e.pause().cycle()})}var c=function(b,c){this.$element=a(b),this.$indicators=this.$element.find(".carousel-indicators"),this.options=c,this.paused=this.sliding=this.interval=this.$active=this.$items=null,this.options.keyboard&&this.$element.on("keydown.bs.carousel",a.proxy(this.keydown,this)),"hover"==this.options.pause&&!("ontouchstart"in document.documentElement)&&this.$element.on("mouseenter.bs.carousel",a.proxy(this.pause,this)).on("mouseleave.bs.carousel",a.proxy(this.cycle,this))};c.VERSION="3.3.0",c.TRANSITION_DURATION=600,c.DEFAULTS={interval:5e3,pause:"hover",wrap:!0,keyboard:!0},c.prototype.keydown=function(a){switch(a.which){case 37:this.prev();break;case 39:this.next();break;default:return}a.preventDefault()},c.prototype.cycle=function(b){return b||(this.paused=!1),this.interval&&clearInterval(this.interval),this.options.interval&&!this.paused&&(this.interval=setInterval(a.proxy(this.next,this),this.options.interval)),this},c.prototype.getItemIndex=function(a){return this.$items=a.parent().children(".item"),this.$items.index(a||this.$active)},c.prototype.getItemForDirection=function(a,b){var c="prev"==a?-1:1,d=this.getItemIndex(b),e=(d+c)%this.$items.length;return this.$items.eq(e)},c.prototype.to=function(a){var b=this,c=this.getItemIndex(this.$active=this.$element.find(".item.active"));return a>this.$items.length-1||0>a?void 0:this.sliding?this.$element.one("slid.bs.carousel",function(){b.to(a)}):c==a?this.pause().cycle():this.slide(a>c?"next":"prev",this.$items.eq(a))},c.prototype.pause=function(b){return b||(this.paused=!0),this.$element.find(".next, .prev").length&&a.support.transition&&(this.$element.trigger(a.support.transition.end),this.cycle(!0)),this.interval=clearInterval(this.interval),this},c.prototype.next=function(){return this.sliding?void 0:this.slide("next")},c.prototype.prev=function(){return this.sliding?void 0:this.slide("prev")},c.prototype.slide=function(b,d){var e=this.$element.find(".item.active"),f=d||this.getItemForDirection(b,e),g=this.interval,h="next"==b?"left":"right",i="next"==b?"first":"last",j=this;if(!f.length){if(!this.options.wrap)return;f=this.$element.find(".item")[i]()}if(f.hasClass("active"))return this.sliding=!1;var k=f[0],l=a.Event("slide.bs.carousel",{relatedTarget:k,direction:h});if(this.$element.trigger(l),!l.isDefaultPrevented()){if(this.sliding=!0,g&&this.pause(),this.$indicators.length){this.$indicators.find(".active").removeClass("active");var m=a(this.$indicators.children()[this.getItemIndex(f)]);m&&m.addClass("active")}var n=a.Event("slid.bs.carousel",{relatedTarget:k,direction:h});return a.support.transition&&this.$element.hasClass("slide")?(f.addClass(b),f[0].offsetWidth,e.addClass(h),f.addClass(h),e.one("bsTransitionEnd",function(){f.removeClass([b,h].join(" ")).addClass("active"),e.removeClass(["active",h].join(" ")),j.sliding=!1,setTimeout(function(){j.$element.trigger(n)},0)}).emulateTransitionEnd(c.TRANSITION_DURATION)):(e.removeClass("active"),f.addClass("active"),this.sliding=!1,this.$element.trigger(n)),g&&this.cycle(),this}};var d=a.fn.carousel;a.fn.carousel=b,a.fn.carousel.Constructor=c,a.fn.carousel.noConflict=function(){return a.fn.carousel=d,this};var e=function(c){var d,e=a(this),f=a(e.attr("data-target")||(d=e.attr("href"))&&d.replace(/.*(?=#[^\s]+$)/,""));if(f.hasClass("carousel")){var g=a.extend({},f.data(),e.data()),h=e.attr("data-slide-to");h&&(g.interval=!1),b.call(f,g),h&&f.data("bs.carousel").to(h),c.preventDefault()}};a(document).on("click.bs.carousel.data-api","[data-slide]",e).on("click.bs.carousel.data-api","[data-slide-to]",e),a(window).on("load",function(){a('[data-ride="carousel"]').each(function(){var c=a(this);b.call(c,c.data())})})}(jQuery),+function(a){"use strict";function b(b){var c,d=b.attr("data-target")||(c=b.attr("href"))&&c.replace(/.*(?=#[^\s]+$)/,"");return a(d)}function c(b){return this.each(function(){var c=a(this),e=c.data("bs.collapse"),f=a.extend({},d.DEFAULTS,c.data(),"object"==typeof b&&b);!e&&f.toggle&&"show"==b&&(f.toggle=!1),e||c.data("bs.collapse",e=new d(this,f)),"string"==typeof b&&e[b]()})}var d=function(b,c){this.$element=a(b),this.options=a.extend({},d.DEFAULTS,c),this.$trigger=a(this.options.trigger).filter('[href="#'+b.id+'"], [data-target="#'+b.id+'"]'),this.transitioning=null,this.options.parent?this.$parent=this.getParent():this.addAriaAndCollapsedClass(this.$element,this.$trigger),this.options.toggle&&this.toggle()};d.VERSION="3.3.0",d.TRANSITION_DURATION=350,d.DEFAULTS={toggle:!0,trigger:'[data-toggle="collapse"]'},d.prototype.dimension=function(){var a=this.$element.hasClass("width");return a?"width":"height"},d.prototype.show=function(){if(!this.transitioning&&!this.$element.hasClass("in")){var b,e=this.$parent&&this.$parent.find("> .panel").children(".in, .collapsing");if(!(e&&e.length&&(b=e.data("bs.collapse"),b&&b.transitioning))){var f=a.Event("show.bs.collapse");if(this.$element.trigger(f),!f.isDefaultPrevented()){e&&e.length&&(c.call(e,"hide"),b||e.data("bs.collapse",null));var g=this.dimension();this.$element.removeClass("collapse").addClass("collapsing")[g](0).attr("aria-expanded",!0),this.$trigger.removeClass("collapsed").attr("aria-expanded",!0),this.transitioning=1;var h=function(){this.$element.removeClass("collapsing").addClass("collapse in")[g](""),this.transitioning=0,this.$element.trigger("shown.bs.collapse")};if(!a.support.transition)return h.call(this);var i=a.camelCase(["scroll",g].join("-"));this.$element.one("bsTransitionEnd",a.proxy(h,this)).emulateTransitionEnd(d.TRANSITION_DURATION)[g](this.$element[0][i])}}}},d.prototype.hide=function(){if(!this.transitioning&&this.$element.hasClass("in")){var b=a.Event("hide.bs.collapse");if(this.$element.trigger(b),!b.isDefaultPrevented()){var c=this.dimension();this.$element[c](this.$element[c]())[0].offsetHeight,this.$element.addClass("collapsing").removeClass("collapse in").attr("aria-expanded",!1),this.$trigger.addClass("collapsed").attr("aria-expanded",!1),this.transitioning=1;var e=function(){this.transitioning=0,this.$element.removeClass("collapsing").addClass("collapse").trigger("hidden.bs.collapse")};return a.support.transition?void this.$element[c](0).one("bsTransitionEnd",a.proxy(e,this)).emulateTransitionEnd(d.TRANSITION_DURATION):e.call(this)}}},d.prototype.toggle=function(){this[this.$element.hasClass("in")?"hide":"show"]()},d.prototype.getParent=function(){return a(this.options.parent).find('[data-toggle="collapse"][data-parent="'+this.options.parent+'"]').each(a.proxy(function(c,d){var e=a(d);this.addAriaAndCollapsedClass(b(e),e)},this)).end()},d.prototype.addAriaAndCollapsedClass=function(a,b){var c=a.hasClass("in");a.attr("aria-expanded",c),b.toggleClass("collapsed",!c).attr("aria-expanded",c)};var e=a.fn.collapse;a.fn.collapse=c,a.fn.collapse.Constructor=d,a.fn.collapse.noConflict=function(){return a.fn.collapse=e,this},a(document).on("click.bs.collapse.data-api",'[data-toggle="collapse"]',function(d){var e=a(this);e.attr("data-target")||d.preventDefault();var f=b(e),g=f.data("bs.collapse"),h=g?"toggle":a.extend({},e.data(),{trigger:this});c.call(f,h)})}(jQuery),+function(a){"use strict";function b(b){b&&3===b.which||(a(e).remove(),a(f).each(function(){var d=a(this),e=c(d),f={relatedTarget:this};e.hasClass("open")
......
更多优质博客文章、完整代码案例模板，点击以下链接查阅：
仙女网页设计-CSDN博客
Web前端网页制作、大学生期末大作业、课程设计、毕业设计、完整代码案例模板、Web前端网页定制、教学课程、学习资料等，有需要的添加以下微信交流👇🏻👇🏻👇🏻
