两周“学会”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力求用最少的组件来完成设计,如果想做得更美观可以加入更多的组件。网站的栏目页和文章页需要的功能相对少一些,头部、底部、转化引导等可以共用,做得更快。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Android-JessYan

今日头条屏幕适配方案终极版正式发布!前言方案对比AndroidAutoSize总结

我在前面两篇文章中详细介绍了 今日头条适配方案 和 SmallestWidth 限定符适配方案 的原理,并验证了它们的可行性,以及总结了它们各自的优缺点,可以说...

6703
来自专栏小古哥的博客园

前端技术的发展与演变

近年来,前端技术的发展迅速,但因为前端知识面庞大,在实际学习当中往往无法理清其中的脉络。下面从各种库、框架、插件的层面上,对前端知识点做一些简单的梳理。从软件工...

4336
来自专栏互联网杂技

20个为前端开发者准备的文档和指南

1.Keyboard Event Viewer(键盘事件可视器) 它是一个可配置的交互式的工具,可以让你观察键盘事件的数据,它可以像在UI事件说明书里显示离线的...

46513
来自专栏葡萄城控件技术团队

不用Visual Studio,5分钟轻松实现一张报表

常规的报表设计,如RDLC、水晶报表等,需要安装Visual Studio,通过VS提供的报表设计界面来设计报表,通过VS设计报表对.NET开发者而言非常方便,...

3295
来自专栏Material Design组件

Human Interface Guidelines —— 活动视图(Activity Views)

3799
来自专栏葡萄城控件技术团队

程序员Web面试之前端框架等知识

基于前面2篇博客: ? 程序员Web面试之jQuery 程序员Web面试之JSON 您已经可以顺利进入Web开发的大门。 但是要动手干,还需要了解一些已有的前端...

2445
来自专栏用户2442861的专栏

经典黑色--网站管理界面

http://www.cnblogs.com/jikey/p/3631292.html

2561
来自专栏编程微刊

css实现简单的告警提示动画效果

2823
来自专栏HTML5学堂

HTML5征程前的准备工作

HTML5学堂:在开启学习HTML5知识之前,一些知识是需要掌握的。推荐在正式学习HTML5的知识之前把如下罗列出的任务搞定。良好的基础知识能够让日后对专业知识...

3683
来自专栏编程微刊

移动端iPhone系列适配问题的一些坑

2202

扫码关注云+社区

领取腾讯云代金券