Bootstrap项目实战，响应式网站（李炎恢）

网站首页 布局与实现

一、文件准备

1、导入bootstrap 相关css 和js文件，以及jQuery

<link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css">

<script src="jquery-3.3.1.min.js"></script>
<script src="bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>/

2、创建style.css进行外链样式设置：

<link rel="stylesheet" href="style.css">

二、网页布局

1、导航栏

<nav class="navbar navbar-default navbar-fixed-top">
    <div class="container">
        <div class="navbar-header">
            <a href="#" class="navbar-brand logo"><img src="../image/logo.png" alt="瓢城企训网"></a>
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
        </div>
        <div class="collapse navbar-collapse" id="navbar-collapse">
        <ul class="nav navbar-nav navbar-right">
            <li class="active"><a href="#"><span class="glyphicon glyphicon-home"></span> 首页</a></li>
            <li><a href="information.html"><span class="glyphicon glyphicon-list"></span> 资讯</a></li>
            <li><a href="case.html"><span class="glyphicon glyphicon-fire"></span> 案例</a></li>
            <li><a href="about.html"><span class="glyphicon glyphicon-question-sign"></span> 关于</a></li>
        </ul>
    </div>
    </div>
</nav>

2、轮播图

<div id="myCarousel" class="carousel slide">
    <ol class="carousel-indicators">
        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
        <li data-target="#myCarousel" data-slide-to="1"></li>
        <li data-target="#myCarousel" data-slide-to="2"></li>
    </ol>
    <div class="carousel-inner">
        <div class="item active" style="background: #223240"><img src="../image/slide1.png" alt="第一张">
        </div>
        <div class="item" style="background: #F5E4DC"><img src="../image/slide2.png" alt="第二张">
        </div>
        <div class="item" style="background: #DE2A2D"><img src="../image/slide3.png" alt="第三张">
        </div>
    </div>
    <a href="#myCarousel" data-slide="prev" class="carousel-control left">
        <span class="glyphicon glyphicon-chevron-left"></span>
    </a>
    <a href="#myCarousel" data-slide="next" class="carousel-control right">
        <span class="glyphicon glyphicon-chevron-right"></span>
    </a>
</div>

3、响应式主体内容

<div class="tab1">
    <div class="container">
        <h2 class="tab-h2">「 为什么选择瓢城企业培训 」</h2>
        <p class="tab-p">强大的师资力量，完美的实战型管理课程，让您的企业实现质的腾飞！</p>
        <div class="row">
            <div class="col-md-6 col">
                <div class="media">
                <div class="media-left">
                    <a href="#"><img class="media-object" src="../image/tab1-1.png" alt=""></a>
                </div>
                    <div class="media-body">
                       <h4 class="media-heading">课程内容</h4>
                        <p class="text-muted">其他：高校不知名的讲师编写，没有任何实战价值的教材！</p>
                        <p>我们：知名企业家、管理学大师联合编写的具有实现性教材!</p>
                    </div>
                </div>
            </div>
            <div class="col-md-6 col">
                <div class="media">
                    <div class="media-left">
                        <a href="#"><img class="media-object" src="../image/tab1-2.png" alt=""></a>
                    </div>
                    <div class="media-body">
                        <h4 class="media-heading">师资力量</h4>
                        <p class="text-muted">其他：非欧美正牌大学毕业的、业界没有知名度的讲师！</p>
                        <p>我们：美国哈佛、耶鲁等世界一流高校、享有声誉的名牌专家！</p>
                    </div>
                </div>
            </div>
            <div class="col-md-6 col">
                <div class="media">
                    <div class="media-left">
                        <a href="#"><img class="media-object" src="../image/tab1-3.png" alt=""></a>
                    </div>
                    <div class="media-body">
                        <h4 class="media-heading">课程内容</h4>
                        <p class="text-muted">其他：无法保证上课效率、没有时间表，当天任务无法完成！</p>
                        <p>我们：保证正常的上课效率、制定一张时间表、当天的任务当天完成！</p>
                    </div>
                </div>
            </div>
            <div class="col-md-6 col">
                <div class="media">
                    <div class="media-left">
                        <a href="#"><img class="media-object" src="../image/tab1-4.png" alt=""></a>
                    </div>
                    <div class="media-body">
                        <h4 class="media-heading">服务团队</h4>
                        <p class="text-muted">其他：社会招聘的、服务水平参差不齐的普通员工！</p>
                        <p>我们：内部培养、经受过良好高端服务培训的高标准员工！</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="tab2">
    <div class="row">
        <div class="col-md-6 col-sm-6 tab2-img"><img src="../image/tab2.png" class="img-responsive center-block auto" alt=""></div>
        <div class="text col-md-6 col-sm-6 tab2-text">
            <h3>强大的学习体系</h3>
            <p>经过管理学大师层层把关、让您的企业突飞猛进。</p>
        </div>
    </div>
