BootStrap之——网站首页整体设计思路
2016-12-12 22:54
429 查看
整体架构
一般而言首页设计几乎等同与整个网站设计,那么首页中到底应该放些什么内容才好呢?这要看网站有哪些主要的元素。本教程里要设计的网站首页是一个多用户博客类的网站首页,在该网站中用户可以发表博客,也可以推荐图书给其他用户。所以,首页中的板块包括这些应该是恰当的:1.整站导航条 2.文章(博客)展示板块 3.图书展示板块 4.用户(会员)展示板块 5.脚注——footer部分
其中导航条和脚注是整个网站中都要用到的,具体实现时可以放在布局模板中。
板块划分
根据上面的整体架构,我们将首页的板块分为以下几个:1.文章板块——将最新、最热的文章以标签页(tab)切换方式放在该模块中,为了页面美观,将有图片的文章的第一章图片放在轮换图片(caoursel)插件中,最右侧放置热门文章分类。 2.图书板块——按照图书的分类将图书放在首页中,点击不同的分类切换到不同的选项卡。图书展示使用自己开发的Jquery Tab插件,并将其整合到BootStrap环境中。最右侧同样是图书的分类。 3.用户板块——将新加入的用户和对社区贡献最多的用户放在首页中.
要用到的BootStrap元素
那么,我么要用到哪些BootStrap元素才能很好的展示我们的板块内容呢?1.导航条
这里要用到固定在网页头部的导航条(navbar-fixed-top),并在其中整合用户登录模块,代码如下<div class="navbar navbar-inverse navbar-fixed-top" role="navigation"> <div class="container"> <div class="navbar-header"> <a class="navbar-brand active" href="URL">顶求网</a> <a class="navbar-brand" href="URL">图书</a> <a class="navbar-brand" href="面URL">文章</a> </div> <div class="btn-group" style="margin-top:10px; float:right;"> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> 会员登陆 <span class="caret"></span> </button> <ul class="dropdown-menu" role="menu"> <LI><a href="URL" target="_top">会员登陆</a></LI> <LI><a href="URL" target="_top">会员注册</a></LI> </ul> </div> </div> </div>
2.文章板块需要用到的BootStrap元素
1.轮换图片插件(caoursel)——解决了展示图片时图片变形的问题。2.标签页插件(tabs)——对插件的样式进行了美化,并增加了自动切换功能。
3.信息按钮(btn-info)组件——用它列出文章分类信息。
3.图书板块需要用到的元素
1.自己开发的Jquery Tab插件2.缩略图(thumbnail)组件
3.分类标签(仿豆瓣)
4.用户板块用到的BootStrap元素
1.BootStrap原生tab2.圆形图片(image_circle)
相关文章推荐
- 顶求网首页整体设计思路
- 【转】网站建设整体设计思路
- 走火入魔通用权限管理之权限设计入门整体思路图解
- 首页设计——针对只有1种业务的网站
- 面向对象系统分析设计过程-整体思路
- 视频网站首页设计分析
- BBS 设计思路系列 ---- 社区首页和论坛的更新原则
- 网站基础架构设计思路I(重回程序员角色,想不到感觉还是这么爽)
- 网站首页设计应避免的八个问题
- 网站设计的思考之网站首页的设计技巧
- 网站整体设计 一
- 网站的整体风格和创意设计
- BBS 设计思路系列 ---- 社区首页和论坛的更新原则
- 网站设计整体策划流程
- 进销存设计之——进销存业务的整体设计思路
- 网站首页设计、风格一致、色彩搭配、版面布局的技巧
- 网站的整体风格和创意设计
- 把香港美术家网站首页基本设计完毕,该去吃饭了
- 关于网站设计的整体设计步骤的总结
- 网站整体设计技巧