手把手教你用Bootstrap开发网站(demo)
作为一个web前端攻城狮,如果每一个按钮、样式、处理浏览器兼容性的代码都要自己从零开始去写,那就太浪费时间了。所以我们需要一个框架,帮我们实现一个页面的基础部分和解决一些繁琐的细节,只要在它的基础上进行个性化定制就可以了。
作为一个后端攻城狮,这个框架也是再适合不过去学习的了。简单上手,也能做出很专业、美观的页面,极大地提高了工作效率。
像下面这些漂亮的网站就是基于Bootstrap来开发的:
http://expo.bootcss.com/
Bootstrap的中文文档地址在这里
Bootstrap 中文文档http://v3.bootcss.com/,目前主流版本为 3.3.x。
注意
因为文档的内容结构比较零散讲解的比较详细,只是从头到尾把一个个组件拆开来讲一遍,缺乏趣味性和实战性,
我会手把手教你开发几个完整案例,在实践的过程中来学习和理解 Bootstrap这个前端开发框架的知识。
一个企业网站的基本结构
企业网站是十分常见的一种页面形式。一般包括
- 一个展示企业形象的首页、
- 几个介绍企业资料的文章页
- 一个“关于”页面。
如下就是最终的首页顶部效果,是不是感觉效果还不错,那么接下来就跟我进入开发的世界吧!
项目结构与页面规划
我们先创建站点目录,例如放在 web 站点 bootstrapCase下,在里面新建一个 Template目录
,用于存放页面 html 文件,新建一个 assets目录
,存放图片、自定义样式表等静态资源文件,以及一个 js目录
,存放自己写的 javascript 代码。
然后在Template目录里,把这个项目的所有文件创建好:
首页(index.html)
客户案例详情(case.html)
联系方式及意见反馈表单(about.html)