[Bootstrap]从入门到实战_bootstrap网站基本结构简介（一）

手把手教你用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)

---