频道栏目
首页 > 程序开发 > web前端 > HTML/CSS > 正文
BootStrap之——网站首页整体设计思路
2016-12-13 09:34:54         来源:I_intern的博客  
收藏   我要投稿

整体架构

一般而言首页设计几乎等同与整个网站设计,那么首页中到底应该放些什么内容才好呢?这要看网站有哪些主要的元素。本教程里要设计的网站首页是一个多用户博客类的网站首页,在该网站中用户可以发表博客,也可以推荐图书给其他用户。所以,首页中的板块包括这些应该是恰当的:

1.整站导航条

2.文章(博客)展示板块

3.图书展示板块

4.用户(会员)展示板块

5.脚注——footer部分

其中导航条和脚注是整个网站中都要用到的,具体实现时可以放在布局模板中。

板块划分

根据上面的整体架构,我们将首页的板块分为以下几个:

    1.文章板块——将最新、最热的文章以标签页(tab)切换方式放在该模块中,为了页面美观,将有图片的文章的第一章图片放在轮换图片(caoursel)插件中,最右侧放置热门文章分类。



2.图书板块——按照图书的分类将图书放在首页中,点击不同的分类切换到不同的选项卡。图书展示使用自己开发的Jquery Tab插件,并将其整合到BootStrap环境中。最右侧同样是图书的分类。


3.用户板块——将新加入的用户和对社区贡献最多的用户放在首页中.

要用到的BootStrap元素

那么,我么要用到哪些BootStrap元素才能很好的展示我们的板块内容呢?

1.导航条

这里要用到固定在网页头部的导航条(navbar-fixed-top),并在其中整合用户登录模块,代码如下

<p class="navbar navbar-inverse navbar-fixed-top" role="navigation">
   <p class="container">
     <p 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>
    </p>
    <p class="btn-group">
        <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>
    </p>
</p>
 </p>

2.文章板块需要用到的BootStrap元素

1.轮换图片插件(caoursel)——解决了展示图片时图片变形的问题。

2.标签页插件(tabs)——对插件的样式进行了美化,并增加了自动切换功能。

3.信息按钮(btn-info)组件——用它列出文章分类信息。

3.图书板块需要用到的元素

1.自己开发的Jquery Tab插件

2.缩略图(thumbnail)组件

3.分类标签(仿豆瓣)

4.用户板块用到的BootStrap元素

1.BootStrap原生tab

2.圆形图片(image_circle

点击复制链接 与好友分享!回本站首页
相关TAG标签 BootStrap
上一篇:HTML&CSS
下一篇:Bootstrap—表单学习笔记
相关文章
图文推荐
点击排行

关于我们 | 联系我们 | 广告服务 | 投资合作 | 版权申明 | 在线帮助 | 网站地图 | 作品发布 | Vip技术培训 | 举报中心

版权所有: 红黑联盟--致力于做实用的IT技术学习网站