从入门到实战_bootstrap网站基本结构简介(一)

作者: jiukeshuju 分类: Bootstrap 发布时间: 2020-10-02 16:24

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

如果觉得我的文章对您有用,请随意赞赏。您的支持将鼓励我继续创作!

发表评论

您的电子邮箱地址不会被公开。