一直想着用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. 关于git托管的一些心得

    GIT托管的一些心得 熟练运用软件进行GIT托管的好处 在上一周的学习中,我提出来了一个疑惑,就是为什么一定要用软件托管而不选择web托管,在这周的学习中,我通过实践体会到了一些运用软件托管的好处: ...

  2. Jetty嵌入式Web容器攻略

    Jetty是一个用 Java 实现.开源.基于标准的,并且具有丰富功能的 Http 服务器和 Web 容器.Jetty中应用最广泛的一项功能就是可以作为嵌入式Web容器. 在开发阶段,可以使用Jett ...

  3. Anaconda安装更新库

    平台:win64+anaconda 1. 如何查看已安装的库 打开 Anaconda Command Prompt ,在命令提示符窗口中输入以下命令: pip list # 或者 conda list ...

  4. 第一个C语言编译器是怎样编写的?

    首先向C语言之父Dennis MacAlistair Ritchie致敬! 当今几乎所有的实用的编译器/解释器(以下统称编译器)都是用C语言编写的,有一些语言比如Clojure,Jython等是基于J ...

  5. Mustache.js前端模板引擎源码解读

    mustache是一个很轻的前端模板引擎,因为之前接手的项目用了这个模板引擎,自己就也继续用了一会觉得还不错,最近项目相对没那么忙,于是就抽了点时间看了一下这个的源码.源码很少,也就只有六百多行,所以 ...

  6. 如何申请TexturePacker

    对于很多做手机游戏的和用starling做页游的盆友,对TexturePacker应该并不陌生,但是呢,能免费申请注册码你造吗,你想要吗,TexturePacker的作者Adreas是个好人,只要你R ...

  7. (旧)子数涵数·Flash——遮罩动画

    一.打开Flash,并新建一个flash文档 二.然后,用矩形工具,快捷键R,绘制一个背景图 三.新建一个图层 四.右击刚刚新建的"图层2"图层,选择"遮罩层" ...

  8. margin的理解

    1.盒子模型 在进行网页设计的时候,我们使用的是盒子模型,其内容如下: 整个网页就是大盒子套小盒子,小盒子又套更小的盒子来实现的.但是在做网页设计时总是搞不清margin和padding的使用方式,在 ...

  9. 关于js字符串替换的一道笔试题目

    题目描述 请写出一个字符串转换函数,接受两个参数: 1.字符串 形如{a}ab-{b}cde{c}fff{d}{}: 2.对象,形如{'a':'1','b':'2','d':'4'} 根据,对象的属性 ...

  10. 只用js 实现的简约聊天框

    之前看到别人的网页打开后都有个聊天框,可以与同时在网上的网友聊点简单话题,于是便找了个最简单的方法 使用js,客户端 打开页面,不断的给服务器发送请求来得到 新的消息 用JavaScript实现的轮询 ...