</div>
<div class="tab3">
    <div class="row">
        <div class="col-md-6 col-sm-6">
            <img src="../image/tab3.png" class="img-responsive center-block auto" alt="">
        </div>
        <div class="text col-md-6 col-sm-6">
            <h3>完美的管理方式</h3>
            <p>最新的管理培训方案，让您的企业赶超同行。</p>
        </div>

    </div>
</div>

3、页面底部

<div id="footer">
    <div class="container">
        <p>企业培训 | 合作事宜 | 版权投诉</p>
        <p>苏ICP备12345678. © 2009-2016 瓢城企训网. Powered by Bootstrap.</p>
    </div>
</div>

4、自动轮播 设置延时

//轮播图自动播放
$('#myCarousel').carousel({
    interval:3000

});

5，动态可设置轮播图箭头自动居中

 //设置垂直居中
/*     $('.carousel-control').css('line-height',$('.carousel-inner img').height()+'px');
     $(window).resize(function () {
         var $height = $('.carousel-inner img').eq(0).height()||
             $('.carousel-inner img').eq(1).height()||
             $('.carousel-inner img').eq(2).height();
         $('.carousel-control').css('line-height',$height+'px');
     });

6、设置文字响应式垂直居中（需要先加载好图片，不然会获取不到图片高度）

/*设置文字垂直居中 ,由于加载图片顺序问题，导致高度无法获取*/
$(window).on('load',function () {
    $('.text').eq(0).css('margin-top',($('.auto').eq(0).height()-$('.text').eq(0).height())/2 +'px');
});
    $(window).resize(function (){
        $('.text').eq(0).css('margin-top',($('.auto').eq(0).height()-$('.text').eq(0).height())/2 +'px');});
    $(window).on('load',function () {
        $('.text').eq(1).css('margin-top',($('.auto').eq(1).height()-$('.text').eq(1).height())/2 +'px');});
        $(window).resize(function (){
            $('.text').eq(1).css('margin-top',($('.auto').eq(1).height()-$('.text').eq(1).height())/2 +'px');
        });

三、资讯页面

<div class="jumbotron">
    <div class="container">
        <hgroup>
            <h1>资讯</h1>
            <h4>企业内训的最新动态、资源等...</h4>
        </hgroup>
    </div>
