一直想着用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. 给 Xamarin.Form For Windows Phone APP 加个漂亮的 "头"

    Windows Phone 是那个1%, 我也是那个1%, 不喜勿喷.WP 向来给 android / ios 的粉们一个最直观的印象: 丑.其实"丑"这个东西会一直下去,而且是个 ...

  2. Javascript 使用小案例

    十四.cookie相关 1 <!DOCTYPE html> <html> <head> <script> function setCookie(cnam ...

  3. 阿里百川IIMSDK-- 加好友,获取好友

    加好友, 其实就是跟发消息一样 获取好友列表 同步好友列表 SDK内部默认会在每次登陆成功后与服务端同步好友列表,开发者可以通过设置disableAutoRequestAllContacts来禁用这个 ...

  4. Jetty+json-lib库抛异常的问题解决过程(java.lang.NoClassDefFoundError: net/sf/json/JSONObject)

      一.之前抛异常是将json库改成了fastjson解决的,参见: http://www.cnblogs.com/gossip/p/5369670.html     异常信息:     二.解决步骤 ...

  5. windows Server2008R2 每隔一段时间自动关机解决办法

    情况描述: “我的电脑-->右键属性”中显示“已激活”,而“管理工具”中显示未激活.系统中有进程wlms.exe. 网上找了下解决方式: 1.提权工具:PSTOOLS(下载地址:http://m ...

  6. hdu2594 KMP

    2个字符长合并在一起即可.要注意next[n]的值要小于初始的两个字符串的长度; //next[]存的是之前相同的长度. //也是位置,只是s[i]不一定和s[next[i]]相同 //但是i之前的和 ...

  7. sprintf、strcpy和memcpy的区别

    做某题用到了sprintf把一个字符数组(字符串)写到二维字符数组里,然后耗时挺长的,想了想strcpy好像也可以,事实证明strcpy效率果然更高,然后想了想觉得memcpy好像也可以.实践了一下的 ...

  8. 【bzoj1061】 Noi2008—志愿者招募

    http://www.lydsy.com/JudgeOnline/problem.php?id=1061 (题目链接) 题意 给定n天,第i天需要ai个志愿者,有m类志愿者,每类志愿者工作时间为[l, ...

  9. 利用symbolsource/gitlink调试你的nuget包

    关键字: 如何调试Nuget下载的dll? VS  github  调试 参考文章: http://docs.nuget.org/create/creating-and-publishing-a-sy ...

  10. cowboy-高性能简洁的erlang版web框架

    那么Cowboy是什么呢? Cowboy is a small, fast and modular HTTP server written in Erlang. 其定位非常明确: Cowboy aim ...