两周“学会”bootstrap搭建一个移动站点
一直想着用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搭建一个移动站点的更多相关文章
- 超详细动手搭建一个Vuepress站点及开启PWA与自动部署
超详细动手搭建一个Vuepress站点及开启PWA与自动部署 五一之前就想写一篇关于Vuepress的文章,结果朋友结婚就不了了之了. 记得最后一定要看注意事项! Vuepress介绍 官网:http ...
- 利用Wamp在本地搭建一个wordpress站点
原文链接:利用Wamp在本地搭建一个wordpress站点 有时候我们会想搭建一个自己的站点,可是由于只是想自己访问,就不是很想为这个站点在买一个服务器和域名,那我们可能首先就想到把自己电脑当做服务器 ...
- Cocos工作两周感受
我是一个专注搞Unity开发的程序猿哈哈,但是最近的项目要采用Cocos引擎开发.在迷茫和学习成长中已经不知不觉过了两周.我就简单谈谈我这两周学习Cocos的一个感受. 具体说公司是采用js语言来开发 ...
- 一个java实习生两周八次的面试经历
以前从来没有因为求职出去面试过,一直觉得面试很可怕,没想到最近两周我也成为了面霸,两周面试八次,我的找工作之路就这样开始了!大概两个星期之前,我看着自己在招聘网站上写好的简历连投出去的勇气都没有,战战 ...
- 搭建一个Web Server站点
题:搭建一个Web Server站点.安装web服务,并在本地创建index.html测试 1.安装http服务 yum -y install httpd 2.进入网站目录 cd /var/www/h ...
- 使用GitHub Pages + docsify快速搭建一个站点
话不多说,先看效果: https://bytesfly.github.io/blog 为什么需要一个站点 肯定有人会问,既然有类似 博客园 这样优秀的平台来写博客,为什么还需要自己搭建站点呢? 放在G ...
- Orchard官方文档翻译(六) 建立你的第一个Orchartd站点
让我们开始 该主题内容已在Orchard1.8Release版本下测试通过. 这里通过向导式的教程来告诉大家Orchard的功能如何使用.如果你是第一次使用Orchard,该文档就是为你而准备的! O ...
- 使用 ASP.NET MVC 4, EF, Knockoutjs and Bootstrap 设计和开发站点 - 6 - 业务逻辑
翻译:使用 ASP.NET MVC 4, EF, Knockoutjs and Bootstrap 设计和开发站点 - 6 - 业务逻辑 Part 3: 设计逻辑层:核心开发 如前所述,我们的解决方案 ...
- 从零开始搭建一个react项目
Nav logo 120 发现 关注 消息 4 搜索 从零开始搭建一个react项目 96 瘦人假噜噜 2017.04.23 23:29* 字数 6330 阅读 32892评论 31喜欢 36 项目地 ...
随机推荐
- 20145208 《Java程序设计》第4周学习总结
20145208 <Java程序设计>第4周学习总结 教材学习内容总结 继承 在学习指导中我了解到继承是符合DRY原则的,DRY(Don't repeat yourself),字面意思来看 ...
- python为什么会有@classmethod?
今天被问了这么个问题 python为什么要有classmethod? 被问倒了,只能回答:classmethod不需要实例化类,用起来比较方便.这么回答没有什么底细,于是查看了一下python的官方文 ...
- Oracle备份数据库
1.前言 工作中数据库备份是一个很重要的事情,难免有时候一个不小心就会误操作,造成无法挽回的措施.在昨天的工作中,我们的一个产品经理在操作定制端的时候一个误操作,清空了几张表的数据同时还删除了几张系统 ...
- 有四中方法可以实现PHP的伪静态,你造吗?
说起伪静态的实现方案,你是不是很爽快的回答"简单,配置下apache的重写规则就行了嘛" 但是你有没有发现这种情况,你最近弄了很多新功能,每天上几个新功能,每天都有好多伪静态配置, ...
- 理解C#事件
前面文章中介绍了委托相关的概念,委托实例保存这一个或一组操作,程序中将在某个特定的时刻通过委托实例使用这些操作. 如果做过GUI程序开发,可能对上面的描述会比较熟悉.在GUI程序中,单击一个butto ...
- 年终福利:调试.NET Framework源代码
前言 要问JAVA语言最大的优势之一,那就是开源.开源的JAVA框架让JAVA程序员可以不断的通过看源代码来学习.成长.解决问题.并随着时间增长能力越来越强,自然薪水就越来越高.而DONET程序员要看 ...
- php中curl的详细解说
cURL可以使用URL的语法模拟浏览器来传输数据, 因为它是模拟浏览器,因此它同样支持多种协议, FTP, FTPS, HTTP, HTTPS, GOPHER, TELNET, DICT, FILE ...
- 每天一个linux命令(24):gzip命令
减 少文件大小有两个明显的好处,一是可以减少存储空间,二是通过网络传输文件时,可以减少传输的时间.gzip是在Linux系统中经常使用的一个对文件进 行压缩和解压缩的命令,既方便又好用.gzip不仅可 ...
- [转]DIV+CSS和TABLE的区别
现在全国大大小小的网站都在搞一场技术“革命”,就是所谓“网站重构”说简单点就是DIV+CSS进行网站制作.用DIV+CSS代替传统的Table制作框架和美化页面.百度搜索优化 在重构之前,肯定要了解为 ...
- Html-Css-div半透明
源码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.o ...