</div>
<div id="information">
    <div class="container">
        <div class="row">
            <div class="col-md-8">
                <div class="container-fluid" style="padding: 0">
                    <div class="row info-content">
                    <div class="col-md-5 col-xs-5 col-sm-5">
                        <img src="../image/info1.jpg" class="img-responsive" alt="">
                    </div>
                    <div class="col-md-7 col-xs-7 col-sm-7">
                        <h4>广电总局发布TVOS2.0 华为阿里参与研发</h4>
                        <p class="hidden-xs">TVOS2.0是在TVOS1.0与华为MediaOS及阿里巴巴YunOS融合的基础上，打造的新一代智能电视操作系统。华为主要承担开发工作，内置的电视购物商城由阿里方面负责。</p>
                        <p>admin 15 / 10 / 11</p>
                    </div>
                </div>
                    <div class="row info-content">
                        <div class="col-md-5 col-xs-5 col-sm-5">
                            <img src="../image/info2.jpg" class="img-responsive" alt="">
                        </div>
                        <div class="col-md-7 col-xs-7 col-sm-7">
                            <h4>苹果四寸手机为何要配置强大的A9处理器？</h4>
                            <p class="hidden-xs">苹果明年初有可能对外发布一款经过升级的四英寸手机，相当于iPhone 5s。该手机将会配置苹果在2015年旗舰手机中采用的A9处理器。配置性能如此强大的应用处理器？</p>
                            <p>admin 15 / 10 / 11</p>
                        </div>
                    </div>
                    <div class="row info-content">
                        <div class="col-md-5 col-xs-5 col-sm-5">
                            <img src="../image/info3.jpg" class="img-responsive" alt="">
                        </div>
                        <div class="col-md-7 col-xs-7 col-sm-7">
                            <h4>六家互联网公司发声明 抵制流量劫持等违法行为</h4>
                            <p class="hidden-xs">六家互联网公司（今日头条、美团大众点评网、360、腾讯、微博、小米科技）发布联合声明，呼吁有关运营商打击流量劫持，重视互联网公司被流量劫持，可能导致的严重后果。</p>
                            <p>admin 15 / 10 / 11</p>
                        </div>
                    </div>
                </div>
                <div class="container-fluid" style="padding: 0">
                    <div class="row info-content">
                        <div class="col-md-5 col-xs-5 col-sm-5">
                            <img src="../image/info1.jpg" class="img-responsive" alt="">
                        </div>
                        <div class="col-md-7 col-xs-7 col-sm-7">
                            <h4>广电总局发布TVOS2.0 华为阿里参与研发</h4>
                            <p class="hidden-xs">TVOS2.0是在TVOS1.0与华为MediaOS及阿里巴巴YunOS融合的基础上，打造的新一代智能电视操作系统。华为主要承担开发工作，内置的电视购物商城由阿里方面负责。</p>
                            <p>admin 15 / 10 / 11</p>
                        </div>
                    </div>
                    <div class="row info-content">
                        <div class="col-md-5 col-xs-5 col-sm-5">
                            <img src="../image/info2.jpg" class="img-responsive" alt="">
                        </div>
                        <div class="col-md-7 col-xs-7 col-sm-7">
                            <h4>苹果四寸手机为何要配置强大的A9处理器？</h4>
                            <p class="hidden-xs">苹果明年初有可能对外发布一款经过升级的四英寸手机，相当于iPhone 5s。该手机将会配置苹果在2015年旗舰手机中采用的A9处理器。配置性能如此强大的应用处理器？</p>
                            <p>admin 15 / 10 / 11</p>
                        </div>
                    </div>
                    <div class="row info-content">
                        <div class="col-md-5 col-xs-5 col-sm-5">
                            <img src="../image/info3.jpg" class="img-responsive" alt="">
                        </div>
                        <div class="col-md-7 col-xs-7 col-sm-7">
                            <h4>六家互联网公司发声明 抵制流量劫持等违法行为</h4>
                            <p class="hidden-xs">六家互联网公司（今日头条、美团大众点评网、360、腾讯、微博、小米科技）发布联合声明，呼吁有关运营商打击流量劫持，重视互联网公司被流量劫持，可能导致的严重后果。</p>
                            <p>admin 15 / 10 / 11</p>
                        </div>
                    </div>
                </div>
                <div class="container-fluid" style="padding: 0">
                    <div class="row info-content">
                        <div class="col-md-5 col-xs-5 col-sm-5">
                            <img src="../image/info1.jpg" class="img-responsive" alt="">
                        </div>
                        <div class="col-md-7 col-xs-7 col-sm-7">
                            <h4>广电总局发布TVOS2.0 华为阿里参与研发</h4>
                            <p class="hidden-xs">TVOS2.0是在TVOS1.0与华为MediaOS及阿里巴巴YunOS融合的基础上，打造的新一代智能电视操作系统。华为主要承担开发工作，内置的电视购物商城由阿里方面负责。</p>
                            <p>admin 15 / 10 / 11</p>
                        </div>
                    </div>
                    <div class="row info-content">
                        <div class="col-md-5 col-xs-5 col-sm-5">
                            <img src="../image/info2.jpg" class="img-responsive" alt="">
                        </div>
                        <div class="col-md-7 col-xs-7 col-sm-7">
                            <h4>苹果四寸手机为何要配置强大的A9处理器？</h4>
                            <p class="hidden-xs">苹果明年初有可能对外发布一款经过升级的四英寸手机，相当于iPhone 5s。该手机将会配置苹果在2015年旗舰手机中采用的A9处理器。配置性能如此强大的应用处理器？</p>
                            <p>admin 15 / 10 / 11</p>
                        </div>
                    </div>
                    <div class="row info-content">
                        <div class="col-md-5 col-xs-5 col-sm-5">
                            <img src="../image/info3.jpg" class="img-responsive" alt="">
                        </div>
                        <div class="col-md-7 col-xs-7 col-sm-7">
                            <h4>六家互联网公司发声明 抵制流量劫持等违法行为</h4>
                            <p class="hidden-xs">六家互联网公司（今日头条、美团大众点评网、360、腾讯、微博、小米科技）发布联合声明，呼吁有关运营商打击流量劫持，重视互联网公司被流量劫持，可能导致的严重后果。</p>
                            <p>admin 15 / 10 / 11</p>
                        </div>
                    </div>
                </div>
                <div class="container-fluid" style="padding: 0">
                    <div class="row info-content">
                        <div class="col-md-5 col-xs-5 col-sm-5">
                            <img src="../image/info1.jpg" class="img-responsive" alt="">
                        </div>
                        <div class="col-md-7 col-xs-7 col-sm-7">
                            <h4>广电总局发布TVOS2.0 华为阿里参与研发</h4>
                            <p class="hidden-xs">TVOS2.0是在TVOS1.0与华为MediaOS及阿里巴巴YunOS融合的基础上，打造的新一代智能电视操作系统。华为主要承担开发工作，内置的电视购物商城由阿里方面负责。</p>
                            <p>admin 15 / 10 / 11</p>
                        </div>
                    </div>
                    <div class="row info-content">
                        <div class="col-md-5 col-xs-5 col-sm-5">
                            <img src="../image/info2.jpg" class="img-responsive" alt="">
                        </div>
                        <div class="col-md-7 col-xs-7 col-sm-7">
                            <h4>苹果四寸手机为何要配置强大的A9处理器？</h4>
                            <p class="hidden-xs">苹果明年初有可能对外发布一款经过升级的四英寸手机，相当于iPhone 5s。该手机将会配置苹果在2015年旗舰手机中采用的A9处理器。配置性能如此强大的应用处理器？</p>
                            <p>admin 15 / 10 / 11</p>
                        </div>
                    </div>
                    <div class="row info-content">
                        <div class="col-md-5 col-xs-5 col-sm-5">
                            <img src="../image/info3.jpg" class="img-responsive" alt="">
                        </div>
                        <div class="col-md-7 col-xs-7 col-sm-7">
                            <h4>六家互联网公司发声明 抵制流量劫持等违法行为</h4>
                            <p class="hidden-xs">六家互联网公司（今日头条、美团大众点评网、360、腾讯、微博、小米科技）发布联合声明，呼吁有关运营商打击流量劫持，重视互联网公司被流量劫持，可能导致的严重后果。</p>
                            <p>admin 15 / 10 / 11</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-4 info-right hidden-xs hidden-sm">
                <blockquote>
                    <h2>热门资讯</h2>
                </blockquote>
                <div class="container-fluid">
                <div class="row">
                    <div class="col-md-5 col-xs-5 col-sm-5" style="padding: 0;margin: 12px 0;">
                        <img src="../image/info1.jpg" class="img-responsive" alt="">
                    </div>
                    <div class="col-md-7 col-xs-7 col-sm-7" style="padding-right: 0">
                        <h4>广电总局发布TVOS2.0 华为阿里参与研发</h4>
                        <p>admin 15 / 10 / 11</p>
                    </div>
                </div>
                    <div class="row">
                        <div class="col-md-5 col-xs-5 col-sm-5" style="padding: 0;margin: 12px 0;">
                            <img src="../image/info2.jpg" class="img-responsive" alt="">
                        </div>
                        <div class="col-md-7 col-xs-7 col-sm-7" style="padding-right: 0">
                            <h4>苹果四寸手机为何要配置强大的A9处理器？</h4>
                            <p>admin 15 / 10 / 11</p>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-5 col-xs-5 col-sm-5" style="padding: 0;margin: 12px 0;">
                            <img src="../image/info3.jpg" class="img-responsive" alt="">
                        </div>
                        <div class="col-md-7 col-xs-7 col-sm-7" style="padding-right: 0">
                            <h4>六家互联网公司发声明 抵制流量劫持等违法行为</h4>
                            <p>admin 15 / 10 / 11</p>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-5 col-xs-5 col-sm-5" style="padding: 0;margin: 12px 0;">
                            <img src="../image/info1.jpg" class="img-responsive" alt="">
                        </div>
                        <div class="col-md-7 col-xs-7 col-sm-7" style="padding-right: 0">
                            <h4>广电总局发布TVOS2.0 华为阿里参与研发</h4>
                            <p>admin 15 / 10 / 11</p>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-5 col-xs-5 col-sm-5" style="padding: 0;margin: 12px 0;">
                            <img src="../image/info2.jpg" class="img-responsive" alt="">
                        </div>
                        <div class="col-md-7 col-xs-7 col-sm-7" style="padding-right: 0">
                            <h4>苹果四寸手机为何要配置强大的A9处理器？</h4>
                            <p>admin 15 / 10 / 11</p>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-5 col-xs-5 col-sm-5" style="padding: 0;margin: 12px 0;">
                            <img src="../image/info3.jpg" class="img-responsive" alt="">
                        </div>
                        <div class="col-md-7 col-xs-7 col-sm-7" style="padding-right: 0">
                            <h4>六家互联网公司发声明 抵制流量劫持等违法行为</h4>
                            <p>admin 15 / 10 / 11</p>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-5 col-xs-5 col-sm-5" style="padding: 0;margin: 12px 0;">
                            <img src="../image/info1.jpg" class="img-responsive" alt="">
                        </div>
                        <div class="col-md-7 col-xs-7 col-sm-7" style="padding-right: 0">
                            <h4>广电总局发布TVOS2.0 华为阿里参与研发</h4>
                            <p>admin 15 / 10 / 11</p>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-5 col-xs-5 col-sm-5" style="padding: 0;margin: 12px 0;">
                            <img src="../image/info2.jpg" class="img-responsive" alt="">
                        </div>
                        <div class="col-md-7 col-xs-7 col-sm-7" style="padding-right: 0">
                            <h4>苹果四寸手机为何要配置强大的A9处理器？</h4>
                            <p>admin 15 / 10 / 11</p>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-5 col-xs-5 col-sm-5" style="padding: 0;margin: 12px 0;">
                            <img src="../image/info3.jpg" class="img-responsive" alt="">
                        </div>
                        <div class="col-md-7 col-xs-7 col-sm-7" style="padding-right: 0">
                            <h4>六家互联网公司发声明 抵制流量劫持等违法行为</h4>
                            <p>admin 15 / 10 / 11</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

