两周“学会”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 条评论
登录 后参与评论

相关文章

来自专栏WindCoder

大学期间Web制作集合

仿制的古风网站,屏幕有限,这是一个页面分开截后拼合的,虽然右下角有点小瑕疵(实在没心情改了,见谅哈),但整体上是不是很漂亮的说,其实这是大一上学期的一个大作业,...

371
来自专栏北京马哥教育

使用版本控制系统的 3 个建议

git的三个建议 如果说有什么是开发软体专案一定要使用的基础工具,使用「版本控制系统」应该可以记上一笔。无论是个人或是团队开发,都可以透过版本控制系统获得巨大的...

1886
来自专栏申龙斌的程序人生

群分享:关于Markdown,你可能想知道的

写在最前面的话 本文参考了很多大神的 Markdown 入门教程,旨在推广,不标原创。所引部分参考文献列于文末,如有疏漏,还请海涵。 文中介绍的 Markdo...

34711
来自专栏听雨堂

简单账本-用完即走的微信小程序

        作为一个记账强迫症患者,对当前手机中的记账App都不太满意。这类软件越来越臃肿,越来越慢,启动要半天、联网同步要半天,进入界面又有一堆新功能要介...

1926
来自专栏无原型不设计

给你灵感的23个优秀线框原型图示例

如何在产品初始阶段以最快的方式展示设计思路?我想大多数的UX/UI设计人员都会倾向于快速构建一个线框原型图。这的确是一个非常明智的选择。那么问题来了,设计师如何...

3416
来自专栏阮一峰的网络日志

USENET简介

普通的互联网用户,可能对USENET知之甚少,或者根本就没有听说过它。但是,这是一种很重要的网络应用,里面有一些真正有趣的东西。 我在网上没有找到比较通俗易懂的...

2639
来自专栏Data Analysis & Viz

(送福利)BDP绘制微博转发动态热力图

先把效果图放上来,酷炫压场。看完本文,你就能轻松实现这个动态效果,全程只需几分钟!

772
来自专栏知晓程序

开发 | 什么?他用 2 小时做出了一个「简版大众点评」小程序

有人曾说:「人生至少有两次冲动,一次为了奋不顾生的爱情,还有一次就是为了说走就走的旅行」。

894
来自专栏互联网杂技

在设计中合理使用留白

我们都知道在网站或者APP里面,留白是个很好的设计元素。 利用空间是设计理论的原则之一,并帮助你创建它的视觉焦点。如果留白用得好 — 在设计里页面没有其他元素,...

3285
来自专栏华章科技

做研究必读:一分钟教你用Excel从统计局抓数据!

首先声明,我并没有学过HTML的语言,也没学过VBA,所以自己解释的逻辑应该是非常容易理解的,保证没有任何编程基础的都能学会。当然前提是你有Excel,没有的话...

723

扫描关注云+社区