一直想着用bootstrap搭建网站,它的自适应、元素封装完善、现成的Glyphicons字体图标,省去很多的css、js、ui的工作,可以快速搭建一个客户需要的站点。ytkah自己有一些div+css的基础知识,所以上手bootstrap相对会比较快一些,从入手到完成项目只用了两周“学会”bootstrap搭建一个企业站,中间还有其他的一些事需要处理。当然做得比较粗糙,效果图在文章尾部。

  国内的企业站一般都喜欢这样的版式:头部导航、幻灯片banner、次导航、文章列表、tag标签、转化引导、主业分类、团队介绍、联系方式,那我们就按这样设计

  1.按照bootstrap中文网bootcss.com官方文档,首先我们先引用css和js,用大的body把页面包围起来

  2.用导航条<nav></nav>设计一个头部导航,用栅格系统column分为散列,左侧是主页小房子标志,中间是logo,右侧是下拉导航菜单

  3.用carousel.js做一个幻灯片轮播,如果想加入手势滑动效果参考ytkah之前写的这篇文章:Bootstrap幻灯轮播如何支持触屏左右滑动手势?

  4.用栅格系统column做次导航作为品牌专区、主业分类、底部转化引导

  5.用ul - li 做一个文章列表

  6.用标签页nav-tabs和按钮btn做一个tags标签栏、团队介绍

  ytkah力求用最少的组件来完成设计,如果想做得更美观可以加入更多的组件。网站的栏目页和文章页需要的功能相对少一些,头部、底部、转化引导等可以共用,做得更快。

两周“学会”bootstrap搭建一个移动站点的更多相关文章

  1. 超详细动手搭建一个Vuepress站点及开启PWA与自动部署

    超详细动手搭建一个Vuepress站点及开启PWA与自动部署 五一之前就想写一篇关于Vuepress的文章,结果朋友结婚就不了了之了. 记得最后一定要看注意事项! Vuepress介绍 官网:http ...

  2. 利用Wamp在本地搭建一个wordpress站点

    原文链接:利用Wamp在本地搭建一个wordpress站点 有时候我们会想搭建一个自己的站点,可是由于只是想自己访问,就不是很想为这个站点在买一个服务器和域名,那我们可能首先就想到把自己电脑当做服务器 ...

  3. Cocos工作两周感受

    我是一个专注搞Unity开发的程序猿哈哈,但是最近的项目要采用Cocos引擎开发.在迷茫和学习成长中已经不知不觉过了两周.我就简单谈谈我这两周学习Cocos的一个感受. 具体说公司是采用js语言来开发 ...

  4. 一个java实习生两周八次的面试经历

    以前从来没有因为求职出去面试过,一直觉得面试很可怕,没想到最近两周我也成为了面霸,两周面试八次,我的找工作之路就这样开始了!大概两个星期之前,我看着自己在招聘网站上写好的简历连投出去的勇气都没有,战战 ...

  5. 搭建一个Web Server站点

    题:搭建一个Web Server站点.安装web服务,并在本地创建index.html测试 1.安装http服务 yum -y install httpd 2.进入网站目录 cd /var/www/h ...

  6. 使用GitHub Pages + docsify快速搭建一个站点

    话不多说,先看效果: https://bytesfly.github.io/blog 为什么需要一个站点 肯定有人会问,既然有类似 博客园 这样优秀的平台来写博客,为什么还需要自己搭建站点呢? 放在G ...

  7. Orchard官方文档翻译(六) 建立你的第一个Orchartd站点

    让我们开始 该主题内容已在Orchard1.8Release版本下测试通过. 这里通过向导式的教程来告诉大家Orchard的功能如何使用.如果你是第一次使用Orchard,该文档就是为你而准备的! O ...

  8. 使用 ASP.NET MVC 4, EF, Knockoutjs and Bootstrap 设计和开发站点 - 6 - 业务逻辑

    翻译:使用 ASP.NET MVC 4, EF, Knockoutjs and Bootstrap 设计和开发站点 - 6 - 业务逻辑 Part 3: 设计逻辑层:核心开发 如前所述,我们的解决方案 ...

  9. 从零开始搭建一个react项目

    Nav logo 120 发现 关注 消息 4 搜索 从零开始搭建一个react项目 96 瘦人假噜噜 2017.04.23 23:29* 字数 6330 阅读 32892评论 31喜欢 36 项目地 ...

随机推荐

  1. Google Map API key 获取方法

    要想使用google map api 必须从google网站上获取key之后才有权限使用,但是要想申请key必须要有证明书,也就是所谓的MD5.下面一步一步来说明: 步骤1: 如果你使用的是eclip ...

  2. python实现简易数据库之一——存储和索引建立

    最近没事做了一个数据库project,要求实现一个简单的数据库,能满足几个特定的查询,这里主要介绍一下我们的实现过程,代码放在过ithub,可参看这里.都说python的运行速度很慢,但因为时间比较急 ...

  3. WampServer下使用多端口访问

    因为学习中要用到跨域请求,所以不得不在wamp集成环境下添加多站点服务. 1.首先你要确保已经正确安装了wamp. 2.接着在wamp的安装目录下找到Apache2的httpd.conf文件,比如我的 ...

  4. Git.Framework 框架随手记--历史原因

    Git.Framework 是近几年工作的一些工作经验总结,虽不能和某些知名的框架相提并论,但是还是比较实用的.此框架经过三年多的升级和维护,已经具有较强的实用性,在此记录该框架的使用操作方式,贡献给 ...

  5. EF,MVC相关项目请参见→

    End_Test和YM_EF抽象工厂   这两个项目

  6. python 读写文件和设置文件的字符编码

    一. python打开文件代码如下: f = open("d:\test.txt", "w") 说明:第一个参数是文件名称,包括路径:第二个参数是打开的模式mo ...

  7. myeclipse自动import

    不管包什么的 直接把代码全写出来 再按 ctrl + shift +o 这是自动导包的 前提是你写的代码是正确的

  8. tomcat 的安装

    安装tomcat的前提: 首先要做的是有java环境,这里我们可以选择安装jre(java环境包).或者说安装java开发工具包ldk 我这里选择安装jdk 我们在google里搜索jdk,你就能都找 ...

  9. WPF学习(三)--Menu、TabControl和DataGrid控件介绍

    Menu Menu提供了菜单栏方式的多级菜单的管理和操作: 这里对Menu的样式不做任何的定制和管理 下面来对Menu进行测试: 将Menu添加到页面中 运行后,效果如下: 这里没有考虑界面效果和样式 ...

  10. 【HDU 2222】Keywords Search AC自动机模板题

    参考iwtwiioi的模板写出来的.上午gty讲的并没有听懂,只好自己慢慢对着模板理解. 在HDU上为什么相同的程序提交有时T有时A!!! 奉上sth神犇的模板(不是这道题): var ch:char ...