四、案例页面

<div class="jumbotron">
    <div class="container">
        <hgroup>
            <h1>案例</h1>
            <h4>和各大明星企业有着紧密合作...</h4>
        </hgroup>
    </div>
</div>
<div id="case">
    <div class="container">
        <div class="row">
            <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
                <div class="thumbnail">
                    <img src="../image/case1.jpg" alt="中国移动">
                    <div class="caption">
                        <h4>中国移动通信</h4>
                        <p>参与了本机构的总裁管理培训课程，学员反馈意见良好。</p>
                    </div>
                </div>
            </div>
            <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
                <div class="thumbnail">
                    <img src="../image/case2.jpg" alt="中国移动">
                    <div class="caption">
                        <h4>中国石化</h4>
                        <p>参与了本机构的总裁管理培训课程，学员反馈意见良好。</p>
                    </div>
                </div>

            </div>
            <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
                <div class="thumbnail">
                    <img src="../image/case3.jpg" alt="中国移动">
                    <div class="caption">
                        <h4>中国联通</h4>
                        <p>参与了本机构的总裁管理培训课程，学员反馈意见良好。</p>
                    </div>
                </div>

            </div>
            <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
                <div class="thumbnail">
                    <img src="../image/case4.jpg" alt="中国移动">
                    <div class="caption">
                        <h4>中国电信</h4>
                        <p>参与了本机构的总裁管理培训课程，学员反馈意见良好。</p>
                    </div>
                </div>

            </div>

        </div>
        <div class="row">
            <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
                <div class="thumbnail">
                    <img src="../image/case3.jpg" alt="中国移动">
                    <div class="caption">
                        <h4>中国联通</h4>
                        <p>参与了本机构的总裁管理培训课程，学员反馈意见良好。</p>
                    </div>
                </div>
            </div>
            <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
                <div class="thumbnail">
                    <img src="../image/case4.jpg" alt="中国移动">
                    <div class="caption">
                        <h4>中国电信</h4>
                        <p>参与了本机构的总裁管理培训课程，学员反馈意见良好。</p>
                    </div>
                </div>
            </div>
            <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
                <div class="thumbnail">
                    <img src="../image/case1.jpg" alt="中国移动">
                    <div class="caption">
                        <h4>中国移动通信</h4>
                        <p>参与了本机构的总裁管理培训课程，学员反馈意见良好。</p>
                    </div>
                </div>
            </div>
            <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
                <div class="thumbnail">
                    <img src="../image/case2.jpg" alt="中国移动">
                    <div class="caption">
                        <h4>中国石化</h4>
                        <p>参与了本机构的总裁管理培训课程，学员反馈意见良好。</p>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
                <div class="thumbnail">
                    <img src="../image/case4.jpg" alt="中国移动">
                    <div class="caption">
                        <h4>中国电信</h4>
                        <p>参与了本机构的总裁管理培训课程，学员反馈意见良好。</p>
                    </div>
                </div>
            </div>
            <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
                <div class="thumbnail">
                    <img src="../image/case1.jpg" alt="中国移动">
                    <div class="caption">
                        <h4>中国移动通信</h4>
                        <p>参与了本机构的总裁管理培训课程，学员反馈意见良好。</p>
                    </div>
                </div>
            </div>
            <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
                <div class="thumbnail">
                    <img src="../image/case3.jpg" alt="中国移动">
                    <div class="caption">
                        <h4>中国联通</h4>
                        <p>参与了本机构的总裁管理培训课程，学员反馈意见良好。</p>
                    </div>
                </div>
            </div>
            <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
                <div class="thumbnail">
                    <img src="../image/case4.jpg" alt="中国移动">
                    <div class="caption">
                        <h4>中国电信</h4>
                        <p>参与了本机构的总裁管理培训课程，学员反馈意见良好。</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

