基于bootstrap框架的响应式首页
来源:互联网 发布:时间校准软件 编辑:程序博客网 时间:2024/05/18 03:01
该网页有首页、魅力福建、高校推荐、国际学术、外教职工、合作交流 等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>
0 0
- 基于bootstrap框架的响应式首页
- 基于响应式的首页大图效果
- 响应式的前端框架bootstrap
- 基于Bootstrap响应式网页
- 基于bootstrap的响应式jQuery滚动新闻插件 _bootstrapNew
- 响应式开发(二)-----Bootstrap框架的介绍
- 响应式开发(三)-----Bootstrap框架的安装使用
- Bootstrap响应式框架初学准备工作
- 遗忘---bootstrap(响应式框架)
- Bootstrap 前端框架制作响应式网站
- 响应式布局与bootstrap框架
- materialize基于Material Design的现代响应式前端框架
- Java9 基于异步响应式流的发布-订阅框架
- 基于Bootstrap简洁的后台UI框架
- Metronic – 超赞!基于 Bootstrap 的响应式后台管理模板
- Metronic – 模板,基于 Bootstrap 的响应式后台+前台 管理模板
- 推荐几款基于Bootstrap的响应式后台管理模板
- 基于Bootstrap垂直响应的jQuery时间轴特效
- 科室登记使用新的提示
- 题目1208:10进制 VS 2进制
- html页面局部加载所带来的事件重复绑定解决办法bootstrap+summernote遇到的问题
- 动手动脑学Dagger2系列一
- 基于Ubuntu 12.04搭建NIS Slave服务
- 基于bootstrap框架的响应式首页
- 朴素贝叶斯分类算法
- Mongodb数据导出命令mongoexport和导入命令mongoimport介绍
- 计算机视觉CV领域大牛及研究组主页链接
- cocos2dx在C++层屏蔽emoji表情
- Android开发艺术探索——第七章:Android动画深入分析
- JavaScript 输入框值为1-10之间数字
- Android 开发之 ---- bootloader (LK)
- 【SEO】SEO秘诀1:三角恋的秘密