基于bootstrap框架的响应式首页

该网页有首页、魅力福建、高校推荐、国际学术、外教职工、合作交流 等6栏导航，其下设有二级导航福建文化、奖学金、人才中心。该管理平台前台的主要特色有以下几个：

1.布局结构合理，内容充实，图形的表达精简。

2.色调搭配和谐，使得整体界面具有统一性。

3.导航栏板块实现直观性原则，目录分类合理，标题明晰、醒目。

4.采用多列布局，减少对形状和线条的依赖。

5.界面友好，灵活，可在不同移动设备自适应。

    3.1.3 页面实现与效果

    首页整体采用Bootstrap的栅格系统进行布局，页眉左侧显示欢迎语，右侧设有登录注册按钮，方便用户登录。页面顶部放置的是以双圆包含“FFC[ FFC:福建对外合作英文首字母结合而成]”的主题Logo，简洁大方。中心内容区块又分为三部分，首先是网站导航栏，采用微调蓝色透明度的方法，突出导航标题，且导航标题切和主题，让浏览者一目了然；其次是使用动态交互的轮播图，以外教职工及留学生的图片作为焦点，吸引用户眼球，使用户立刻会意；最后是四个标志性的小图标，再一次突出平台的中心内容。页面底部放置网页版权声明以及对外合作相关网站的链接。页面以蓝白搭配作为主色调，具有统一性。

首页界面效果图：

pc端效果：

手机端效果：

                                  

主要代码：

导航大体框架构造：整体导航布局 --> 导航布局 --> 下拉菜单布局

                  -->小设备屏幕菜单布局

轮播图大体框架构造：轮播图整体自适应布局 --> 图片切换

实现基本代码：
<!--导航-->
<div class="navbar navbar-default">
<div class="container-fluid">
<div class="collapse navbar-collapse" id="menu">
    <ul class="nav navbar-nav">
      <li><a href="index.html">首页</a></li>
   </ul>
</div>
 </div><!--/container-fluid-->
</div>
<!--小屏幕设备导航样式-->
<div class="navbar-header">
  <button class="navbar-toggle collapsed" data-toggle="collapse"  
    data-target="#menu" aria-expanded="false">
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span> 
   </div>

<!-- 轮播图布局 -- >
<div id="slide-example" data-interval="2000" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="item active">
      <img src="" class="img-responsive" alt="image">
      <div class="carousel-caption"></div>
    </div>
  </div>
<!-- 轮播图切换 -- >
<ol class="carousel-indicators">
   <li data-target="#slide-example" data-slide-to="0"></li>
</ol>