五、关于页面

<div class="jumbotron">
    <div class="container">
        <hgroup>
            <h1>关于</h1>
            <h4>本机构的成长介绍...</h4>
        </hgroup>
    </div>
</div>
<div id="about">
    <div class="container">
        <div class="row">
           <div class="col-md-3 hidden-xs hidden-sm">
               <div class="list-group">
                   <a class="list-group-item" href="#1">1.机构简介</a>
                   <a class="list-group-item" href="#2">2.加入我们</a>
                   <a class="list-group-item" href="#3">3.联系方式</a>
               </div>
           </div>
           <div class="col-md-9 about">
               <a name="1"></a>
               <h3>机构简介</h3>
               <p>瓢城企业培训有限公司是一家专业以智能化弱电工程为主的高科技民营企业，公司自创立以来一直专业致力于智能化弱电工程；始终坚持发扬"诚信、创新、沟通"为企业宗旨，以"技术、服务"为立业之本的团体精神，并形成一套完整的设计、安装、调试、培训、维护一站式服务体系。</p>
               <a name="2"></a>
               <h3>加入我们</h3>
               <p>网络已深刻改变着人们的生活，本地化生活服务市场前景巨大，生活半径团队坚信本地化生活服务与互联网的结合将会成就一家梦幻的公司，我们脚踏实地的相信梦想，我们相信你的加入会让生活半径更可能成为那家梦幻公司！生活半径人有梦想，有魄力，强执行力，但是要实现这个伟大的梦想，需要更多的有创业精神的你一路前行。公司将提供有竞争力的薪酬、完善的福利（五险一金）、期权、广阔的上升空间。只要你有能力、有激情、有梦想，愿意付出，愿意与公司共同成长，请加入我们！
               </p>
                   <p>请发送您的简历到：hr@xxx.com，我们会在第一时间联系您！</p>

               <a name="3"></a>
               <h3>联系方式</h3>

                    <p>地址：江苏省盐城市亭湖区大庆中路1234号</p>

                    <p>邮编：1234567</p>

                    <p>电话：010-88888888</p>

                    <p>传真：010-88666666</p>

           </div>
        </div>
    </div>
</div>